Overview

Today’s online audiences have moved from traditional and passive viewing behaviours to more interactive and self-discovery ones.

This truth is what led us to develop an online experience in HTML 5 that isn’t just a click and drag as we’re used to see in the past; it’s a journey of discovery that encourages the audience to shape our protagonist Brandon’s world. Our audience are invited to become an extension of award-winning director of Shaun of the Dead and Hot Fuzz, Edgar Wright and renowned Marvel and Lucasfilm illustrator, Tommy Lee Edwards, by suggesting the characters, the plot and even entire scenes to help shape Brandon’s story.

For the more eagle-eyed, we have used features true to HTML5 and IE9 to provide hidden gems and secret ways for the audience to interact within each episode.

With the power of HTML5 we wanted to blend the artistry of filmmaking with the beauty of the web to create something that really was a rich and immersive experience, breaking boundaries and making people think differently about what an animated story on the web could be.

This section of the site will provide information about how we brought The Random Adventures of Brandon Generator to life:

It all started with a script…
An illustrated story
Building Brandon’s World
It all started with a script…
Edgar Wright
I first heard about this project in November last year. The brief was that it was to be a ‘crowd sourced animated film’ to be illustrated and animated by Tommy Lee Edwards. This intrigued me on more than a few levels; I was a fan of Tommy’s art, I had done some animation over the years within my own projects, but never a comic book. And finally having had much communication with people on the internet all over the world, I liked the idea of collaborating with them.

When I met with Tommy, Microsoft, the creative team at 3 Monkeys and the boffins at LBi, I soon came up with my idea, which was a semi autobiographical one.

Last year I had written my first solo script since I was a teenager and even though I was happy with the end result, it was a real struggle to get to the finish line. So this inspired me to create the character of Brandon Generator and the central premise that a would be writer / comic book artist with a serious creative block, wakes up after a blackout to find all his work done for him. But who left the mystery contributions? That was up to you.

I liked the idea of leaving a blinking cursor at the end of the episode that invited the viewers to contribute. I suggested that three medias be used, artwork, prose and voice messages.

Brandon is basically me. He drinks too much espresso. He’s frequently chained to a desk. He finds the glowing white of a blank document more foreboding that a blank sheet of paper. He has a shaft of light that hits his desk at 10.30am that he deems Dracula O’Clock. He enjoys using a thesaurus and indeed saying the word thesaurus. And he is very easily distracted.

So I liked romanticising the idea of writers block and then creating an internet head trip where the users become co-writers, where they can help Brandon or punish him.

When I was writing solo, I would look for random injections to inspire; music, the newpapers, the internet. And this project is no different.

I wrote the first episode and wrote notes about the images I wanted to see under each ‘frame’ for Tommy Lee & the team to illustrate and animate. Much like comic books are written. I would try and break up the script into specific frames and visuals.

I then contacted Julian Barratt to voice Brandon. I first worked with him in 1996 when he played the tortured artist Victor is micro cult show ‘Asylum’. He does a great tortured artist and makes the episodes feel like weird bedtime stories.

Finally I reached out to David Holmes, who I was a big fan of and who wanted to work with me. He was in the middle of a new project called Unloved, which fit perfectly for this.

We achieved all this is a variety of different timezones, Tommy in Carolina, Julian in London, Holmes in LA and me somewhere between them all.

The first episode had thousands of responses. 68 of which are in the second episode. We’ve used prose, art and voicemails within the piece. I’m so excited for people to see it.

I think I pushed Tommy and Scott Benson, the other creative wizard behind the animation, to their limit of sleep deprivation on the first episode. And even further on the second episode. But I think we agree it’s all worth it. The results are more beautiful than I could have imagined.

We’re only halfway through the journey of Brandon Journey, but it’s been a worthy and inspiring rabbit hole to disappear into.

And that’s down to some very talented collaborators, many of whom are out there.

– Edgar Wright

