Update proj2.html

cjxthecoder · web-flow · commit a210559e827a · 2025-10-01T22:47:48.000-07:00
diff --git a/project-2/proj2.html b/project-2/proj2.html
@@ -8,10 +8,10 @@
 </head>
 <body>
 <header>
-<h1>Project 2: Fun with Filters and Frequencies</h1>
+<h1>Project 2: Filters and Frequencies</h1>
 <div align="center">
 <p>
-by Daniel Cheng | September 29, 2025
+by Daniel Cheng | October 1, 2025
 </p>
 </div>
 </header>
@@ -25,7 +25,7 @@ <h2>Part 1: Filters and Edges</h2>
 
 <!-- 1.1 -->
 <article id="part1-1">
-<h3>Part 1.1: Convolutions from Scratch!</h3>
+<h3>Part 1.1: Convolutions from Scratch</h3>
 <p>
 Using the definition of convolution:
 </p>
@@ -50,7 +50,7 @@ <h3>Part 1.1: Convolutions from Scratch!</h3>
 </div>
 
 <p>
-To demonstrate an application of convolution, we can convolve an image with the <strong>box filter</strong>, a kernel with entries that sum to 1 that contains only 1 unique value. We can also convolve with the difference operators <img src="images/diff_op.png" alt="diff_op.png" width="25%"> for edge detection. Each kernel computes the difference in the <i>x</i>- or <i>y</i>-direction, so edges where the brightness of the pixel changes significantly will show up as white and black pixels on the output. Using <code>box_9x9</code> = <i>J<sub>9</sub> / 9<sup>2</sup></i> as the box filter, we get the following results:
+To demonstrate an application of convolution, we can convolve an image with the <strong>box filter</strong>, a kernel with entries that sum to 1 that contains only 1 unique value. We can also convolve with the difference operators <img src="images/diff_op.png" alt="diff_op.png" width="50%"> for edge detection. Each kernel computes the difference in the <i>x</i>- or <i>y</i>-direction, so edges where the brightness of the pixel changes significantly will show up as white and black pixels on the output. Using <code>box_9x9</code> = <i>J<sub>9</sub> / 9<sup>2</sup></i> as the box filter, we get the following results:
 </p>
 
 <div align="center">
@@ -65,6 +65,33 @@ <h3>Part 1.1: Convolutions from Scratch!</h3>
 <img src="images/dxdy.png" alt="dxdy.png" width="50%">
 </div>
 
+<p>
+To handle boundries, we can set all of the padding pixels to 0, similar to the following:
+</p>
+
+<pre><code>
+if mode == 'valid':
+    return convolve(img, ker, naive)
+elif mode == 'same':
+    pad_ht = (ker.shape[0] - 1) // 2
+    pad_wl = (ker.shape[1] - 1) // 2
+    img_padded = np.zeros((img.shape[0] + ker.shape[0] - 1, img.shape[1] + ker.shape[1] - 1))
+    img_padded[pad_ht:pad_ht + img.shape[0], pad_wl:pad_wl + img.shape[1]] = img
+    return convolve(img_padded, ker, naive)
+elif mode == 'full':
+    pad_h = ker.shape[0] - 1
+    pad_w = ker.shape[1] - 1
+    img_fpadded = np.zeros((img.shape[0] + 2 * pad_h, img.shape[1] + 2 * pad_w))
+    img_fpadded[pad_h:pad_h + img.shape[0], pad_w:pad_w + img.shape[1]] = img
+    return convolve(img_fpadded, ker, naive)
+else:
+    raise ValueError('Unsupported mode: ' + str(mode) + '. Must be one of \'valid\', \'same\', or \'full\'.')
+</code></pre>
+
+<p>
+A zero-valued pixel, however, is equivalent to a black colored pixel on the image. This means the function would introduce a dark edge if one wants to have the image be the same size after convolving, which is visible above. To prevent this scenario, the safest way is to let the first row/column be the first padding row/column on the top left side, and perform the same with the last row/column on the bottom right side. This process can also be carried out for the 2nd/2nd-to-last row/column, and so on. Compared to other approaches like <code>'wrap'</code>, this method ensures that there won't be significant artifacts by ensuring the padded pixels come from the closest pixels in the image. To implement this method, we can set the <code>boundary</code> variable to <code>'symm'</code> in <code>convolve2d</code>. In comparison, the zero-padding mode is the same as the default mode in <code>convolve2d</code>, which shows how <code>convolve2d</code> has more functionalities than the naive implementation.
+</p>
+
 </article>
 <hr>
 
@@ -222,6 +249,7 @@ <h3>Part 2.2: Hybrid Images</h3>
 <article id="part2-3">
 <h3>Part 2.3 &amp; 2.4: Multiresolution Blending</h3>
 <p>
+To blend 2 images together, we can first start by creating a Gaussian/Laplacian stack, where at
 </p>
 </article>
 </section>
