Popcorn Maker 0.2

March 6, 2012 Posted by admin butter, demos, featured, planning, popcorn maker

Popcorn Maker has hit the 0.2 milestone.

Popcorn Maker will empower everyone to make interactive video for the web. Read about the vision and our roadmapping efforts. If you want to help out, have a look at the open tickets in Lighthouse.

Happy 0.2 Birthday, Dave

Last week, the Popcorn team wrapped the 0.2 milestone toward Popcorn Maker, cheekily codenamed Ghostbusters. (This made for a great release party, with a special screening of the movie and a Stay Puft-themed cake).

This release encompassed 104 tickets, which is pretty intense. Major props to Bob Richter, Jon Buckley, Scott Downe, Chris, Dave, and the rest of the CDOT crew. And this is just getting started.

Because this is a release focused on rewriting Popcorn Maker’s foundations, we’ve skipped deployment for 0.2. But you can play around with the new UI in a sandbox here. And you can also check out the changelog.

What’s new?

A lot has changed. I’ll call out 4 things in particular:

1. Stronger software foundations

Butter is the software development kit for Popcorn Maker and other Popcorn-powered web apps. In the past, Butter was tucked into the Popcorn Maker app, which loaded HTML templates in an iframe and communicated with them in a somewhat unreliable way.

We want the foundations of Popcorn Maker to be strong. So we’ve re-factored Butter to live inside user templates. This makes for much more elegant code and reliable interactions.

A cool side effect of this is that any page can be turned into a Popcorn Maker template by simply including butter.js.

2. New and improved UI

Popcorn Maker UI, version 0.1

Popcorn Maker UI, version 0.2

Because Popcorn Maker is a WYSIWYG tool, it’s important that users have as much screen real estate as possible to visualize their projects.

So we’ve shrunk the tray to the smallest practical size. It’s 25% thinner than before. And we’ve moved the playhead to the status bar, so you have access to the whole timeline even when the tray is minimized.

We’ve added a layer of polish all around—lots and lots of nice touches. Track events are now distinguished by color and have more pleasing regions for moving and stretching. Track events are now selectable, which will pave the way for multiple event selection, copy+paste, and undo operations. In all, this makes the app feel much more tangible, and approaching the level of polish you’d expect in a native app.

3. Droppable regions

Popcorn events are now drag-n-droppable.

Popcorn Maker now lets your drop a Popcorn event (say, a map) directly onto the page target.

This is a small change that will make the app many times more usable. We’ll be introducing an even nicer “Add Popcorn” flow in the next release. And we’ll be exploring other drag-and-drop concepts over the year (like dropping a video into the page to upload).

4. Accounts and saving

Thanks to Cornfield—the Popcorn server—this is the first Popcorn Maker release with server-side project storage. We have initial support for creating accounts with BrowserID and saving project data to the cloud.

Cornfield needs to be made more secure, so we have no public demo just yet. But if you’re inclined, you can clone Butter and Cornfield and test this locally.

Next up: 0.3, “Breakfast Club.”

This month, we’ll be rolling up all this work into a version of the app that will stand on its own. The 0.3 release, codenamed Breakfast Club, should be approachable by users and enable top-to-bottom project creation, saving, and publishing.

This release will introduce a temporary template loader that will tide us over between now and June, when we stand up a proper Django backend.

It will be a big challenge to coordinate all these things—Butter, Cornfield, the template loader, templates and documentation. But Popcorn Maker is getting more real—and more powerful—every day. Exciting stuff.

What we made at Mozfest

November 16, 2011 Posted by brett demos, events, featured, popcorn, popcorn maker, Uncategorized

We’ve had a week to reflect on the explosion of creativity that was Mozilla’s Media, Freedom and the Web festival (MozFest). The festival marked the launch of Popcorn 1.0, and the alpha version of Popcorn Maker. We also partnered with the National Film Board of Canada to premiere One Millionth Tower, a documentary film made entirely in WebGL, using Popcorn as the event system. David Humphrey has written a great writeup on his impressions on the festival, I’d encourage you to read it. Meanwhile, on this blog, I wanted to round up some of the early press reactions, as well as a few links to demos that were made at the fest.

