Date: 2025-03-18
Today:
Hydra is by coder and artist Olivia Jack. It’s a livecoding tool for networked visuals. It is influenced by oldschool modular video synthesizers, and has been reimagined as a distributed (multi-computer/multi-person) tool for performance.
Rutt-Etra video synthesizer demo - 1974 - video
It is built in Javascript and can be integrated with other Javascript projects for the web.
Built using WebRTC (peer-to-peer web streaming) and WebGL, hydra allows each connected browser/device/person to output a video signal or stream, and receive and modify streams from other browsers/devices/people. The API is inspired by analog modular synthesis, in which multiple visual sources (oscillators, cameras, application windows, other connected windows) can be transformed, modulated, and composited via combining sequences of functions.
Go to Hydra.
Close the welcome screen. A random program will be running. Try changing the numbers. Click the shuffle icon in the top right to load a different starting program. Click the dice icon to shuffle numbers (variables) in the current program.
Erase all the code on your screen.
Let’s create an oscillator.
The code we are writing are functions. This program is inspired by analog video synthesizers. In a synthesizer you connect a source to an output.
In our Hydra code we have to connect our oscillator to an output to see anything.
osc().out();Press Control-Enter (might be Command-Enter on Macs?) to run the code.
We can try entering some numbers as input. These are called parameters.
osc(10, 0, 0.9).out();To run our program we press Control-Shift-Enter to run all of our code. If we ever want to run just a single line of code we can press Control-Enter.
In an analog synth you can route a signal through various modules until finally plugging into an output. In Hydra, we can add more functions in a chain until connecting to our output. Let’s add a rotate() function.
We can also use parameters. The first parameter for rotate is the amount of rotation, and the second number is the speed of rotation.
osc(10, 0, 0.9).rotate(0.2, 0.4).out();To undo / go back one step, press your browser’s back button. You can also use the forward button. This is how to navigate back and forth in time in your code.
Let’s do a repeat effect.
osc(10, 0, 0.9).rotate(0.2, 0.4).repeat().out();By default it repeats the image 3 times in a row. We can enter a parameter to change the amount.
osc(10, 0, 0.9).rotate(0.2, 0.4).repeat(2).out();Kaleidoscope
osc(10, 0, 0.9).rotate(0.2, 0.4).kaleid().repeat(2).out();Try changing the order of functions.
osc(10, 0, 0.9).kaleid().rotate(0.2, 0.4).repeat(2).out();Oscillator is a source. We can start with other sources.
For example, we can start with a shape.
shape().out();By default, shape is a triangle with 3 sides.
shape(5).out();A pentagon. The parameter specifies number of side.s
We can add many more to get something like a circle.
shape(50).out();Another source is a solid color.
solid(2, 3).out();To find out about more possible sources and other functions, you can click the ? (question) icon in the top right of Hydra, and then scroll down the intro and click to a list of hydra functions. You may want to open in a new window.
At the top of that page are possible sources. The first listed one is noise.
noise().out();We can enter 1 parameter for how noisy it is. This noise is the Perlin noise we’ve been using in p5.js as well.
noise(3).out();A second parameter is the rate of change.
noise(3, 8).out();Voronoi pattern is another source. This is a new noise source for us.
voronoi(7, 1).out();These can all be combined with the functions we covered earlier like repeat(), kaleid(), color(), rotate().
voronoi(3, 1).color(1, -1).out();Unlike p5.js, you can run a single line. If you press Control-Enter, it will run just the line you’re on.
s0.initScreen()
src(s0).hue().out()