Introduction
I'm excited to share a project that combines two of my interests: data visualization and music. This project is still a work in progress, but my goal is to create a gallery of audio visualizations using various technologies and approaches.
Implementation
For this project, I used TypeScript, as it offers strong typing and improved developer experience. Additionally, I utilized libraries like three.js and d3.js to aid in the creation of the visualizations.
Circles
The first visualization I created is a simple circle that grows and shrinks based on the audio input. I've divided the audio input into seven bands, and each band is represented by a circle. The size of each circle is based on the volume of the corresponding band.
To help me choose the best parts of the spectrum for visualization, I created a simple dev tool.
With the "tool" active, it's much clearer what the source of the scale is for each circle.
Space cube
After creating the first visualization, I decided to challenge myself and create a more complex one using Three.js. The result is a cube that reacts to music, and I used masking to fill the shape defined by the cube with space visualization.
Cube trails
While working on the "space cube" visualisation, I encountered a bug where the canvas was not cleared between the renders, leaving the cube outline visible on the screen. I loved the bug and decided to turn it into a feature. I made the cube shrink and grow, rotate, and respond to music, creating trails that were much more interesting. I also added multiple colors to make it more colorful. I was quite pleased with the abstract result.
Lines with beat detection
In the latest visualization, I attempted to implement simple beat detection based on an article by Joe Sullivan.
On each beat, I render a line using audio frequency data for that moment. As you can see from the recording, this works quite well. However, in reality, the beat detection is not that accurate, and it's not always easy to get it right. Nonetheless, it can work quite well when it does.
What's next
I plan to create more visualizations and a gallery to showcase them all. I'll also dive deeper into beat detection, as I think it could make the visualizations more engaging. Lastly, I'll continue exploring various libraries while working on this project.
If you have any questions, comments, or feedback, please feel free to reach out to me. I'd be happy to discuss my project and hear your thoughts.