Do Not Touch – Kilo by Light Light

This past week the winners of the 2013 UK Music Video Awards were announced. (Creative Review has a nice summary of the event.) And what’s noteworthy for me was it was the first year they had an Interactive Video Award. This years winner was for the song Kilo by Light Light, and went to Amsterdam-based design studio Moniker.

I had a lot of fun going through the nominees (and winner) and thought I’d post them here. I’ll embed a video of the non-interactive version, and then include links to the actual interactive pieces, and any supporting materials). They’re a bit all-over-the-map in terms of interactivity and production values — but definitely worth a look.

Beck: Hello Again

- Interactive video
- how it was made

Do Not Touch – Kilo by Light Light

- Interactive video
- More Info

Moones – Drunk in Session

- Interactive video (same as below)
- More Info & Behind the scenes

Sigur Ros – Stormur

- Interactive video

Spoek – Escape From ‘85

- Interactive video
- More Info

The Family Rain – Reason to Die Orbital

- Interactive video
- Making of

Take a look at “3 Dreams of Black” — an interactive web-based music experience. It’s part song, part music video, and even a little crowdsourced content. Directed by Chris Milk and developed by Google, it’s an interesting followup to “The Wilderness Downtown“, which they worked on last year.

The interactivity is fairly limited — restricted to left-right panning at select moments — but that this is all being rendered live, in the browser, is pretty remarkable. It’s a great inspiration for designers to think about how immersive 3D can be made part of their work. And a nice step towards showing a standards-based future for the web.

The piece is also a showcase for WebGL, a technology that lets the browser use hardware accelerated 3D graphics. And to help people understand the technology, and even get their hands dirty with some code, Google has included a great technology page with not just demos and code samples, but full code libraries. And, for those feeling brave, they’ve made the entire source code to “3 Dreams of Black” available as a download.

There’s more information about the project on the Google Blog.

(Note that all this requires a browser that supports WebGL — so it doesn’t work on all computers.)

Development tool

Code examples

Interactive code sample

Wireframes

The Wilderness Downtown

This week Arcade Fire launched the interactive video The Wilderness Downtown, based on their track We Used To Wait. Enter a street address (they suggest the address where you grew up), and a set of windows, with content synchronized to the song, delivers a mix of video, interactive pieces, and footage of your street address — animated and augmented. It’s pretty amazing — both technically and creatively.

What’s even more remarkable is that it’s a Chrome Experiment — done entirely in HTML5 — without any Flash. Google’s page on the project details the specific technologies and techniques used. Creative Review posts a great deal of background information.

What I found most interesting was how the concept developed. It was Aaron Koblin who first had the idea of an interactive film to showcase Google Chrome, rather than the band or their label instigating it. (If you’re not familiar with Aaron, you should absolutely check out his work on his website and sandbox. Most relevant to the Arcade Fire project was his involvement on Radiohead’s open source House of Cards project, for which he was the director of technology.)

It’s a great example of new technologies and experimentation driving creativity. And very encouraging to see a band like Arcade Fire regularly supporting such efforts… Digital versions of their songs feature Synchronized Artwork. And they’ve done several sites, including Neon Bible (which is an interesting experiment at getting a viewer to interact throughout a song) and Black Mirror.

The Wilderness Downtown

The Wilderness Downtown

Neon Bible

Update: Here’s a documentary on the making-of the site:

Barneys Co-op

Yesterday I received a Barneys Co-op catalog in the mail — in which all of the photos were shot in 3D. Because they used the red-blue anaglyph method, they also included a pair of glasses. It may be an old-fashioned technology for 3D, but it’s still pretty fun. (You can also see the 3D catalog on their website.) So, I figured it was a sign for me to post some of the 3D links I’ve been collecting lately.

A couple months ago Robyn released a 3D music video online for her song Don’t Fucking Tell Me What to Do. What’s cool is that the video takes real-time twitter feeds and incorporates the text into the video. It’s a pretty low-touch interactivity, but nicely done. This piece was created by Blip Boutique and Stopp Web, with typography by Jakob Nylund.

Robyn, Killing Me

Robyn, Killing Me

Insane, and of pretty dubious utility, is this 3D bookmarklet. (By Yusuke Kawasaki.) It turns a regular web page into a 3D version of it. Sorry, no real interactivity here, but it’s crazy enough to be very cool.

Did you know that Google Street View can display in 3D? Just right-click within a view and select “3d mode on.”

Google Street View in 3D

I think my favorite 3D site, so far, is Snowdin. Made by Cole + McVoy as a holiday site in 2008, it’s got all sorts of cute games and surprises. And, the 3D is interactive! So, for example, if you jump in the ski game, the character rises up. Very charming.

Snowdin

Snowdin