The Man in Blue

Fronteers 2010 - A conference for front-end developers

It's exactly 39 days until I'll be speaking in Amsterdam about the Renaissance of Browser Animation for Fronteers 2010, and I'm getting pretty excited about it. A large part of which is due to the fact that the venue looks absolutely incredible. Not only that, but the line-up looks incredible, Amsterdam looks incredible, and my beard's looking incredible.

My talk will be exploring the state of animation in browsers today; everything from HTML, to Canvas, SVG and Flash. It will touch on the performance, workflow, and accessibility of all these technologies and will hopefully give you an objective view of all your animation possibilities as you approach your next project.

If you're a front-end developer in Holland -- or Europe -- I highly suggest you spend a couple of days with Jeremy, Andy, Jina and all the others at Fronteers. I'm certain you'll come away inspired.

Mood Map - How happy is the world?

" />

Mood Map -- a visualisation of the world's mood

Data visualisation is a strange art. You almost have to approach it like a science.

When you begin, there's a huge mountain of data lying there. Opaque, impenetrable. In order to make sense of it you have to chance a guess; form a hypothesis. Once you have that hypothesis you have somewhere to begin; a way to start analysing your data. And it isn't till you've finished analysing it that you know whether there's anything worth visualising. It's one big fishing trip.

And so it was with Mood Map.

My hypothesis: Key events that occur in the real world would be reflected in people's communications (Twitter). When there was an earthquake there would be global empathy. When there was a world changing announcement, a global rejoicing.

My method: Every minute, sample the public timeline of Twitter for tweets with positive or negative emoticons. It's not a particularly foolproof way of measuring mood, but hey, I'm not a statistician or a text analysis specialist. Once I've got the tweets, geocode them and place them on a map, clustered according to volume and coloured according mood.

My conclusion: After gathering six months of data, monitoring world events, and analysing it all through my custom visualisation engine I've not discovered much. (Or maybe that means I have?) There's no empathy, no rejoicing. Everyone's pretty much wrapped up in themselves. (At least on Twitter <sarcasm>News Flash!</sarcasm>)

There's definitely no patterns I can discern on a global scale. You can see Mood Map at the time of the 2010 Haiti earthquake or the 2010 Chile earthquake. In both cases there's no discernible dent in global happiness, however it is possible to notice localised mood effects. For example there's a noticeable red dot in Poland when the Polish president died in a plane crash, and a smattering of unhappy Europeans while Eyjafjallajokull was erupting. But on the whole, the World stays at a steady 85 - 90% happiness day in day out.

I'll keep the data churning over for a while longer and see if any other patterns emerge, but for the moment it seems like it's best as a tool for spotting local (country-wide) mood fluctuations. If you take a look through the archives and spot something interesting, let me know!

One week of the world's happiness

" />

This is a video I made that visualises a week of the world's happiness, as calculated by analysing randomly sampled Twitter messages.

Vegetables As Typefaces

" />

What would vegetables look like as typefaces?

Makes as much sense to me as this one does.

Thanks to Grafisches Büro for the original.

"HTML5" versus Flash: Animation Benchmarking

" />

I've written before about why you shouldn't let your current toolset dictate what it is you create and I still firmly hold to that mantra.

Some of my more recent work has revolved heavily around animation (real-time, interactive motion graphics, to be precise). When approaching such a project I don't have any particular technology in mind, but I do have a very exacting idea of what it should look like and how it should behave. Based upon that idea I can then choose how I want to do it.

A system which relies heavily on animation must make that animation convincing in order for the audience to be immersed in it. Choppy frame rates and jerky motion can make it an easy decision to close a tab, so the thing I find myself struggling with the most is performance. I would so desperately love to use native browser technologies to produce some of this stuff, but after years of comprimising my vision to fit into the browser I decided to become a bit more technology agnostic and author projects in whatever offers the best experience. Which -- on the Web -- means Flash.

In the couple of years since I made that decision though, browsers have taken huge strides in their ability to render graphics and animation. With HTML5 on the cusp of the mainstream, I decided to take another look at the technologies I'd shelved and see just how they perform against Flash.

Short version: Flash still wins, but browsers are catching up.

Long version: At the moment I can see 3 viable alternatives to Flash for animation: HTML, Canvas and SVG. Only Canvas is strictly HTML5, but since everyone's getting all hot about making web apps on the iPad with "HTML5" I thought I'd lump them all under that buzzword.

In order to test them against Flash I wrote a particle engine animation which is pretty easily translatable amongst all four technologies. They use roughly the same animation techniques, calculations, timers, etc. This allows us to get a framerate for each technology that we can compare with the others.

Tests for each of the technologies are here:

... and for each test you can vary the number of particles using a "particles" CGI parameter, like so:

You can also turn shadows on and off:

I ran each technology through a series of variations: 250, 500, 1000, 2000 & 4000 particles; different browsers; different OSes. And recorded the results. You can see the raw data at http://spreadsheets.google.com/ccc?key=0AuE1_QN_mm71dGlKaC16MmE4ZFRhXzVXQjcyUElpWGc&hl=en.

Although it's by no means scientific and I'm sure there's much more robust ways to benchmark this stuff, I began to see a general pattern emerging, one which is typified by my results for Firefox 3.6 on OS X:

Here are graphs of the other browser/OS combinations:

They all follow pretty much the same pattern: Flash on top, followed by Canvas, then HTML, then SVG; with the exception of Safari on OS X, where -- at lower numbers of particles -- the native browser technologies hold their own, but still degenerate in performance for higher numbers of particles.

It did actually surprise me how performant Canvas is and it also surprised me how crappy SVG is. Given these findings I'll probably again start using native browser technologies for less strenuous motion graphics (most probably using Canvas, even though interactivity in Canvas is a PITA). But for any heavy lifting Flash is still the go for the moment (depending upon its availability for the client environment).

If you'd like to run the benchmarks yourself and check the numbers, feel free to tell me your figures in the comments below. If you'd like to check out the code for all the tests, you can download them in one big ZIP.

Update (23/3/2010): For those whose browsers crash on the Flash test I have a feeling that the flood of setInterval calls might be causing it, so you can try the versions of the tests that are rate-limited to 25 FPS:

Update (19/5/2010): I just had word from Adobe that a bug in a version of their player will cause the Flash benchmark test to crash in some browsers. Upgrading to the latest player (10,0,45,2 or 10,1) should fix it.

A Missive to the iPad Haters

" />

I wouldn't call myself an Apple fanboy, but I like to think that I've mellowed a little bit in my old(ish) age. The face melting vitriol which I normally reserved for shiny Web 2.0 sites in beta invitation mode has been funnelled into more productive pursuits, and I feel like I'm ready to approach Apple product launches in an appropriately objective state of mind.

I wasn't excited about the launch of an Apple tablet; the fervor with which the media and wannabe tech pundits prognosticated about the exact form of the second (third, fourth?) coming of Jobs always had me puzzled. If you could predict so much about it, why was it going to be so revolutionary? It's no wonder that the product itself was a letdown -- no physically producible product could ever have met your expectations.

But now that it's out, I can actually say that I'm excited.

I didn't think about it too much before, but seeing the iPad immediately made me realise it: we're at one of -- possibly the most -- exciting points in time since the induction of interaction design. And it doesn't even really matter what the product that Steve Jobs showed on Wednesday is like.

The iPad could be a complete failure (though I think that's almost impossible given Apple's current pedigree), but it's guaranteed that within the next two years consumer touch computing will become ubiquitous (if the iPhone hasn't already). It could be under the Apple brand or it could be someone else's, but either way that ubiquity is what has gotten me excited.

The iPhone gave us a taste of what a touch computing world could be like, but using your index finger to jack into cyberspace is the equivalent of jabbing a piano with a stick. Microsoft's Surface gave us the first inkling of what full touch computing could be like, but the fact that you could only use one if you happened to stroll past it at a conference booth has shown that they totally dropped the ball on that one. Not to mention the fact that all applications designed for the Surface were purely there to show off touch interaction, not make something useful out of it.

The iPad, then, is the first real multi-touch platform where we get to have a go. Where developers and designers get to actually make something that people can touch, stroke, fling, twist and flick. There's still so much of this area that has yet to be explored and if you were hoping for Apple to drop a fully formed <insert revolutionary consumer gadget here> into your lap, then you totally missed the point.

The iPad will be what we make of it. And that's what Apple is counting on.

17 Years Of Soulful Drum & Bass

" />

Download 17 Years Of Soulful Drum & Bass (100MB MP3)

Drum & bass is often associated with an aggressive, intensely electronic sound; but its draw for me has always been the promise of drum & bass as the new jazz, the new soul.

Lush melodies, warm synthesizers, intricate beats, double bass and soulful vocals -- these are all the things which I want to hear from my drum & bass. To commemorate a new decade, I decided to look back over my listening history, pick out my favourite soulful drum & bass tracks and put them into a DJ mix.

If you've never listened to (or liked) drum & bass before, give the mix a listen. It's slightly less frenetic than my 139 Mix Tape, but you might be pleasantly surprised. For existing fans of drum & bass, all you have to do is sit back and enjoy 24 tracks spanning 1993 to 2010.

Tracklisting

