This Saturday, Gilles and I invited filmmakers and web developers to the first Popathon Hack Jam at the London Mozilla office. The event was born out of the wish to bring together two worlds that have a unique opportunity for collaboration, powered by the enormous potential for interactive storytelling on the web. A key technology that enables this kind of collaboration is Popcorn.js, which led us to focus on this JavaScript library to create prototypes of interactive online video stories. Although Gilles and I always ensure making is the main focus at our interactive video workshops, a recurring piece of feedback is the wish to get more hands-on and work on projects. We tried to facilitate this by combining a morning of workshop elements with an afternoon of time-constrained hacking.



Crafting Each Other’s Stories

The introduction round at the start of the day nicely showed we were going to be up for a true interdisciplinary adventure. Among the 30 or so participants were documentary filmmakers, javascript superstars, videographers, researchers, hackers, students and multimedia artists, sometimes all the way from Manchester, adding to the fertile mix of skills and ideas. In a couple of rounds of speedy person to person hyperlinking, we shared our best online story experiences and gathered a wall of post-it-mediated inspiration.


[Photo courtesy of Michele Bonechi]

Gilles and I wanted everyone to leave at the end of the day with a newly acquired skill, and after a quick walk-through of Popcorn Maker, we gave out the first challenge of the day:

Form pairs and craft each other’s story by enhancing your favorite music video with at least 3 types of events

Creating enhanced video experiences by remixing web elements like this is the best way I know to get the idea of ‘black box video’ vs ‘hyper video’ across. And we even got to know each other a little bit better! Alex loves dancing and spaghetti carbonaraAndrea is from Islington and likes Michael Jackson, Tom and Enrica share a love for Florance, Erinma showed us that whippets can sing and Brian tells us he’s into … well just watch till the end. I love the tunes of RJD2 and, so my example was set to a video of one of his songs.

Beyond the Box

The next workshop went via Popcorn Maker’s remix button, through one of the demoed projects into its source code. There we indicated the match between the attributes of one of the events on the timeline and it’s representation in JavaScript code. It’s this feature that makes the two-sided front & back nature of Popcorn such an ideal teaching tool for me. I can reassure non-coders that they don’t have to worry about understanding the exact syntax, and the link between GUI and code is clear and direct. It works really well and eye-opening. Several people later told me it really helped to demystify the concept of code. #webmakerwin ;).


[Photo courtesy of Michele Bonechi]

Arrived in the realm of code, we explained how Popcorn.js can be used to go beyond the ‘limited’ functionality of Popcorn Maker. I usually explain to filmmakers how the JS side of things enables the customisation of the rest of a web page beyond the framing of a rectangular player. The feature I am typically asked for by filmmakers however, is the option to ‘choose your own narrative’. For storytellers, the term ‘interactive video’ strongly evokes the idea of ‘branching narratives’. *Plugin anyone?

Examples are key in this introduction and we were fortunate to have Mandy Rose with us who gave us a sneak peak at her soon to be premiered Are You Happy? project. The project uses Popcorn.js to contextualize video footage from all over the world by pulling in social media content from Twitter and Flickr. It was great to show this real-world example and hear about Mandy’s first-hand experience of opening up her creative practice to the web. 

The main goal of the Popcorn.js workshop was to accelerate the application of the library for the coders (and as a bonus give a look into the basics of a web page to HTML first-timers). We did a 5-step walkthrough from the most simple web page in the universe, all the way to an interactive popcorn-powered video experience. Aiming to stay accessible for all has both its pros and cons in this case. I see filmmaking as an eclectic art of leaving out (from many hours of film the filmmaker distills a core by knowing what to tactically leave out) and love showing filmmakers the accumulative nature of writing code. At the same time, covering the full spectrum between the very basics and reasonably advanced leaves at least a couple of individuals in the mixed audience unsatisfied at any given stage. Next time we’ll most likely run the to sessions on Popcorn Maker and Popcorn.js in parallel, giving people the choice to go where they like. Ill probably also show the discrete demo steps as a continuous process.


[Photo by Gilles Pradeau]

Hacking Hyper Video Experiences

After the lunch which had, besides pizza, food for thought from the post-it wall, it was time to form teams and get hacking. We used a lovely technique inspired by Mick Fuzz' facilitation at the Open Video Course Sprint. We ended up with 6 varied teams of 4 and handed out the Prototype Challenge for the day:

"Create a story experience that turns a viewer into a user"

With only an hour and a half to go before the half-way Ideas Pitch, there was no time to lose and the teams spread across the many rooms of the Mozilla office for some pressure cooker creativity.


[Photo by Gilles Pradeau]

The Ideas Pitch was a great opportunity for the teams to put their ideas to the test. Having to explicate the ideas generated thus far helped to give that extra bit of focus towards the final deadline of 17.30. Looking back it’s pretty insane to realise that all final prototypes were generated in a time span of little more than 2 hours and 30 minutes. And what a prototypes we got! Below are the final presentations of all the 6 7 teams. You can click the titles to visit the actual projects.


[Image courtesy of Cecile Baird]

The teams were competing against the clock in three categories. For each of these, the prototypes were assessed by the collective judgement of the participants. It’s always nice to see these things play out to have a nicely spread result and that’s exactly what happened. May I present to you:

Best Prototype: Team Journalist Innovators

Most Original Concept: Team Popcorn Pirates

Best Interactivity: Team Time Pop

Lessons Learned

I’m happily surprised with how smoothly it all ran. We definitely crammed a lot into the schedule, and got a lot done. Much respect for all the teams who managed to come up with such exciting prototypes in just a couple of hours! We’ve got heaps of useful feedback and the most exciting thing is that most people are hungry for more. More time for hacking and more Popathons!

I’ve personally taken home the following ideas and insights:

  • Creativity blossoms under constraints (timely and topically).
  • Varied, ad hoc teams enable discussion and creativity.
  • Explicating ideas half-way benefits the final output.
  • It’s good to try to separate people who have their own specific project idea into different groups.
  • Let’s try two days next time!
  • 48 Hour Interactive Film Project? ;)
  • Let’s try running the Popcorn Maker and Popcorn.js workshops in parallel, while making sure they match up conceptually and the groups get back together to hack.
  • Great to have a Popcorn.js example presented by someone in the room!
  • Don’t worry too much about getting the right amount of beers, when everyone’s way too concentrated to drink them. Lunch and snacks is what counts. Luckily we got these right!
  1. lloyddobler reblogged this from philovankemenade
  2. philovankemenade posted this