Skip to content

Commit 143b567

Browse files
authored
Update proj1.html
1 parent ca383c3 commit 143b567

File tree

1 file changed

+110
-38
lines changed

1 file changed

+110
-38
lines changed

project-1/proj1.html

Lines changed: 110 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -46,38 +46,29 @@ <h2>Naive Search</h2>
4646
<br>
4747
Define <i>W</i> and <i>H</i> to be the width and height of the full image, and asssume, for approximations, that each plate takes up exactly a third of the full image. Considering only the top/blue plate, we can start by setting the upper limit for the top edge to be <i>(0 + H/3) / 2 = H/6</i>, and the bottom edge to be <i>(2H / 3 + H) / 2 = 5H / 6</i>. This means the top edge should be at least shifted down by <i>H/6 - 0 = H/6</i>, and the bottom edge by <i>5H / 6 - H/3 = H/2</i>. Therefore, a good place to start is a displacement of <i>(0, (H/6 + H/2) / 2) = (0, H/3)</i> with a search range of [<i>-H/6</i>, <i>H/6</i>]. For the bottom/red plate, the equivalent displacement is just <i>(0, -H/3)</i> with the same search range. Any shifts that brings the crop outside the original image will be ignored.<br>
4848
<br>
49-
Using a starting crop of {<i>(W/16, H/16), (W - W/16, H/3 - H/16)</i>} for the blue plate and {<i>(W/16, 2H / 3 + H/16), (W - W/16, H - H/16)</i>} for the red plate, where the tuples are the upper left and lower right corner pixels in (<i>x</i>, <i>y</i>) coordinates, we can obtain the following best shifts:
49+
Using a starting crop of {<i>(W/16, H/16), (W - W/16, H/3 - H/16)</i>} for the blue plate and {<i>(W/16, 2H / 3 + H/16), (W - W/16, H - H/16)</i>} for the red plate, where the tuples are the upper left and lower right corner pixels in (<i>x</i>, <i>y</i>) coordinates, we can obtain the following best shifts (B, R):
5050
</p>
5151

52-
<div class="two-up" style="display:flex;" role="group" aria-label="Image comparison">
52+
<div style="display:flex; flex-wrap:wrap; justify-content:center; text-align:center;">
5353

54-
<figure style="flex:1; text-align:center;">
55-
<div class="figure-wrap">
56-
<figcaption>cathedral.jpg</figcaption>
57-
<img class="media" src="images/cathedralNaive.jpg"
58-
alt="cathedralNaive.jpg" loading="lazy" width="50%"/>
59-
</div>
60-
<figcaption>Best shift: (-2, 336), (1, -334)<br>5.070914s</figcaption>
61-
</figure>
62-
63-
<figure style="flex:1; text-align:center;">
64-
<div class="figure-wrap">
65-
<figcaption>monastery.jpg</figcaption>
66-
<img class="media" src="images/monasteryNaive.jpg"
67-
alt="monasteryNaive.jpg" loading="lazy" width="50%"/>
68-
</div>
69-
<figcaption>Best shift: (-2, 344), (1, -335)<br>5.107604s</figcaption>
70-
</figure>
71-
72-
<figure style="flex:1; text-align:center;">
73-
<div class="figure-wrap">
74-
<figcaption>tobolsk.jpg</figcaption>
75-
<img class="media" src="images/tobolskNaive.jpg"
76-
alt="tobolskNaive.jpg" loading="lazy" width="50%"/>
77-
</div>
78-
<figcaption>Best shift: (-3, 338), (1, -337)<br>5.857907s</figcaption>
79-
</figure>
54+
<figure style="flex: 1 0 20%; margin:12px;">
55+
<figcaption style="margin-bottom:6px;">cathedralNaive.jpg</figcaption>
56+
<img src="images/cathedralNaive.jpg" alt="cathedralNaive.jpg" width="100%">
57+
<figcaption>Best shift: (-2, 336) (1, -334)<br>5.070914s</figcaption>
58+
</figure>
59+
60+
<figure style="flex: 1 0 20%; margin:12px;">
61+
<figcaption style="margin-bottom:6px;">monasteryNaive.jpg</figcaption>
62+
<img src="images/monasteryNaive.jpg" alt="monasteryNaive.jpg" width="100%">
63+
<figcaption>Best shift: (-2, 344) (1, -335)<br>5.107604s</figcaption>
64+
</figure>
8065

