Hydra
Use when the task involves writing, fixing, or integrating Hydra visual patches.
Trigger
- Generate a visual patch ("make noise texture", "audio reactive", "kaleidoscope")
- Debug a Hydra failure (black screen, silent audio, source not loading)
- Embed Hydra in HTML / p5 / Three.js
Execution Model
source → transform(s) → .out()
Sources: osc() noise() shape() gradient() voronoi() solid() src(buffer)
Color: hue() brightness() contrast() saturate() invert() luma()
Geometry: rotate() scale() scroll() kaleid() pixelate() repeat()
Blend: blend() add() diff() mult() layer() mask()
Modulate: modulate() modulateRotate() modulateScale() modulateHue()
Intent → Pattern
| User says | Use |
|---|---|
| noise / grain / texture | noise(10, 0.1).out() |
| audio / mic / reactive | audio-reactive-basic |
| camera / webcam | camera processing chain |
| mirror / kaleido / symmetric | osc().kaleid(4).out() |
| feedback / trail / tunnel | feedback-loop pattern |
| glitch / broken / pixel | osc().pixelate(20,20).diff(o0).out() |
| embed / html / website | see references/api-reference.md embedding section |
Minimal Code Skeletons
// Pure visual
osc(30, 0.1, 0).out()
// Time-animated
osc(30, 0.1, 0).rotate(() => time * 0.2).out()
// Audio-driven
a.setBins(8)
osc(30, 0, () => a.fft[0] * 4).out()
// Webcam
s0.initCam()
src(s0).kaleid(4).out()
// Feedback loop
src(o0).scale(1.01).out(o0)
render()
// Multi-buffer mix
gradient().out(o0)
osc(20).out(o1)
src(o0).blend(o1).out(o2)
render()
Dynamic Parameters
Use arrow functions for anything referencing time, mouse, or a.fft:
// Wrong: osc().rotate(time)
// Right: osc().rotate(() => time * 0.2)
// Wrong: osc(30, 0, a.fft[0] * 4)
// Right: osc(30, 0, () => a.fft[0] * 4)
Self-Check (run before outputting code)
- At least one
.out()or.out(oN)present - Multiple output buffers →
render()present -
a.fftused →a.setBins()called first -
s0-s3used → matchinginit*()called first - Dynamic values (time / mouse / fft) wrapped in arrow functions
- Code is minimal for the task — no extra transforms
Debugging
Symptom → first step:
- Black screen: check for missing
.out()or uninitialized source - Silent audio: call
a.setBins(8)first, check browser permission - Source not loading: verify
init*()was called, check CORS - Visual artifacts: reduce feedback strength or remove modulate
- Performance: shorten chain, lower res via
setResolution()
Recovery baseline: osc(30, 0.1, 0).out() — if this fails, the environment is broken.
References
references/api-reference.md— full API signatures by categoryreferences/patterns.md— reusable patterns + agent playbooksreferences/debugging.md— symptom routing and fix templates