Permalink
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> |