How Do I Make a Fluid Music Visualizer in My Browser?

Open Fluid Simulation, play the demo track or load a song, and choose SPLASH under PRESETS. The song feeds color into the fluid. Higher and lower notes enter at different horizontal positions, and kicks, snares, and hi-hats add their own splashes.

In SPLASH, new patches of color push against dye already on screen.

How do I choose a fluid preset?

Start with a section of your track that has a clear drum pattern and a few gaps. Play that passage while you switch presets. NEON gives you a glowing wash of color. Try SPLASH when you want the separate bursts to stand out. SPECTRUM pushes the dye along a line of frequency bands, so the image can spread across the width of the screen.

The edges of the eddies glow in NEON, even where the dye is thin.

How do I make the splashes follow my music?

1. Keep AUDIO SPLATS on. In AUDIO, lower MASTER GAIN if every hit is making a large splash and you want room for the accents.
2. In CORE, adjust SPLAT RADIUS for the size of each patch of dye. You can also push the dye yourself: drag across the picture, and SPLAT FORCE sets how hard that drag throws the color.
3. In FLUID PHYSICS, adjust VELOCITY DISSIPATION to control how long the current keeps moving after a hit. Raise VORTICITY if you want the current to curl more sharply.
4. To make the radius follow low notes and kicks more closely, use Assign modulation beside SPLAT RADIUS and select Bass. The slider’s live fill lets you check that the signal is reaching the control.

Change one of those controls at a time and replay the same passage. If the fluid looks like it never settles, try increasing VELOCITY DISSIPATION before changing the color.

How do I make the fluid spread across the screen?

Choose SPECTRUM and open SPECTRUM INJECTION. With SPECTRUM MODE on, use SPECTRUM POSITION to move the line of injections. Increase SPECTRUM SMOOTH if the bands twitch too fast, or reduce it to make the pushes follow transients more closely. SPECTRUM FORCE determines how hard those bands push the dye.

Can I use a microphone?

Select your microphone as the live input. The fluid responds to drum hits and changes in the sound as they come in. Use a playing track if you want to reproduce the same passage while comparing settings. For the full controls list, see the Fluid Simulation guide.