180

cal-cs184-student · Sep 11, 2024 · 2a0dba3 · 2a0dba3
1 parent 118905f
commit 2a0dba3
Show file tree

Hide file tree

Showing 174 changed files with 219 additions and 78,964 deletions.
diff --git a/hw1/images/image3.png b/hw1/images/image3.png
diff --git a/hw1/images/task4/task4_2.png b/hw1/images/task4/task4_2.png
diff --git a/hw1/images/task6/task6_ln_pn.png b/hw1/images/task6/task6_ln_pn.png
diff --git a/hw1/images/task6/task6_lz_pn.png b/hw1/images/task6/task6_lz_pn.png
diff --git a/hw2/images/task2-1.png b/hw2/images/task2-1.png
diff --git a/hw2/images/task3-1.png b/hw2/images/task3-1.png
diff --git a/hw2/images/task3-2.png b/hw2/images/task3-2.png
diff --git a/hw2/images/task3-3.png b/hw2/images/task3-3.png
diff --git a/hw2/images/task4/icosahedron-flip.png b/hw2/images/task4/icosahedron-flip.png
diff --git a/hw2/images/task4/icosahedron-input.png b/hw2/images/task4/icosahedron-input.png
diff --git a/hw2/images/task4/torus-flip.png b/hw2/images/task4/torus-flip.png
diff --git a/hw2/images/task4/torus-input.png b/hw2/images/task4/torus-input.png
diff --git a/hw2/images/task5/icosahedron-split-flip.png b/hw2/images/task5/icosahedron-split-flip.png
diff --git a/hw2/images/task5/icosahedron-split.png b/hw2/images/task5/icosahedron-split.png
diff --git a/hw2/images/task5/icosahedron.png b/hw2/images/task5/icosahedron.png
diff --git a/hw2/images/task6/1-1.png b/hw2/images/task6/1-1.png
diff --git a/hw2/images/task6/1-2.png b/hw2/images/task6/1-2.png
diff --git a/hw2/images/task6/1-3.png b/hw2/images/task6/1-3.png
diff --git a/hw2/images/task6/1-4.png b/hw2/images/task6/1-4.png
diff --git a/hw2/images/task6/2-1.png b/hw2/images/task6/2-1.png
diff --git a/hw2/images/task6/2-2.png b/hw2/images/task6/2-2.png
diff --git a/hw2/images/task6/2-3.png b/hw2/images/task6/2-3.png
diff --git a/hw2/images/task6/2-4.png b/hw2/images/task6/2-4.png
diff --git a/hw2/images/task6/3-1.png b/hw2/images/task6/3-1.png
diff --git a/hw2/images/task6/3-2.png b/hw2/images/task6/3-2.png
diff --git a/hw2/images/task6/3-3.png b/hw2/images/task6/3-3.png
diff --git a/hw2/images/task6/3-4.png b/hw2/images/task6/3-4.png
diff --git a/hw2/images/task6/3-5.png b/hw2/images/task6/3-5.png
diff --git a/hw2/images/task6/4-1.png b/hw2/images/task6/4-1.png
diff --git a/hw2/images/task6/4-2.png b/hw2/images/task6/4-2.png
diff --git a/hw2/images/task6/4-3.png b/hw2/images/task6/4-3.png
diff --git a/hw2/images/task6/4-4.png b/hw2/images/task6/4-4.png
diff --git a/hw3/.DS_Store b/hw3/.DS_Store
diff --git a/hw3/imag/.DS_Store b/hw3/imag/.DS_Store
diff --git a/hw3/imag/maxdepth/m2.png b/hw3/imag/maxdepth/m2.png
diff --git a/hw3/imag/maxdepth/m3.png b/hw3/imag/maxdepth/m3.png
diff --git a/hw3/imag/maxdepth/m4.png b/hw3/imag/maxdepth/m4.png
diff --git a/hw3/imag/only/only1.png b/hw3/imag/only/only1.png
diff --git a/hw3/imag/only/only2.png b/hw3/imag/only/only2.png
diff --git a/hw3/imag/part0.png b/hw3/imag/part0.png
diff --git a/hw3/imag/part3-0-4.png b/hw3/imag/part3-0-4.png
diff --git a/hw3/imag/part3-3.png b/hw3/imag/part3-3.png
diff --git a/hw3/imag/part3-4-2.png b/hw3/imag/part3-4-2.png
diff --git a/hw3/imag/part3-5-4.png b/hw3/imag/part3-5-4.png
diff --git a/hw3/imag/part3-6-1.png b/hw3/imag/part3-6-1.png
diff --git a/hw3/imag/part3-6-2.png b/hw3/imag/part3-6-2.png
diff --git a/hw3/imag/part4-1-1.png b/hw3/imag/part4-1-1.png
diff --git a/hw3/imag/russian/.DS_Store b/hw3/imag/russian/.DS_Store
diff --git a/hw3/imag/russian/build/CGL/CMakeFiles/CGL.dir/compiler_depend.make b/hw3/imag/russian/build/CGL/CMakeFiles/CGL.dir/compiler_depend.make
diff --git a/hw3/imag/russian/build/CGL/deps/glfw/docs/html/glfw3_8h.html b/hw3/imag/russian/build/CGL/deps/glfw/docs/html/glfw3_8h.html
diff --git a/hw3/imag/russian/build/CGL/deps/glfw/docs/html/group__input.html b/hw3/imag/russian/build/CGL/deps/glfw/docs/html/group__input.html
diff --git a/hw3/imag/russian/build/CGL/deps/glfw/docs/html/group__window.html b/hw3/imag/russian/build/CGL/deps/glfw/docs/html/group__window.html
diff --git a/hw3/imag/russian/build/CGL/deps/glfw/docs/html/input_guide.html b/hw3/imag/russian/build/CGL/deps/glfw/docs/html/input_guide.html
diff --git a/hw3/imag/russian/build/CGL/deps/glfw/docs/html/spaces.svg b/hw3/imag/russian/build/CGL/deps/glfw/docs/html/spaces.svg
diff --git a/hw3/imag/russian/build/CGL/deps/glfw/docs/html/window_guide.html b/hw3/imag/russian/build/CGL/deps/glfw/docs/html/window_guide.html
diff --git a/hw3/imag/russian/build/CGL/deps/glfw/src/CMakeFiles/glfw.dir/compiler_depend.make b/hw3/imag/russian/build/CGL/deps/glfw/src/CMakeFiles/glfw.dir/compiler_depend.make
diff --git a/hw3/imag/russian/build/CMakeFiles/pt31.dir/compiler_depend.internal b/hw3/imag/russian/build/CMakeFiles/pt31.dir/compiler_depend.internal
diff --git a/hw3/imag/russian/build/CMakeFiles/pt31.dir/compiler_depend.make b/hw3/imag/russian/build/CMakeFiles/pt31.dir/compiler_depend.make
diff --git a/hw3/imag/russian/build/clase5.png b/hw3/imag/russian/build/clase5.png
diff --git a/hw3/imag/russian/build/libpt31.so b/hw3/imag/russian/build/libpt31.so
diff --git a/hw3/imag/russian/build/only1.png b/hw3/imag/russian/build/only1.png
diff --git a/hw3/imag/russian/build/only3.png b/hw3/imag/russian/build/only3.png
diff --git a/hw3/imag/russian/build/russian_2.png b/hw3/imag/russian/build/russian_2.png
diff --git a/hw3/imag/russian/build/russian_3.png b/hw3/imag/russian/build/russian_3.png
diff --git a/hw3/imag/russian/build/russian_4.png b/hw3/imag/russian/build/russian_4.png
diff --git a/hw3/imag/russian/build/spheres.png b/hw3/imag/russian/build/spheres.png
diff --git a/hw3/imag/russian/build/spheres_16.png b/hw3/imag/russian/build/spheres_16.png
diff --git a/hw3/imag/russian/russian_3.png b/hw3/imag/russian/russian_3.png
diff --git a/hw3/imag/russian/russian_4.png b/hw3/imag/russian/russian_4.png
diff --git a/hw3/imag/sample/build/CGL/CMakeFiles/CGL.dir/compiler_depend.internal b/hw3/imag/sample/build/CGL/CMakeFiles/CGL.dir/compiler_depend.internal
diff --git a/hw3/imag/sample/build/CGL/CMakeFiles/CGL.dir/compiler_depend.make b/hw3/imag/sample/build/CGL/CMakeFiles/CGL.dir/compiler_depend.make
diff --git a/hw3/imag/sample/build/CGL/deps/glfw/docs/Doxyfile b/hw3/imag/sample/build/CGL/deps/glfw/docs/Doxyfile
diff --git a/hw3/imag/sample/build/CGL/deps/glfw/docs/html/glfw3_8h.html b/hw3/imag/sample/build/CGL/deps/glfw/docs/html/glfw3_8h.html
diff --git a/hw3/imag/sample/build/CGL/deps/glfw/docs/html/glfw3_8h_source.html b/hw3/imag/sample/build/CGL/deps/glfw/docs/html/glfw3_8h_source.html
diff --git a/hw3/imag/sample/build/CGL/deps/glfw/docs/html/group__input.html b/hw3/imag/sample/build/CGL/deps/glfw/docs/html/group__input.html
diff --git a/hw3/imag/sample/build/CGL/deps/glfw/docs/html/group__keys.html b/hw3/imag/sample/build/CGL/deps/glfw/docs/html/group__keys.html
diff --git a/hw3/imag/sample/build/CGL/deps/glfw/docs/html/group__window.html b/hw3/imag/sample/build/CGL/deps/glfw/docs/html/group__window.html
diff --git a/hw3/imag/sample/build/CGL/deps/glfw/docs/html/input_guide.html b/hw3/imag/sample/build/CGL/deps/glfw/docs/html/input_guide.html
diff --git a/hw3/imag/sample/build/CGL/deps/glfw/docs/html/spaces.svg b/hw3/imag/sample/build/CGL/deps/glfw/docs/html/spaces.svg
diff --git a/hw3/imag/sample/build/CGL/deps/glfw/docs/html/window_guide.html b/hw3/imag/sample/build/CGL/deps/glfw/docs/html/window_guide.html
diff --git a/hw3/imag/sample/build/CGL/deps/glfw/src/CMakeFiles/glfw.dir/compiler_depend.internal b/hw3/imag/sample/build/CGL/deps/glfw/src/CMakeFiles/glfw.dir/compiler_depend.internal
diff --git a/hw3/imag/sample/build/CGL/deps/glfw/src/CMakeFiles/glfw.dir/compiler_depend.make b/hw3/imag/sample/build/CGL/deps/glfw/src/CMakeFiles/glfw.dir/compiler_depend.make
diff --git a/hw3/imag/sample/build/CMakeFiles/pathtracer.dir/compiler_depend.internal b/hw3/imag/sample/build/CMakeFiles/pathtracer.dir/compiler_depend.internal
diff --git a/hw3/imag/sample/build/CMakeFiles/pathtracer.dir/compiler_depend.make b/hw3/imag/sample/build/CMakeFiles/pathtracer.dir/compiler_depend.make
diff --git a/hw3/imag/sample/build/CMakeFiles/pt31.dir/compiler_depend.internal b/hw3/imag/sample/build/CMakeFiles/pt31.dir/compiler_depend.internal
diff --git a/hw3/imag/sample/build/CMakeFiles/pt31.dir/compiler_depend.make b/hw3/imag/sample/build/CMakeFiles/pt31.dir/compiler_depend.make
diff --git a/hw3/imag/sample/build/pathtracer b/hw3/imag/sample/build/pathtracer
diff --git a/hw3/imag/sample/build/russian_2.png b/hw3/imag/sample/build/russian_2.png
diff --git a/hw3/imag/sample/spheres_1.png b/hw3/imag/sample/spheres_1.png
diff --git a/hw3/imag/sample/spheres_1024.png b/hw3/imag/sample/spheres_1024.png
diff --git a/hw3/imag/sample/spheres_16.png b/hw3/imag/sample/spheres_16.png
diff --git a/hw3/imag/sample/spheres_2.png b/hw3/imag/sample/spheres_2.png
diff --git a/hw3/imag/sample/spheres_4.png b/hw3/imag/sample/spheres_4.png
diff --git a/hw3/imag/sample/spheres_64.png b/hw3/imag/sample/spheres_64.png
diff --git a/hw3/imag/sample/spheres_8.png b/hw3/imag/sample/spheres_8.png
diff --git a/hw3/imag/task2/beast.png b/hw3/imag/task2/beast.png
diff --git a/hw3/imag/task2/cow.png b/hw3/imag/task2/cow.png
diff --git a/hw3/imag/task2/maxplanck.png b/hw3/imag/task2/maxplanck.png
diff --git a/hw3/imag/task2/peter.png b/hw3/imag/task2/peter.png
diff --git a/hw3/imag/task5/.DS_Store b/hw3/imag/task5/.DS_Store
diff --git a/hw3/imag/task5/bunny2.png b/hw3/imag/task5/bunny2.png
diff --git a/hw3/imag/task5/spheres.png b/hw3/imag/task5/spheres.png
diff --git a/hw3/imag/task5/spheres_rate.png b/hw3/imag/task5/spheres_rate.png
diff --git a/hw4/.DS_Store b/hw4/.DS_Store
diff --git a/hw4/image/.DS_Store b/hw4/image/.DS_Store
diff --git a/hw4/image/2-0.png b/hw4/image/2-0.png
diff --git a/hw4/image/2-1.png b/hw4/image/2-1.png
diff --git a/hw4/image/2-2.png b/hw4/image/2-2.png
diff --git a/hw4/image/2-3.png b/hw4/image/2-3.png
diff --git a/hw4/image/2-4.png b/hw4/image/2-4.png
diff --git a/hw4/image/2-5.png b/hw4/image/2-5.png
diff --git a/hw4/image/2-6.png b/hw4/image/2-6.png
diff --git a/hw4/image/2-7.png b/hw4/image/2-7.png
diff --git a/hw4/image/3-1.png b/hw4/image/3-1.png
diff --git a/hw4/image/3-2.png b/hw4/image/3-2.png
diff --git a/hw4/image/3-3.png b/hw4/image/3-3.png
diff --git a/hw4/image/3-4.png b/hw4/image/3-4.png
diff --git a/hw4/image/3-5.png b/hw4/image/3-5.png
diff --git a/hw4/image/3-6.png b/hw4/image/3-6.png
diff --git a/hw4/image/4-1.png b/hw4/image/4-1.png
diff --git a/hw4/image/4-10.png b/hw4/image/4-10.png
diff --git a/hw4/image/4-12.png b/hw4/image/4-12.png
diff --git a/hw4/image/4-13.png b/hw4/image/4-13.png
diff --git a/hw4/image/4-2.png b/hw4/image/4-2.png
diff --git a/hw4/image/4-3.png b/hw4/image/4-3.png
diff --git a/hw4/image/4-4.png b/hw4/image/4-4.png
diff --git a/hw4/image/4-5.png b/hw4/image/4-5.png
diff --git a/hw4/image/4-7.png b/hw4/image/4-7.png
diff --git a/hw4/image/p1-1.png b/hw4/image/p1-1.png
diff --git a/hw4/image/p1-2.png b/hw4/image/p1-2.png
diff --git a/hw4/image/p1-3.png b/hw4/image/p1-3.png
diff --git a/hw4/image/p1-noshearing.png b/hw4/image/p1-noshearing.png
diff --git a/hw4/image/p1-onlyshearing.png b/hw4/image/p1-onlyshearing.png
diff --git a/hw4/image/p5-1-all.png b/hw4/image/p5-1-all.png
diff --git a/hw4/image/p5-1-ambient.png b/hw4/image/p5-1-ambient.png
diff --git a/hw4/image/p5-1-specular.png b/hw4/image/p5-1-specular.png
diff --git a/hw4/image/p5-2.png b/hw4/image/p5-2.png
diff --git a/hw4/image/p5-3-disp128.png b/hw4/image/p5-3-disp128.png
diff --git a/proj1/.DS_Store b/proj1/.DS_Store
diff --git a/proj1/images/.DS_Store b/proj1/images/.DS_Store
diff --git a/proj1/images/1-1.jpg b/proj1/images/1-1.jpg
diff --git a/proj1/images/1-2.jpg b/proj1/images/1-2.jpg
diff --git a/proj1/images/1-3.jpg b/proj1/images/1-3.jpg
diff --git a/proj1/images/1111.jpg b/proj1/images/1111.jpg
diff --git a/proj1/images/2-1.jpg b/proj1/images/2-1.jpg
diff --git a/proj1/images/2-10.jpg b/proj1/images/2-10.jpg
diff --git a/proj1/images/2-11.jpg b/proj1/images/2-11.jpg
diff --git a/proj1/images/2-12.jpg b/proj1/images/2-12.jpg
diff --git a/proj1/images/2-13.jpg b/proj1/images/2-13.jpg
diff --git a/proj1/images/2-14.jpg b/proj1/images/2-14.jpg
diff --git a/proj1/images/2-2.jpg b/proj1/images/2-2.jpg
diff --git a/proj1/images/2-3.jpg b/proj1/images/2-3.jpg
diff --git a/proj1/images/2-4.jpg b/proj1/images/2-4.jpg
diff --git a/proj1/images/2-5.jpg b/proj1/images/2-5.jpg
diff --git a/proj1/images/2-6.jpg b/proj1/images/2-6.jpg
diff --git a/proj1/images/2-7.jpg b/proj1/images/2-7.jpg
diff --git a/proj1/images/2-8.jpg b/proj1/images/2-8.jpg
diff --git a/proj1/images/2-9.jpg b/proj1/images/2-9.jpg
diff --git a/proj1/images/3-1.jpg b/proj1/images/3-1.jpg
diff --git a/proj1/images/3-10.jpg b/proj1/images/3-10.jpg
diff --git a/proj1/images/3-11.jpg b/proj1/images/3-11.jpg
diff --git a/proj1/images/3-12.jpg b/proj1/images/3-12.jpg
diff --git a/proj1/images/3-13.jpg b/proj1/images/3-13.jpg
diff --git a/proj1/images/3-14.jpg b/proj1/images/3-14.jpg
diff --git a/proj1/images/3-2.jpg b/proj1/images/3-2.jpg
diff --git a/proj1/images/3-3.jpg b/proj1/images/3-3.jpg
diff --git a/proj1/images/3-4.jpg b/proj1/images/3-4.jpg
diff --git a/proj1/images/3-5.jpg b/proj1/images/3-5.jpg
diff --git a/proj1/images/3-6.jpg b/proj1/images/3-6.jpg
diff --git a/proj1/images/3-7.jpg b/proj1/images/3-7.jpg
diff --git a/proj1/images/3-8.jpg b/proj1/images/3-8.jpg
diff --git a/proj1/images/3-9.jpg b/proj1/images/3-9.jpg
diff --git a/proj1/images/post-self_portrait-g[77, 29]-r[-81, -203]-t119.8.jpg b/proj1/images/post-self_portrait-g[77, 29]-r[-81, -203]-t119.8.jpg
diff --git a/proj1/index.html b/proj1/index.html
@@ -0,0 +1,219 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+
+<head>
+  <style>
+    body {
+      padding: 100px;
+      width: 1000px;
+      margin: auto;
+      text-align: left;
+      font-weight: 300;
+      font-family: 'Open Sans', sans-serif;
+      color: #121212;
+    }
+
+    h1,
+    h2,
+    h3,
+    h4 {
+      font-family: 'Source Sans Pro', sans-serif;
+    }
+  </style>
+  <title>CS 180 Project 1: Colorizing the Prokudin-Gorskii Photo Collection</title>
+  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans|Source+Sans+Pro" rel="stylesheet">
+</head>
+
+
+<body>
+
+
+  <h1 align="middle">CS 180 Project 1: Colorizing the Prokudin-Gorskii Photo Collection</h1>
+  <h2 align="middle">Jaxon Zeng</h2>
+
+  <br><br>
+
+  <div>
+
+    <h2 align="middle">Overview</h2>
+    <p>The Prokudin-Gorskii photo collection is a set of images taken with a camera that could take three grey-scale
+      photos through three color filters (red, green, and blue). The goal of this project is to produce a color photo
+      based on the three grey-scale photos.</p>
+
+    <h2 align="middle">Exhaustive Search</h2>
+
+    <h3 align="middle">Approach</h3>
+    <p>For small images, it's enough to just perform the algorithm on the full resolution. The algorithm is divided into
+      two parts. <br>
+      The first part is to find the best displacement of the photo to stack them. Since I need to stack three grey-scale
+      images to create a single colorful photo, I need to make sure the three images are align to each other. Otherwise
+      the photos will mismatch and create a blurred photo. <br>
+      The second part is merely shift the three images according to the result of the first part and stack them together
+      to output a color image.</p>
+
+    <h3 align="middle">Best Displacement</h3>
+    <p>For the first part, I first implemented a score to compare the result with different displacements. The method I
+      used is called Normalized Cross-Correlation (NCC), which is a dot product between two normalized vectors. Since
+      each image is simply a matrix, I can easily calculate their norm to normalize them and then reshape the matrix to
+      a vector.
+      Then my search will be perform in a window of [-15, 15] shift in both the x axis and y axis. The algorithm will
+      compare the score of each displacement and output the best shift.
+      However, after running the algorithm, I figured out that by just using the NCC algorithm can often create wrong
+      result that the three images cannot align well. I need to corp the borders since they would affect the NCC metric
+      in deciding the best displacement. After corpping the images, the algorithm can just focus on the middle of the
+      images. My algorithm corpped 15% of each side of the image. This can avoid the influence of the borders and also
+      speedup the algorithm.</p>
+
+
+    <div align="middle">
+      <table style="width=100%">
+        <tr>
+          <td>
+            <img src="images/1-1.jpg" align="middle" width="300px" />
+            <figcaption align="middle">cathedral.jpg <br>green-shift: dx 2, dy 5 <br> red-shift: dx 3, dy 12
+            </figcaption>
+          </td>
+          <td>
+            <img src="images/1-2.jpg" align="middle" width="300px" />
+            <figcaption align="middle">monastery.jpg <br>green-shift: dx 2, dy -3<br>red-shift: dx 2, dy 3</figcaption>
+          </td>
+          <td>
+            <img src="images/1-3.jpg" align="middle" width="300px" />
+            <figcaption align="middle">tobolsk.jpg<br>green-shift: dx 3, dy 3<br> red-shift: dx 3, dy 6</figcaption>
+          </td>
+        </tr>
+      </table>
+    </div>
+
+
+
+
+    <h2 align="middle">Image Pyramid Processing</h2>
+    <p>However, for the larger images (e.g. 3810x3251 compare to 390x341 for small images), the exhaustive search will
+      take too many time running. In this case, since the resolution is much higher, I need to increase the delta when
+      searching for displacement (by 10 times according to the resolution increase of the new images). As a result, the
+      increase in calculation is exponential. Therefore, I need to use a more efficient algorithm in image processing. I
+      introduced the image pyramid processing to speed up the process.<br>
+      This process will first downscale the images by a factor. I choosed a factor of 2. Then my algorithm will generate
+      a pyramid of images. My pyramid have 5 levels. Then I perform the best displacement algorithm in the first part
+      for the base level. After calculation, it will update the shift to the next level and then perform the best
+      displacement again with the updated shift. In this way, the delta needed to be calculate at each level can be
+      controlled as the same size as for the small images. As a result, the amount of calculation at each level will be
+      relatively small.
+    </p>
+
+    <div align="middle">
+      <table style="width=100%">
+        <tr>
+          <td>
+            <img src="images/2-1.jpg" align="middle" width="300px" />
+            <figcaption align="middle">cathedral.jpg<br>green-shift: dx 2, dy 5<br>red-shift: dx 3, dy 12</figcaption>
+          </td>
+          <td>
+            <img src="images/2-2.jpg" align="middle" width="300px" />
+            <figcaption align="middle">church.tif<br>green-shift: dx 4, dy 25<br>red-shift: dx -4, dy 58</figcaption>
+          </td>
+          <td>
+            <img src="images/2-3.jpg" align="middle" width="300px" />
+            <figcaption align="middle">emir.tif<br>green-shift: dx 24, dy 49<br>red-shift: dx 41, dy 106</figcaption>
+          </td>
+        </tr>
+        <br>
+        <tr>
+          <td>
+            <img src="images/2-4.jpg" align="middle" width="300px" />
+            <figcaption align="middle">harvesters.tif<br>green-shift: dx 14, dy 60<br>red-shift: dx 11, dy 124</figcaption>
+          </td>
+          <td>
+            <img src="images/2-5.jpg" align="middle" width="300px" />
+            <figcaption align="middle">icon.tif<br>green-shift: dx 16, dy 39<br>red-shift: dx 23, dy 89</figcaption>
+          </td>
+          <td>
+            <img src="images/2-6.jpg" align="middle" width="300px" />
+            <figcaption align="middle">lady.tif<br>green-shift: dx 9, dy 57<br>red-shift: dx 13, dy 120</figcaption>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <img src="images/2-7.jpg" align="middle" width="300px" />
+            <figcaption align="middle">melons.tif<br>green-shift: dx 10, dy 80<br>red-shift: dx 14, dy 176</figcaption>
+          </td>
+          <td>
+            <img src="images/2-8.jpg" align="middle" width="300px" />
+            <figcaption align="middle">monastery.jpg<br>green-shift: dx 2, dy -3<br>red-shift: dx 2, dy 3</figcaption>
+          </td>
+          <td>
+            <img src="images/2-9.jpg" align="middle" width="300px" />
+            <figcaption align="middle">onion_church.tif<br>green-shift: dx 24, dy 52<br>red-shift: dx 35, dy 107</figcaption>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <img src="images/2-10.jpg" align="middle" width="300px" />
+            <figcaption align="middle">sculpture.tif<br>green-shift: dx -11, dy 33<br>red-shift: dx -27, dy 140</figcaption>
+          </td>
+          <td>
+            <img src="images/2-11.jpg" align="middle" width="300px" />
+            <figcaption align="middle">self_portrait.tif<br>green-shift: dx 29, dy 78<br>red-shift: dx 37, dy 176</figcaption>
+          </td>
+          <td>
+            <img src="images/2-12.jpg" align="middle" width="300px" />
+            <figcaption align="middle">three_generations.tif<br>green-shift: dx 13, dy 52<br>red-shift: dx 11, dy 111</figcaption>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <img src="images/2-13.jpg" align="middle" width="300px" />
+            <figcaption align="middle">tobolsk.jpg<br>green-shift: dx 3, dy 3<br>red-shift: dx 3, dy 6</figcaption>
+          </td>
+          <td>
+            <img src="images/2-14.jpg" align="middle" width="300px" />
+            <figcaption align="middle">train.tif<br>green-shift: dx 6, dy 42<br>red-shift: dx 32, dy 87</figcaption>
+          </td>
+
+        </tr>
+      </table>
+    </div>
+    <h2 align="middle">Bell & Whistels</h2>
+    <p>At last, I noticed that although after restore back to color photo, some of them still have a very off color, such as the church.tif. Therefore, I implemented an automatic white balancing algorithm based on the white-patch algorithm. In this algorithm, it consider the brightest place in the image as white and balancing the color of the images based on this keystone. In my algorithm, I choose to color in 95 percentile as white. Then my algorithm will normalize the three color channel based on the color I choose.
+    </p>
+    <div align="middle">
+      <table>
+        <tr>
+          <td>
+            <img src="images/2-1.jpg" align="middle" width="300px" />
+            <figcaption align="middle">cathedral.jpg before WB</figcaption>
+          </td>
+          <td>
+            <img src="images/3-1.jpg" align="middle" width="300px" />
+            <figcaption align="middle">cathedral.jpg after WB</figcaption>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <img src="images/2-2.jpg" align="middle" width="300px" />
+            <figcaption align="middle">church.tif before WB</figcaption>
+          </td>
+          <td>
+            <img src="images/3-2.jpg" align="middle" width="300px" />
+            <figcaption align="middle">church.tif after WB</figcaption>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <img src="images/2-3.jpg" align="middle" width="300px" />
+            <figcaption align="middle">emir.tif before WB</figcaption>
+          </td>
+          <td>
+            <img src="images/3-3.jpg" align="middle" width="300px" />
+            <figcaption align="middle">emir.tif after WB</figcaption>
+          </td>
+        </tr>
+      </table>
+    </div>
+
+
+</body>
+
+</html>