Permalink
Cannot retrieve contributors at this time
Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.
Sign up
Fetching contributors…
Cannot retrieve contributors at this time
| <!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> |