The Wilderness Downtown

The Wilderness Downtown

Don't even think about trying this without Google Chrome!

Every once in a while something trips us up.
You’re going about your day, doing the same old thing, experiencing things the same old way; and then just like walking into a wall – BAM!, you experience something …different.

Yesterday I saw something different… something that, plain and simple, made me smile. I don’t smile at my computer very often; I swear, I curse, I glare… not smile.
Now, I could just throw the link in here, and if you haven’t seen it yet, let you experience it for yourself… but if your brain isn’t properly primed with web lingo and ‘dev talk’… then chances are what you see / experience isn’t going to be all that special. If you’re like me, on the other hand, and you know what HTML5 means, then you should be pretty stoked, because what makes what lies beyond this link so special, is that what you experience is entirely void of Flash. What you experience is being completely rendered / processed within the browser itself, and not by any other ‘required’ browser plugins.

BUT, there’s a catch. You need to use the Google Chrome browser to properly experience it. Yes, Google Chrome. It’s quickly on the rise as a fantastic all-around great browser, (and it loves to flex its muscles by showing off its HTML5 capabilities with things like this)… “Like what?!”, you’re asking… just keep reading. But, first go download Google Chrome if you already don’t have it, and just be sure to launch the following link with it when the time comes.

Ok, so I heard about the popular video game Quake 2 being ported/developed to run within the Chrome Browser, specifically in HTML5 (meaning, NO FLASH whatsoever), and was super excited to hear that – but of course I didn’t get to play it. I’m a huge advocate for HTML5, and most of its features are quickly being adopted by the latest browser versions (even including Internet Explorer 9), so I’ve been waiting to experience it on a whole new level – and not just through some cheesy pool game or tic-tac-toe.

To make a long story short, Arcade fire and Director Chris Milk have collaborated with Google on a project. That is, the project beyond the link in question!
The experience begins with the viewer/visitor entering in their childhood address (my childhood address doesn’t work unfortunately – I’m a small town boy, but if that happens to you, just try a larger city – it’s still cool **edit [it does work with my childhood address after all!]). The experience also involves some other ‘tasks’, all of which becomes incorporated into the musical/visual experience. It’s very cool… So go check it out!! And remember, it’s Flash free! HTML5! (and requires google chrome …for now).

http://www.thewildernessdowntown.com

I know that was a whole lot of talk for not even explaining what exactly HTML5 is and why No Flash can be a good thing… but this is a ‘design’ blog after all, so I’ll save the tech lessons for a different place and a different time.

For those that are interested though, here’s a look into what’s going on behind the scenes:

HTML5 Canvas 3D engine renders a flocking bird simulation that reacts to the music and mouse.

HTML5 audio plays music and keeps track of timecode.

Sequence system controls and synchronises effects and windows to the timecode.

HTML5 video plays film clips in custom sizes.

Choreographed windows are triggered by the music and placed relative to screen size.

Map tiles are rendered, zoomed, and rotated in a scripted 3D environment.

Animated sprites are composited directly over maps and Street View.

3D sky dome is used to render Street View with scripted camera control.

Procedural drawing tool allows the user to create velocity influenced tree branches.

Generative typeface triggered by keypress, uses an SVG path reader and individual canvas compositing for each letter.

Google Maps API for fetching dynamic routes to destination and checking Street View content at points along the route.

Street detection for animated trees composited dynamically in place over Street View.

Color correction by combining canvas blending modes to enhance contrast and tint.

Chris Milk

1 Comment to The Wilderness Downtown

  1. Tammy's Gravatar Tammy
    September 2, 2010 at 12:12 pm | Permalink

    Oh. My. Gosh. I’m downloading Google Chrome now for this reason alone. Seriously, it’s downloading right. Now.

Leave a Reply

You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>


SQUAB is a small design studio based in Toronto. This is our blog. Visit our website and see what we can do for you.

SQUABTWEETS

Categories