Live Coding Visuals with Hydra

Hydra is a live coding environment for video synthesis, built by Olivia Jack. It runs entirely in your browser at hydra.ojack.xyz — no installation, no setup, just open and start coding.

It's the visual equivalent of Tidal Cycles: a language designed specifically for creating evolving, generative visuals in real time. At Algorave performances, Hydra is one of the most common tools you'll see projected on screen.

Hydra is built around a signal-flow model. You create sources (shapes, gradients, camera input, other outputs), apply transforms (colour shifts, distortions, geometry), and route everything to outputs (the four screens o0, o1, o2, o3).

The syntax is JavaScript method chaining. Each function returns an object you can keep transforming.

Open hydra.ojack.xyz and type this, then press Ctrl+Enter (or Cmd+Enter on Mac) to evaluate:

osc().out()

You should see oscillating sine wave stripes. That's a source (osc()) routed directly to the default output (out()).

// Oscillator — frequency, sync, colour offset
osc(10, 0.1, 1.5).out()

// Noise
noise(3, 0.5).out()

// Voronoi
voronoi(5, 0.3).out()

// Solid colour
solid(1, 0, 0.5).out()  // r, g, b

Chain transforms after any source:

// Colour
osc(10).color(1, 0, 0.5).out()

// Rotation
osc(10).rotate(0.5).out()

// Kaleidoscope
osc(10).kaleid(6).out()

// Pixelate
noise(3).pixelate(20, 20).out()

// Scroll
osc(10).scrollX(0.1).scrollY(0.05).out()

The real power comes from combining sources:

// Blend two sources
osc(10).blend(noise(3)).out()

// Multiply
osc(10).mult(voronoi(5)).out()

// Difference
osc(10).diff(osc(20)).out()

// Modulate — use one source to distort another
osc(10).modulate(noise(3), 0.5).out()

modulate is particularly powerful — it uses the colour values of one source to offset the coordinates of another, creating fluid distortion effects.

Use time to animate values:

osc(() => Math.sin(time) * 20 + 20).out()

The arrow function () => ... is evaluated every frame. time is a built-in variable that increments continuously.

Hydra has four outputs: o0, o1, o2, o3. You can render different visuals to each and switch between them:

osc(10).out(o0)
noise(3).out(o1)

// Switch the display to o1
render(o1)

Or show all four at once:

render()  // shows a 2x2 grid of all outputs

Here's something closer to what you'd use in a live performance:

// Base layer
var base = osc(20, 0.05, 1.5)
  .color(0.8, 0.2, 1.0)
  .rotate(() => time * 0.1)
  .modulate(noise(2, 0.3), 0.3)

// Feedback layer
var feedback = src(o0)
  .scale(1.01)
  .rotate(0.002)
  .color(0.95, 0.95, 0.95)

// Combine and output
base.blend(feedback, 0.5).out(o0)

This creates a slowly evolving, self-referential visual that feeds back on itself — a common technique in Algorave visuals.

Evaluate incrementally. Change one value at a time and evaluate. You'll understand what each parameter does much faster than reading documentation.

Use the mouse. mouse.x and mouse.y are built-in variables. Map them to parameters for real-time control during a performance.

Sync with music. If you're performing with a musician using Tidal Cycles, listen to the rhythm and manually sync your visual changes to the beat. Some performers use MIDI or OSC to automate this.

Keep it simple. The most striking visuals at Algorave performances are often the simplest — one or two transforms applied to a single source, slowly evolving over time.

• Hydra documentation — full function reference
• Hydra Book — community-written guide with examples
• Hydra examples gallery — community patches to learn from

Come to one of our events and see Hydra in action. Watching a performer build a visual live is the fastest way to understand what's possible.