David Humphrey and Brett Gaylor announce Popcorn 1.0 at Mozfest

The Press

From the front page of Wired.com (Nov 5):
“The makers of the new film One Millionth Tower reinvented the documentary format…. The resulting film is unlike any before it.

One Millionth Tower, which is premiering on Wired.com the same day it premieres at the Mozilla Festival in London, is not just a static story recorded on film and then edited together for audiences…. Everything is triggered by [Mozilla's] Popcorn.js, which acts like a conductor signaling which instruments play at what times.“

Webmonkey: Mozilla Reinvents Web Video With Popcorn 1.0
“Video on the web has always been a bit disappointing. After all, it’s pretty much just like television, only smaller. Unlike the rest of the web, video is just as much a passive experience in your browser as it is anywhere else.

Mozilla would like to change that.

Gizmodo: Here’s How You Make a Documentary Only Using HTML5 and WebGL

“One Millionth Tower makes specific use of a Javascript tool called [Mozilla] Popcorn, which was designed to integrate web APIs into online video. What director Katerina Cizek did was utilize Popcorn to control the movement of the video frame, having it effectively behave like a video camera.”

Boing Boing: A documentary built with WebGL and other open standards

“Damn cool.” –Cory Doctorow

TechCrunch: Mozilla Festival salutes more Popcorn and less developer-ghetto

Emmy-award winning filmmaker Kat Cizek described herself as ‘super-chuffed’ when she came on stage to present the world’s first HTML5 film at #mozfest. It was the world premiere of ‘One Millionth Tower’, a documentary that works like the web itself: ever-changing, updated by the minute.

The film was developed with the help of Popcorn.js, Mozilla’s recently launched JavaScript library that works similarly to the hypertext principle in seamlessly mashing up online video with virtually anything online – the most obvious examples would be Wikipedia, Flickr or Twitter. It turns film into a more semantic experience, allowing for more dynamic and interaction.

“We can’t just think about interaction at the end but need it from the beginning to create a conversation between the filmmaker and the audience,” agreed the students involved in the development of Popcorn. “This kind of storytelling is just getting started.”

The New York Times:
One new technology launched and then workshopped at MozFest was Popcorn.js, a library of video augmentation tools that makes it straightforward to overlay content layers per the time signatures in digital video. The Popcorn.js workshop developers took little more five minutes to produce their Web version of popup videos.

The demos

The biggest thrill was seeing the largest gathering of popcorn developers ever assemble roll up their sleeves. There were many new faces, as well, such as the developers from RAMP, who came to the festival to launch their recent foray into popcorn development. Much of what was made over the 2 days is impossible to capture – new connections, new ideas, the start of many projects. A few demos stood out, however, and were showcased at the “closing circle” of the festival:

Popcorn.js @ Mozilla Fest 2011

Popcorn Remote

A great showcase of having popcorn content play simultaneously on 2 screens – imagine a television show with related content on your tablet. Created by the CDOT crew: David Seifreid, Jon Buckley, Christopher DeCairos, Scott Downe.

Popcorn Colour Tracker

Berto Yanez made a great demo showing the possibilities of tracking a colour within a video element, and inserting HTML into this colour.

The Pirate Bay “Augumentary”
With help from the Popcorn community, filmmaker Simon Klose realized a proof of concept for his upcoming documentary “The Pirate Bay – Away From Keyboard” in which related content appears in a sidebar.

See you at next year’s Mozfest!

(photos CC BY-NC-SA by Jonathan Mcintosh)

The Living Docs Hack Day

October 18, 2011 Posted by brett demos, events, featured, popcorn, popcorn maker, Uncategorized

On October 12th and 13th, ITVS (the Independent Television Service) and Mozilla convened 6 filmmaking teams and 6 of the world’s best html5 video developers at Mozilla’s San Francisco Office. They were gathered to participate in the Living Docs hackathon – a two day event framing the larger Living Docs project.

Each filmmaking team had developed a concept for how their documentary film could be translated to the web, using HTML5 and popcorn.js. In calls, webinars and face to face meetings leading up to the event, the filmmakers had been asked to consider a “living documentary” approach, where the content of their piece is informed and augmented by media that exists on the web. Through this approach, the goal is a documentary experience that is unique to each user and each viewing.

The results were nothing less than extraordinary. Each filmmaking team, many who had never authored interactive work, was able to create a compelling and emotional experience that was heightened by the addition of web-based content. And each developer present was able to fulfil these visions while keeping the intent of the overall documentary.

I suggest you watch them for yourself, and stay tuned – our goal is to provide production financing to a selection of these projects so they can be fully realized.

Please note: all of these projects are prototypes created over 2 days and are meant as proofs of concept. You’ll need a modern browser, such as the latest Firefox or Chrome, in order to view.

The Interrupters:
Steve James, Anton Seales Jr, Rick Waldron
http://dev.webmademovies.org/interrupters/

#18daysinegypt
Jigar Mehta, Brian Chirls, Georgia Wells, Jason Sussberg
http://code.chirls.com/18days/

30Mosques
Aman Ali, Musa Syeed, Bassam Tariq, Bobby Richter
http://webmademovies.org/30mosques/

The Island President
Bonni Cohen, Spencer Adler, Nalin Patel, Scott Downe
http://scotland.proximity.on.ca/sdowne/popcorn-js/plugins/islandpres/islandpres.html

Injunity
Adrian Baker, Tane Ross, Cole Gillespie
Injinuity

¿Más Bebés?
Renee Tajima-Pena, Kate Trumbull, Abram Stern, Atul Varma
(url not available)

Following the hack day, Angela Watercutter at Wired.com wrote up a fantastic recap of the event that is definitely worth a read.

Stay tuned for further news about the projects developed at the hack day – our hope is to see these taken further in 2012!

Popcorn Enters the Demoscene

May 24, 2011 Posted by bobby demos, popcorn

There has existed a a subculture inside computing and programming since the personal computer became relatively popular whose sole purpose is to basically show off: the demoscene. Its focus is primarily “demos” that programmers and artists work together to create as expressions of their artistic and technical talent. Some excellent examples are Future Crew’s Second Reality, and Farbrausch’s Masagin.

For the most part, demos need to be deterministic, meaning (roughly) that there is a planned progression from the beginning of a demo to the end from which any instance of the demo deviates very little, if at all. This is by far the most confusing part of the demoscene to newcomers, because there is a general failure to understand why demos aren’t simply rendered videos. I believe the best way to think about them is to consider what you’re seeing as a demonstration of what will be possible on mass in interactive video games in the next 2 or 3 years; if you’re watching an effect in a demo, imagine the possibility to control it in an interactive environment, and realize that everything presented to you is rendered in real time.

The progression of a demo depends on programmatic object creation, event coordination, and many other ostensibly simple things. So, very naturally, Popcorn fits right into the creation of a demo: there is a need to sequence events, and popcorn does that perfectly well. Recent releases of popcorn have focused on making plugins a lot better, and allowing player plugins through use of basePlayer. So, in #audio’s latest demo, an invitation to Flameparty, we exploited the opportunity to write our own simple player, extended from basePlayer, which is drives the general coordination of sequences and events.

CubicVR is an incredible open source 3D engine with a featureful JavaScript port. It contains an animation library which can be used to tell an object to get from point A to point B in time X. From the perspective of a programmer using said library though, it’s far simpler to use a general purpose event timing library (like Popcorn) to “macromanage”, and an animation library (like CubicVR’s) to micromanage, mostly due to the respective scope of each library. Popcorn’s focus is on the long-running media presented to the user, while the CubicVR animation library’s focus is on, and should be used in, code pertaining to itself.

We’re always exploring interesting ways to use Popcorn, and this latest #audio demo is a great proof of concept with respect to Popcorn’s versatility. Its use was almost circuitous to convention in a way (certainly no HTML5 video, and audio was generated by jsmodplayer), but it certainly didn’t feel that way whilst we programmed. I encourage its use in a similar manner, and I know I’ll be continuing to use it in my demo-centric future.

Popcorn in the Planetarium

May 3, 2011 Posted by bobby demos, popcorn

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:

HTML, CSS, jQuery, JavaScript
Planning & gathering assets
Writing & configuring Popcorn code
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.

Category Archives demos