An easter egg for the tesla dashboard. With an outrun aesthetic and a synthwave playlist, the reactive touchscreen and dynamic inner lights will transport the user to the future that never was.
The project was part of 3 weeks long course on Programming Interactivity under the guidance of Ricardo Mendieta (Co-Founder/CTO, Foo Studio). We were given the brief by Ricardo to come up with an interactive experience for a brand(Tesla for us) using the canvas in JavaScript.
We conducted a research by experiencing a Tesla for ourselves. We found that it has to be a small meaningful experience and yet unexpected. So we came up with the Outrun Mode, an easter egg for the Tesla dashboard. It is an audio reactive experience on dashboard with internal lights sync. We coded this reactive experience using p5.js and built a small laser cut model of a tesla car with arduino and leds which reacted to the beats of the music.
Our research began by visiting a tesla showroom and experiencing a tesla by ourselves. The first thing we noticed inside the car was the hugs touch screen dashboard. Tesla users like to show off and their are various easter eggs inside the dashboard. All the easter eggs were unexpected and really impactful. The one easter egg which stood out the most in the Model X was the light show dance with the doors dancing on a music with headlights going haywire.
From all the data we gathered, we knew that we would be using the dashboard as our canvas. So we started brainstorming around the dashboard and what sort of experience we could provide. Our conclusion was to create an easter egg which would provide a concert like experience inside the car with music visuals on the screen and internal lights going crazy with the music.
For the music visualizer we decided to use the synthwave retro theme and create some kind of animation on the canvas. The terrain would be made of grid lines which would be moving in 3d giving a feeling that the user is riding and the mountains will be made of rectangles which would be animating based on the music beats. To give a concert like feeling, we decided to use the internal leds of the tesla which would also be syncing to the music beats. To demonstrate that, we planned to create a small 3d model of tesla and connect an arduino with leds inside it.
Synthwave Retro Theme -
Created the 2d canvas to draw the background, grid lines, sun and beat mountains. Changing the yOffset for the grid lines to move them and beat mountains had a decaying height amplitude based on a beat of music. The leds would blink based on the beats detected with 3 different patterns based on the beat intensity.
Arduino -
Built a node.js server to create a socket I/O connection for the front end. In the server, we used the johnny five library(JavaScript Robotics & IoT Platform) to make a connection with the Arduino board.