Building Audio-Reactive Visuals in Hydra

This module builds toward the bread-and-butter task of the AV live-coder: a Hydra sketch that visibly listens. In a club or algorave set, visuals that pulse with the kick and shift colour with the mix read as intentional; visuals on a fixed clock read as a screensaver. The rig here is a laptop running Hydra in the browser, fed either by the room microphone or — more commonly — a loopback device carrying your DAW or TidalCycles output, which is why knowing that Hydra only hears the default microphone (and how to route around that) gates everything else.

The arc starts supported: get signal in, call up the FFT bin array, and wire a single bin to one oscillator parameter using the “any number can be a function” idiom. The first result will almost certainly strobe or sit dead — which motivates the calibration pass: set the cutoff floor and scale ceiling for your room, then dial in smoothing until motion is fluid rather than flickery. From there the learner layers a second, independent mapping (bass bin to motion, high bin to colour), and finally adds the discrete layer: an onBeat callback that fires a flash when volume crosses threshold.

Every required atom is load-bearing for the capstone — routing, bins, calibration, smoothing and beat callbacks are each named or exercised directly in the 60-second performance. The supporting atoms enrich: raw and previous-frame bins (a.bins/a.prevBins) show how delta-based onset detection works beyond the calibrated 0–1 signal, and the generic amplitude-threshold beat-detection atom explains why Hydra’s volume-based trigger misfires on sustained sounds and how hysteresis or band-limited detection would harden it — useful context but not needed to perform the sketch.

Runnable examples

Generated from the context/ instrument corpus by concept (redistributable idioms only). Do not edit — regenerate with gen-module-examples.mjs.

audio-reactive-map

updateAudio(); scale(1 + amp * 0.01)

_{p5live-0044 · CC0-1.0}

voronoi(() => 4 + a.fft[0] * 10).out()

_{hydra-0035 · CC0-1.0}

modulation-warp

osc(4).modulate(src(o0), 0.6).out(o0)

_{hydra-0022 · CC0-1.0}

s0.initP5(); src(s0).modulate(noize(), 0.3).out()

_{p5live-0038 · CC0-1.0}

feedback-trail

osc(4).modulate(src(o0), 0.6).out(o0)

_{hydra-0022 · CC0-1.0}

function draw(){ fill(0, 20); rect(0, 0, width, height); circle(mouseX, mouseY, 40) }

_{p5live-0003 · CC0-1.0}

scale-pulse

uv *= 1.0 + 0.3 * sin(u_time * 2.0);

_{glsl-0030 · public-domain}

updateAudio(); scale(1 + amp * 0.01)

_{p5live-0044 · CC0-1.0}

grain-glitch

col += (h21(st + fract(u_time)) - 0.5) * 0.15;

_{glsl-0026 · public-domain}

flow-field

let ang = noise(x*0.01, y*0.01) * TWO_PI

_{p5live-0008 · CC0-1.0}

chromatic-aberration

col = vec3(texture2D(u_tex0,st+vec2(.005,0)).r, texture2D(u_tex0,st).g, texture2D(u_tex0,st-vec2(.005,0)).b);

_{glsl-0036 · public-domain}