What it is
Hydra is a JavaScript library and live-coding environment for video synthesis, by Olivia Jack. You write a few lines in your browser; it generates 60fps imagery via WebGL. The vocabulary is small — sources (osc, noise, voronoi, shape, gradient, src), operators (mult, add, blend, modulate, mask), and outputs — but each can wrap, modulate, or feed back into another. A patch graph small enough to fit on a postcard can yield work you would happily project at a club.
Its lineage runs back through analog video synthesisers — the Sandin Image Processor, the Rutt-Etra — and forward through a community of live-coded performance. The whole thing is open-source and runs in the page you are reading.
Why it matters here
Hydra is the smallest, most self-contained example of what we want Gateway/Producer to become — a polyglot patch system where every operation is a small typed function, signals route through a graph, modulation is first-class, and feedback loops are ordinary. It works now, in a browser tab.
What Hydra teaches by demonstration: patch graphs can be tiny and still expressive; code-as-patch-graph is a viable authoring interface (versus visual node editors); the value isn't in the primitives, it's in how they compose; and a real-time feedback loop dramatically changes the creative loop, even when the underlying operation is heavy.
The Math × Sequence territory
Hydra is one of many tools that live where mathematical primitives meet temporal flow. Each makes different trade-offs across editor (visual node graph vs code), runtime (browser vs native vs GPU farm), expressiveness (designer-friendly vs programmer-leaning), and intent (live performance vs rendered output).
TouchDesigner
Node-based industry standard. GPU-accelerated. Runs installations and broadcast.
vvvv
German node-based alternative. More programmer-leaning than TouchDesigner.
Cables.gl
Browser-native node visual programming. Open, embeddable.
Shadertoy
Pure fragment-shader sketches. Math-as-frame, frame after frame.
Cavalry
Procedural motion design with JS expressions. AE-class output, parametric all the way down.
Rive
Vector animation with state machines. Designer-friendly, runtime-embeddable.
TidalCycles / ORCA
Live-coded music systems where visuals follow the sound.
p5.js / openFrameworks
The creative-coding lineage. Less real-time-modular but huge community.
What this teaches Producer
- Producer's pipelines today are linear (step 1 → 2 → 3). Hydra-class systems are graphs with feedback loops. For motion design and any kind of live work, we'll want graph composition — and that means an interchange format richer than file-handles between steps.
- Hydra's modules are tiny pure functions with typed signatures. Producer's modules should be the same — even when some of them wrap expensive remote AI calls. The interface is the contract; the implementation can be anywhere.
- Hydra's signals are GPU textures — one type. Producer's signals could be a richer media bundle: vector layers, raster bytes, extracted channels (depth, pose, palette, captions), even structured data. A polyglot bundle is what lets AI nodes, deterministic ops, layout engines, and LLM calls all sit on the same patch graph.
- The feedback loop — write code, see the result instantly — is the soul of these tools. Producer's authoring experience can borrow this aggressively, even for pipelines that produce static or asynchronous output. Live preview during prompt tuning, mid-pipeline inspection, scrubbing through a generated sequence — all of it.
Try it yourself
- hydra.ojack.xyz — the live editor. Open and start typing.
- Hydra Book — a learnable, browseable companion.
- hydra-synth on GitHub — the source. Surprisingly small.
A first sketch to type into the editor: osc(60, 0.1, 1.2).rotate(0.5).modulate(noise(3)).out()