Under the hood of Brandon Generator21 August 2012
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.
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.
Pushing the boundaries of HTML5
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.
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.
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).
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.
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.
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.
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.