Skip to content

Commit 44e6f70

Browse files
authored
Update proj1.html
1 parent d7f3dc5 commit 44e6f70

File tree

1 file changed

+50
-27
lines changed

1 file changed

+50
-27
lines changed

project-1/proj1.html

Lines changed: 50 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -55,19 +55,19 @@ <h2>Naive Search</h2>
5555
<figure style="flex: 1 0 20%; margin:12px;">
5656
<figcaption style="margin-bottom:6px;">cathedralNaive.jpg</figcaption>
5757
<img src="images/cathedralNaive.jpg" alt="cathedralNaive.jpg" width="50%">
58-
<figcaption>Best shift: (-2, 336), (1, -334)<br>5.070914s</figcaption>
58+
<figcaption style="margin-bottom:6px;">Best shift: (-2, 336), (1, -334)<br>5.070914s</figcaption>
5959
</figure>
6060

6161
<figure style="flex: 1 0 20%; margin:12px;">
6262
<figcaption style="margin-bottom:6px;">monasteryNaive.jpg</figcaption>
6363
<img src="images/monasteryNaive.jpg" alt="monasteryNaive.jpg" width="50%">
64-
<figcaption>Best shift: (-2, 344), (1, -335)<br>5.107604s</figcaption>
64+
<figcaption style="margin-bottom:6px;">Best shift: (-2, 344), (1, -335)<br>5.107604s</figcaption>
6565
</figure>
6666

6767
<figure style="flex: 1 0 20%; margin:12px;">
6868
<figcaption style="margin-bottom:6px;">tobolskNaive.jpg</figcaption>
6969
<img src="images/tobolskNaive.jpg" alt="tobolskNaive.jpg" width="50%">
70-
<figcaption>Best shift: (-3, 338), (1, -337)<br>5.857907s</figcaption>
70+
<figcaption style="margin-bottom:6px;">Best shift: (-3, 338), (1, -337)<br>5.857907s</figcaption>
7171
</figure>
7272

7373
</div>
@@ -95,100 +95,101 @@ <h2>Image Pyramid</h2>
9595
<figure style="flex: 1 0 20%; margin:12px;">
9696
<figcaption style="margin-bottom:6px;">cathedral.jpg</figcaption>
9797
<img src="images/cathedral.jpg" alt="cathedral.jpg" width="50%">
98-
<figcaption>Best shift: (-2, 336), (1, -334)<br>0.033945s</figcaption>
98+
<figcaption style="margin-bottom:6px;">Best shift: (-2, 336), (1, -334)<br>0.033945s</figcaption>
9999
</figure>
100100

101101
<figure style="flex: 1 0 20%; margin:12px;">
102102
<figcaption style="margin-bottom:6px;">church.tif</figcaption>
103103
<img src="images/church.jpg" alt="church.jpg" width="50%">
104-
<figcaption>Best shift: (-4, 3177), (-8, -3169)<br>3.423309s</figcaption>
104+
<figcaption style="margin-bottom:6px;">Best shift: (-4, 3177), (-8, -3169)<br>3.423309s</figcaption>
105105
</figure>
106106

107107
<figure style="flex: 1 0 20%; margin:12px;">
108108
<figcaption style="margin-bottom:6px;">emir.tif</figcaption>
109109
<img src="images/emir.jpg" alt="emir.jpg" width="50%">
110-
<figcaption>Best shift: (-24, 3160), (17, -3152)<br>3.36728s</figcaption>
110+
<figcaption style="margin-bottom:6px;">Best shift: (-24, 3160), (17, -3152)<br>3.36728s</figcaption>
111111
</figure>
112112

113113
<figure style="flex: 1 0 20%; margin:12px;">
114114
<figcaption style="margin-bottom:6px;">harvesters.tif</figcaption>
115115
<img src="images/harvesters.jpg" alt="harvesters.jpg" width="50%">
116-
<figcaption>Best shift: (-17, 3159), (-3, -3153)<br>3.393377s</figcaption>
116+
<figcaption style="margin-bottom:6px;">Best shift: (-17, 3159), (-3, -3153)<br>3.393377s</figcaption>
117117
</figure>
118118

119119
<figure style="flex: 1 0 20%; margin:12px;">
120120
<figcaption style="margin-bottom:6px;">icon.tif</figcaption>
121121
<img src="images/icon.jpg" alt="icon.jpg" width="50%">
122-
<figcaption>Best shift: (-17, 3204), (5, -3196)<br>3.401831s</figcaption>
122+
<figcaption style="margin-bottom:6px;">Best shift: (-17, 3204), (5, -3196)<br>3.401831s</figcaption>
123123
</figure>
124124

125125
<figure style="flex: 1 0 20%; margin:12px;">
126126
<figcaption style="margin-bottom:6px;">italil.tif</figcaption>
127127
<img src="images/italil.jpg" alt="italil.jpg" width="50%">
128-
<figcaption>Best shift: (-21, 3193), (15, -3192)<br>3.3279s</figcaption>
128+
<figcaption style="margin-bottom:6px;">Best shift: (-21, 3193), (15, -3192)<br>3.3279s</figcaption>
129129
</figure>
130130

131131
<figure style="flex: 1 0 20%; margin:12px;">
132132
<figcaption style="margin-bottom:6px;">lastochikino.tif</figcaption>
133133
<img src="images/lastochikino.jpg" alt="lastochikino.jpg" width="50%">
134-
<figcaption>Best shift: (2, 3244), (-7, -3163)<br>3.270373s</figcaption>
134+
<figcaption style="margin-bottom:6px;">Best shift: (2, 3244), (-7, -3163)<br>3.270373s</figcaption>
135135
</figure>
136136

137137
<figure style="flex: 1 0 20%; margin:12px;">
138138
<figcaption style="margin-bottom:6px;">lugano.tif</figcaption>
139139
<img src="images/lugano.jpg" alt="lugano.jpg" width="50%">
140-
<figcaption>Best shift: (16, 3203), (-13, -3192)<br>3.317115s</figcaption>
140+
<figcaption style="margin-bottom:6px;">Best shift: (16, 3203), (-13, -3192)<br>3.317115s</figcaption>
141141
</figure>
142142

143143
<figure style="flex: 1 0 20%; margin:12px;">
144144
<figcaption style="margin-bottom:6px;">melons.tif</figcaption>
145145
<img src="images/melons.jpg" alt="melons.jpg" width="50%">
146-
<figcaption>Best shift: (-11, 3159), (3, -3145)<br>3.387267s</figcaption>
146+
<figcaption style="margin-bottom:6px;">Best shift: (-11, 3159), (3, -3145)<br>3.387267s</figcaption>
147147
</figure>
148148

149149
<figure style="flex: 1 0 20%; margin:12px;">
150150
<figcaption style="margin-bottom:6px;">monastery.jpg</figcaption>
151151
<img src="images/monastery.jpg" alt="monastery.jpg" width="50%">
152-
<figcaption>Best shift: (-2, 344), (1, -335)<br>0.032784s</figcaption>
152+
<figcaption style="margin-bottom:6px;">Best shift: (-2, 344), (1, -335)<br>0.032784s</figcaption>
153153
</figure>
154154

155155
<figure style="flex: 1 0 20%; margin:12px;">
156156
<figcaption style="margin-bottom:6px;">self_portrait.tif</figcaption>
157157
<img src="images/self_portrait.jpg" alt="self_portrait.jpg" width="50%">
158-
<figcaption>Best shift: (-29, 3172), (8, -3153)<br>3.446271s</figcaption>
158+
<figcaption style="margin-bottom:6px;">Best shift: (-29, 3172), (8, -3153)<br>3.446271s</figcaption>
159159
</figure>
160160

161161
<figure style="flex: 1 0 20%; margin:12px;">
162162
<figcaption style="margin-bottom:6px;">siren.tif</figcaption>
163163
<img src="images/siren.jpg" alt="siren.jpg" width="50%">
164-
<figcaption>Best shift: (6, 3201), (-18, -3203)<br>3.37681s</figcaption>
164+
<figcaption style="margin-bottom:6px;">Best shift: (6, 3201), (-18, -3203)<br>3.37681s</figcaption>
165165
</figure>
166166

167167
<figure style="flex: 1 0 20%; margin:12px;">
168168
<figcaption style="margin-bottom:6px;">three_generations.tif</figcaption>
169169
<img src="images/three_generations.jpg" alt="three_generations.jpg" width="50%">
170-
<figcaption>Best shift: (-14, 3157), (-3, -3150)<br>3.285443s</figcaption>
170+
<figcaption style="margin-bottom:6px;">Best shift: (-14, 3157), (-3, -3150)<br>3.285443s</figcaption>
171171
</figure>
172172

173173
<figure style="flex: 1 0 20%; margin:12px;">
174174
<figcaption style="margin-bottom:6px;">tobolsk.jpg</figcaption>
175175
<img src="images/tobolsk.jpg" alt="tobolsk.jpg" width="50%">
176-
<figcaption>Best shift: (-3, 338), (1, -337)<br>0.031668s</figcaption>
176+
<figcaption style="margin-bottom:6px;">Best shift: (-3, 338), (1, -337)<br>0.031668s</figcaption>
177177
</figure>
178178

179179
<figure style="flex: 1 0 20%; margin:12px;">
180180
<figcaption style="margin-bottom:6px;"><a href="https://www.loc.gov/item/2018681257">canal.tif</a></figcaption>
181181
<img src="images/canal.jpg" alt="canal.jpg" width="50%">
182-
<figcaption>Best shift: (-18, 3156), (6, -3147)<br>3.386601s</figcaption>
182+
<figcaption style="margin-bottom:6px;">Best shift: (-18, 3156), (6, -3147)<br>3.386601s</figcaption>
183183
</figure>
184184

185185
<figure style="flex: 1 0 20%; margin:12px;">
186186
<figcaption style="margin-bottom:6px;"><a href="https://www.loc.gov/item/2018679143">capri.tif</a></figcaption>
187187
<img src="images/capri.jpg" alt="capri.jpg" width="50%">
188-
<figcaption>Best shift: (16, 3206), (-8, -3192)<br>3.325347s</figcaption>
188+
<figcaption style="margin-bottom:6px;">Best shift: (16, 3206), (-8, -3192)<br>3.325347s</figcaption>
189189
</figure>
190190

191191
</div>
192+
192193
<p>
193194
Even for small images, the pyramid method achieved a speedup of over 100x due to a reduction in both size and number of NCC computations, while for large images, the computation time is still faster than what naive search takes on a single small image. More concretely, because the image is downscaled by 2x at each layer of the pyramid, the total image area is less than 1 + (1/2)<sup>2</sup> + (1/4)<sup>2</sup> + (1/8)<sup>2</sup> + ... = 1 + 1/4 + 1/16 + 1/64 + ... &lt; 4/3 of the original. Since the search at the lowest scale is limited to W &leq; 72, the total time complexity is only <i>4(3W)W / 3</i> + smaller terms = <i>O(W<sup>2</sup>)</i>, which matches with the actual factor of ~100 between the time it takes to align .jpg and .tif files.
194195
</p>
@@ -197,39 +198,61 @@ <h2>Image Pyramid</h2>
197198
<!-- Section 5 -->
198199
<h2>Cropping with Sobel</h2>
199200
<p>
200-
Although having a fixed cropping dimension worked for aligning the images, because the final result is simply the intersection of the translations, artifacts from the border still remain. Is there a way to automatically crop the borders? The answer is yes. We can start by applying the sobel operator
201+
Although having a fixed cropping dimension worked for aligning the images, because the final result is simply the intersection of the translations, artifacts from the border still remain. Is there a way to automatically crop the borders? The answer is yes. We can start by convolving the sobel operator
201202
</p>
202203

