A Production By Internet Explorer

THE RANDOM ADVENTURES OF

Brendon Logo

BY EDGAR WRIGHT, TOMMY LEE EDWARDS & YOU

Back to top

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...

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

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 <canvas> and <video>) that could bring Tommy Lee's high quality illustrations and animations to life. As well as using HTML5, we've also made extensive use of JavaScript, jQuery and CSS3.

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.

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 <video> element and making use of its JavaScript API and events.

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

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:

// 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.

Wisdom of the crowd

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.

Continuing to build Brandon’s world (Episode 3)

The LBi developers have had a lot of fun challenges working with HTML5, CSS3 and JavaScript for developing Episode 1 and Episode 2. We’ve had some great feedback on the tech side of things for both the front and back end development such as using the backbone.js MVC framework, coding up animations in JavaScript and the use of .NET with Windows Azure for scalable hosting and data services. We’ve picked up where we left off and continued the momentum by developing some amazing new HTML5 effects for Episode 3. We’ve also added in some exclusive content produced by Edgar and Tommy that is available to IE9 users who have pinned the site.

Back in the flat

>Back in the flat

Episode 3 sees Brandon back in the flat where he is confronted by Anti-Brandon. It is the final episode which will invite the audience to contribute to the story so we wanted to encourage as much participation as possible. We have built a number of crowdsourcing elements into this instalment and like in Episode 1, we have provided a legal pad for sketching, a mobile phone with Skype number to leave Brandon a voice message and writing pad for writing your stories.

What has helped the creative and development teams during production is the reuse of the code, assets and back end functionality developed in Episode 1 and Episode 2. This has left time to finesse some other aspects of the site but also allow us to get a bit more adventurous with HTML5.

Warping text with SVG animation

Warping text with SVG animation

A recurring motif in the episodes is text flying across the screen, and for Episode 3 we wanted to let the audience interact with this and see the video change based on their unique movements. To achieve this we made use of the powerful SVG capabilities in Internet Explorer 9 to draw a dynamic path for the text to follow and then alter this path based on the user’s mouse movements.

For each line of text a <path> element is created in the DOM, this is the line the text will follow. Then a <text> element is created to hold the text. By making use of the <textpath> element the text is bound to the path and wraps onto its contours.

By using a setInterval which runs every 33 milliseconds, the path is redrawn and the text is animated along the path.

The user’s mouse movements are constantly tracked and the last 10 are recorded. When the path is redrawn we average out a route through all the mouse points so that the path makes a smooth curve and does not make jagged straight lines.

The text is animated along the path by increasing the x value of the text element with every interval. One challenge with this is that the length of the line is constantly changing with each mouse movement, so the horizontal position of the text on the path is not simply a linear increase, and must be recalculated constantly.

The erased end

The erased end

For the end of Episode 3 video we wanted to add an interaction so that members of the audience feel more personally invested in Brandon’s story, as well as smoothing the transition to the interactive part of the site. We decided to create an effect we called the ‘erased end’ where the main episode video is gradually covered and obscured by ‘the void’ video, in a way that the user can fight against, to try to help Brandon.

We achieved this effect using the HTML5 canvas element by reading the ‘void’ video into a <canvas> tag, slicing it into vertical strips and then dynamically animating these stripes based on the user interaction.

Both videos are in the site as HTML5 <video> elements, with ‘the void’ hidden off screen with the data being drawn into an intermediate canvas on a ‘setInterval’. This allows us to extract the pixel data to be animated and redrawn into the final output canvas.

The stripes are created dynamically with random widths within defined limits. These stripes are held in an array, and each has its own properties to allow for the animation:

stripe.increase = 1;
stripe.x = x;
stripe.y = y;
stripe.videoX = x;
stripe.videoY = 0;
stripe.width = width;
stripe.height = 720;
stripe.speed = that.randomFromTo(
  that.options.bars.minSpeed, 
  that.options.bars.maxSpeed
);
stripe.increaseSpeedBy = 0.01;
stripe.mouseOverForSound = false;
stripe.audio = …..

For each stripe a new HTML5 audio element is added to the page, which references a new audio file so that each stripe can play a different tone when animated.

