a short hydra tutorial

hydra.md

Hydra

You can find Hydra at: < hydra >

The easiest way to get started is to start changing numbers in existing sketches (you can load new random sketches by hitting the reload button in the upper right corner) and hitting ctrl+shift+enter to see how your results change after modifying the code.

There’s lots of commented examples to look at here: hydra-examples/0-getting-started.js at master · ojack/hydra-examples · GitHub

And there’s documentation for the various functions at: hydra/funcs.md at master · ojack/hydra · GitHub

Let’s start by creating an oscillator similar to what we did in The Force:

frequency = 10
horizontalScan = .1

osc( frequency, horizontalScan ).out()

osc() also accepts a third parameters which colorizes the output. Let’s apply some transformations to the output of our oscillator.

osc( 16, .15, .5 )
  .rotate( Math.PI/3 )
  .pixelate( 10, 20 )
  .out()

Bringing in FFT data

OK, hopefully that’s enough to get people making interesting patterns… make sure to look at hydra/funcs.md at master · ojack/hydra · GitHub for some other functions to try out. Let’s bring in some FFT data so that we can make our visuals audio reactive.

The audio data for Hydra is stored in the tersely named a variable. We can access the “bins” of our FFT analysis via array access, e.g. a.bins[0]. The number of bins in the analysis can be set using a call to a.setBins().

Hydra will accept a function for any parameter. For example:

__time = 0
osc( () => __time++ % 100 ).out()

We can use these functions to read the current results of our FFT analysis and assign that result to parameters. In the example below we’ll control pixellation with the FFT.

// show the FFT analysis in the bottom-right corner
a.show()

osc(16, .15, .5)
  .rotate(Math.PI/3)
  .pixelate( () => a.fft[0] * 10, 20)
  .out()

// control a lowpass filter on the fft values
// a value of 0 will contain no smoothing
a.setSmooth( .95 )

// set the number of "bins" to use
a.setBins(2)

Hydra uses the Meyda.js library GitHub - meyda/meyda: Audio feature extraction for JavaScript. under the hood for FFT analysis. One of the nice features of Medya is that you can easily apply a lowpass filter to the FFT results, so that the output is less hectic.

Feedback

It wouldn’t be fair to leave Hydra without getting some video feedback into the mix. In order to use feedback, we have to assign our output to a buffer… these buffers are named o0 , o1 etc. We can then use the buffers for blending / mixing etc.

osc( 16, .15, .5 )
  .modulate( o0, () => mouse.x * .0001  )
  .rotate( Math.PI/3 )
  .out( o0 )