This Friday I teamed up with Gilles to run a workshop about about making interactive video with Popcorn. It was a nice piece of ad hoc, project based self-organisation, an approach we also tried to make an essential part of the learning process. Gilles and I were introduced about a month ago when he posted a question about European learning or hacking events to the mailing list of the Mozilla Popcorn project. He is making a film about participatory budgeting and would like to use Popcorn to create a web-native documentary featuring contributions from people across the continent.

Around that time I had just proposed the idea of doing a workshop on Popcorn.js as part of the London Video Hackspace, so was happy to extend the scope and collaborate on the organisation. One month and a couple of emails later we met shook hands at the London Hackspace and kicked off a hands-on workshop with a room filled with filmmakers, interaction designers, students, web developers and multi-media storytellers.


One of the best things about the workshop was to find out how the difference in our backgrounds really helped to keep the scope of the workshop in line with the audience. Any time I would throw around JavaScript (JS) terms too liberally, Gilles would step in and ask for clarification. This kind of feedback also came from the participants every now and then and it really helped the workshop overall.


We had designed the workshop to have two parts. We first did a general introduction to the ideas behind interactive video which led up to covering Popcorn Maker, the graphical user interface to construct popcorn-powered timeline experiences in your browser. Comparing Popcorn Maker to an early version of a browser-based video editor raised questions from the filmmakers and VJs about effects, transitions and parallel video streams. Perhaps the comparison misses the point of what makes Popcorn Maker such an interesting tool: the idea of making video work like the web; dynamic and fully remixable. Showing the parallel between actions in the editor and their underlying results in JS (this was a good way to introduce the concept of the different plugins in JS), triggered the idea of using Popcorn Maker to quickly mock up a prototype that can later be fine tuned with custom Popcorn.js code. 

To really get people familiar with the things we presented, we spent the next 20 minutes hacking web elements into remixes of music videos, celebrations of International Women’s Day and, included below, Judy - double rainbow - Garland.

Showing the source code of the projects we had just created, nicely led into the second part about the use of Popcorn.js to craft custom experiences beyond the video frame of the Popcorn Maker interface. I hadn’t really prepared this part to be as accessible to JS first timers as the start of the workshop had been and it quickly became clear they wouldn’t let me get away with it. Quickly brushing over some include statements and simply demo’ing the effect of different plugins wasn’t quite satisfactory for people who hadn’t seen any JS before, let alone those new to HTML. Because we ended up spending quite a lot of time covering these basics, there wasn’t enough time to let people get really hands-on with Popcorn.js.

The next time we get together with a mixed audience like this, Ill try to include a concise intro to the HTML scaffolding of a popcorn instance. Max also suggested using JSbin to clearly show the effect of different parts of code. Exploring these details might bore some of the participants who are more experienced with JS, but they can get all excited when they team up with JS newbies to collaborate on a quick Popcorn.js hack. Another idea would be to divide participants based on their prior experience, but I feel this misses out on too much of the valuable collaboration.


We finalised the workshop by looking ahead and captured a quick round of suggestions for a future event on a post-it wall that included:

  • Hackathon!
  • More practical examples
  • Getting Mozilla developers involved
  • Event @ Mozilla Office?
  • Showing an overview of different interfaces to construct web-based stories (e.g. Zeega, Klynt)
  • Dividing beginners / advanced JS coders?
  • Weekend days are better than Fridays
  • Lightning pitches for projects / ideas
  • Let there be popcorn
  • Ideas / hacks / projects to work on:
  •   A time-line CV
  •   A video tour to a new web app
  •   A screen saver / picture that reacts to my mood
  •   …

We currently have a follow-up event in mind for the end of April and would love to receive input and more suggestions. This could be similar to last year’s Learning Lab at Mozilla’s London office. If you would like to stay informed, share suggestions or help organise an awesome hackathon, get in touch with Gilles or Philo.

[Photos by Ricardo Davila Otoya]

  1. mojitomehshh reblogged this from philovankemenade
  2. catsatrophic reblogged this from philovankemenade and added:
    EXCITING! Happening this Friday
  3. philovankemenade posted this