BlogmyQuery – BMQ

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.

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:

• http://themaninblue.com/experiment/AnimationBenchmark/html/
• http://themaninblue.com/experiment/AnimationBenchmark/canvas/
• http://themaninblue.com/experiment/AnimationBenchmark/svg/
• http://themaninblue.com/experiment/AnimationBenchmark/flash/

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

• http://themaninblue.com/experiment/AnimationBenchmark/canvas/?particles=250
• http://themaninblue.com/experiment/AnimationBenchmark/canvas/?particles=500
• http://themaninblue.com/experiment/AnimationBenchmark/canvas/?particles=1000

You can also turn shadows on and off:

• http://themaninblue.com/experiment/AnimationBenchmark/canvas/?particles=500&shadows=true
• http://themaninblue.com/experiment/AnimationBenchmark/svg/?particles=500&shadows=true
• http://themaninblue.com/experiment/AnimationBenchmark/flash/?particles=500&shadows=true

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:

• Safari 4.0.3, OS X
• Firefox 3.6, Windows XP
• Chrome 4.0.249.89, Windows XP
• Internet Explorer 8, Windows XP

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:

• http://themaninblue.com/experiment/AnimationBenchmark/25fps/html/
• http://themaninblue.com/experiment/AnimationBenchmark/25fps/canvas/
• http://themaninblue.com/experiment/AnimationBenchmark/25fps/svg/
• http://themaninblue.com/experiment/AnimationBenchmark/25fps/flash/

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.

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.

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

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!