Music-Visualizer is a web-based, real-time music visualizer built with Three.js that analyzes audio frequencies and BPM to generate dynamic, reactive 3D particle animations synchronized to the beat of your favorite tracks.

Generating dynamic images at scale

To summarize, in the vertex shader, we animate the points to achieve dynamic effects that dictate the particles’ behavior and appearance.

Starting with newpos, which is the original position of each point, we create a target. This target adds curl noise along its normal vector, varying based on frequency and amplitude uniforms.

It is interpolated by the power of the distance d between them. This process creates a smooth transition, easing out as the point approaches the target. As part of the experience, we pre-generated two personalised images for each user which contained stats about their spending, which could then be shared on social networks.

Our requirements were:

1. Re-runnable quickly. In the case that a bug is found close launch, we needed to be able to quickly re-generate all of the images. I.e. a process that takes multiple hours isn't acceptable.