The user’s mouse movements are tracked, and each time the mouse enters a stripe, a tone is played and the ‘stripe.speed’ is changed to a negative value.

The output canvas is redrawn on a setInterval. On each redraw the function loops through the stripes array and redraws each stripe into a new position based on the change in its properties. Each loop also increases the ’stripe.speed’ so that they accelerate when falling down the page.

that.canvasDrawCtx.save();
that.canvasDrawCtx.translate(stripe.x, stripe.y + stripe.increase);
that.canvasDrawCtx.drawImage(
  that.canvasCopyEl, 
  stripe.videoX, 
  stripe.videoY, 
  stripe.width, 
  stripe.height, 
  0, 0, 
  stripe.width, 
  stripe.height
);
that.canvasDrawCtx.restore();

Once a stripe has reached the bottom of the screen its properties are fixed and it will not be animated again. Eventually all the stripes reach this state and the effect triggers the movement to the next part of the site.

Pushing the boundaries of the Brandon Generator experience

For the final episode of Brandon Generator, we wanted to push the visual interactive experience in IE9 even more so than previous episodes. One of the ways we did this was to take advantage of the SVG capability in Internet Explorer and provide some really engaging animations and effects. SVG’s are shapes drawn by code and allows us to manipulate them smoothly and easily. Shapes can be resized to any size without any loss of quality or image artefacts, we can morph shapes and make smooth animations by only changing a few numbers.

We’ve been quite adventurous with the use of SVG in episode 4 as the creative team introduced quite a lot of visual interactive areas such as coffee monsters, the space sequence and thesauri. To help with SVG development we introduced Raphaël.js into the code base. Raphaël.js, is an open source library for SVG JavaScript development. We utilised some of the built in functions to simplify our code and speed up development.

What follows is a selection of a few challenging features of episode 4 and technical details on how we developed them.

Animating Thesauri

Animating Thesauri

In the episode one video Brandon imagines ‘awesome dinosaurs made of words and synonyms … a stampede of prehistoric thesauri’. We decided that the dinosaurs featured in the film could be recreated with SVG, and this would allow them to be dynamic and respond to user interaction.

The 2D shapes are SVG <path> elements and the words are inside <text> elements, created with Raphael. These SVGs are divided into the body parts to be animated: body, head and jaw. We decided to control the animation with CSS, making use of the new ‘transform’ property to rotate the head and jaw around central points defined by ‘transform-origin’.

We created an array of objects containing the metadata for each word to be placed onto the shapes:

{
  x: 130,
  y:250,
  width : 300,
  angle: -30,
  minChars: 5,
  paper: 'jawPaper'
}

For each word we are defining: x and y positions relative to the paper, width of word, angle to be drawn relative to the paper, minimum number of characters the word should be, and on which of the 3 body parts the word is used. The code loops through each of these metadata objects and creates a new text element using the parameters. The words come from a <p> filled with seed words, which are chosen at random.

The JavaScript listens for the user entering letters or numbers and stores them in an array. When the user hits ‘enter’ or ‘space’, or reaches the preset max number of letters we pick some random words on the dinosaur and replace them with the new word, allowing the user to create their own customised thesaurus.

Playful Coffee Monsters

XXXXX

In creating the monsters that lurk around Brandon’s coffee machine we realised that we wanted to do more than resize or move SVGs, we wanted to entirely reshape paths. In order to match the animation of the monsters in the film, we created several ‘keyframe’ paths with the same points and then morphed between each frame. By animating between these paths we could take the complex shape of the monsters and animate them as they extend out and twist around.

After extending, the user is able to interact with the monsters dynamically. By listening for mousemove the code finds the location of the mouse, and calculates the angle that each eye needs to move to so that the monsters ‘look’ in the correct direction

When the monsters are clicked it triggers the hide sequence, which morphs through the keyframes in the reverse direction, contracting the monster back down. At the same time an audio clip is played using the HTML5 audio tag, which is coded up using JavaScript.

Here’s how we animate through a sequence of paths:

