Andrew Mason Creative Technologist

Tag

The Guardian

6x9: Virtual Reality Solitary Confinement

6x9 is the Guardian’s first virtual reality experience, placing you inside a US solitary confinement prison cell. As the creative technologist, I was responsible for overseeing the interaction design, technical development and delivery of the VR experience on multiple platforms including GearVR, Google cardboard and 360 video. I also designed and developed the WebGL promotional site that used optimised 3D assets and shaders for desktop and mobile. A custom in-browser editor was created for fine-tuning animation timings and help debugging.

BBC Homepage

Beat the Hustler: A VR street con

Beat the hustler is an interactive 360 VR experience that places you in the shoes of a tourist playing the shell game. The aim of the game is to find the ball under the cup. However, unbeknownst to the player a team of pick-pockets are working the crowd. The idea was storyboarded and test-shot at the Guardian before filming took place near Tower Bridge. A GoPro Odyssey was used to film all scenes and later edited before bringing the footage into Unity.

Firestorm

With beautiful video and audio recordings from the event, Firestorm presents to dramatic events of the Australian bushfires. A rich multimedia presentation was built that blends long-form writing and video documentary. It was achieved by using full-screen video, background atmosphere audio and careful attention to scene transitions. the Guardian Transitions between background images, video and audio were made seamless ensuring the flow of the story. The long-form text overlaid beautifully shot looping video that added texture and context to the words.

Scottish independence dashboard

To track the Scottish referendum we built a real-time data-visualisation dashboard showing results as it happened. I built a node.js workflow that took data from a Google spreadsheet, parsed it into JSON and uploaded it to S3. The JSON data was polled in-browser and used to render the map and charts with D3. Journalists were able to update the data in the field which appeared on user’s screen within seconds.

The Journey

“Syrian refugee Hashem Alsouki risks his life crossing the Mediterranean, his sights set on Sweden” Blending long-form journalism with seamless video playback and responsive image presentation this interactive tells the story one man’s journey for a better life. It was also the Guardian’s first Facebook Instant article. interactive-media the Guardian Video taken from the crossing is integrated into the page and loaded dynamically as the page is scrolled.

Tour de France WebGL

I was commissioned to create a data-visualisation that showcased the history of the Tour de France’s most famous hill climbs, Alpe D’Huez. To bring the data to life I combined satellite photograph with accurate elevation data to create a 3D WebGL reconstruction of the mountain course. Careful attention was given to the mobile UX with the inclusion of both tap and swipe navigation. An image based non-WebGL alternative was included as a fall-back for older browsers.

Underworld VR: Subterranean London

Underworld was the second virtual reality project I led as the creative technologist and was responsible ensuring the successful launch on Google’s new Daydream VR hardware. Utilising the potential of Daydream controller, Underworld allows the user to explore the London sewer system with an interactive torch lighting their way. To coincide with the launch of VR experience we built an interactive site. Using audio interviews, animation and historical imagery it transports you into the hidden world beneath London.

Walled World

The Walled World interactive highlights walls built around the world that divide people from their neighbours. Uses satellite imagery, SVG animations and video the interactive charts the path of the walls and the impact they have on people’s lives. interactive-media the Guardian SVG animations are used to plot out the route of the walls. As user’s scroll down the page the wall’s path is exposed.