Google's recent collaboration with Arcade Fire, dubbed The Wilderness Downtown, yielded an in-depth interactive experience for the band's single "We Used To Wait" that just might point to the future of the music videos. The experiment relied heavily on HTML5 and quite a bit of clever JavaScript to pull off one of the better interactive multimedia sites we've seen.
While the credits for the video list over a hundred names, many of the project's interactive elements with were coded by Ricardo Cabello, better know as Mr.doob. Cabello, perhaps best known for his Flash-based experiments, has also been churning out HTML5/JavaScript projects for some time (see our coverage of earlier Chrome experiments), but the size and scope of the Arcade Fire project set it apart.
The Wilderness Downtown, features HTML5 native video and audio, Canvas-animated birds that fly away from your mouse clicks, interactive SVG fonts, and photo panoramas from Google Maps Street View. You enter in the address of where you grew up and it pulls the images for that neighborhood to personalize the video to match your own memories.
If you're curious how The Wilderness Downtown works, Cabello has posted a behind the scenes look at his part of the Arcade Fire collaboration.
Cabello is no fan of JavaScript frameworks, so you probably won't find these libraries popping up as JQuery plugins, but most of the code is available as standalone libraries hosted through GitHub. While neither offer any documentation, both three.js, a lightweight 3D engine and Harmony, a drawing library, were both use extensively.
The Wilderness Downtown was clearly a very large project and included numerous programmers, but if you're looking to pull off something similar, or just want to play around with some of the tools used to create it, Cabello's post provides enough of an overview to get you started.
See Also:
