Magazine for designers and web developers
3 Collect me

Active Theory Wins SOTM November

Article by Awwwards Team in News - December 15

Active Theory are literally flying! This month they claim SOTM for the second time in a row for their interactive project Paper Planes which was launched on Google IO. Coming up the creative digital production agency goes into detail through two case studies about the work behind their project. Thanks for the votes and tweets, 5 WLOKS bundles winners can be found at the end of the article.

Paper Planes was featured at Google I/O 2016 on May 18th, 2016 as a pre-keynote event, bringing together attendees and outside viewers, in the 30 minutes leading up to Sundar Pichai taking the stage. Fans simply visited a URL on their mobile device and were prompted to create their own plane by adding a stamp that is pre-filled with their location.

Once a plane is created on mobile, a simple throwing gesture launches the plane into the virtual world. During the pre-keynote, attendees immediately saw their planes fly into the 50-foot screen on stage. Users at home or an I/O viewing party saw their planes fly into a desktop screen, browsed to the same URL with no syncing required.

For a more detailed look, see the case study here:

Aspects and Techniques:

On a technical note this project is a challenge based on a Google Cloud Platform service that fuses numerous technologies. The back end architecture consists of the following components:

  • App Engine for geoip location detection, serving the main page, managing socket connections and routing planes to world regions
  • Google Datastore for storing plane and stamp data
  • Google Cloud Storage for storing and serving static assets
  • Google Compute Engine with custom network of servers in data centers all around the world handling WebSocket connections between desktop and mobile
  • Google Firebase Messaging for web push notifications

The front-end build was developed using our Hydra framework with a single codebase that was used for desktop, mobile, Android app and multiple screen installation at Google I/O main stage. The back-end build was developed using our Medusa framework on NodeJS with Socket.io for WebSocket servers.

For the custom built WebSocket network, we have written an in-depth article about how this particular component was developed for Paper Planes in a technical case study here:

Thanks if you voted and tweeted, please PM us with your name and email address if your twitter handle features below:

@Marindessables @HelloNestbee @lauradorstter ‏@Stianbodi @gilloux