Skip to content

Commit 918181d

Browse files
cjxthecodercjxthecoder
authored
Update and rename index.html to proj2.html
1 parent 5178b6a commit 918181d

File tree

2 files changed

+274
-1
lines changed

2 files changed

+274
-1
lines changed

‎project-2/index.html‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎project-2/proj2.html‎

Lines changed: 274 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,274 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<title>Image Processing Report</title>
7+
<!-- Plain HTML template (no CSS). Replace placeholder text and image sources. -->
8+
</head>
9+
<body>
10+
<header>
11+
<h1>Project 2: Fun with Filters and Frequencies</h1>
12+
<p><strong>Author:</strong> Your Name</p>
13+
<p><strong>Date:</strong> YYYY-MM-DD</p>
14+
<p><strong>Course/Assignment:</strong> Course Name — Project/Report Title</p>
15+
</header>
16+
17+
<nav>
18+
<h2>Table of Contents</h2>
19+
<ol>
20+
<li><a href="#part1">Part 1: Filters and Edges</a>
21+
<ol>
22+
<li><a href="#part1-1">1.1 Convolution (NumPy) vs SciPy</a></li>
23+
<li><a href="#part1-2">1.2 Partial Derivatives, Gradient Magnitude, Binarized Edges</a></li>
24+
<li><a href="#part1-3">1.3 Gaussian &amp; DoG Filters; Cameraman Results</a></li>
25+
</ol>
26+
</li>
27+
<li><a href="#part2">Part 2: Applications</a>
28+
<ol>
29+
<li><a href="#part2-1">2.1 Unsharp Mask (Taj Mahal + one more)</a></li>
30+
<li><a href="#part2-2">2.2 Hybrid Images (Derek+Nutmeg + two others)</a></li>
31+
<li><a href="#part2-3">2.3 &amp; 2.4 Gaussian/Laplacian Stacks; Figure 3.42(a–l); Two Custom Blends</a></li>
32+
</ol>
33+
</li>
34+
</ol>
35+
</nav>
36+
37+
<main>
38+
<!-- =========================== -->
39+
<!-- Part 1: Filters and Edges -->
40+
<!-- =========================== -->
41+
<section id="part1">
42+
<h2>Part 1: Filters and Edges</h2>
43+
44+
<!-- 1.1 -->
45+
<article id="part1-1">
46+
<h3>Part 1.1. Convolution Implementations (NumPy only) vs SciPy</h3>
47+
<p>
48+
<strong>Goal:</strong> Describe your NumPy-only convolution implementation and compare results with <em>scipy.signal.convolve2d</em>. Discuss runtime characteristics and boundary handling.
49+
</p>
50+
<h4>Method Description</h4>
51+
<p>[Explain how your convolution handles kernel flipping, strides, and channels (if applicable).]</p>
52+
<h4>Boundary Handling</h4>
53+
<p>[Describe padding mode(s) (e.g., zero, reflect, replicate) and how they compare to SciPy’s modes.]</p>
54+
<h4>Runtime Comparison</h4>
55+
<p>[Summarize timing measurements and observations.]</p>
56+
<figure>
57+
<img src="path/to/example_input.png" alt="Example input image" />
58+
<figcaption>Example input used for comparisons.</figcaption>
59+
</figure>
60+
<figure>
61+
<img src="path/to/numpy_conv_output.png" alt="Output from NumPy convolution" />
62+
<figcaption>NumPy-only convolution result.</figcaption>
63+
</figure>
64+
<figure>
65+
<img src="path/to/scipy_conv_output.png" alt="Output from SciPy convolve2d" />
66+
<figcaption>SciPy <code>convolve2d</code> result (matching mode/boundaries).</figcaption>
67+
</figure>
68+
<p><strong>Discussion:</strong> [Comment on similarities/differences, numerical precision, and border artifacts.]</p>
69+
</article>
70+
71+
<!-- 1.2 -->
72+
<article id="part1-2">
73+
<h3>Part 1.2. Partial Derivatives, Gradient Magnitude, and Binarized Edge Image</h3>
74+
<p>
75+
<strong>Goal:</strong> Show derivative images in x and y, compute the gradient magnitude, and present a binarized edge map. Justify any thresholding or denoising choices.
76+
</p>
77+
<figure>
78+
<img src="path/to/partial_dx.png" alt="Partial derivative in x" />
79+
<figcaption>Partial derivative in x.</figcaption>
80+
</figure>
81+
<figure>
82+
<img src="path/to/partial_dy.png" alt="Partial derivative in y" />
83+
<figcaption>Partial derivative in y.</figcaption>
84+
</figure>
85+
<figure>
86+
<img src="path/to/grad_mag.png" alt="Gradient magnitude image" />
87+
<figcaption>Gradient magnitude image.</figcaption>
88+
</figure>
89+
<figure>
90+
<img src="path/to/binary_edges.png" alt="Binarized edge image" />
91+
<figcaption>Binarized edge image with chosen threshold(s).</figcaption>
92+
</figure>
93+
<p><strong>Tradeoffs &amp; Justification:</strong> [Explain choice of thresholds, smoothing, and how you balanced noise vs completeness of edges.]</p>
94+
</article>
95+
96+
<!-- 1.3 -->
97+
<article id="part1-3">
98+
<h3>Part 1.3. Gaussian &amp; DoG Filters; Cameraman Comparisons</h3>
99+
<p>
100+
<strong>Goal:</strong> Construct Gaussian filters using <em>cv2.getGaussianKernel</em>, build Difference-of-Gaussians (DoG), visualize the filters, apply Gaussian smoothing and DoG to the cameraman image, and compare with finite difference results.
101+
</p>
102+
<h4>Filter Visualizations</h4>
103+
<figure>
104+
<img src="path/to/gaussian_filter_viz.png" alt="Gaussian filter visualization" />
105+
<figcaption>Gaussian filter visualization.</figcaption>
106+
</figure>
107+
<figure>
108+
<img src="path/to/dog_filter_viz.png" alt="DoG filter visualization" />
109+
<figcaption>Difference-of-Gaussians (DoG) visualization.</figcaption>
110+
</figure>
111+
<h4>Applications to Cameraman</h4>
112+
<figure>
113+
<img src="path/to/cameraman_gaussian.png" alt="Cameraman after Gaussian smoothing" />
114+
<figcaption>Cameraman after Gaussian smoothing.</figcaption>
115+
</figure>
116+
<figure>
117+
<img src="path/to/cameraman_dog.png" alt="Cameraman after DoG filtering" />
118+
<figcaption>Cameraman after DoG filtering.</figcaption>
119+
</figure>
120+
<figure>
121+
<img src="path/to/cameraman_finite_diff.png" alt="Cameraman finite difference results" />
122+
<figcaption>Finite difference method results for comparison.</figcaption>
123+
</figure>
124+
<p><strong>Comparison &amp; Discussion:</strong> [Analyze differences in edge localization, noise sensitivity, and parameter effects.]</p>
125+
</article>
126+
</section>
127+
128+
<!-- ======================== -->
129+
<!-- Part 2: Applications -->
130+
<!-- ======================== -->
131+
<section id="part2">
132+
<h2>Part 2: Applications</h2>
133+
134+
<!-- 2.1 -->
135+
<article id="part2-1">
136+
<h3>Part 2.1. Unsharp Mask</h3>
137+
<p>
138+
<strong>Goal:</strong> Implement unsharp masking. Explain how it relates to blur filters and high-frequency components. Show blurred, high-frequency, and sharpened versions of the Taj Mahal image and another image of your choice. Demonstrate varying the sharpening amount.
139+
</p>
140+
<h4>Taj Mahal</h4>
141+
<figure>
142+
<img src="path/to/taj_blurred.png" alt="Taj Mahal blurred" />
143+
<figcaption>Blurred version (Taj Mahal).</figcaption>
144+
</figure>
145+
<figure>
146+
<img src="path/to/taj_highfreq.png" alt="Taj Mahal high-frequency component" />
147+
<figcaption>High-frequency component (Taj Mahal).</figcaption>
148+
</figure>
149+
<figure>
150+
<img src="path/to/taj_sharpened_low.png" alt="Taj Mahal sharpened (low amount)" />
151+
<figcaption>Sharpened result (low amount).</figcaption>
152+
</figure>
153+
<figure>
154+
<img src="path/to/taj_sharpened_med.png" alt="Taj Mahal sharpened (medium amount)" />
155+
<figcaption>Sharpened result (medium amount).</figcaption>
156+
</figure>
157+
<figure>
158+
<img src="path/to/taj_sharpened_high.png" alt="Taj Mahal sharpened (high amount)" />
159+
<figcaption>Sharpened result (high amount).</figcaption>
160+
</figure>
161+
<h4>Additional Image</h4>
162+
<figure>
163+
<img src="path/to/other_blurred.png" alt="Additional image blurred" />
164+
<figcaption>Blurred version (additional image).</figcaption>
165+
</figure>
166+
<figure>
167+
<img src="path/to/other_highfreq.png" alt="Additional image high-frequency component" />
168+
<figcaption>High-frequency component (additional image).</figcaption>
169+
</figure>
170+
<figure>
171+
<img src="path/to/other_sharpened.png" alt="Additional image sharpened" />
172+
<figcaption>Sharpened result (additional image).</figcaption>
173+
</figure>
174+
<p><strong>Explanation:</strong> [Summarize the unsharp mask formula, role of blur radius/sigma, and artifact considerations.]</p>
175+
</article>
176+
177+
<!-- 2.2 -->
178+
<article id="part2-2">
179+
<h3>Part 2.2. Hybrid Images</h3>
180+
<p>
181+
<strong>Goal:</strong> Create three hybrid images (including Derek + Nutmeg and two others). For one hybrid, show the full pipeline; for the others, show originals and final hybrid only.
182+
</p>
183+
<h4>Full Pipeline Hybrid (Detailed)</h4>
184+
<figure>
185+
<img src="path/to/hybrid1_originalA.png" alt="Original A (aligned)" />
186+
<figcaption>Original A (aligned).</figcaption>
187+
</figure>
188+
<figure>
189+
<img src="path/to/hybrid1_originalB.png" alt="Original B (aligned)" />
190+
<figcaption>Original B (aligned).</figcaption>
191+
</figure>
192+
<figure>
193+
<img src="path/to/hybrid1_fftA.png" alt="Fourier transform of A" />
194+
<figcaption>Fourier transform (A).</figcaption>
195+
</figure>
196+
<figure>
197+
<img src="path/to/hybrid1_fftB.png" alt="Fourier transform of B" />
198+
<figcaption>Fourier transform (B).</figcaption>
199+
</figure>
200+
<figure>
201+
<img src="path/to/hybrid1_filteredA.png" alt="Filtered A" />
202+
<figcaption>Filtered result (A).</figcaption>
203+
</figure>
204+
<figure>
205+
<img src="path/to/hybrid1_filteredB.png" alt="Filtered B" />
206+
<figcaption>Filtered result (B).</figcaption>
207+
</figure>
208+
<figure>
209+
<img src="path/to/hybrid1_cutoff.png" alt="Cutoff frequency visualization/justification" />
210+
<figcaption>Cutoff frequency choice and justification.</figcaption>
211+
</figure>
212+
<figure>
213+
<img src="path/to/hybrid1_final.png" alt="Final hybrid image" />
214+
<figcaption>Final hybrid image (detailed pipeline).</figcaption>
215+
</figure>
216+
217+
<h4>Additional Hybrids (Brief)</h4>
218+
<figure>
219+
<img src="path/to/hybrid2_originals.png" alt="Originals for Hybrid 2" />
220+
<figcaption>Original images for Hybrid 2.</figcaption>
221+
</figure>
222+
<figure>
223+
<img src="path/to/hybrid2_final.png" alt="Hybrid 2 final" />
224+
<figcaption>Hybrid 2 — final result.</figcaption>
225+
</figure>
226+
<figure>
227+
<img src="path/to/hybrid3_originals.png" alt="Originals for Hybrid 3" />
228+
<figcaption>Original images for Hybrid 3.</figcaption>
229+
</figure>
230+
<figure>
231+
<img src="path/to/hybrid3_final.png" alt="Hybrid 3 final" />
232+
<figcaption>Hybrid 3 — final result.</figcaption>
233+
</figure>
234+
</article>
235+
236+
<!-- 2.3 + 2.4 -->
237+
<article id="part2-3">
238+
<h3>Part 2.3 &amp; 2.4. Gaussian/Laplacian Stacks; Figure 3.42(a–l); Custom Blends</h3>
239+
<p>
240+
<strong>Goal:</strong> Visualize Gaussian and Laplacian stacks for the Orange + Apple images, recreate outcomes similar to Figure 3.42(a)–(l), and include two custom blends (one with an irregular mask).
241+
</p>
242+
<h4>Gaussian &amp; Laplacian Stacks (Orange + Apple)</h4>
243+
<figure>
244+
<img src="path/to/orapple_gaussian_stack.png" alt="Gaussian stack visualization" />
245+
<figcaption>Gaussian stack visualization (Orange + Apple).</figcaption>
246+
</figure>
247+
<figure>
248+
<img src="path/to/orapple_laplacian_stack.png" alt="Laplacian stack visualization" />
249+
<figcaption>Laplacian stack visualization (Orange + Apple).</figcaption>
250+
</figure>
251+
<h4>Recreated Figure 3.42(a–l)</h4>
252+
<figure>
253+
<img src="path/to/figure342_grid.png" alt="Grid of results analogous to Fig. 3.42(a–l)" />
254+
<figcaption>Outcomes analogous to Figure 3.42(a–l).</figcaption>
255+
</figure>
256+
<h4>Custom Blended Images</h4>
257+
<figure>
258+
<img src="path/to/custom_blend1.png" alt="Custom blended image with irregular mask" />
259+
<figcaption>Custom blend #1 (irregular mask).</figcaption>
260+
</figure>
261+
<figure>
262+
<img src="path/to/custom_blend2.png" alt="Custom blended image (straight mask)" />
263+
<figcaption>Custom blend #2.</figcaption>
264+
</figure>
265+
<p><strong>Notes &amp; Discussion:</strong> [Describe masks, blending levels, feathering choices, and artifacts.]</p>
266+
</article>
267+
</section>
268+
</main>
269+
270+
<footer>
271+
<p><strong>References:</strong> [List any papers, libraries, and datasets used.]</p>
272+
</footer>
273+
</body>
274+
</html>

0 commit comments

Comments
 (0)