66+
<figure style="flex: 1 0 20%; margin:12px;">
67+
<figcaption style="margin-bottom:6px;">tobolskNaive.jpg</figcaption>
68+
<img src="images/tobolskNaive.jpg" alt="tobolskNaive.jpg" width="100%">
69+
<figcaption>Best shift: (-3, 338) (1, -337)<br>5.857907s</figcaption>
70+
</figure>
71+
8172
</div>
8273

8374
<!-- Section 4 -->
@@ -89,23 +80,104 @@ <h2>Image Pyramid</h2>
8980
<br>
9081
Instead of directly computing the best displacement on the full image, we only calculate if the given with is below a certain threshold. For images above this threshold, we can first downscale the image by 2x, pass it back to the function, and the returned shifts scaled up by 2x to return the best shifts on the input image. This means that the best shifts in the base case (<i>x</i><sub>lowest</sub>, <i>y</i><sub>lowest</sub>) will be scaled up and used in the previous recursive call, which is the scaled image 1 layer above. This will continue until we return to the top level call, and at that point, the returned shifts will be within 1 or 2 pixels of the best overall displacement. The last thing to keep in mind is to downscale the cropping box as well, which is simple to do since it is computed on the full image and one can simply divide its coordinates by 2 for each recurive call. In practice, setting W<sub>min</sub> = 72 gives the best tradeoff between the search size and the number of rescales. With these optimzations in place, the computing time is now much faster:
9182

92-
<div class="image-grid"
93-
style="display:flex; flex-wrap:wrap; justify-content:center; text-align:center;">
94-
95-
<figcaption>cathedral.jpg</figcaption>
83+
<div style="display:flex; flex-wrap:wrap; justify-content:center; text-align:center;">
84+
9685
<figure style="flex: 1 0 20%; margin:12px;">
97-
<img src="images/cathdral.jpg" alt="cathedral.jpg" width="100%">
98-
<figcaption>Best shift: (-2, 336), (1, -334)<br>0.033945s</figcaption>
86+
<figcaption style="margin-bottom:6px;">cathedral.jpg</figcaption>
87+
<img src="images/cathedral.jpg" alt="cathedral.jpg" width="100%">
88+
<figcaption>Best shift: (-2, 336) (1, -334)<br>0.033945s</figcaption>
9989
</figure>
10090

