This blog is about my experience in exploring hydra for the first time.

Starting Hydra

Hydra is not as well known as P5.js. Thus there are not many tutorials about it. The best way to learn it is through the website itself. I started my learning journey by following the tutorial on the Hydra website. 

The tutorial started with introducing the editor interface.  I find the share function interesting because you can save your design and share it on the hydra Twitter account. It’s like communicating with code. 

After that, I copy paste the code into the tutorial.

osc().out()

When I run the program, the screen shows straight black-and-white lines. This function is an oscillator. The function work this way:

osc(frequency, sync, colour offset).out()


All I need to do is change the value of the frequency, sync, and colour offset to get a gradient. If I add a rotate() function before the out() function, it will let the colour wave move to a certain degree.

After getting to this point, I read the whole “Getting Started” page on my own. It is quite redundant to paraphrase every single step I took in the tutorial for this blog because the tutorial itself is easy to understand.

Here are some examples of my experiments when I play around with hydra: