RippleStar

Ripplestar came to me during a nighttime summer storm: what would it look like if rain fell upwards? The sky would look clear, and the raindrops would distort the stars in gentle ripples as they hit the heavens.

Most music visualizers map frequency directly to visual parameters. Ripplestar uses audio as a trigger for a simulation with its own dynamics — so the visuals feel physical rather than mechanical.

Instead of being a video file, this piece is different every time you watch it – the stars are different, the drops falls differently, and the ripples interact differently. Despite running a ton of complicated math and being (theoretically) infinite resolution, it runs in a browser because of fragment shaders.

It is a full-screen, audio-reactive generative artwork built with p5.js and GLSL shaders, running entirely in the browser with no backend. The project has three files doing distinct jobs: sketch.js orchestrates the logic in JavaScript, ripple.vert positions geometry, and ripple.frag does all the actual visual rendering on the GPU.

The fragment shader divides the screen into a grid of tiny cells, each with a randomly placed star via a hash function. Stars have randomized radius, brightness, and a subtle warm/cool color bias. They twinkle via a sine wave with per-star phase offsets. Up to 10 ripples can exist simultaneously — each ripple warps the UV coordinates used for star lookup, distorting the starfield itself rather than drawing on top of it. The result is the starfield appearing to ripple outward like a wave on water.

Audio reactivity is driven by p5's FFT object computing RMS volume from the raw waveform. The sketch maintains a rolling 2-second history of volume readings and spawns a new ripple at a random screen position whenever the current frame is a local maximum — tying ripple creation to musical peaks without hardcoding any BPM or threshold.