An illustrated story
Tommy Lee Edwards
I don’t refer to The Random Adventures of Brandon Generator as a comic. It’s not really a “motion-comic” either. Motion comics have been around for a while now. Usually they’re not very good because the content is cobbled together from materials created for print. So the challenge I accepted from Microsoft was to make something beautiful for the web. To “elevate” how stories could be told online. I think we’ve done it. My team and I have since been calling Brandon Generator an “interactive online animated graphic story”. It’s kind of hard to label. That’s usually a good thing, though, because it means you’re doing something original.

I get very bored doing one thing for too long. That’s partly why I work in comics, games, film, animation, books, and advertising. Brandon Generator combines a little bit of all of these things for me, so I got excited when this project started percolating last summer. This whole thing would not exist without the internet. Not only is Brandon Generator co-created by the online community’s input, the whole process of creating the finished project is quite virtual. I live in rural North Carolina, where I storyboard, illustrate, design, and direct the animation for Brandon Generator. My CG modeling team (Don Cameron & Daryl Bartley) are in Los Angeles. Scott Benson handles all the animation and composite After Effects work up in Pittsburg. But through using skype, our smart phones, email, and various file-sharing methods, the four of us work hand-in-hand to create a seven or eight minute animated film. Edgar spends most of his time between Los Angeles and London. Same with composer David Holmes I think. Al the sound guy is British, but I’m actually not sure where he is at the moment. LBi builds the Brandon Generator website and handles all the tech from London. It’s quite the little global effort.

As I write this, we are wrapping up episode two of Brandon Generator. I’m extremely proud of what we’ve done with all of the audience inspiration. On top of that, my small team and I have created at least five times the amount of content we had on episode one. Edgar’s writing, Julian’s narration, and David’s music bring Brandon to life and have created a really stunning piece of work.

Someone asked me what my favorite shot is from Brandon Generator #2. I seriously cannot decide. I like the monster. I like that Brandon gets out of his flat and into the “world”. More than anything, though, I want to experience the excitement of the user when they see what Edgar and I have done with their submitted prose, sketches, and audio recordings. I think it’s safe to say that this chapter will well exceed everybody’s expectations.
-TLE

Tommy Lee Edwards: http://www.tommyleeedwards.com
Scott Benson: http://www.bombsfall.com/
Building Brandon’s World
HTML 5
When we first heard about some of the ideas that Edgar, Tommy and the LBi creative team were introducing to Brandon Generator we knew that this was going to be an exciting challenge to really push the limits of HTML5 and IE9. This was a great opportunity for the developers to use HTML5 technologies to produce a high quality production for the web and mobile experience.

During our early brainstorming and prototyping sessions we knew IE9 supported quite a few useful HTML5 elements (such as and

The LBi development team have described below some of the development techniques and features that have helped make the vision of Brandon Generator come to life.

Making a menu dynamic with CSS3
Episodes Menu
With the arrival of IE9 developers get to make use of a range of new front-end capabilities including CSS3 transforms – which help to create impressive experiences without using vast reams of code or causing a big strain on the browser. This is helped even more so by IE9’s hardware acceleration capabilities, which moves all graphics and text rendering from the CPU to the graphics card to allow faster graphics rendering. The episodes menu of Brandon Generator uses the CSS3 ‘rotate’ transform operation to tilt the content by 15 degrees. This simple change is enough to surprise users with an impressive new experience, and shows how new CSS3 features can be used to produce very effective results.

How to sync your code with an HTML5 video
Monsters
For Episode 2 of Brandon Generator we knew we wanted to let the user interact with the video itself, so we created a JavaScript file called ‘timeline.js’ to delegate which effects should be applied and when. This is achieved by playing the episode video in an HTML5

Timeline.js keeps track of the video’s state by listening to the events ‘canPlay’, ‘play’, ‘pause’, ‘stop’ and ‘finished’. It tracks where the video has reached by polling ‘currentTime’, and firing functions once the video has reached the correct point.

Architecting a JavaScript application
Backbone.js
Backbone.js is a client side JavaScript MVC framework. We use it to instantiate views, which handle interaction with the DOM and models which handle validation and interaction with the data services. It is uses an extensible module pattern to enable something akin to class inheritance in Java. This means we achieve a high level of code re-use and our code remains consistent between developers. Backbone also handles our URL routing, enabling us to serve a complete, self-contained JavaScript application.

Manipulating HTML5 videos, pixel by pixel
Bleach Out Effect
On Brandon Generator Episode 2 we added a ‘bleach out’ effect into the video itself, so the user can interact with the video. This makes use of the new HTML5 Canvas feature, combined with HTML5 Video, which allows us to manipulate pixel data with JavaScript in real time.

HTML5 doesn’t allow us to modify pixels directly within a Video element, but it does allow us to grab all the pixels in a single video frame, and to paste these into a Canvas element. Once in the canvas, we can manipulate any pixel we like. In this case, the video is copied frame by frame into a canvas, then a transparent spot is created in this new image, based on where the user’s mouse is positioned. These mouse positions are saved to an array and redrawn with every frame, leaving a trail of circles, which all grow over time.

Experiences with HTML5 local storage
HTML5 Local Storage
HTML5’s new ‘Local Storage’ feature greatly simplifies the process of setting persistent data on the user’s browser that can be accessed across different sessions. In the past cookies have been used for this purpose, but these have proved cumbersome for developers to use:

The below examples of cookies code is taken from QuirksMode: http://www.quirksmode.org/js/cookies.html

codesource
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = “; expires=”+date.toGMTString();
}
else var expires = “”;
document.cookie = name+”=”+value+expires+”; path=/”;
}

