Update proj2.html

Author: cjxthecoder

project-2/proj2.html

@@ -52,7 +52,15 @@ <h3>Part 1.1: Convolutions from Scratch!</h3>
 </p>
 
 <div align="center">
-<img src="images/one.png" alt="one.png" width="50%">
+<img src="images/orgbox.png" alt="orgbox.png" width="50%">
+</div>
+
+<p>
+For convolving with <i>D<sub>x</sub></i> and <i>D<sub>y</sub></i>, we have:
+</p>
+
+<div align="center">
+<img src="images/dxdy.png" alt="dxdy.png" width="50%">
 </div>
 
 </article>
@@ -70,7 +78,7 @@ <h3>Part 1.2: Finite Difference Operator</h3>
 we can convolve this image with <i>D<sub>x</sub></i> and <i>D<sub>y</sub></i> to get the partial derivatives in the <i>x</i>- and <i>y</i>- direction. Using <code>np.dot</code>, we can then compute the gradient magnitude as follows:
 </p>
 <div align="center">
-<img src="images/noblurclip.png" alt="noblurclip.png" width="50%">
+<img src="images/noblurnoclip.png" alt="noblurnoclip.png" width="50%">
 </div>
 <p>
 Although the edges are visible, it's not clear, especially in the magnitude image. This is because when convolving an image with channel values in the range [0, 255], the resulting image will have a range of [-255, 255], so normalizing the image directly makes the overall image darker. To reduce the noise of the non-edge pixels, we can set a limit for each channel value before normalizing. Using a threshold of 25% from both sides, we get the following result:
@@ -88,10 +96,10 @@ <h3>Part 1.2: Finite Difference Operator</h3>
 <article id="part1-3">
 <h3>Part 1.3: Derivative of Gaussian (DoG) Filter</h3>
 <p>
-To further improve edge visibility, we can first smooth out the noise by convolving the original image with a Gaussian filter. To generate one with dimensions <i>n &times; n</i>, we can take the outer product of 2 length <i>n</i> arrays. Below is the result of blurring the original image using a 5 &times; 5 Gaussian filter.
+To further improve edge visibility, we can first smooth out the noise by convolving the original image with a Gaussian filter. To generate one with dimensions <i>n &times; n</i>, we can take the outer product of 2 length <i>n</i> arrays. Below is the result of blurring the original image using a 5 &times; 5 Gaussian filter:
 </p>
 <div align="center">
-<img src="images/orgfilter.png" alt="orgfilter.png" width="50%">
+<img src="images/orggauss.png" alt="orggauss.png" width="50%">
 </div>
 <p>
 Applying the same edge detection process above, we get: