Lincoln Anderson / Design / November 1st, 2010

The Need for Speed: A Race to 3:52 Story

me being pumped
Pictured: me being pumped

352 Media Group has started a new tradition called “The Race to 3:52”, wherein each employee works on something they normally wouldn’t be able to work on during business hours. The event takes place over a 24 hour period, and has only two rules: you must do something that helps the company, a client, or your own profession, and you must do something that inspires you. This isn’t just for web designers and web programmers… this is a broad set of rules meant to engage us and empower all of us to enjoy our field and share our excitement with our colleagues. We were pumped!

Immediately, a few guys started talking about the Microsoft Surface and game development. Peter Brownstein (a programmer at 352) and I have created a few applications for the Surface already, so we know our way around the device and the WPF framework. However, we haven’t yet had a chance to experiment with the device, being mostly focused on business applications. Evan Blake (business analyst and seasoned poker player) and Sean Jeng (Silverlight programmer and hardcore gamer) we recruited to help out with the ideation and creation of… whatever it was we were going to build!

Being gamers, we toyed with the idea of re-making Race for the Galaxy (a strategic card game) or Castle Ravenloft (a Dungeons & Dragons style board game) on the Surface. However, we quickly realized that 24 hours would not be enough time for a finished product. Instead, we decided to focus on a common component of these and other games: a deck of cards. Many games utilize a deck of cards, and translating the natural physics of the cards into a touchable, digital interface could be a project in itself – one which could be applied to many games, if done correctly.

We started with the most basic concept, creating an XML data file that would define a deck. This data file contains information such as the suit and value of each card, what each card looks like, and so on. This data would later be exposed to the game developer, so that no matter what type of game was being built, very specific properties of each card could be made available. It’s structured in such a way that a developer can create a complex set of trading cards just as easily as a traditional 52-card deck.

some sample data for a single deck type
Sample data for a single deck type

To support this data, we created a “playing card” control. This card is is a visual object which can be dragged and flipped with your fingers. Not only would each card mirror the data in the XML file, but it would have states and animations for flipping the card front-to-back. Next we focused on the concepts of “stacks” of cards. In many games, cards are almost always grouped in some way — whether they be in your hand, in a discard pile, or on the table arranged by suit or value. We built these “stacks” as collections of cards which could be spread out, flipped or moved by the user with several hand gestures that the Microsoft Surface provides access to.

an example card deck from our prototype
An example card deck from our prototype (click to view)

At this point, the basics of the card manipulations are working. Using simple, natural gestures, you can deal cards from the deck, group them into piles, flip them over and throw them around. A simple game such as poker or gin rummy can be played (as long as all the players agree on the rules!). The next step would be for a developer to take the toolset we’ve built and add it into their application, extending functionality with extra rules and designs that are specific to their game. We’ll work on that during the next race. 🙂

pictured: me waiting for programmers
pictured: me waiting for programmers

As you can imagine, there was a great deal of programming effort going into the card deck development, and so I (a mere designer) found myself looking for another side project to play with. Well, seeing as I’ve spent the better part of the last few years working with technologies like Microsoft Silverlight, WPF, Surface and Windows Phone 7, my HTML coding skill have become a bit… rusty. Yeah, that’s putting it mildly. (What can I say, once you get a taste of Microsoft’s XAML, it’s hard to go back to HTML.)

At the same time, I recently saw a really clever design on designmadeingermany.de, which showcases some of the amazing things that designers can do with HTML and CSS if they are given some creative freedom. This is a clean design that is an absolute pleasure to read. And I can’t even read it; it’s in German! What inspired me the most was the layering on the top graphic. There are so many rich media technologies available these days (such as Microsoft Silverlight and Adobe Flash) that the inspired crafting of HTML has become a bit of a lost art.

So I wanted to code something that had a similar mechanic but would communicate an idea or a message as you scroll the page. Well in fact, if you watch the graphic in the link above, you can see the chaotic scene of animals become an ordered stacking as they form a sort of cheerleader-style pyramid in the background. And that is the theme of the issue – “Order” – which I only discovered after translating the word “Ordnung” on Microsoft Translator.

At any rate, I wanted to play with two concepts – the alteration of a message as you scroll the browser window, and the passage of time. My first experiment uses some subtle layering to actually change the content of the page as you near the bottom. Frankly, I’m not sure what the significance of the writing is… but I needed to write something, and people seemed to enjoy this one. 🙂

my first experiment
My first experiment (click to view)

My second experiment is a little choppy because it uses transparent PNG layering and an absolutely enormous JPEG image in the background. But you can see the effect: there is a scene of the sky, and as you scroll, the sun rises, the sky turns from pink to blue, and then to black as the sun sets and the moon rises. This is very similar to a metaphorical concept I had imagined for the launch of Microsoft Expression’s product line. The sun would rise with some links to “getting started” type content, and the stars would come out with some additional resources to take you off-site. In the end, it turned out not to be the optimal solution for the product launch, but maybe we’ll get a chance to use it somewhere else. I’ll just need one of the brilliant CSS designers at 352 to do something with the images… maybe turn the sky into a big CSS background gradient?

my second experiment
My second experiment (click to view)

Please excuse any blunders in my code… I’ve confirmed what all coders seem to know: converting a pure concept into functioning HTML is a major challenge!

So I hope you found something interesting about these designs. All in all, the Race to 3:52 was a blast. We learned a ton, and we can’t wait to do it again!