-
Notifications
You must be signed in to change notification settings - Fork 0
/
a1.html
133 lines (122 loc) · 8.37 KB
/
a1.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!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"><head>
<!-- Design by Design Profesionals Released for free under a Creative Commons Attribution 2.5 License Title : Essence Version : 1.0 Released : 20110518 Description: A two-column fixed-width template. Suitable for blogs and small business websites. -->
<meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>Computational Photography MENG Zhixiang</title>
<link href="default.css" rel="stylesheet" type="text/css" />
<!-- Image Preloader -->
<script src="jquery.min.js"></script>
</head>
<script>
$(document).ready(function(){
setInterval(function(){
if(window.scrollY>=300){
$('#updates').css('top',0);
$('#updates').css('width',200);
$('#updates').css('position','fixed');
}
else{
$('#updates').css('position','static');
}
},100)
})
</script>
<body><div id="mask"></div><table id="pic_div" style="z-index:910; width:100%; height:100%; text-align:center; display:none;position:fixed;"><tr><td style="width:100%; text-align:center; background:none;" id="mask_"><img id="pic_img" style=" max-height:500px; border-style:solid; border-color:#FFF; border-width:thick"></td></tr></table>
<table id="readme" style="z-index:910; width:100%; height:100%; display:none;position:fixed;"><tr><td style="width:100%;background:none;x;" id="mask_1"><div style="width:270px; height:170px; background-color:#FFF; padding:40px; margin:auto; line-height:35px"><h2>CSCI3290 Report</h2><p style=" line-height:40p">Available pages:<br>
<ul>
<li>index (pc/mobile)</li>
<li>registration (pc/mobile)</li>
</ul>All functionalities are disabled</p></div></td></tr></table>
<script>
$(document).ready(function(){
$('img').click(function(){
$('body').css('overflow','hidden');
$('#mask').show();
$('#pic_img').attr('src',$(this).attr('src'));
$('#pic_div').fadeIn(200);
})
$('#mask_').click(function(){
$('#pic_div').hide();
$('#mask').hide();
$('body').css('overflow','scroll');
//$('#outer').css('overflow','scroll');
})
$('#mask_1').click(function(){
$('#readme').hide();
$('#mask').hide();
$('body').css('overflow','scroll');
//$('#outer').css('overflow','scroll');
})
})
function readme(){
$('body').css('overflow','hidden');
$('#mask').show();
$('#readme').fadeIn(200);
}
</script>
<div id="fb-root"></div>
<div id="header">
<h1 style="color: white">Computational Photography</h1>
<h2 style="color: white">MENG Zhixiang</h2>
</div>
<div id="page">
<div id="content">
<div class="post" style=" border-bottom:none">
<h1 class="title" id="objective">Objective</h1>
<div class="content">
<p>The goal of this project is to use low-pass and high-pass filters to process two images respectively and then combine them to get a hybrid image. Both grayscale image and color image are supported. Also, three padding methods are used: pad zero, pad replicate and pad symmetric. Besides, Fast Fourier Transform is used to accelerate the convolution.</p>
<img src="images/a1_images/low_frequencies.jpg" alt="" class="photo" /><img src="images/a1_images/high_frequencies.jpg" alt="" class="photo" /><img src="images/a1_images/hybrid_image.jpg" alt="" class="photo" />
</div></div>
<div class="post" style=" border-bottom:none">
<h1 class="title" id="hybrid">Hybrid Images</h1>
<div class="content">
<img src="images/a1_images/cat.bmp" alt="" class="photo right" /><img src="images/a1_images/dog.bmp" alt="" class="photo right" />
<img src="images/a1_images/highpasscat.jpg" alt="" class="photo right" /><img src="images/a1_images/lowpassdog.jpg" alt="" class="photo right" />
<br><p>By applying a Gaussian filter to an image, we can make it smoother and it's called low-pass filtering. After that, we keep the low-frequency information. If we substract this low-frequency part from the original image, then we can get a high-pass filtered image, where only the high-frequency information (edges) remains. Adding them together, we can get a hybrid image, which looks like the low-pass filtered image when it's small but looks like the high-pass filtered image when it's large.</p>
<img src="images/a1_images/hybrid_dc.jpg" alt="" class="photo" style="width: 99%; height: auto" align="right" />
</div></div>
<div class="post" style=" border-bottom:none">
<h1 class="title" id="cutoff">Cutoff Frequencies</h1>
<div class="content">
<p>Using different frequencies will affect how smooth the filtered image is and then affect how good the result is. In this project, the cutoff frequency is related to the standard deviation and the size of kernel that we use. Generally, when increasing the cutoff frequency, low-pass filtered image becomes more smooth but high-pass filtered image becomes more clear, seen in hybrid image. We need to adjust these two cutoff frequencies to keep a balance between two images so that both of them can be seen in the hybrid image generated.</p>
<img src="images/a1_images/e1.jpg" alt="" class="photo" /><img src="images/a1_images/e3.jpg" alt="" class="photo" /><img src="images/a1_images/e7.jpg" alt="" class="photo" />
<img src="images/a1_images/m5.jpg" alt="" class="photo" /><img src="images/a1_images/m7.jpg" alt="" class="photo" /><img src="images/a1_images/m9.jpg" alt="" class="photo" />
<img src="images/a1_images/me71.jpg" alt="" class="photo" /><img src="images/a1_images/me73.jpg" alt="" class="photo" /><img src="images/a1_images/me77.jpg" alt="" class="photo" />
</div></div>
<div class="post" style=" border-bottom:none">
<h1 class="title" id="padding">Padding Methods</h1>
<div class="content">
<p>Using pad-zero method, there may be a black border in the filtered image, as it's actually padding the image with a black border. However, by using pad-replicate or pad-symmetric method, this effect can be eliminated.</p>
<img src="images/a1_images/fs950.jpg" alt="" class="photo" style="width: 30%; height: auto" /><img src="images/a1_images/fs951.jpg" alt="" class="photo" style="width: 30%; height: auto" /><img src="images/a1_images/fs952.jpg" alt="" class="photo" style="width: 30%; height: auto" />
<img src="images/a1_images/bp950.jpg" alt="" class="photo" style="width: 30%; height: auto" /><img src="images/a1_images/bp951.jpg" alt="" class="photo" style="width: 30%; height: auto" /><img src="images/a1_images/bp952.jpg" alt="" class="photo" style="width: 30%; height: auto" />
</div></div>
<div class="post" style=" border-bottom:none">
<h1 class="title" id="fft">Fast Fourier Transform</h1>
<div class="content">
<p>Previously, when calculating convolution, we need to do the multiplication between image and kernel directly, which cost us O(n^2*m^2). After using Fourier Transform to process the image and kernel first, we only need to do mutiplication in frequency domain and then do the Inverse Fast Fourier Transform. The results look basically the same, but the speed is much faster. In this project, I first pad image according to the size of kernel, then pad kernel to the same size as the new image, then apply FFT to them after padding zeros to size 1024*1024. After IFFT, I remove those paddings to get the hybrid image as the same size as source image.</p>
<img src="images/a1_images/fft_dc.jpg" alt="" class="photo" style="width: 30%; height: auto" /><img src="images/a1_images/fft_fs.jpg" alt="" class="photo" style="width: 30%; height: auto" /><img src="images/a1_images/fft_bp.jpg" alt="" class="photo" style="width: 30%; height: auto" />
</div></div>
<div class="post" style=" border-bottom:none">
<h1 class="title" id="efficiency">Efficiency</h1>
<div class="content">
<p>When not using FFT, the running time is roughly around 700 seconds, varying with the size of images and kernel. When using FFT, the running time is roughly around 3.5 seconds, which is roughly 200 times faster. This definitely shows that FFT can largely accelerate the convolution process.</p>
</div></div>
</div>
<div id="sidebar">
<div id="menu">
<ul id="updates">
<li><a></a></li>
<li><a href="index.html" title="">Home</a></li>
<li><a href="#objective" title="">Objective</a></li>
<li><a href="#hybrid" title="">Hybrid Images</a></li>
<li><a href="#cutoff" title="">Cutoff Frequencies</a></li>
<li><a href="#padding" title="">Padding Methods</a></li>
<li><a href="#fft" title="">Fast Fourier Transform</a></li>
<li><a href="#efficiency" title="">Efficiency</a></li>
</ul>
</div>
</div>
<div style="clear: both;"> </div>
</div>
<div id="footer">
</div>
</body></html>