-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathSeamCarving.html
More file actions
154 lines (139 loc) · 5.88 KB
/
SeamCarving.html
File metadata and controls
154 lines (139 loc) · 5.88 KB
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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<!DOCTYPE HTML>
<!--
Forty by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Landing - Forty by HTML5 UP</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
</head>
<body class="is-preload">
<!-- Wrapper -->
<div id="wrapper">
<!-- Header -->
<!-- Note: The "styleN" class below should match that of the banner element. -->
<header id="header" class="alt">
<a href="index.html" class="logo"><strong>Conner Wallace</strong></a>
<nav>
<a href="#menu">Menu</a>
</nav>
</header>
<!-- Menu -->
<nav id="menu">
<ul class="links">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Me</a></li>
</ul>
</nav>
<!-- Banner -->
<!-- Note: The "styleN" class below should match that of the header element. -->
<section id="banner" class="style1">
<div class="inner">
<span class="image">
<img src="images/SeamCarving/seamcarving-HJoceanSmallEnergy.png" alt="" />
</span>
<header class="major">
<h1>Seam-Carving</h1>
</header>
<div class="content">
<p>A content aware image resizing application.</p>
</div>
</div>
</section>
<!-- Main -->
<div id="main" role="main">
<!-- One -->
<section id="one">
<div class="inner">
<header class="major">
<h2>About the Project</h2>
</header>
<p>Using an algorithm discovered in 2007, I implemented an image resizing program that is content aware. That means that it intelligently identifies what parts of the image are important to its overall structure. It is a core feature in many enterprise level image editors.</p>
</div>
</section>
<!-- Two -->
<section id="two" class="spotlights">
<section>
<a href="generic.html" class="image">
<img src="images/SeamCarving/seamcarving-HJoceanSmallEnergy.png" alt="" data-position="center center" />
</a>
<div class="content">
<div class="inner">
<header class="major">
<h3>Creating the Energy Graph</h3>
</header>
<p>Using a dual-gradient energy function, I first calculated the energy of each pixel. The energy is essentially the quantitative difference of that pixel from its neighbors. From this energy calculation I made a graph where the vertices are the pixels and the edges is the energy required to go to the pixel. </p>
</div>
</div>
</section>
<section>
<span class="image">
<img src="images/SeamCarving/seamcarving-HJoceanSmallVerticalSeam.png" alt="" data-position="top center" />
</span>
<div class="content">
<div class="inner">
<header class="major">
<h3>Finding the Least Significant Seam</h3>
</header>
<p>Then, using an A-Star path finding program I made, I find the seam which takes the least amount of energy to go from top to bottom. This is the seam that should be the least noticeable if removed.</p>
</div>
</div>
</section>
<section>
<span class="image">
<img src="images/SeamCarving/download.jpg" alt="" data-position="25% 25%" />
</span>
<div class="content">
<div class="inner">
<header class="major">
<h3>Putting it all Together</h3>
</header>
<p>After removing the seam and updating the graph, we can repeat the process. This image shows the seams removed in red. </p>
</div>
</div>
</section>
</section>
<!-- Three -->
<section id="three">
<div class="inner">
<header class="major">
<h2>More Information</h2>
</header>
<p>This project was done with code provided from CSE332 under Kevin Lin. If you are interested in seeing the full project it is available on a private Gitlab to prevent plagiarism. Feel free to email me if you want to see it.</p>
<ul class="actions">
<li><a href="https://gitlab.cs.washington.edu/cse332-20wi-students/connerw/tree/master/seamcarving" class="button next">GitLab</a></li>
</ul>
</div>
</section>
</div>
<!-- Footer -->
<footer id="footer">
<div class="inner">
<ul class="icons">
<li><a href="#" class="icon brands alt fa-twitter"><span class="label">Twitter</span></a></li>
<li><a href="#" class="icon brands alt fa-facebook-f"><span class="label">Facebook</span></a></li>
<li><a href="#" class="icon brands alt fa-instagram"><span class="label">Instagram</span></a></li>
<li><a href="#" class="icon brands alt fa-github"><span class="label">GitHub</span></a></li>
<li><a href="#" class="icon brands alt fa-linkedin-in"><span class="label">LinkedIn</span></a></li>
</ul>
<ul class="copyright">
<li>© Untitled</li><li>Design: <a href="https://html5up.net">HTML5 UP</a></li>
</ul>
</div>
</footer>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/jquery.scrollex.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>