Tesla Outrun Mode
Marketing Strategy Project for University Creative Coding Course
Problem Statement
Develop a marketing campaign using creative coding to create a meaningful and interactive experience for current and potential Tesla users. The project should utilize the canvas in JavaScript to achieve this goal.
Research
Our research began with a visit to a Tesla showroom, where we experienced a Tesla firsthand. The standout feature inside the car was the large touchscreen dashboard. Tesla users enjoy showcasing their vehicles, especially the various easter eggs hidden within the dashboard. These unexpected and impactful features significantly enhance the user experience. The most memorable easter egg in the Model X was the light show, where the doors danced to music while the headlights flashed in sync.
Ideation
From our research, we identified the dashboard as the ideal canvas for our project. We brainstormed various experiences we could create and concluded that an easter egg providing a concert-like experience inside the car would be the most engaging. Our concept includes music visuals on the screen, synchronized with the car’s internal lights, creating an immersive and dynamic environment.
Final Concept
For the music visualizer, we decided to use a Synthwave retro theme and create animations on the canvas. The terrain would be made of grid lines moving in 3D, giving the feeling of riding through a landscape, while the mountains would be composed of rectangles that animate based on the music beats. To enhance the concert-like atmosphere, we decided to synchronize the car’s internal LEDs with the music beats. To demonstrate this, we planned to create a small 3D model of a Tesla and connect it to an Arduino with LEDs inside.
Synthwave Retro Theme
We created a 2D canvas to draw the background, grid lines, sun, and beat mountains. The grid lines moved by changing the yOffset, and the beat mountains had a decaying height amplitude based on the music beats. The LEDs blinked in three different patterns based on the beat intensity.
Arduino Integration
We built a Node.js server to create a socket I/O connection for the front end. Using the Johnny-Five library (JavaScript Robotics & IoT Platform), we established a connection with the Arduino board.
Demonstration
On demo day, we showcased our project with a fully functional music visualizer, synchronized LED lights, and a 3D model of a Tesla. The response was overwhelmingly positive, with users praising the immersive and engaging experience.
GitHub Repository
For more details and to view the project code, visit our GitHub repository.
