I contributed to this app by building a component which would interpret a piece of music from the user’s device and create an interactive visualisation that would dynamically respond to the music and touch gestures.
Mind the gap
The app was build using Cordova Phone Gap which allows you to create a single HTML5 application which can be compiled to iOS, Android and other platforms.
Canvas animations
I used HTML5 canvas animations to create a set of visualisations which were each themed around one of the drink flavours. The abstract dancing shapes would swoop around, and group around the user’s finger if they touched or swiped. The fragments pulse to the beat of the music that is playing and the user can control the intensity and vibrancy of the whole scene with a series of sliders.
There were lots of great tips about working with canvas animations that I discovered during this project.
Fun and beauty
This was a really exciting project because it had no purpose other than to simply entertain and engage users for a bit of a fun distraction.