function readCookie(name) {
var nameEQ = name + “=”;
var ca = document.cookie.split(‘;’);
for(var i=0;i < ca.length;i++) { var c = ca[i]; while (c.charAt(0)==' ') c = c.substring(1,c.length); if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length); } return null; } function eraseCookie(name) { createCookie(name,"",-1); } createCookie("userName", "brandon", 100); var userName = readCookie("userName"); The equivalent code using HTML5 Local Storage: codesource // Set value; localStorage.userName = "brandon"; // Get value; var userName = localStorage.userName; In Brandon Generator we have used Local Storage so that when the user hides a notice (such as the information on IE9 pinning) they will not see it when visiting the site again. We also utilised this feature on the 'Teaser' so the user could enter their name and it would always appear in the site's subtitle. Stay up to date with Pinning Pinning A unique feature of IE9 coupled with Windows 7 is the ability to pin a site to your taskbar. For Brandon Generator, we have created a hi-res favicon, enabled custom Jump Lists and provided notifications to keep IE9/Windows 7 user's up to date. We found www.buildmypinnedsite.com a useful resource to get started and then moved on to using MSDN to start using the likes of window.external.msSiteModeCreateJumpList and window.external.msSiteModeSetIconOverlay methods in JavaScript functions. The Power of the Cloud Windows Azure We knew that Brandon Generator would appeal to global audiences because of the involvement of world renowned director Edgar Wright and illustrator Tommy Lee Edwards. We also knew that introducing crowdsourcing functionality on a website such as this would always generate lots of traffic, bandwidth and compute resources. We didn't think on-premise hosting would be suitable for this kind of website so we investigated putting in place hosting infrastructure that could scale on demand, always be available but at the same time allow developers coding freedom. Windows Azure has provided us with all of this and much more. Using .NET 4.0, Visual studio 2010 and Azure tools for VS, we have been able to develop a number of RESTful web services that allow storage and retrieval of crowdsourced content in a robust and secure way. We have also utilised Azure CDN to deliver rich media such as HD video from servers closest to a user's location. The speed of delivery of rich graphics, high definition video and audio is vital for a seamless, smooth and slick user experience of Brandon Generator. and finally... What has really helped bring the Brandon Generator experience to life so far on IE9 is ability to compile and execute JavaScript code in parallel while taking advantage of multiple CPU cores (if available) and the fast rendering of rich graphics and animation using hardware acceleration. Both the new JavaScript engine and hardware acceleration capability have made it possible for the developers to make the animations and transitions as the creative team would've want them to be like. In future episodes, the illustrations, animations and graphics will become even richer and more immersive and the IE9 HTML5 and graphics capabilities will continue to challenge and keep pace with other browsers that have been more recently updated with HTML5 capabilities.