LTJ Bukem - Horizons [1996]
Atlantic Connection - The Real Thing [2008]
Adam F - Circles [1997]
Lenny Fontana Presents Black Sun - Spread Love (Nu:Tone Remix) [2003]
Jenna G - In Love [2006]
Jonny L - Oh Yeah [2008]
Craggz & Parallel Forces - Love Insane [2005]
Blame - Stay Forever [2008]
Sub Focus - Follow The Light [2009]
Future Prophecies - September [2004]
Michael Jackson - Human Nature (Makoto Remix) [2006]
Chase & Status - Take Me Away [2008]
Fugees - Ready Or Not (DJ Zinc Remix) [1996]
Apollo Two - Atlantis (LTJ Bukem Remix) [1993]
High Contrast - Racing Green [2004]
Shapeshifter - Bring Change [2006]
Shy FX & T Power - Shake Ur Body [2001]
Alix Perez - Forsaken [2009]
Roni Size & DJ Die - It's A Jazz Thing (Utah Jazz Remix) [2006]
Goldie - Timeless [1994]
Zarif & Danny Byrd - California (Dub Version) [2009]
London Elektricity - The Great Drum+Bass Swindle [2003]
Omni Trio - Renegade Snares (High Contrast Remix) [2003]
Brookes Brothers - Tear You Down [2008]

Web Directions & Australian Web Week

" />

October's a big month for the 4,399,722 residents of Sydney. They're going to be hosting the fourth Web Directions South conference as well as the inaugural Australian Web Week. Web Directions is gradually turning into the antipodean SXSW.

This year I'm extremely honoured to be playing my biggest (most daunting, nerve wracking, spine chilling, palate drying, brow sweating) part in Web Directions to date -- closing keynote on day 1. I'll be telling the tale of my involvement in Google Wave and what it's like to be a part of one of the most exciting web applications of recent years. I'm so excited! (And I just wet my pants with nervousness)

Alongside Web Directions, you also shouldn't forget that you've only got five short days until nominations close for the McFarlane Prize for excellence in Australian web design. So, if you have a top class Australian website that you worked on between September 1st 2008 and August 31st 2009, then let them know about it!

If your boss is too cheap to shell out for admission to Web Directions and you only worked on craptacular websites this year, you still have no excuse not to get involved with the festivities, as Australian Web Week is offering up a host of free events which you can get moderately drunk at. I'm already having trouble choosing which ones I'm going to have to miss out on.

The 139 tracklisting

" />

The 139 Mix Tape has had a great response -- particularly from the people in my car -- which is making me reconsider my ten year estimate for volume 2.

Just in case you're not into MP3s, I've also uploaded it to SoundCloud where you can stream it from within your browser.

And ... (drumroll) here's the tracklisting for those of you who were playing at home. Seems like "Rhythm is a Dancer" was the most controversial track on there :P

Chemical Brothers - Block Rockin' Beats
Beastie Boys - Ch-check It Out
Prodigy - Smack My Bitch Up
Major Lazer - Pon De Floor
Adam Freeland - We Want Your Soul
Mason - Exceeder
Stanton Warriors - Pop Ya Cork
Eric B & Rakim - I Know You Got Soul
Timo Maas - Shifter
Beastie Boys - Hey Ladies
The Wiseguys - Ooh La La
Prince - Kiss
NY Connection - Bless The Funk
Justin Timberlake - Like I Love You
Blur - Song 2
Pharell - Can I Have It Like That
KRS One - Sound Of Da Police
Beck - Loser
Blur - Girls & Boys
Arika Bambaata - Just Get Up
Daft Punk - Around The World
Incredible Bongo Band - Apache
The White Stripes - Seven Nation Army
LCD Soundsystem - Daft Punk Is Playing At My House
Michael Jackson - Wanna Be Starting Something
Placebo - English Summer (Freelance Hellraiser Remix)
Spiller - Groovejet
Crazy Penis - There's A Better Place
The Avalanches - A Different Feeling
Bjork - Hyperballad (Nick Galea 4 To The Floor Mix)
Underworld - Dark & Long
Busta Rhymes - Dangerous
Scratch Massive - Girls On Top (Breaks Version)
Rui Da Silva - Touch Me
Massive Attack & Mos Def - I Against I
Thievery Corporation - Air Batucada
Chemical Brothers - Shake Break Bounce
DJ Qbert - Street Fighter vs. Mortal Kombat
Moby - In My Heart
DJ Krush - Toh Sui
Infusion - The Careless Kind (Naum Gabo Remix)
Grandmaster Flash - The Message
Moby - Go (Trentemoller Remix)
Perasma - Swing 2 Harmony
Stevie Nicks - Edge of Seventeen
Red Hot Chilli Peppers - Can't Stop
Bag Raiders - Fun Punch
Arctic Monkeys - A Certain Romance
Alex Gopher - Party People
Stevie Wonder - Superstition
Fake Blood - Mars
Groove Armada - I See You Baby
The Wiseguys - Start The Commotion
Mobb Deep - Got It Twisted
Gorillaz - Feel Good Inc (Stanton Warriors Remix)
Daft Punk - Aerodynamic
LL Cool J - Feel The Beat
Justice - Phantom Part 2 (Soulwax Remix)
Mary J Blige - Work That
The Knife - Silent Shout
UNKLE - Reign (UNKLE Reconstruction)
DJ Krush - Beyond Raging Waves
DJ Shadow - Organ Donor
Force Mass Motion - Out Of It
Eazy E - Hittin' Switches
Fatboy Slim - Song For Lindy
DJ Shadow - Walkie Talkie
Scott Grooves - Mothership Reconnection (Daft Punk Remix)
Kim Carnes - Bette Davis Eyes
Daft Punk - Oh Yeah
MSTRKRFT - Bounce (A-Trak Remix)
Friendly - Who Is Friendly
Dizze Rascal - Old Skewl
Eurythmics - Sweet Dreams
Sugarhill Gang - 8th Wonder
Stetsasonic - Talkin' All That Jazz
Freestylers - Don't Stop
The Ojays - For The Love Of Money
Sugarhill Gang - Rapper's Delight
Mr Oizo - Two Takes It
David Bowie & Queen - Under Pressure
Eine Kleine Nacht Musik - La Serenissima
Madonna - Hung Up
Isaac Hayes - Run Fay Run
Steve Lawler - Courses For Horses
Chemical Brothers - Leave Home
New Order - Confusion (Pump Panel Reconstruction)
Hot Chip - Ready For The Floor
Soulwax - NY Lipps
Fedde Le Grand - Put Your Hands Up For Detroit
Lipps, Inc. - Funkytown
The Ting Tings - Shut Up And Let Me Go
Groove Armada - Easy
The Cure - Love Cats
A Tribe Called Quest - Can I Kick It
Peter, Bjorn & John - Let's Call It Off (Girl Talk Remix)
Beastie Boys - Body Movin'
Stone Roses - Fool's Gold
Moby - Bodyrock
The Pussycat Dolls - Don't Cha
Incredible Bongo Band - Slightly Reminiscent of Topsy
Nalin & Kane - Beachball
The Killers - All These Things That I've Done
Nalin & Kane - Beachball (South Beach Vacation Mix)
Lykke Li - I'm Good I'm Gone (Black Kids Remix)
New Order - Crystal (Lee Coombs Remix)
4 Strings - Into The Night
Depeche Mode - Only When I Lose Myself
The Kills - Cheap And Cheerful (Fake Blood Remix)
Coburn - We Interrupt This Program (Stanton Warriors Mix)
Chemical Brothers - Life Is Sweet
Basement Jaxx - Where's Your Head At
John Williams - The Imperial March (Darth Vader's Theme)
V/A - Star Wars Motion Picture
The Doors - Break On Through
The Bangles - Walk Like An Egyptian
LCD Soundsystem - Disco Infiltrator
Bloc Party - One More Chance
Destiny's Child - Lose My Breath
Noel Sanger - Designs (Remix)
Snap - Rhythm Is A Dancer
Liquid - Sweet Harmony
Salt N Pepa - Push It
Run DMC - King Of Rock
Afrika Bambaata - Funky Heroes
Snoop Dogg - Drop It Like It's Hot
Jay-Z - Roc Boys
Vanilla Ice - Ice Ice Baby
De La Soul - Oooh
Ultramganetic MCs - Poppa Large
Usher - Yeah
Kelis - Milkshake
Fatman Scoop - Get Ya Hands Up
Chemical Brothers - Galvanize
Jungle Brothers - What You Waiting For
Leftfield - Phat Planet
Underworld - Born Slippy
Terry Grant - I'll Kill You (Luke Chable Mix)
The Knife - Heartbeats (Rex The Dog Remix)

The 139 Mix Tape

" />

Download The 139 Mix Tape (64MB MP3)

Ever since installing my very first music production program (which, for posterity, I believe was Impulse Tracker) I've wanted to create the ultimate mix; a kind of audio anthology that uniquely represents my musical DNA.

Two years ago I started that mix and yesterday I finished it. (With about a 19 month sabbatical)

Obviously, I have more favourite tunes than I could fit onto fifty CDs, so it was no easy task whittling them down to the perfect balance of 80s cheese and bass rattling beats. In the end 139 tracks made it into a 46 minute mix. A mashup of everything from The Chemical Brothers to The Cure, Stone Roses to Snoop Dogg, and Fake Blood to Pharrell.

Download it. Listen. Get to know me. Maybe dance a bit.

If you like it I might try it again in ten years time.

First person to correctly list all 139 songs gets my 12" LP of Rick Astley's seminal album "Whenever You Need Somebody". (Unfortunately he didn't make the cut)

Update (2009-08-14) I've written up the tracklisting.