Portfolio – Adam Vernon


iCanQuit Mobile App Illustrations – Fred Hutchinson Cancer Research Center


Task

Devise art concepts to accompany various articles, tasks and achievements reached within the smoking cessation app, and then create them as minimal vector illustrations within the established colour palette.

Solution


Notes

One challenge encountered with many of these illustrations was the need to show anatomy and human actions without designating a particular ethnicity, gender or age (character profiles excluded). This was addressed by using an abstract amber skin tone, and minimising the amount of detail without clouding the intended message.


100 Day Art Project + Gallery – Self Initiated


Task

Create and post one ‘artifact’ (drawing, painting, animation, generated graphic) every day for 100 days.
And later: create a gallery site to showcase these with accompanying notes.

Solution


Notes

Various life events occurring over the course of the project led to a few rough and rushed pieces. Similarly some experiments didn’t go to plan, but the learning experience was enormous. The materials varied greatly, but the predominant medium was generative animation using Flash and AS3, rendered out and finalised in Photoshop or After Effects.
The gallery was built with Angular 2, and uses a responsive layout with viewport units and media queries to achieve a uniform design across device sizes.


Educational Minigames – Genentech


Task

Co-design, animate and implement several mobile-first minigames to explain complex biological processes.

Solution


Notes

The following games were created across several projects using canvas + WebGL:
Factor Fusion
Mission: MRD
Lymph Node Labyrinth


‘Thought Toilet’: Realtime Twitter Monitor – Self Initiated


Task

Design and implement the back and front-end systems to create a Twitter web app for viewing live tweets on currently trending topics

Solution


Notes

The project comprises a Node.js server application (connecting to the Twitter API, downloading a list of trending topics every 10mins, connecting to the public streaming service, then processing and passing on that data through a socket.io service). The client side is a responsive HTML5/CSS3 app, which employs the AngularJS framework for its two-way data binding, keeping the UI in sync with the tweets as they arrive. The app is open source and can be forked on GitHub. A full discussion of the project is planned for an upcoming blog post.


‘Post & Go’ Kiosk Front-end – Royal Mail


Task

Design and build the user-interface for an unmanned stamp printing terminal

Solution


Notes

This was an Adobe AIR application, providing the front-end to a Royal Mail kiosk, for the purchase of stamps and other postal items. The system brought together a number of discrete elements, including a payment server, a printing subsystem, a CMS for product data, and a reporting server. One challenging aspect was the system’s unmanned, continually operational nature – necessitating a robust, lean implementation, regular update checks with the CMS, and seamless content refreshing upon changes.


‘Become an Elf’ AR Experience for ‘The Hobbit: The Desolation of Smaug’ – Warner Bros


Task

Create an immersive augmented reality site to promote the second film of the Hobbit series

Solution


Notes

The project centered around the notion of allowing site visitors to have their likenesses morphed into that of an Elf, through webcam-driven face-tracking and hardware accelerated 3D content. The site employs both Starling and Away3D content, and lets visitors take snapshots or short video clips of themselves, to upload to a host of social media platforms.


HTML5 Project: Pong Clone – Self Initiated


Task

Recreate a simple retro game in HTML5 (JS + canvas) to run on all modern desktop and mobile platforms

Solution


Notes

The game was primarily created as a learning exercise in working with emerging web technologies. The game can be controlled by mouse pointer or touchscreen and makes use of object-oriented JavaScript, a canvas element and the Web Audio API. A full discussion can be found here: http://akineticblog.com/?p=583


‘Pain & Gain’: GIF Creator – Paramount Pictures


Task

Build a promotional site for the movie Pain & Gain allowing visitors to see their face in a chosen scene from the trailer

Solution


Notes

This project for Paramount Pictures comprised a 3D head model, textured with a user selected photograph (from webcam, HDD or Facebook source), animated and synchronised with the movie trailer. Behind the scenes, frames from this composite movie were extracted for encoding to GIF, which could subsequently be shared across several social networks.


Flash Game: ‘Air Multiplier’ – Dyson


Task

Using existing graphic assets, rewrite an iOS physics-based puzzle game in AS3 for online deployment

Solution


Notes

This Flash game was implemented using Box2D and by replicating the behaviour of the existing iOS game. Both implementations make use of a common grid-based level specification in JSON, making the addition of new content very easy across both platforms. The deployed version ties into an online highscore table and permits score sharing on Twitter and Facebook.


AR Experience for ‘The Dark Knight Rises’ – Warner Bros


Task

Create an augmented reality site, employing facetracking and Away3D 4.0.0 (FP11), to promote Warner Bros’ latest Batman movie release.

Solution


Notes

The site comprised a webcam-based AR experience, allowing visitors to see their own face overlain with one of three 3D mask models from characters in TDKR. In keeping with the strong technological element of the films, the client requested that the masks exhibit a digital de/re-construction effect, when transitioning between the two. Snapshots of the experience can be taken and shared over Facebook, Twitter and email, or downloaded to the desktop. The 3D engine used was the beta release of Away3D 4.0.0, and the face tracking technology was from Total Immersion.


Interactive Guide: ‘Alice in Wonderland’ – Royal Opera House


Task

Implement an interactive guide to the ‘Alice in Wonderland’ ballet production for the Royal Opera House, employing a vertical design and parallax effect.

Solution


Notes

This project involved creating a bespoke animation system for the parallax motion effect, to simulate 3D depth and allow scolling by mouse wheel, keypress and scripted event. Other challenges included the creation of a progress book, with dynamic picture and video content, and page turning animation. The four minigames, including a ‘Simon says’ copycat game, and a one-armed bandit machine, were also fun to plan out and implement.


‘Animate It!’ DVD Menu – Aardman Animation


Task

Create an interactive Flash projector application as an entry point to the ‘Animate It!’ DVD – stop-motion animation software by Aardman Animation Ltd.

Solution


Notes

(The video above is a short desktop recording of the application, which suffers slightly in framerate due to the video capture overhead.) The project comprised a video viewer, for a library of around thirty recordings, along with a document viewer, linking to on-disk PDF files. The mix of bitmap-based timeline animation and code-side tweening posed an interesting challenge, in keeping all elements syncronised.


University Virtual Tour – University of Portsmouth


Task

Produce an interactive map of the Portsmouth campus and surrounding city, linking geographic, textual and audiovisual content.

Solution


Notes

The project was a sizable undertaking, with the goal of designing and building an easily navigable system for new and prospective students to become familiar with the layout of the university, and the range of subjects taught. (Visual design was by Ben Webb and 3D modelling was by Phil Webster.)


iPhone Game: ‘Fright Den’ – Thought Den


Task

Create a seasonal iPhone game for the promotion of digital agency, Thought Den, with a Hallowe’en theme.

Solution


Notes

The game was created using the Flash CS5 iPhone compiler, and involves steering a jack o’ lantern around the screen (and into enemies) by tilting the device. Careful code optimisation was needed to accommodate the well-documented performance limitations of compiling from Flash.


Touchscreen Installations – Bristol City Museum


Task

Produce a series of Flash interactives for the Curiosity Gallery within Bristol City Museum.

Solution


Notes

Four separate interactives were developed for the exhibit, allowing visitors to discover different art works, vote on the ethics questions, and (in the example uploaded above) create designs from ancient symbology to be uploaded to a digital gallery – and optionally emailed to themselves. Uploading and emailing has been disabled for this demo.

Hello

I'm Adam Vernon: front-end developer, free-time photographer, small-hours musician and general-purpose humanoid.