Revolutions In SoundRed Bull Music Academy
We teamed up with Google+ and Red Bull Music Academy to create a living archive of UK club culture.See the project
Google+ & Red Bull Music Academy approached us to develop an experience where people could reminisce about old glory days of clubbing and galvanise current & new clubbers to discover music and club nights, to coincide with the Revolutions in Sound event hosted at the EDF London Eye.
The concept quickly escalated from a photo sharing experience, into a living archive of UK club culture.
With the help of RBMA's editorial team we populated a site with information about artists, club nights, events venues and tracks synonymous with the musicians participating in the Revolution in Sound events. Then with the help of a variety open APIs (Discogs, LastFm, SoundCloud, Freebase, Google+) we pulled in contextual information and thousands of other links to these initial artists. This data is pulled from the respective sources, indexed and linked back to give credits to original data, allowing editors a great flexibility when populating the database.
We cross referenced all the APIs to filter out good data from bad data, and automated connections, while making a CMS custom built for editorial purposes. The team was able to add artists and make hundreds of connections with a few clicks.
• Automatic data population from: Google Plus, Discogs, Lastfm, Soundcloud and Freebase
• Produced in 3 months
• Iterative development
• Designing in a device agnostic manner
• Biggest AngularJS project we've done
• First ever use of GooglePicker API outside of Google+
• REST services for NDB models on Google Appengine
• Robust architecture and data management in AngularJS
• Data visualization rendering in PixiJS and behaviour in Box2D
The development of Revolutions in Sound (RIS) has involved a great deal of work both for the end-user frontend and admin backend. Having Google+ as a partner for this implementation implied making the most of Google technologies and setting some mandatory points in the software architecture, mainly consisting in the use of Google Appengine for the backend and AngularJS for data access and manipulation.
Making end-user data visualization beautiful across all the supported devices has been the big task for the frontend development team. Responsiveness and smooth animations have been the key principles around the design and implementation of a highly scalable web application.
The main pillars constituting the spine of the application are AngularJS for the Model-View-Controller implementation, and PixiJS with Box2D for the canvas visualization area. AngularJS takes care of accessing the backend API, requesting and posting data, and presenting it to the DOM for visualization: the whole application has been modularized using RequireJS so that the final JS is cleaned, compiled and minified for the highest speed and efficiency.
Data visualizations then handled by PixiJS with basic physics powered by Box2D: elements are rendered on a HTML5 canvas for improved cross platform compatibility and special care for anti-aliased font and image rendering, as well as a combination of different techniques such as SVG and CSS3 when available to make the most of graphics performance
FWAMobile Of The Day
FWASite Of The Day
FWAAdobe Cutting Edge Award