To mark our recent 15th birthday, we wanted to reconnect with the people that have helped shape the business. And what better way to reconnect than with a party? (In this case, two parties). We invited over 500 people to join us in late September 2013 at MB15 parties in San Francisco and London.
The events also provided the perfect excuse to trial some new tech, in order to create unique invites and interactive installations.
As a nod to the unique people and relationships in our eco-system, we created an individual MB Mino for each guest – a 3D character shaped by our guest’s name, and patterned by their relationship to Moving Brands.
A person’s Mino would reflect whether they’d known us one year or fifteen, in London or San Francisco, how we knew them, and whether we were friends online as well as off.
This is where things get technical…
The Minos were created in WebGL, a recent technology that displays 3D graphics in-browser. By translating each data point into a number, we were able to generate hundreds of unique shapes.
Unique urls were sent out to all guests (built into a neon GIF email invite), allowing them to customise their 3D Mino with a colour scrubber. Once saved, guests could rollover the Mino scene to see the other MB15 attendees.
The next challenge was creating the interactive installations, allowing guests to meet their Minos at the party. Using a Leap Motion, a new tool that tracks the position and movement of a person’s hands, we built a custom interaction that allowed guests to control a large scale projection – bouncing and swiping through the Minos, and tapping them to uncover who the Mino belonged to. Minos could share their owner’s tweets, and photos uploaded to instagram using #MB15 would be incorporated into the projected Mino scene.
These responsive installations were created as a website, as opposed to traditional standalone software. This meant deploying the technology across the two sites in London and San Francisco, separated by several thousand miles and an 8 hour time zone difference, was incredibly straightforward.
Behind the scenes: To NodeJS and beyond…
To bring the Minos to life we needed a backend to handle the data and a small mino API for the front end to ask questions of.
We stored the data in a MongoDB, a so-called “NoSQL” database. This allowed us to store and retrieve data in the same JSON format as the frontend, making for some lightweight API code.
To achieve the Twitter functionality we used two Node packages, one to work with the Twitter API to check for tweets, and the second to notify any frontend session that new tweets had arrived. This second package, socket.io, is really exciting. It allows for persistent connections between web pages and backends, meaning that once a connection is opened, the web page can listen for messages being sent to it and respond accordingly. If the web browser is advanced enough, it can do this incredibly fast using web sockets.
The interactions allowed the team to trial new hardware and software technologies, adding more tools to our arsenal for rapid prototyping.
More importantly, they provided a colourful, moving backdrop to two very memorable parties.
Thanks to all who could join us!
– Read the founders thoughts on the first 15yrs of MB here.