Hydra

Live-coded visuals written as Hydra synth patterns.

What it does

Runs live-coded visual patterns written in the Hydra synth language, short chainable expressions like osc(10,0.1).color(1,0,1).out(o0), and outputs the result as an image that composites like any other layer. The pattern renders in a live browser process in real time, so editing Code updates the output as you type.

Width and Height set the pixel resolution of the rendered image, independent of anything else in the graph.

When to use it

ParameterTypeDefault
codeString"osc(10, 0.1, 1.2).out(o0)"
widthNumber512
heightNumber512
opacityNumber1

Gotchas

Width and Height set the resolution of Hydra's own canvas. They do not follow the project canvas or the downstream image size, so set them to the resolution you need and let Hydra scale into place.

Code is Hydra syntax, not a general shader language. It expects chainable calls ending in .out(o0) or another output buffer. A syntax error in Code stops the pattern updating rather than rendering partially.

The first evaluation after opening a file or changing Code can take a frame or two to catch up, because the pattern renders in a live browser process.

Worked example

  1. Add a Hydra node. It starts with a simple oscillator pattern already running.

  2. Edit Code to build your own pattern, e.g. osc(30,0.05,0.8).color(0.2,0.5,1).rotate(0.1).out(o0).

  3. Raise Width and Height for a higher-resolution output.

  4. Wire the image output into a Composite or Blend node to layer it over other visuals.

See also

Shader · Visual Plugin · p5.js · Rasters (images)