beanz Magazine

Coding With Hydra

iezalel williams on Flickr

Looking for a way to liven up your coding sessions? Check out our Hydra workshop!

[Before getting started with Hydra I want to say that it’s possible to accidentally create some really intense flashing light patterns. Please be cautious if you have any sensitivity to flashing]

A couple of issues ago we talked about Estuary, an environment for doing live-coding of patterns of visuals and music. In this issue, we’re going to talk about a system for live coding just visuals with a beautiful system called Hydra, made by Olivia Jack.

Hydra has just a small number of pieces that can be combined in an incredible number of ways. One of the things that makes it so cool, in my opinion, is that it’s strongly influenced by analog electronics, which means that it’s built around noise, pure sine waves, and feedback in really interesting ways.

The first thing to do is go to the main Hydra website https://hydra.ojack.xyz/. You’ll see one of the many pre-written examples people have submitted. In fact, before you really get started feel free to sit and look at different examples by hitting the “shuffle” button a few times.

Once you’re ready, though, hit the garbage can button to clear the screen and then type the following onto the screen

osc(10,0.1).out(o0)

You’ll see a panning grey band that looks like this:

Now, you can do a lot by just changing the numbers. The osc function takes three arguments, actually. The first is the frequency, where a bigger number means more bands moving faster. The second is the speed at which the bands will move. The third argument actually gives it some color!

The code

osc(100,0.1,1).out(o0)

will instead give you something like this:

There’s more basic shapes you can do, though, like a really nice one is

noise().out(o0)

which creates a really smooth, almost boiling-pot-of-water-like, textures.

Now if all you could do was just create simple patterns Hydra would be neat but not necessarily amazing. However, you can start doing pretty cool stuff with just a little more code. The first piece is that there are operations that let you modify the basic patterns.

One of my favorites is the kaleid operation, which lets you do interesting things like this

osc(20,0.1,0.8).kaleid(4).kaleid(6).out(o0)

Another important trick is the ability to combine patterns together, using things like add, blend, and diff.

osc(20,0.1,0.8).kaleid(6).blend(noise(10)).out(o0)

Now here’s where things get kinda weird though: so I haven’t said a word about that .out(o0) bit at the end of each of these commands. Basically, o0 names an output for the pattern you’re creating. The importance about naming it is that you can use it for feedback, in other words you use the output in the past to feed it back into the image being created from moment to moment.

So what this means is that you can, say, take the difference of a pattern with itself after being rotated:

osc(20,0.1,0.8).diff(src(o0).rotate(0,0.2),0.5).out(o0)

And you can make it even more complicated by using modulation as well:

osc(10,0.1,0.9).blend(o0,0.4).modulate(src(o0).rotate(0,0.4),0.5).out(o0)

For that example, I recommend trying it yourself because no screenshot can capture the strange beauty of how this one shifts and moves.

One of the last things I want to tell you is about how to make patterns change even more over time, like this

osc(10,0.1,() => (time/100) % 2).out(o0)

This is just the simple pattern of scrolling bands but the color slowly changes over time.

Basically, by putting the two parentheses you’re creating a function that gets evaluated every frame. You also have the special variable time that counts up according to how long the pattern has been running.

And the very last thing I want to say is that you can even use external images and video in Hydra. Here’s the example code from an interesting little pattern I’ve tried:

s0.initImage("https://raw.githubusercontent.com/clarissalittler/estuaryresources/main/zfest/20210531_114159.jpg")

src(s0).modulate(noise(20),0.4).kaleid([10]).out(o0)

You’ll see a strange abstract pattern that looks, for all the world, like looking through a physical kaleidoscope but it’s based on a picture I once took of the inside of a mausoleum.

So, with all those pieces you can do just an incredible amount in Hydra. The trick, of course, is to experiment, try weird things, and have fun.

Learn More

Hydra documentation and examples

https://ojack.xyz/hydra-functions/

How to make Hydra respond to sound

https://github.com/ojack/hydra#audio-responsiveness-experimental

A Beginner’s Guide to Live Coding with Hydra

https://www.clipsoundandmusic.uk/hydra-tutorial-a-beginners-guide-to-live-coding-visuals/

Getting Started with Hydra

https://hydra.cc/docs/intro/

Hydra in Mythology

https://kids.kiddle.co/Hydra_(mythology)

Olivia Jack

https://www.culturehub.org/olivia-jack

Olivia Jack Talks Hydra

https://cdm.link/2019/02/hydra-olivia-jack/

Also In The December 2021 Issue

December 2021 Issue

Looking for a new way to encode your secret messages? Try steganography!

Check out our interview with Sam Henry, the programmer who coded Noah Text!

A collection of fun and inspiring stories about tech from December 2021.