Back to the canvas

Resonate: an audio-reactive shader engine

Shaders applied to images and video, with their parameters driven by audio. Built because prepared visuals in a live set ignore the music, and TouchDesigner is too much tool for the movement most sets need.

2 audio parameters mapped to shaders on one image

At a glance

You connect an audio source, add a shader and an output, then map audio values onto the shader's parameters. That mapping is the tool: change what drives what, and the same shader reads completely differently.

It is also where the design work turned out to be, rather than in the shaders. I built this when Figma Make first shipped, to see how far a prompt-built tool got before it needed real code: far enough to be worth doing, not far enough to finish.

Canvas interaction
The same audio parameter controls multiple shaders at once
Performance mode: full screen & output switch via hotkey

Links