BlogmyQuery – BMQ

One of the advantages of having 2 billion people on the Internet is that every so often one of them sends you something for free. In this case, the kind people at Hopscotch sent me a couple of passes to a preview screening of Source Code. (And only briefly mentioned, in a passing, fleeting manner that I might -- if the right mood struck me -- want to blog about it)

When I sat down in the cinema last week to watch the movie, I was immediately on the back foot when trying to objectively assess it. For the past 6 months I've pretty much compared every movie I've seen to Inception and found them all wanting. It's certainly one of my favourite movies of the last 5 years. The reason it so affected my objectivity in this case is because Source Code has been labelled as "Inception, but better". Now that's pretty much sacrilege in my books, so I naturally wanted it to suck.

Although the two movies have some similar themes -- alternate realities, immersion in technology, subjective perceptions -- they are quite different films. For me, Inception felt like a brilliant idea that was taken to its furthest extreme, each scene taking you further down the rabbit hole. In Source Code I feel like a brilliant idea has been treated in a shallow manner. It's like Inception was a cult film that had been carefully crafted for mainstream appeal; whereas Source Code felt like a cult film that had been compromised for mainstream appeal.

Other comparisons that sprang to mind as I was watching Source Code included Groundhog Day and Quantum Leap (which got a cheeky nod in the movie via the inclusion of Scott Bakula as a voice actor), and there's definitely elements of Cyberpunk in there -- the digital environments of Neuromancer and Snowcrash spring to mind.

Aside from my bias towards Inception, there's also another admission I'll make that will get 50% of you readers offside. It is this: I didn't really like Moon. (The director -- Duncan Jones' -- previous film) The problem I have with Moon is the same one I have with Source Code, namely that it peaks too early. Key points of the plot are made aware to you halfway through the movie and from there on out it feels like you're just watching a tired story play out to its inevitable conclusion. Great idea. Poor structure.

My final conclusion on this film (based on my own experience and from observing others) is that if you liked Inception you'll probably like this less, and if you didn't like Inception then you'll probably like this more. Either way, it's still worth seeing, but depending on which camp you sit in you might want to save it for the couch.

It was with 2 days notice that the Sydney Festival informed me that they'd like some way of getting tweets onto six giant screens (each roughly the size of 240 computer monitors) that were going to be viewed by hundreds of thousands of people. So sure, how could I say no?

With such little time to burn I decided to adapt the code from Visible Tweets into a format that would be suitable for what they had in mind -- live video stream above, tweets scrolling below. In addition to the design changes, there was also the request that all tweets be moderated. I'm not a big fan of moderated tweet streams at an event because inevitably the moderator can't keep up or forgets to add tweets to the stream and you end up with a stale, lifeless display. (Sure, filter out dirty words, but there's plenty of ways to do that)

Anyway, moderation was required, and with the aforementioned constraints we didn't really have time to create an entire moderation system, so we went quick and dirty -- pull all tweets from a specific account and use retweets from that account as the signal to put tweets from other people onto the screen. It worked pretty well. This workflow had the added bonus that everyone with access to that account could retweet interesting tweets using their existing Twitter client. As they were spending most of the festival running around madly with just their mobile phones, this was quite handy.

It was quite interesting working on an event of this scale and seeing the effort that goes on behind the scenes. For Festival First Night they had well over 200 people doing stage management, crowd control, logistics, production and a whole host of other stuff. My main concern was with the audio visual systems that we'd by tying a laptop into.

I've never dealt with a fully produced A/V setup before, so it was amazing to walk into the producer's trailer and see racks of processing equipment and big monitors that combined live camera feeds, pre-taped advertisements and our little Twitter visualisation into what the audience sees out on stage.

In order for the visualisation to appear in combination with live video we used a chroma key to separate out the background. This meant that I wrote my Flash app to sit on an eye-searingly bright green background and the A/V guys masked out that colour and put live video underneath. It worked amazingly smoothly, and with full alpha transparency!

With virtually no time for testing it was inevitable that a few hiccups would strike on the day, but I'm kind of used to being huddled out the back of a stage furiously trying to debug stuff that's happening on the screen right now. I'll spare you the details and offer two items of advice: 1. Never rely on an Internet connection at a public event; 2. Throttle your API calls.

But those are all memories that are easy to reminisce over when you're sitting on the grass of the Domain watching tweets flow across the screen. And to make it all seem so much smoother than it was, I've compiled a video of the outcome, which you can see below. At the end of the day, all that really matters is happy organisers, and a happy audience.

I'm a huge fan of dvdp's work. The limited colour palette and hypnotic repetition make for a very lost afternoon.

When I saw his latest post I just couldn't resist remixing it, so here's the result:

Made in Processing.

See the WDS10 Title Sequence

There's nothing that has quite the ability to sharpen one's creative process like a ridiculous deadline. In this case a 72-hour deadline to complete the opening titles for the Web Directions South conference -- all the way from creative brainstorming to seeing it on-screen in front of 600 people.

Because of the nature of the conference and the talk I gave on browser animation the previous Friday, I decided not to take the easy option (by doing it in After Effects) and instead opted for the much more perilous path of HTML5 & CSS3. 2458 lines of JavaScript and 841 lines of CSS later, I had a title sequence I was pretty happy with.

Although I don't encourage you to look at the code, I'm sure some people will. Timeline animation code is never the prettiest (because it has to be so sequential) and three late nights of frantic coding make it doubly so, but here are a few clues that might help you navigate the morass of functions and variables.

• There's no magic used to synchronise visuals with audio -- I manually went through and timecoded the specific spots in the song I wanted to sync with, then got the JavaScript to trigger animation at those points.
• Although HTML5 audio has a timeupdate event that fires regularly to tell you where the audio is up to, it doesn't have great accuracy (it fires about once every 300 milliseconds). So, I had to write my own tick() function which manually checks the audio's currentTime and keeps the animation synchronised with the sound.
• I wrote this specifically for Chrome (lots of -webkit prefixes), as it seemed to have the highest frame rate and smoothest animation. Alarmingly, Safari and Chrome nightlies both exhibited really bad up-scaling and font anti-aliasing when using CSS transforms and Chrome showed some really bad animation artifacts. Hopefully these get fixed before they make it into stable builds.
• Animating the opacity of text can be a little clunky, particularly in the last 10%. For some reason when you animate to 100% opacity the browser does weird (strong) anti-aliasing on the text just as it hits 100%; to avoid this I only animate to 90% opacity.
• It's amazing how effective a 2 pixel high div is at emulating a line (particularly when you rotate it using CSS transforms).
• Magic numbers produce a lot of magic.

For me, the code is kind of redundant -- it was just what was necessary to produce what I saw in my head. The great thing about it is that it didn't provide much of a barrier to doing so; there were relatively few spots where I had to compromise my creative vision for what was possible with the tools I had chosen.

Thanks to Maxine and John for providing the giant screen space which inspired this piece, and thanks also for the "sharpened creative process" which helped drive me :P

The music used is Hans Zimmer - Time (We Plants Are Happy Plants Remix)

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.