Back

Gobelins - ThreeJS workshop

Creative sound experiment

The workshop

At Gobelins, we participated to a 4 day WebGL workshop. The purpose was to create a sound experiment using ThreeJS. After choosing a music, we aimed at designing and developing an interactive audio visualizer.

Micro Cosmic Scale

My experiment deals about our world’s duality: the microscopic scale and the cosmic scale. I created a 3D shape that could be seen as a molecule or interpreted visually as a group of meteorites. With one of the Breaking Bad soundtracks, I wanted to make the link between chemistry (the infinitely small things) and astronomy (the infinity large things).

Demo & technos

With ThreeJS library, I used TetrahedronGeometry to create my shapes and MeshPhongMaterial for the material. I also used Orbit Control to enable camera rotation when the user drags the scene with the mouse. Finally, the audio HTML5 API helps me to get the audio frequency average and animate the objects with music rhythm. For the animations, I used TweenMax library from GSAP.

Directed by

Florian Zumbrunn

We participated to this workshop during our second year at Gobelins (first year of Master degree). As we were 19 front end developers, some of them created a website to collect all our experiments. We were awarded by AWWWARDS and TheFWA as Site of the day.