animateFrames: function(options){

  var self = this,
  totalKeyframes = this.options.keyFrames.length,
  currentFrame = options.direction === 'show' ? 0 : this.options.keyFrames.length-1;

  this.animating = true;

  var callback = function(){

    self.animating = false;

    if(options.callback){
      options.callback();
    }

  };

  var animFrame = function () {

    if(options.direction === 'show'){

      if(currentFrame < totalKeyframes) {

        self.el.stop().animate({

         'path': self.options.keyFrames[currentFrame]

        }, (options.speed / totalKeyframes), function(){

            currentFrame++;
            animFrame();

        });

      }else{
        callback();
      }

    }else if(options.direction === 'hide'){

      if(currentFrame > -1) {

        self.el.stop().animate({

          'path': self.options.keyFrames[currentFrame]

        }, (options.speed / totalKeyframes), function(){

          currentFrame--;
          animFrame();

        });

      }else{
        callback();
      }

    }
    
  };
  animFrame();
}

Into Space through Brandon’s loft

Space

The space effect appears when the user clicks on Brandon’s loft window, falling into Brandon’s imaginary space world inspired by the pods of his coffee machine. This effect was written in native SVG, manually creating elements in the DOM and manipulating their attributes to move and scale them.

Native SVG rendering:

//common render
this.renderSVG = function() {
  this.group = this.svgCtx.createElementNS(this.svgNS, 'g');
  
  for (var i in this.svgDef) {
    for (var j in this.svgDef[i]) {
      var el = this.svgCtx.createElementNS(this.svgNS, i);
      for (var attr in this.svgDef[i][j]) {
        el.setAttributeNS(null, attr, this.svgDef[i][j][attr]);
      }
      this.group.appendChild(el);
    }
  }
  
  this.svgEl.insertBefore(this.group, this.svgEl.childNodes[0]);

  var size = this.group.getBoundingClientRect();
  this.size.width = parseInt(size.width, 10);
  this.size.height = parseInt(size.height, 10);

  //set initial scale to be 0
  this.group.setAttributeNS(null, 'transform', 'scale(0,0)');

};

While the objects are moving on a 2D plane we create the illusion that they are moving in 3D space by scaling objects larger as they approach the foreground, and carefully controlling their speed so that they feel as though they rush towards the camera.

Fake 3D module:

var as3D = function() {
  this.scale = 1;
  this.perspective = 1;
  this.perspectiveFactor =1;
  this.depth = maxDepth; //initial distance. minimum value of 0
  this.depthDt = depthScale / 1000; //number of steps before it destroys

  //updates depth - also acts as TTL as objects are destroyed a depth 0 
  this.checkAlive = function() {
    if (this.depth <= minDepth) {
     this.destroy();
    }
  };

  this.update = function() {
    this.updateDepth();
    this.updateScale();
    this.addPerspective();
  }

  this.updateDepth = function() {
    this.depth -= this.depthDt;
  };

  this.updateScale = function() {
    this.scale = this.scaleFactor * this.perspective * this.perspective;
  };

  //scale should be between 0 and 1 when distance is a max of maxDepth and minimum of 1
  this.addPerspective = function() {
    this.perspective = maxDepth * (1 - Math.log(this.perspectiveFactor * this.depth));
    this.coords.x = this.coords.x * this.perspective;
    this.coords.y = this.coords.y * this.perspective;
  };

  this.bind3D = function() {
    _.bindAll(this, 'updateDepth', 'addPerspective');
  };
};

Video sparkles with particle effects

XXXXX

For the particle effect in the episode 4 video we decided to expand the use of canvas with the use of the amazing open source library created by Mr. Doob, Three.js. The library delivers the ability to render to the canvas with a 3D context. We deployed the use of the library to add the shards seen in the previous episodes video to this new episode and allow the user to manipulate them.

As well as using this library, we are utilising requestAnimationFrame to deliver a better performance to users through the browser.

Here is the description from the library repository: "The aim of the project is to create a lightweight 3D library with a very low level of complexity — in other words, for dummies. The library provides <canvas>, <svg> and WebGL renderers."

The following code, updates speed and motion of the effect in the 3D space:

