Runaways

Runaways

There comes a time in every programmer’s life when he must seek out help in order to have a project (or projects) realized. That happened for me three weeks ago, and that help came in the form of Johannes Wagener.

Jo and I met two years ago while we were both working at SoundCloud, and quickly realized that we shared the same amount of enthusiasm for two things: alcohol and code. So naturally we ended up hacking several drunken apps together like Concert 2021, Wave Raid, and Waveform.JS. So before running away from SoundCloud, we vowed to hack on other fun projects in the future…

Well the future is now, and we’ve spent the last three weeks developing two campaigns together, one for The Killers and another for Muse. Today I’d like to share a quick overview and some of my highlights from The Killers Battle Born build.

Keep in mind that we are only two people, separated by nine time zones, solving two complex problems for two massive artists, in three weeks, with occasionally overlapping schedules… for that I’d like to thank Skype, Git, and a shit ton of Community Coffee dark roast. For Jo, probably bread and cheese

 Anyway, let’s runaway to…

Battle Born

The concept for this campaign came to us in the form of a sentence “The Killers invite you to take their new album for a spin. Click here for a free ride” and some, sick, art from Warren Fu, The Killers incredible art director.

Here’s exactly how we laid out the project goals in the proposal:

Like usual, Jo and I’s minds immediately gravitated towards gaming, and we sought out inspiration from such vintage racing titles as Pole Position and Outrun. I also recalled an opening sequence from the SNES game Vegas Stakes that included a road trip sequence to Vegas. [1] Perfect.

Johannes begun development by laying out a real-time chat and radio experience using a combination of Backbone.js and the backend tech offered by our friends at Firebase, while I wrestled fitting all required elements into a clean and balanced front end layout. Once that was setup, we combined our efforts on the car animation which was built entirely with animated GIFs (more on that later) and CSS, creating an app that feels like Cruis'n World meets Turntable.fm.

Finally, we utilized the the open-graph meta data and media from our logged in Facebook users to randomly generate user specific signage such as an exit sign directing you to your hometown or a billboard using your Facebook photos. The end result is fucking rad, and one of our first users said it best:

“OMG. It’s like, driving through my life.”

Indeed, Hotchick1987. Indeed.

All in all, it was incredibly fun build, and one that was extremely hard for us to stop working on. Hell, I just wanted to build Cruis'n World at the end. Don’t believe me? Try punching in the Konami code. ;-)

Anyway, here’s a few highlights from my side:

A Bolt of Typography

Bolt Typeface

I knew early on that I was going to be utilizing the bolt logo to accent several different areas of the design, so I needed an easy way to draw and color it it without making 1,000 different versions. One word: Webdings. Seriously.

Inspired by what Symbolset has been doing with their semantic symbol fonts (also used on this site), I decided to recreate the bolt as an OpenType font. This keeps the mark perfectly crisp on retina displays [2] and gives me the ability manipulate it with CSS functions like color and text-shadow.

Here’s how I’m using it:

// Include it using @font-face
@font-face {
  font-family: "Battle Bolt";
  src: url("/battle-bolt.otf") format("opentype");
}

// Add it to a pseudo element so it shows up before each h1
h1:before {
  color: red;
  content: "!";
  font: 25px "Battle Bolt";
}

Paving the Road

We paved the road you see now three times before we were happy with the result. Our first attempt used CSS3 transforms to create the asphalt and stripes in perspective, influenced by this tutorial we found. However, that didn’t seem to run well on non webkit browsers.

Johannes then had the bright idea to create the road as an animated GIF and tasked me to figure out the best way to do this. Luckily, I had been dabbling in Photoshop CS6’s 3D functions recently, so I had a pretty good idea of how to pull it off. I started by creating a flat road texture:

Texture

Then I created a new Photoshop document with a single object layer. That layer was converted into a 3D Postcard which created a three dimensional plane I could move, rotate, and scale within the scene. I then applied the texture created earlier to the plane’s diffuse property, making sure to scale it vertically for nice repeating. Finally, I used Photoshop’s Timeline to animate the camera moving from a single stripe to another. Throw in some GIF repeating, a fog overlay, and you’ve got yourself a road:

GIF

Of course, I’m never satisfied, so I actually programmed the road once more using Three.js and WEBGL. The result was awesome, but what we gained in smoothness and features, we lost in browser compatibility. So I dropped my pursuit for perfection, in exchange for the animated GIF.

Closing Arguments

As mentioned earlier, we pulled in meta data and photos from Facebook in order to customize our signage experience. When used within the right context, this technique can be very powerful and sometimes downright nostalgic. However, you shouldn’t perceive that randomly pulled photos will fit into any context. Linkin Park found that out the hard way in their latest interactive video Lost in The Echo.

The look of the video is typical Linkin Park: post apocalyptic world, sweaty actors, and an overall gloomy aesthetic. A small group of survivors find themselves in an abandoned warehouse where they are handed photos, presumably of significant others, which causes each of them to break down emotionally and you know… shatter into pieces. Prior to combusting, each person glances down at the photo they are holding and are shown a photo mined from your Facebook account. Now, don’t get me wrong. What they’ve created is awesome. However, the outcome always looks something like this:

Lost In The Echo

Yes.

That is a watermelon jello shot in my hand. Definitely not worth crying or combusting over. Hilarious. However, to Linkin Park’s defense, they get it.

Here’s what happened when Mike Shinoda connected:

“I never put personal pictures up on it so… half the pictures were of dogs, landscapes, and random silly things,” he says. “It was hilarious to watch this video pull those pictures and see the characters in the video break down in tears over a picture of a ham sandwich.”

Touché, Mike. You win this round.

 Tracking the Runaways

Johannes and I now plan to step back from artist campaigns for a bit to build some scalable software. If you’d like to hear more about that, make sure you subscribe here.


[1] I also stole their rad card flipping avatar design to show when users entered and exited the vehicle.

[2] I recently upgraded to the shiny new Mac Book Pro with retina display and while it is incredible, it also presented countless problems while developing these apps. Mostly because browsers / apps haven’t really caught up to the technology.

 
44
Kudos
 
44
Kudos

Now read this

WebRTC Sprites Generator

Yes. The computer graphic, not the soda. Last weekend I traveled to Punta Del Diablo for a bit of code in the sun and to remotely participate in Music Hack Day Stockholm. As per usual, Johannes and I decided to build a video game,... Continue →