Look out for my review of the night soon!
Internet Explorer’s immersive user generated web story nears half a million views as the series
climaxes
12 July, 2012: Today Internet Explorer announces the release of the fourth and final episode ofThe Random Adventures of Brandon Generator which can now be seen as a whole production forthe first time. With hundreds of thousands of views and over 8,000 submissions of prose, scenes, storylines and characters, the interactive animated story concludes with a gripping finale that features over 90 user contributions and sees Brandon fighting to save himself from deletion.
Edgar Wright’s mind-bending experiment with storytelling culminated with a screening of the entire production for the first time in a Victorian warehouse in London last night. Brandon’s fictional home was simulated through animations and projections, while contributors to the series saw their artwork hang alongside artwork by renowned Marvel and Lucasfilm illustrator Tommy Lee Edwards, who played a pivotal part animating the adventure.
The power of IE9’s hardware-accelerated graphics give a smooth and engaging experience handling some of the most sophisticated HTML5 techniques yet with Tommy Lee Edwards’ distinctive style ofartwork immersing the viewer deeper into Brandon’s world. Narrated by Julian Barratt (The Mighty Boosh) with music by David Holmes’ new project ‘Unloved’ (a collaboration between David Holmes, Keefus Green and Jade Vincent), the finale sees Brandon answer his own existential questions, in his own quizzical manner, and come face to face with his nemesis Anti Brandon once more.
“The final episode has been the most fun to work on as Brandon’s head trip comes to a coffee soaked climax,” says Edgar Wright. “Having co-writers develop the story in real-time and weaving in user submissions from so many people has been a highly enjoyable challenge and a great new experience for me. I’m excited for people to see Brandon Generator as a whole story and I’m incredibly proud of the project.”
Tommy Lee Edwards added, “I don’t think any of us were ready for the intensity of this project. The crowd sourced nature of it meant curve balls were a day-to-day occurrence but the animation had to be perfect for this to work. There were sleepless nights and stressful days but the end result is really special and I’m pleased to be part of this new genre of storytelling on the web.”
Gabby Hegerty, Internet Explorer lead commented, “From day one we wanted to create something truly original, incredibly beautiful, immersive and interactive. Brandon Generator was a first of its kind, developed in HTML5 to really show what’s possible on the web today with IE9. Experimenting with different styles, concepts and techniques took us to new territory and the crowd sourcing elements helped create an entirely new genre of storytelling. We were incredibly excited about having such a talented cast behind the production as they really brought the concept to life but we never dreamt the reception and interaction from the public would be so strong. We’re ecstatic about what the project has become, a standalone genre that inspires imagination, intrigue, and fun, within its audience, all wrapped up in a beautiful and immersive web package.”
SVG animation – the fourth Episode includes more complex animations using SVG and JavaScript and takes advantage of IE9’s hardware acceleration capabilities and the powerful IE9 JavaScript engine to recreate 3D visual effects in the browser.
Space effect – 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.
Thesauri Monster – the dinosaurs featured in the film have been recreated with SVG on the website and allows 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. The animation is controlled with CSS3, making use of the new ‘transform’ property to rotate the head and jaw around central points
defined by ‘transform-origin’.
Coffee Monsters – The monsters that lurk around Brandon’s coffee machine were created by matching the animation of the monsters in the film, coding up the animation in JavaScript and using HTML5 audio to enhance the experience and atmosphere.
Video interactivity – during play back of the episode four video, a shard-type particle effect which allows the user to interact with the motion of the shards flowing onto the video has been introduced with a 3D-like effect using the HTML5 Canvas element.
Word salad (multiple Canvas layers) – episode four features an interactive scrabble like game that uses multiple HTML5 Canvas layers. Users can drag and drop letters into boxes to make out a word related to the storyline. The effect means the tiles behave like real objects rather than flat planes and give the illusion you are really moving tiles around.
To watch the final episode and get involved, visit www.brandongenerator.com. Use Internet
Explorer 9 and pin to your taskbar for the best experience and exclusive updates and content.
Find out more about the project by following Internet Explorer on Facebook.com/
InternetExplorerUK and Twitter.com/IE_UK and Brandon Generator on Facebook.com/
BrandonGenerator and Twitter.com/Brandon_gen
