Happy 25th birthday, GIF! And WOW, you have come a long way in this quarter of a century. Since 1987, you have witnessed many historical events: you saw the birth of the Web, the rise and decline of Geocities, you survived the dot.com bubble, and, when Web 2.0 came and your time seemed to have ended, you resurrected with MySpace, and the ironic, politically incorrect memes spread by imageboards.
Your simplicity is your strength and everyone seems to love your lo-fi loops. Your repetition is a visual mantra, and your obsessiveness fits well with the attention deficit caused by information overload. GIF, we have been through a lot together and you are still among the best expressions of digital creativity out there.
In IDEO’s New York studio we recently hosted a holiday party for our clients. The studio designed a handful of experiences for the occasion under the topic “How To Survive the Holidays.” We subjected them to the “Holiday ClichÃ© Elevator & Lightbox Entrance,” a “Tip Jar,” a “Card-sending Station,” and a “Quiet Room,” replete with a digital fireplace. We also gifted them a “Hangover Kit” to recover from an excess of holiday spirits.
Among the offerings at the party, we also had a “Holiday Memories Photobooth” in which people could shoot animated GIFs of themselves. We planned an installation that could be easily activated with the touch of a few buttons and whose outcomes were immediately available to all party attendees. With duct tape, foam core boards, and red paint we quickly assembled a relatively stable photobooth structure that would pique their attention.
We looked to an open source tool called Processing to program the features and behaviors of the photobooth, focusing on:
- A tangible interaction to trigger the photo-shooting
- A countdown sequence to prepare the pose
- A 5-shot animation of the poses, to be projected on a separate screen
For the creation and the generation of the animated GIFs, we used the gifAnimation Processing library, a simple and useful tool that allows us to define all the key parameters of a GIF, such as the image quality, resolution, and the animation delay. For a few days we kept switching between serious programming and not-so-serious debugging. If you were here with us, it would have looked like this:
We used an external HD webcam to capture images at a decent resolution. Not too high, in order to remain loyal to the original aesthetics of GIF and to avoid upsetting the CPU. As to the tangible interaction, we started connecting an Arduino board to trigger the behaviors associated with two push buttons:
- Shoot a picture and add a frame to a GIF
- Loop the frames and save the file
After a few iterations, we decided to simplify the interactions and to stick to a single button that would have started the shooting sequence of five pictures after an initial countdown. In particular, we decided to use a Big Red Button to make the interaction more intuitive, playful, and fun (’cause everyone loves hitting big red buttons).
After that, we focused on the projection of the GIFs in the studio area where people were mingling. We coded a PHP script to scan the animated GIF folder every few seconds and to build the source of a HTML/jQuery page that ran on the browser of a secondary computer plugged to a large-size monitor.
Finally we made a recipe with IFTTT (If This Then That) to capture all GIFs being taken and to transfer them to the official party Tumblr blog, to preserve the memories of our “How To Survive the Holidays Party” at IDEO NYC.
And, drum roll, this is a digest of the final result:
As much as we loved the idea and its simplicity since the beginning, we could not have anticipated such dedication from our guests; there were more than 130 animated GIFs taken in three hours. If you are curious to see all of them, you can visit the “How to Survive the Holidays Party with IDEO NYC” Tumblr blog at this address: http://howtosurvivetheholidays.tumblr.com
If you are interested in building your own holiday photobooth, here you can find the ingredients that we recommend for the good times’ recipe:
- HD webcam
- Red button: the bigger, the better
- Arduino board, few resistors and wires
- Monitor for the photobooth
- Monitor for the projection (or a projector)
- Lights, to taste
Stir all with:
- A Processing sketch with gifAnimation library
- Standard Firmata sketch running on Arduino
- A mashup of HTML / jQuery / PHP
- A IFTTT recipe
Present the final result on a Tumblr blog.
Now, it’s time to grab the Photobooth code here and join us in celebrating the holidays. And 25 years of the GIF.