Interactive Hydra Tutorial 🌀 Bulka

Interactive Hydra Tutorial

Welcome to the step-by-step Hydra tutorial! Every example can be edited and run right here.

Step 1: Your first visual

Let’s start with the simplest thing: an oscillator. Press play to see the result:

Try: change the number inside osc() to 10, 50 or 100 and see what changes!

Step 2: Oscillator parameters

The osc() oscillator takes three parameters:

  • frequency — the stripe frequency
  • sync — the movement speed
  • offset — the color offset

Try:

  • Change the first number (frequency): 5, 20, 60
  • Change the third number (color): 0, 0.5, 1.5

Step 3: Adding transforms

Now add a transform: rotation with .rotate():

Try: change the number in rotate() to 0, 1, 2, 3.14

Step 4: Kaleidoscope

Add a kaleidoscope effect with .kaleid():

Try: change the number in kaleid() to 3, 6, 8, 12

Step 5: Animating over time

Let’s make the visual move! Use a function with time:

Key point: () => time * 0.1 is a function evaluated every frame. time is the seconds since the start.

Step 6: Other sources: noise

Let’s try another source: noise() (Perlin noise):

Step 7: Adding color

Color the noise with .color():

Try:

  • Red: .color(1, 0, 0)
  • Blue: .color(0, 0, 1)
  • Magenta: .color(1, 0, 1)

Step 8: Geometric shapes

The shape() source makes polygons:

Step 9: A grid of shapes

Add repetition with .repeat():

Step 10: Blending sources

Blend two sources with .blend():

Step 11: Difference (diff)

Compute the difference between two sources:

Step 12: Modulation, the magic of distortion!

Modulation is the most fun part! One source distorts another:

Try: change the second number in modulate() from 0.1 to 1.0

Step 13: Modulating with an oscillator

Let’s try another modulator:

Step 14: Putting it all together

Now let’s make a complex visual:

Step 15: Feedback, infinity!

Feedback makes an infinite mirror effect:

Step 16: Arrays for animation

Arrays switch values automatically:

Step 17: Smooth transitions

Add .smooth() for smooth transitions:

Step 18: Audio reactivity

Connect the visual to the sound:

Step 19: Strudel patterns in Hydra

The H() function links Strudel patterns to Hydra:

Step 20: Your first masterpiece!

Now you know the basics! Here is a final example: edit it however you like:

What’s next?

Congratulations! You now know the basics of Hydra. Keep exploring:

Tip: experiment! Change numbers, combine functions, make mistakes: that’s how art is born!