Hydra: A Livecoded Video Synth Built on WebGL Framebuffers

Open Hydra and your browser stops being a browser. It becomes a patch bay. Oscillators bloom into magenta interference, a webcam feed gets kaleidoscoped into something between a stained glass window and a migraine, and every transformation is just a function chained onto the last one. Type osc(20, 0.1, 0.8).kaleid(5).out() and hit Ctrl+Enter. Something happens. Type more. Something better happens. It is a video synthesizer modeled on the analog modular tradition, except the modules are GLSL fragments and the patch cables are JavaScript, and the whole thing lives one URL away.

The clever bit is how Olivia Jack mapped the modular synth metaphor onto WebGL framebuffers. There are four output buffers (o0 through o3) that can sample from each other, which is how you get feedback loops, recursive compositing, and those drifting hall-of-mirrors textures that look like they should require a rack of hardware from 1978. Sources and transforms are composable functions that ultimately compile down to a single fragment shader per output, so even gnarly chains stay cheap. Add WebRTC into the mix and two browsers in different cities can pipe video into each other's patches in real time, which is either a collaborative livecoding instrument or a very pretty distributed system, depending on who you ask.

The editor itself ships with a gallery of sketches you can load, fork, and mangle. Pop open the sidebar, pick something that looks alarming, and start changing numbers until it looks more alarming. The full function reference is one shortcut away, the source is on GitHub if you want to see how the shader assembly actually works, and there are URL parameters for loading sketches directly if you feel like sharing your accidents. Worth an afternoon. Possibly a weekend.