Senquenz - A location-based real-time music visualizer based on Three.js

Senquenz is a location-based real-time music visualizer.
It accesses the user’s microphone and performs a frequency analysis on the received audio signal. The obtained data is used to control parameters such as speed and direction of movement in the application.

The specialty of Senquenz is the additional access to the location of the user. Thanks to a location analysis with data from the Mapbox Tilequery API, it can detect how many buildings, bodies of water, roads, and mountains are in the vicinity. Together with the current position of the sun, the resulting parameters determine the appearance of the visuals. They influence the shape, color, size, and spacing.

In the end, the user is presented with a unique and tailored experience that is accessible for every home, party, hobby musician, bar or club.

→ Watch it in action at www.senquenz.de

At the moment there are four different visual scenes implemented, where each has millions of variants. More to come in the future.
A overview of possible results:

Implementation insights:
The website is built with ReactJS, which optimizes the performance of Senquenz. It also helps to organize the code, thanks to the component-based structure. I used the Web Audio API to calculate a Fast Fourier Transformation on the audio signal. With the computed parameters, the movement of each visual element is controlled. The creation of the motion graphics as well as the rendering is performed by Three.js.
→ GitHub Code
→ GitHub Code with dev tools to experiment

If you want to learn more about the process, feel free to check out my portfolio.

Surprisingly, the project was mentioned in the PAGE magazine, which is a huge honor for my work.
→ German article

2 Likes