Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
84 lines (78 sloc) 4.49 KB
<!DOCTYPE HTML>
<meta charset='utf-8'>
<meta author='Donald L. Merand'>
<link rel='shortcut icon' href='favicon.ico'>
<link href='assets/css/style.css' rel='stylesheet'>
<link href='//fonts.googleapis.com/css?family=Lato:300,400' rel='stylesheet'>
<title>The Faces of Explo</title>
<div id='content'>
<h1 class='font-center'>
<span class='font-thin'>The Face<span class='font-light'>s</span> of </span>
<span class='font-orange font-museo'>Explo</span>
</h1>
<p>
What would happen if you took a photo of every staff member and every student from an <span class='font-orange font-museo'>Explo</span> Program and merged them together into one photograph?
<ul class='pad'>
<li>1 Program (<span class='font-orange font-museo'>Explo</span> at Wellesley)
<li>965 students
<li>141 faculty
<li>1,245 total photographs <span class='font-light font-thin'>(sometimes you take a photo more than once)</span>
</ul>
<p class='pad'>
<a id='show-images' href='#'>Show me what would happen!</a>
<p id='box-4' class='pad no-display'>
<img src='assets/images/16/1.jpg'>
<img src='assets/images/16/2.jpg'>
<img src='assets/images/16/3.jpg'>
<img src='assets/images/16/4.jpg'>
<img src='assets/images/16/5.jpg'>
<img src='assets/images/16/6.jpg'>
<img src='assets/images/16/7.jpg'>
<img src='assets/images/16/8.jpg'>
<img src='assets/images/16/9.jpg'>
<img src='assets/images/16/10.jpg'>
<img src='assets/images/16/11.jpg'>
<img src='assets/images/16/12.jpg'>
<img src='assets/images/16/13.jpg'>
<img src='assets/images/16/14.jpg'>
<img src='assets/images/16/15.jpg'>
<img src='assets/images/16/16.jpg'>
<p id='box-3' class='pad no-display'>
<img src='assets/images/8/1.jpg'>
<img src='assets/images/8/2.jpg'>
<img src='assets/images/8/3.jpg'>
<img src='assets/images/8/4.jpg'>
<img src='assets/images/8/5.jpg'>
<img src='assets/images/8/6.jpg'>
<img src='assets/images/8/7.jpg'>
<img src='assets/images/8/8.jpg'>
<p id='box-2' class='pad no-display'>
<img src='assets/images/4/1.jpg'>
<img src='assets/images/4/2.jpg'>
<img src='assets/images/4/3.jpg'>
<img src='assets/images/4/4.jpg'>
<p id='box-1' class='pad no-display'>
<img src='assets/images/2/1.jpg'>
<img src='assets/images/2/2.jpg'>
<p id='box-full' class='pad no-display'>
<img src='assets/images/1/1.jpg'>
<div id='explanation' class='pad no-display'>
<h2>How Does This Work?</h2>
<p>
Standing on the backs of giants :) There is an application called <a href='http://www.imagemagick.org/script/index.php' target='_blank'>ImageMagick</a> that allows you to do things like blend two images together into one image. My initial theory was: if I can just step through all of the image files in a folder, I can progressively combine each image with the image that came before it and create one 'merged' version of them all at the end.
<p>
Unfortunately this idea didn't work so well. When you combine the first two images together, everything looks fine. When you combine the third image with the newly-created merged image of the first two images, they will get combined unequally. The third image takes up 50% and the first two images <emph>combined</emph> take up the other 50%. So as you go forward, each new image obliterates whatever came before it, and you end up with whatever the last image in the folder is, plus some blurriness :(
<p>
The solution is to do the combinations in phases. First, you go through the folder of images and combine them in pairs, storing the results in a new folder. Then, you go through that new folder and combine the images in pairs, storing the results in <emph>yet another</emph> new folder. You repeat this until you're left with one image. What you're seeing above are some 'snapshots' of the combination process.
<p>
You can find the source for this page <a href='https://github.com/exploration/faces-of-explo' target='_blank'>at this link</a>. I've include the image combination code below, for those of you who may be interested.
<script src='//gist.github.com/2490678.js'> </script>
</div><!-- explanation -->
</div><!-- content -->
<!-- jquery scripts -->
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script src='assets/scripts/jquery.smooth-scroll.min.js'></script>
<script src='assets/scripts/main.js'></script>
<!-- typekit scripts -->
<script src='//use.typekit.com/bqx5yny.js'></script>
<script>try{Typekit.load();}catch(e){}</script>