I had the honour of participating in a great event last weekend. As part of the Hot Docs film festival taking place this week in Toronto, The Mozilla Foundation hosted something called Hot Hacks. The purpose of Hot Hacks was to pair up the best documentary film makers up with experienced web developers and challenge them to create interactive web experiences over a period of two days. As a core developer of the Popcorn.js JavaScript Library, I was invited to participate on one of the teams.
It began on Saturday morning at the Mozilla Toronto office. Admittedly, I was a little under the weather from being there the night before for the Firefox teams' hack week party. Despite this, I stuck to my commitment to participate. After fueling up on healthy foods to help ease my discomfort, I was feeling way better by the beginning of the opening circle. moving from person to person around the circle, we introduced ourselves, and stated what the last documentary we saw was or what the first computed that we'd ever had was (My first computer was a family computer, it was a Macintosh, which looked a lot like this ). We then spoke briefly about the mission for the weekend and then broke off into our teams to begin work on our projects.
I was paired with two fine gentlemen who flew in from the States. Christopher Allen was the Filmmaker on our team. Christopher is the principal founder of UnionDocs, a US non-profit organization whose purpose is to create documentaries that cover a wide range of topics. James Burns was the developer that Christopher brought with him to the event. James is the Founder of Zeega, an HTML5 tool being developed that creates interactive web media experiences, much like Popcorn Maker.
The UnionDocs project is titled "Living Los Sures". Christopher discovered a documentary made in the 1980's about the Brooklyn neighborhood where UnionDocs is based. A group of many documentary artist in the "UnionDocs Collaborative Studio" is collecting footage of the community as it is now, and of people featured in the film as they are today.. This gave us a whole lot of content to use to create something really awesome. His vision was to take the footage from the past and present, and use web technologies to build a way of presenting content from both films at the same time. We decided on creating 3 separate "experiments".
To compliment these experiments, we needed to build 2 things. The first was a Zeega Popcorn plug-in. This plug-in would populate an area of a web page with a Zeega project, using the Zeega API that James built. We used my experience creating popcorn plug-ins and James' knowledge of the Zeega API to create a rudimentary and functional first version of the Zeega plug-in. Following that, we needed to create a tool that would be able to take two media elements on a web page, and modify their volumes based on the ratio of the distance of the mouse pointer between the centre of each element. I built the tool and with much help from James, figured out the formulas we needed (from scratch, because that's more fun) to calculate volume levels. I lovingly titled this little tool "Ratiator.js". You can find it on my Github account. One of the tools we required was based off of a previous demo that James had put together, and would require us to make several modifications to fit the experiment we needed it for.
While James and I built these tools, Christopher worked very hard putting together all the video and audio content we needed, whether it be cutting clips in Final Cut Pro to creating Zeega projects using clips he had available. At the end of the day on Saturday we parted ways knowing that we had all the tools we needed to bring Christopher's vision to reality.
I started out day two feeling like a million bucks. Christopher, James and I quickly got to work, making last minute modifications to the tools, and setting up the project's main structure. Christopher continued his work creating the visual and auditory content for the experiments. Normally you'd expect to hear about the first experiment first, but seeing as we worked on them completely out of order, it would make more sense to describe it chronologically.
We first started on the third experiment. This experiment would make use of Popcorn.js for a lot of the timing based events that we had. It would also incorporate the the new Zeega plug-in and the two UX elements we would use in the first two experiments, but at the same time. We spent a good portion of the day pair programming the experiment together. We did the first experiment next. It would be an interactive trailer, incorporating clips from the original film on the left and the new film on the right. The user would be encouraged to click and slide a "line" from left to right, revealing one video while hiding another. Christopher cut two trailers in a single day, having them displaying very similar content/clips at the same time. The fact that he was able to produce both of these videos in a matter of hours still boggles my mind. He is a Final Cut Pro wizard. My explanation of the experiment is a little vague, and is best experienced to be understood.
The second experiment was simple in concept but powerful to experience. Two videos were placed side by side. The left video showed a group of police officers from the neighbourhood who walked the beat at the time the original documentary was made. They were sitting around a laptop, watching a video, commenting on the things they were seeing. On the right side, we put the very same video that the police officers were watching. The two videos were synced, and using Ratiator.js, we created an experience where you could mouse over a video to hear itand mouse over the other to hear it, or hover in between to hear both, which turned out to be very powerful and worked very nicely.
We finished up all the experiments, tied them together into one experience, and tested. We finished everything and had it up on GitHub, ready to view with 5 minutes to spare before the deadline at 7 PM. I felt our presentation went very well, and was well received. There were a couple minor hiccups, but nothing very serious.
I thoroughly enjoyed viewing the creations of the other 5 teams, everyone created something very unique and really awesome.
I also would like to thank Christopher and James for being such great team members, it was an absolute pleasure working with them. I'd also like to thank Mozilla and the Hot Docs people for putting together the event and for hosting. Special thanks goes out to Brett Gaylor and Ben Moskowitz, and Mari Moreshead for working so hard to organize everything!
The demo we created has a few limitations to keep in mind, if you would like to view it. The first limitation being that due to time constraints we were only able to get media in a format supported by the Chrome browser. The second issue, is that there's a lot of data. to view the experience, make sure you have a lot of data allowance (100's of MB) and please allow some time to the presentation to load the media sources. If it fails to work the first time, try refreshing the browser, it can fix random failures that we experienced.
Here's the link to it: http://cadecairos.github.com/los-sures/
When I find the time I'll do a screen cast of it and update this post with a link.
In the mean time, I've got to settle into my new desk at CDOT and try not to feel overwhelmed by all the new responsibilities I'm taking on, now that I've become one of the veteran members of the team at CDOT. I know I'll do just fine, because I don't take my responsibilities lightly!
Its hard to believe that a year ago today I was starting out here at CDOT. I'm looking forwards to the next year, which is no doubt going to be even more exciting and eventful that the last. who knows where we'll go!