Under the hood of Brandon Generator

Back to Articles
Article Image

Article Image

I'm Riaz Ahmed, a Solution Architect at LBi and I'm going to talk through some of the technical aspects of theBrandon Generator website I've been working on since its start back in January. The Random Adventures of Brandon Generator is an online crowdsourced animated story created by Edgar Wright, award winning director of Shaun of the Dead and Hot Fuzz and renowned Marvel and Lucasfilm illustrator, Tommy Lee Edwards. The site was created to showcase how visually rich and immersive an online experience can be using plug-in-free and web standards-based HTML5 technology.

Article Image

This interactive noir-inspired series was based on four episodes and encouraged website visitors to collaborate directly with Edgar and Tommy to help shape the storyline for the next episode in development. The site provided various custom developed interactive tools to enable visitors to create content such as sketches and prose and upload art work and photos. There was also the ability to leave voice messages using Skype or by calling a UK (020) telephone number. All the submitted content was moderated and available in the various episode galleries including the ability to listen to voice messages that were left by website visitors.

The LBi creative and development teams worked collaboratively with Edgar and Tommy from day one to turn their ideas, artwork, illustrations, music and film into an interactive online HTML5 experience. As soon as the project kicked off the LBi Interface Developers were putting together various HTML5 prototypes and started developing a base JavaScript framework.

Pushing the boundaries of HTML5

The Brandon Generator site is created entirely using HTML5, CSS3 and JavaScript/jQuery on the front end and works across all modern web browsers that support HTML5 and CSS3 standards. There were certain HTML5/CSS3 features we could not use such as CSS3 3D transform, CSS3 animation and HTML5 SVG filters so we had to replicate these features using JavaScript/jQuery.

The development team had tight timescales to deliver some pretty sophisticated and very functional front end code and so to avoid reinventing the wheel and to expedite development open source JavaScript libraries were looked into and eventually integrated into the code base. One of the first tasks during HTML development was to put together a base framework that would help with incremental episode development and allow for lots of code reuse. We needed a lightweight client-side MVC framework that would provide clean and organised structure to code, was extensible, provided URL routing and was fast to load. The framework had to also integrate easily with the backend .NET web services.

Article Image

For Brandon Generator we selected Backbone.js a lightweight and popular MVC JavaScript framework. We had used Backbone.js before and implemented it successfully on websites that had rich interactive user interfaces. Our core framework for Brandon Generator included Backbone.js, a number of custom developed reusable JavaScript libraries and a few open source libraries that helped with the development of animation such asthree.js for creating 3D particle effects or using kinetic.js for development of the scrabble letter game in episode 4.

Another open source library we used was Raphael.js to help with the development of SVG animation. One such example was the thesauri dinosaurs. In the episode one video there is a reference to dinosaurs made of words and synonyms. We decided that the dinosaurs featured in the film could be recreated with SVG and allow them to be dynamic and respond to user interactions.

Article Image

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 which are animated such as the body, head and jaw of the dinosaur. We decided to control the animation with CSS, making use of the CSS3 'transform' property to rotate the head and jaw around central points defined by the 'transform-origin'. Further detailed information about this particular interaction can be found on the Brandon Generator behind the scenes page.

One of the most popular and useful HTML5 feature that was implemented for rich visual effects was the <CANVAS> element. We used <CANVAS> in a variety of ways such as to manipulate video pixels in real time during film playback, allowing users to interact with parts of the film, animate graphics and allow various user interactions. The HTML5 Canvas element has got widespread support by all modern web browsers. The added advantage of using Canvas is that various browser rendering engines (IE, Firefox, Chrome, etc) take advantage of the graphics processor (or GPU) to provide a smooth rendering experience, an example being the Hardware Acceleration feature found in IE9.

Our more advanced and ambitious use of Canvas on Brandon Generator was the pulsing transition effect at the end of the episode three film. We developed a simple interactive game where the viewer could help save the main character, Brandon, by pushing up video strips sliced into a Canvas element. Each strip had a musical note associated with it, so in trying to push each strip back you created a series of synthesised notes as you moved your mouse cursor across the strips. Originally the effect was developed using two looping films but this proved too CPU-intensive for older machines during testing and so we ended up using an animated gif for the background video.

Article Image

Power to the crowds

A key part of Brandon Generator was the ability for a website visitor to collaborate with Edgar and Tommy and feed their ideas and creations into the next episode. For each episode site we developed an interactive hub to allow the visitor to explore the story and to contribute ideas, prose and drawings. The hub's included writing tools, drawing tools with choice of pens, photo/artwork upload modules and various telephone/Skype numbers where voice messages could be left. For each tool that was built a gallery was also developed so that any submitted content could be viewed and shared via social media (Twitter and Facebook).