203204
<div style="display:flex; flex-wrap:wrap; justify-content:center; text-align:center;">
204205

205-
<figure style="flex: 1 0 40%; margin:12px;">
206+
<figure style="flex: 1 0 20%; margin:12px;">
206207
<img src="images/equationX.png" alt="equationX.png" width="50%">
207208
</figure>
208209

209-
<figure style="flex: 1 0 40%; margin:12px;">
210+
<figure style="flex: 1 0 20%; margin:12px;">
210211
<img src="images/equationY.png" alt="equationY.png" width="50%">
211212
</figure>
212213

213214
</div>
214215

215216
<p>
216-
with convolution to the base image, and add the results together. This will produce a composite of the detected edges along the <i>x</i>- and <i>y</i>-axis. The next step is to reconstruct the borders of each plate from the image. Because Sobel is distance-invariant, we can convolve the kernel on only the valid patches, resulting in the new image having dimensions <i>(W - 1)</i> &times; <i>(H - 1)</i>.
217+
with the base image, and add the results together. This will produce a composite of the detected edges along the <i>x</i>- and <i>y</i>-axis. The next step is to reconstruct the borders of each plate from the image. Because Sobel is distance-invariant, we can convolve the kernel on only the valid patches, resulting in the new image having dimensions <i>(W - 1)</i> &times; <i>(H - 1)</i>.
217218
</p>
218-
219219
<div align="center">
220220
<img src="images/edges" alt="edges.png" width="50%">
221221
<figcaption style="margin-bottom:6px;">sobelX &starf; img + sobelY &starf; img</figcaption>
222222
</div>
223-
224223
<p>
225224
Now, we can take the average of each row, and those with the lowest and highest values will be the edges. By splitting the resulting array into 4 subarrays [0 : <i>H/8</i>], [<i>H/8</i> : <i>H/2</i>], [<i>H/2</i> : <i>7H / 8</i>], and [<i>H/8</i> : <i>H</i>], we can find the argmax and argmin in each subarray, which will be used as the horizontal borders of each plate image.
226225
</p>
227-
228226
<div align="center">
229227
<img src="images/y.png" alt="y.png" width="50%">
230228
</div>
229+
<p>
230+
The vertical borders can be computed using a similar strategy, except that we need to split the column averages into 3 subsections based on the values found in the previous part. This will ensure that we are able to find the vertical edges of each image plate. Although the center/green plate is not used in the alignment process, its borders will be needed to compute the final crop of the composited image.
231+
</p>
232+
233+
<div style="display:flex; flex-wrap:wrap; justify-content:center; text-align:center;">
231234

232-
The vertical borders can be estimated using a similar strategy, except that we need to split the column averages into 3 subsections based on the values found in the previous part. This will ensure that we are able to find the vertical edges of each image plate. Although the center plate
235+
<figure style="flex: 1 0 20%; margin:12px;">
236+
<img src="images/xb.png" alt="xb.png" width="50%">
237+
<figcaption style="margin-bottom:6px;">Blue plate</figcaption>
238+
</figure>
239+
240+
<figure style="flex: 1 0 20%; margin:12px;">
241+
<img src="images/xg.png" alt="xg.png" width="50%">
242+
<figcaption style="margin-bottom:6px;">Green plate</figcaption>
243+
</figure>
244+
245+
<figure style="flex: 1 0 20%; margin:12px;">
246+
<img src="images/xr.png" alt="xr.png" width="50%">
247+
<figcaption style="margin-bottom:6px;">Red plate</figcaption>
248+
</figure>
249+
250+
</div>
251+
252+
<div align="center">
253+
<img src="images/borders.png" alt="borders.png" width="50%">
254+
<figcaption style="margin-bottom:6px;">All computed borders & subarray boundries</figcaption>
255+
</div>
233256

234257
<hr>
235258

0 commit comments

Comments
 (0)