Skip to content

Commit 21fb999

Browse files
cjxthecodercjxthecoder
authored
Update proj1.html
1 parent fa6d9df commit 21fb999

File tree

1 file changed

+53
-41
lines changed

1 file changed

+53
-41
lines changed

‎project-1/proj1.html‎

Lines changed: 53 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,66 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="UTF-8" />
5-
<title>Project 1</title>
4+
<meta charset="UTF-8" />
5+
<title>Project 1</title>
66
</head>
77
<body>
88

9-
<h1>Project 1: Colorizing the Prokudin-Gorskii photo collection</h1>
9+
<h1>Project 1: Colorizing the Prokudin-Gorskii photo collection</h1>
1010

11-
<!-- Section 1 -->
12-
<h2>Introduction</h2>
13-
<p>
14-
The Prokudin-Gorskii photo collection consists of 3 digitalized glass plate images each taken in grayscale with a blue, green, and red filter (ordered from top to bottom). To obtain a colorized version of the original image, we can align the images and use the pixel brightness (normalized to [0, 255]) from each image as the value of its respective color channel. This project aims to perform the aligning and compositing process automatically given any image containing the 3 glass plates in BGR order.
15-
</p>
16-
<div align="center">
17-
<img src="intro.png" alt="Introduction">
18-
</div>
19-
<hr>
11+
<!-- Section 1 -->
12+
<h2>Introduction</h2>
13+
<p>
14+
The Prokudin-Gorskii photo collection consists of 3 digitalized glass plate images each taken in grayscale with a blue, green, and red filter (ordered from top to bottom). To obtain a colorized version of the original image, we can align the images and use the pixel brightness (normalized to [0, 255]) from each image as the value of its respective color channel. This project aims to perform the aligning and compositing process automatically given any image containing the 3 glass plates in BGR order.
15+
</p>
16+
<div align="center">
17+
<img src="intro.png" alt="Introduction">
18+
</div>
19+
<hr>
2020

21-
<!-- Section 2 -->
22-
<h2>NCC & Preprocessing</h2>
23-
<p>
24-
To begin the alignment process, we need a function that can compute a similarity score between 2 images. Motivated by the fact that given <i>a + b = c</i>, <i>ab</i> attains its highest value at <i>a = b = c/2</i>, we can use the normalized cross-correlation formula
25-
</p>
26-
<div align="center">
27-
<img src="equation.png" alt="Description of image 2">
28-
</div>
29-
<p>
30-
for 2 vectors <strong>x</strong> and <strong>y</strong>. Since grayscale images are represented by 2d arrays, we can first flatten the 2 images we want to compare, before using them as the input vectors. A caveat of this method is that is both images should have the same size. However, we can approximate the crop dimensions for just the blue and red plates, and find the best displacements with respect to the green plate. The final step would require us to find the intersection of 3 rectangles, which is given by the following formula:
31-
</p>
32-
<hr>
21+
<!-- Section 2 -->
22+
<h2>NCC & Preprocessing</h2>
23+
<p>
24+
To begin the alignment process, we need a function that can compute a similarity score between 2 images. Motivated by the fact that given <i>a + b = c</i>, <i>ab</i> attains its highest value at <i>a = b = c/2</i>, we can use the normalized cross-correlation
25+
</p>
26+
<div align="center">
27+
<img src="images/equation.png" alt="Description of image 2">
28+
</div>
29+
<p>
30+
for 2 vectors <strong>x</strong> and <strong>y</strong>. Since grayscale images are represented by 2d arrays, we can first flatten the 2 images we want to compare, before using them as the input vectors. A caveat of this method is that is both images should have the same size. However, we can approximate the crop dimensions for just the blue and red plates, and find the best displacements with respect to the green plate. The final step would require us to find the intersection of 3 rectangles, which is given by the following formula:
31+
</p>
32+
<div align="center">
33+
<img src="images/proj1.png" alt="Description of image 2">
34+
</div>
35+
<hr>
3336

34-
<!-- Section 3 -->
35-
<h2>Subheading 3</h2>
36-
<p>
37-
We can improve the NCC step using edge detection technqiues to find the crop of each image. The easiest way is to use the Sobel kernel
38-
</p>
39-
<div align="center">
40-
<img src="image3.jpg" alt="Description of image 3" width="400">
41-
</div>
42-
<hr>
37+
<!-- Section 3 -->
38+
<h2>Naive Search</h2>
39+
<p>
40+
We can improve the NCC step using edge detection technqiues to find the crop of each image. The easiest way is to use the Sobel kernel
41+
</p>
42+
<div align="center">
43+
<img src="image3.jpg" alt="Description of image 3" width="400">
44+
</div>
45+
<hr>
4346

44-
<!-- Section 4 -->
45-
<h2>Subheading 4</h2>
46-
<p>
47-
This is some body text for subheading 4. Summarize outcomes or provide references.
48-
</p>
49-
<div align="center">
50-
<img src="image4.jpg" alt="Description of image 4" width="400">
51-
</div>
47+
<!-- Section 4 -->
48+
<h2>Image Pyramid</h2>
49+
<p>
50+
This is some body text for subheading 4. Summarize outcomes or provide references.
51+
</p>
52+
<div align="center">
53+
<img src="image4.jpg" alt="Description of image 4" width="400">
54+
</div>
55+
56+
<!-- Section 5 -->
57+
<h2>Cropping with Sobel</h2>
58+
<p>
59+
This is some body text for subheading 4. Summarize outcomes or provide references.
60+
</p>
61+
<div align="center">
62+
<img src="image5.jpg" alt="Description of image 5" width="400">
63+
</div>
5264

5365
</body>
5466
</html>

0 commit comments

Comments
 (0)