101-
<figcaption>church.jpg</figcaption>
10291
<figure style="flex: 1 0 20%; margin:12px;">
92+
<figcaption style="margin-bottom:6px;">church.tif</figcaption>
10393
<img src="images/church.jpg" alt="church.jpg" width="100%">
104-
<figcaption>Caption 1</figcaption>
94+
<figcaption>Best shift: (-4, 3177) (-8, -3169)<br>3.423309s</figcaption>
95+
</figure>
96+
97+
<figure style="flex: 1 0 20%; margin:12px;">
98+
<figcaption style="margin-bottom:6px;">emir.tif</figcaption>
99+
<img src="images/emir.jpg" alt="emir.jpg" width="100%">
100+
<figcaption>Best shift: (-24, 3160) (17, -3152)<br>3.36728s</figcaption>
101+
</figure>
102+
103+
<figure style="flex: 1 0 20%; margin:12px;">
104+
<figcaption style="margin-bottom:6px;">harvesters.tif</figcaption>
105+
<img src="images/harvesters.jpg" alt="harvesters.jpg" width="100%">
106+
<figcaption>Best shift: (-17, 3159) (-3, -3153)<br>3.393377s</figcaption>
107+
</figure>
108+
109+
<figure style="flex: 1 0 20%; margin:12px;">
110+
<figcaption style="margin-bottom:6px;">icon.tif</figcaption>
111+
<img src="images/icon.jpg" alt="icon.jpg" width="100%">
112+
<figcaption>Best shift: (-17, 3204) (5, -3196)<br>3.401831s</figcaption>
113+
</figure>
114+
115+
<figure style="flex: 1 0 20%; margin:12px;">
116+
<figcaption style="margin-bottom:6px;">italil.tif</figcaption>
117+
<img src="images/italil.jpg" alt="italil.jpg" width="100%">
118+
<figcaption>Best shift: (-21, 3193) (15, -3192)<br>3.3279s</figcaption>
119+
</figure>
120+
121+
<figure style="flex: 1 0 20%; margin:12px;">
122+
<figcaption style="margin-bottom:6px;">lastochikino.tif</figcaption>
123+
<img src="images/lastochikino.jpg" alt="lastochikino.jpg" width="100%">
124+
<figcaption>Best shift: (2, 3244) (-7, -3163)<br>3.270373s</figcaption>
125+
</figure>
126+
127+
<figure style="flex: 1 0 20%; margin:12px;">
128+
<figcaption style="margin-bottom:6px;">lugano.tif</figcaption>
129+
<img src="images/lugano.jpg" alt="lugano.jpg" width="100%">
130+
<figcaption>Best shift: (16, 3203) (-13, -3192)<br>3.317115s</figcaption>
131+
</figure>
132+
133+
<figure style="flex: 1 0 20%; margin:12px;">
134+
<figcaption style="margin-bottom:6px;">melons.tif</figcaption>
135+
<img src="images/melons.jpg" alt="melons.jpg" width="100%">
136+
<figcaption>Best shift: (-11, 3159) (3, -3145)<br>3.387267s</figcaption>
137+
</figure>
138+
139+
<figure style="flex: 1 0 20%; margin:12px;">
140+
<figcaption style="margin-bottom:6px;">monastery.jpg</figcaption>
141+
<img src="images/monastery.jpg" alt="monastery.jpg" width="100%">
142+
<figcaption>Best shift: (-2, 344) (1, -335)<br>0.032784s</figcaption>
143+
</figure>
144+
145+
<figure style="flex: 1 0 20%; margin:12px;">
146+
<figcaption style="margin-bottom:6px;">self_portrait.tif</figcaption>
147+
<img src="images/self_portrait.jpg" alt="self_portrait.jpg" width="100%">
148+
<figcaption>Best shift: (-29, 3172), (8, -3153)<br>3.446271s</figcaption>
149+
</figure>
150+
151+
<figure style="flex: 1 0 20%; margin:12px;">
152+
<figcaption style="margin-bottom:6px;">siren.tif</figcaption>
153+
<img src="images/siren.jpg" alt="siren.jpg" width="100%">
154+
<figcaption>Best shift: (6, 3201), (-18, -3203)<br>3.37681s</figcaption>
155+
</figure>
156+
157+
<figure style="flex: 1 0 20%; margin:12px;">
158+
<figcaption style="margin-bottom:6px;">three_generations.tif</figcaption>
159+
<img src="images/three_generations.jpg" alt="three_generations.jpg" width="100%">
160+
<figcaption>Best shift: (-14, 3157), (-3, -3150)<br>3.285443s</figcaption>
161+
</figure>
162+
163+
<figure style="flex: 1 0 20%; margin:12px;">
164+
<figcaption style="margin-bottom:6px;">tobolsk.jpg</figcaption>
165+
<img src="images/tobolsk.jpg" alt="tobolsk.jpg" width="100%">
166+
<figcaption>Best shift: (-3, 338), (1, -337)<br>0.031668s</figcaption>
167+
</figure>
168+
169+
<figure style="flex: 1 0 20%; margin:12px;">
170+
<figcaption style="margin-bottom:6px;">canal.tif</figcaption>
171+
<img src="images/canal.jpg" alt="canal.jpg" width="100%">
172+
<figcaption>Best shift: (-18, 3156), (6, -3147)<br>3.386601s</figcaption>
173+
</figure>
174+
175+
<figure style="flex: 1 0 20%; margin:12px;">
176+
<figcaption style="margin-bottom:6px;">capri.tif</figcaption>
177+
<img src="images/capri.jpg" alt="capri.jpg" width="100%">
178+
<figcaption>Best shift: (16, 3206), (-8, -3192)<br>3.325347s</figcaption>
105179
</figure>
106180

107-
<!-- Repeat for all 16 images -->
108-
109181
</div>
110182

111183
<!-- Section 5 -->

0 commit comments

Comments
 (0)