Popcorn in the Planetarium

Check out Dave Humphrey’s blog about the demo as well: http://vocamus.net/dave/?p=1309

When Firefox 4 was released, it was accompanied by a series of amazing demos to showcase new technology inside the browser. As a result, Planetarium was on our radar when we thought about “Popcornizing” a Khan Academy video tutorial. The result: http://webmademovies.org/popcorn-in-the-planetarium/.

Dave Humphrey and I had this idea stirring around in the Popcorn community for a while before finally having the coinciding time to dedicate to a demo. Proudly and honestly, here is how our time was spent in order from most to least:

  1. HTML, CSS, jQuery, JavaScript
  2. Planning & gathering assets
  3. Writing & configuring Popcorn code
  4. Talking about food or coffee (irc logs to back this up)

Because of how well-structured the latest release of Popcorn is, most of our time was spent exactly as it should be when you’re using a dependable library: not worrying about the library.

What is most interesting though is how the demo illustrates simple interoperability. Because the Planetarium code is available with only a couple of mouse-clicks (and on github: https://github.com/littleworkshop/planetarium), we were able to encapsulate it inside an iframe, and leave its code-base virtually untouched.

Dave and I found the functions that manipulate the planetarium demo, and were able to activate them by spawning mouse-click events targeted at event handlers attached to objects inside the planetarium DOM. In other words, we faked user clicks. We let CSS and jQuery do most of the heavy lifting (I would like to see some CSS3 animations in our stylesheets), and, consequently, our script remained small: a couple hundred lines of our own JavaScript, a lot of which is for readability.

Considering that this proof of concept took about a day to put together, I’d say Popcorn is ready for use on a much wider scale, especially where education is concerned. It’s a great example of an important methodology of web development, and of computer science in general: good libraries exist, and accomplish exactly what you want with very little overhead; use them often, and contribute whenever possible.