Article Image

We had a requirement to securely pass on submitted content from the website to the backend. The frontend HTML site and the backend Web Services had different sub-domain and protocol -http://www.brandongenerator.com and https://services.brandongenerator.com. Web browsers, for security and privacy reasons, prevent messages in different domains from being passed to each other (known as cross-site scripting, XSS) so in order to enable secure cross-origin communication across these two sites we used the HTML5 web messaging method windows.postMessage.

The backend Web Service was implemented using WCF and returned JSON so that it could be easily integrated with the HTML/JavaScript. All the submitted content was stored in Windows Azure, more specifically; all prose text was stored in a database in SQL Azure and drawings, photos and audio were stored in Azure blob storage. The drawing tools on the website were implemented using HTML5 Canvas and so all sketches that were created on the Canvas were converted to a Base64 string and sent using the Web Service. The Base64 string was then converted to an image using .NET and stored in the Azure blob store. Every submission had a record created in the SQL Azure database which either held a blob storage URL reference to an image or the prose text submitted along with any relevant website visitor information such as email address or social network information.

All submitted content needed to be reviewed and approved before being made available on the website so we developed a secure moderation site using ASP.NET MVC. The moderation site looked at the same SQL Azure database and Azure Blob storage as the Web Services and allowed a moderator to approve or reject submissions. The moderation site also let the moderator upload any voice messages that had been left on the Skype telephone number. Other moderation site features included ordering submissions for the galleries, for example, if Edgar or Tommy had used a submission in the film, they could set a flag which would show a 'featured' badge in the gallery on the website. A moderator could also filter content and generate various content reports. Using ASP.NET MVC really helped us develop the moderation site quickly and we were able to extend it without difficulty as new requirements came in.

Article Image

Scaling with the cloud

As the Brandon Generator site had lots of large assets such as 720p video, large image and audio files, we decided to utilise Azure CDN to help with quicker delivery of these assets. The site was very popular internationally with lots of visitors from USA, China and all around Europe. Using the CDN meant that these static assets were cached on content servers in several global locations so that when they were requested by a visitor's browser in China, the assets would be downloaded from the Azure CDN located in Asia. Smaller static assets were accessible from the Azure Blob Storage using the friendly URL http://media.brandongenerator.comwhile larger assets such as HD video were accessible through the Azure CDN onhttp://cdn.media.brandongenerator.com. Setting up friendly names for a Windows Azure Storage Account is considered good practise and was quite simple to setup. Mapping your Azure CDN to a custom domain is also good practise and was setup using the instructions on MSDN.

Article Image

Using Windows Azure Cloud Services to host the Brandon Generator site gave us many advantages. A key advantage of using Azure was the ability to separate out and scale out the different parts of the website. We had three parts to the Brandon Generator platform: website, web services and moderation site. We were able to deploy the website to its own hosted Azure Web Role as well as putting the web services on their own Azure Web Role. This meant we could scale up these Web Roles to any number of instances as demand increased quite quickly and easily using the Azure Management Portal. A good example was when there was the airing of the Brandon Generator ad breaks on Channel 4 during the UK premiere of the film Attack the Block. We were able to effectively triple the bandwidth and compute resources a few hours before the airing to handle the increased load. In the same week, the website was promoted on billboards across London as well on popular websites such as YouTube, Film4 and across the MSN network. Virgin Media showcased the first two Brandon Generator episode films on their new TV on-demand advertising platform on Virgin's new TiVo box which had presence on the EPG.

HTML5 and Azure showcase

The Random Adventures of Brandon Generator has been a great success with over 8300 contributions over three episodes. The site is still getting lots of submissions even though episode four was launched in July; in fact the submission count has nearly hit the 10,000 mark! Reaction to the website has been overwhelmingly positive, with only 1% of all conversation being negative. The website has featured in nearly 200 press pieces including leading press (Wired, BBC Click, Telegraph, The Verge, Esquire, Computer Arts) and popular blogs (Engadget, Pocket Lint, Tech Radar, Qizmodo, Xbox Live, HTML5 Updates). The HTML5 animations and interactions have got great reaction from the developer community and the use of Azure has proven to be very cost effective and simple to manage. As you can see, this website has been successfully developed using a number of modern web technologies and frameworks to create a rich and immersive online experience and it truly showcase's the awesomeness of HTML5 and Windows Azure.

Article Image

Post a comment
Your Screen Name
Your Email Address
Your Comment