Shard3D = function (material ) {
  THREE.Particle.call( this, material );
  this.velocity = new THREE.Vector3(-1,0,-1);
  this.velocity.rotateX(randomRange(-90,-90)); 
  this.velocity.rotateY(randomRange(-90,-90)); 
  this.velocity.rotateZ(randomRange(-90,-90)); 
  this.gravity = new THREE.Vector3(0.00001,0,0.00001); 
  this.drag = 1; 
  
};
Shard3D.prototype.updatePhysics = function() {  
  this.velocity.multiplyScalar(this.drag); 
  this.velocity.addSelf(this.gravity);
  this.position.addSelf(this.velocity);
}

Letter Salad

XXXXX

When you’re in the desk hub and click on the letters in the bottom right hand side of the screen up pops a scrabble like game where you drag and drop letters into boxes to make out a word. We’ve been able to recreate an online scrabble effect using the HTML5 Canvas library, KinecticJS. Using this library has helped us by providing reusable code for animation, creating elements and event handling.

In order to increase performance and provide a smooth scrabble effect multiple canvas layers were implemented. The canvas layers implemented were for buffering, event handling and rendering. Canvas was also used to blur and greyscale the letters on image load and provide the rotate effect on the letters.

The following code is called when you successfully complete the letter salad and the letters fly off the screen

var randRotate = randonInt(-Math.PI, Math.PI);
var y = randonInt(0,400) >= 200 ? -200 : defaults.page.h+200;
var x = randonInt(-defaults.page.w,defaults.page.w*2);

var options = {
  x: x,
  y: y,
  rotation: randRotate,
  duration: 0.9,
  easing: 'ease-in'
};

this.el.transitionTo(options);

Here is how we apply grey-scaling to images upon load using canvas:

var canvGreyScale = $('').attr({
  'width' : options.image.width,
  'height' : options.image.height
});

var canvCtxGreyScale = canvGreyScale[0].getContext('2d');

canvCtxGreyScale.drawImage(options.image, 0, 0);

var imgPixels = canvCtxGreyScale.getImageData(0, 0, options.image.width, options.image.height);

for(var y = 0; y < imgPixels.height; y++){

  for(var x = 0; x < imgPixels.width; x++){

    var i = (y * 4) * imgPixels.width + x * 4;
    var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
    imgPixels.data[i] = avg;
    imgPixels.data[i + 1] = avg;
    imgPixels.data[i + 2] = avg;

  }

}

canvCtxGreyScale.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);

return canvGreyScale[0];

A wonderful creative technology showpiece

We hope you’ve found the technology part of the behind the scenes useful. As you can see, the developers working on the Brandon Generator project worked with a lot of technologies, frameworks and libraries, both frontend and backend. Some of the key technology learnings from this project were:

- Use client side frameworks like Backbone.js. Backbone helped bring structure to our code, encouraged code reuse and provided us a code library of useful utilities. We also used a number of other JavaScript frameworks to help with develop some of the animations, effects and transitions. There are lots of open source frameworks which are mature and have a lot of community support; there really is no need to re-invent the wheel.

- Use cloud infrastructure where possible. Selecting Windows Azure for hosting the Brandon Generator site complemented the project as it provided us with a solid platform to develop our backend services on relatively easily and has turned out to be very cost effective compared to on-premise infrastructure. The ability to scale compute instances during popular media events at a ‘flick of a switch’ was a major advantage to us.

- Make sure you performance test animations that are written using SVG and Canvas elements, especially if you’re trying to overlay them on HTML5 video. Animations can be CPU/GPU intensive and while you want the experience to be rich and immersive you don’t want to get carried away and provide a slow and jerky experience for users who have older PC’s or Mac’s.

- Consider the mobile and tablet user. Lots of people have viewed the Brandon Generator site on a mobile phone and we have provided a simple mobile site that works across modern mobile devices including iPad and Windows 8 / IE10 slates. Although the mobile site doesn’t have the same rich experience as the desktop site, we still make use of HTML5 and provide a good quality video of all the episode films

So there you have it, the Brandon Generator project was a technically challenging project where we really pushed the boundaries of HTML5, CSS3, JavaScript/jQuery and IE9 and came up with a creative showpiece that demonstrates the beauty of the web and what can be achieved when you’re developing an online experience with direction from an award winning Hollywood director, a renowned Illustrator and a very imaginative creative team.