Trinity
An immersive website that throws users into a reconstructed concert experience. The sound is synchronized with the visuals.
Type
Website
My Roles
Developer, Project manager, Designer
Year
2022
Context
School project
Duration
2 weeks, part time
Stack
vue
nuxt
three
theatre
Brief
William Mapan, a WebGL developer and artist, came to us and suggested that we create an experience connecting 'visuals' and 'sound elements'.
Challenges
1
be coherent and relevant in the proposal.
2
Don't think too big because of the time limit.
3
Manage the project with Linear
4
Master the production chain: design & dev
My approach
The visual being at the heart of the artists' concerns, I decided to choose an artist who pays particular attention to the mixture of visuals and sounds: Laylow. This artist had indeed given a concert with a special scenography in 2020. I therefore wanted to reproduce this scenography, adding my personal vision on the visuals connected to the sounds.
Technical reflexion
I turned to Vue & Nuxt 3 technologies which allow me to move very quickly due to great modularity and great flexibility in 3D management. These are robust & proven technologies that I have used for a very long time, which gives me an advantage in this type of short projects.
Design process - Research
It all starts with the collection of visual information to create a mood board. The point is not to reproduce the concert identically but to have the overall Artistic Direction proposed by the artist, which allows me to play with and adapt it and/give it my own touch.
Design process - Creation
I started by building the main stage of the Olympia in Blender, a famous Parisian concert hall. I wanted this foundation to be able to focus almost entirely on the code. On the model, I had to give a specific nomenclature for screens that I will use on stage to display some visuals on it.
Technical process - Integration
By setting up Three.js from the start with my very simple starter, I was able to quickly integrate my base model and was able to easily connect the stage screens with the sounds. The idea is quite simple: recover the frequency of the sound, and apply shader processing to it.
Technical adjustements
To transcribe the futuristic artistic direction of the artist, I had to use PostProcessing with a lot of 'noise' and bloom, this helps to accentuate the colors and above all to highlight the sound which is strong, saturated and impactful in his bass.
Animations studio
There is choreographic work but also scenography in the experience. In fact, it had to last a few minutes and I wanted to have long, fairly organic camera movements. To do this, I used Theater.js, a technology that allows me to make animations with an ergonomic interface. I also animated a few elements, including buttons.
Remarks
1
Sound on the web is not easy
There's a reason FL Studio doesn't exist as a web application. It's difficult to process sound on the web and it's not particularly well documented, there are libraries, outdated APIs, and it's not necessary to easily use sounds to influence visual elements.
2
Linear.app is a nice surprise
Managing a project on linear.app and sticking to it is simple and intuitive. It's really good to do this kind of very short project which requires carefully separating the problems and the types of tasks.