This month we've experienced a fierce battle between french and american agencies. Timeshift165 by Ultranoir and Cinderella Past Midnight by Watson/DG fought till the very end, when for just a few votes french agency Ultranoir was declared winner of April's SOTM.
TimeShift165 is a Digital & Interactive Fan Artwork inspired by the exceptional story of a unique French car: The Delahaye 165.
Built in 1938, the single copy of this retro-futuristic cabriolet almost disappeared but was saved on the edge by Peter Mullin in 1985. We decided to create an immersive site to let the user dive into this mechanic tale by piloting the 165 through a bespoke WebGL game.
The Game
The gameplay was a tribute to the Delahaye and reference to 80’s Racing Game such as Out Run. We created a new way to drive the roadster by connecting mobile with desktop to use it as a reel interactive wheel.
To promote the site, we organized an online contest and listed the 165 best drivers.
Technical Challenges
From a technical point of view, the connection between mobile and desktop was achieved using Socket.io, based on a node server. We had a lot of fun creating the game from scratch using the Three.js library; it was a very rewarding experience, and not at all what we were used to doing. Nearly every step was a new challenge to overcome.
Post-processing shader and Three.js
The transition between modes was one of the more notable challenges: it was achieved using a custom post-processing shader that had the three scenes renders as inputs, and depending on the user's actions, would transition towards the corresponding scene. In order to animate this transition, a fourth input was added - an image - in which the red and green values contained the requested scene and animation progress data. This allowed a large number of concurrent transitions to take place.
Winners!
Each month we give away exclusive design prizes just for voting for your Site of the Month and sharing them on social media. The lucky winners of 3 One year Webydo Pro Plan licenses are: @akorenevski, @yannkozon and @AnthonyZACCARDI.