Hydra
Live coding visuals
Hydra is a JavaScript platform used for creating live coding visuals. Live coding is the process of executing a program and seeing those changes represented during the run time of the execution. Hydra makes it possible to easily create ‘patches’ in the browser, to achieve many different types of imagery. These patches are a series of JavaScript functions that are chained together to bend and break colors and shapes to make images to your liking.
There are 5 main types of functions that hydra has implemented to make these visuals possible; source, color, geometry, blend, modulate. These are the core components for creating super psychedelic and awesome visuals on the screen.
Source functions are going to be the beginning of any patch, and define the initial starting point of the image being rendered. There is noise() which can take in two parameters, one for the scale of ‘noise’ created on the screen and the second for how offset you want that noise to constantly reset to. This will create things to sort of move around fast like slapping your hand against water at random locations and analyzing the surface. There is also veronoi() which will take in scale, speed, and blending parameters, that will determine the size, rate of movement, and modularity between each image respectively. This one reminds me of the bricks that move out of the way to get into ‘Diagon Alley’ in ‘Harry Potter,’ except the bricks are a different shape. The next one is a probably one of my favorite starting points in Hydra, is the oscillator, osc() which takes in the frequency, sync, and offset parameters to determine a speed of moving back and forth, the synchronous behavior, and how offset from the starting point to move back to. These change the behavior and the color of the image in many different and interesting ways alone, before even chaining on any of the other types of functions. There is also the shape() function which will create a shape based off of the passed in parameters, the first of which determines the amount of sides, the second determines the radius, and the third will determine the smoothness of the shape. There are other starting point methods like gradient() , src() , and solid() which will create different starting templates based off of those arguments being passed in.
voronoi().color(8,3, 44)
.rotate(({time}) =>(time%360)/20)
.modulate(osc(5,.1,0.5)
.kaleid(58).scale(({time})=>
Math.sin(time*50)*5).
modulate(noise(0.6,0.5)),0.5)
.out(o0)Color functions can create the basis of your desired color pallet in Hydra. Although some of the source functions will add color based off of their functionalities, the color functions let you have more control over what colors are being placed and when. The color() function takes in three parameters, r, g, and b rates which represent the ‘rgb’ levels with whatever numbered values you pass in for each one. The brightness() , contrast() , saturate() , and hue() functions will do exactly the common picture effects that they are named after, which help you reach that specific picture setting that you desire. There are a few more color effects functions like posterize() , shift() , and invert() which will help a developer dive even deeper into the colors on the screen especially when more chaining in your patches are involved.
a.setScale(5)
osc().modulate(noise(7),()=>a.fft[0])
.color(0,2, 34)
.kaleid(48)
.scrollX([-0.2, 0.2])
.out(o0)Geometry functions will not only add dimensions and shaping to the picture, but also create different placements of the picture (or set of pictures) one is manipulating. The pixelate() function will turn the image into a ‘pixelated’ version of the picture being rendered, with the pixelX and pixelY parameters, and the numbers passed in as arguments will be the amount of pixels in their respective positions. The repeat() method will make copies of the image based off of the number passed into it, as well as the x and y positions if one chooses to utilize those parameters. The kaleid() method (short for kaleidoscope) is one of my favorites, as it takes whatever is chained before it in the patch and turns it into a kaleidoscopic pattern, the amount of sides can be set as a parameter as well. The rotate() method takes in 2 parameter, the first of which will rotate the image in a specific direction and stop at the specified numbered position the second parameter will actually continuously rotate the entire image at a specified rate. As you can imagine this gets pretty hypnotizing, (or headache inducing depending on who you ask). There are others of course, such as, scroll() , and scale() which will add more dimensions and depth to your geometric aspects as well.
shape(2,0.8)
.kaleid(()=>6+Math.sin(time)*4)
.out(o0)Blend functions are more accessory like effects to add to the previously mentioned style of functions. They add an element of transitioning, and depth to patterns, to create more complex effects. The sub() method will add texture as well as the amount of texture that you see rendering on a patch. The texture parameter can be an entire source method itself, and this is where we get into JavaScript’s wonderful functional abilities in Hydra. The blend() will create two images that are modulated together in a specified manner, for example the first parameter might be a simple shape, then the second argument will be an array of dimensions that you’d want that second image to render as. You can also utilize the layer() method in your patch to add an entire layer, defined by a texture, and ‘layer’ it on top of the original view at a specified rate. There are more similar functions like diff() , mult() , and mask() which will help add nice complexity to these images, to make them more and more unique (and fun to stare at!).
osc(9,0.1,2)
.mult(osc(13,0.5,5))
.out()Modulate methods are more complex versions of the geometric methods, as they take in more parameters and entire textures to apply those geometric effects to. The modulateRepeat() will take in the texture, as well as other optional parameters that set the repeat rates on the x and y axis, as well as two more parameters that set the ‘offset’ of the x and y axis. The modulateKaleid() method will take in the texture and a number that will be ’n’ amount of sides. This makes a very interesting effect and adds a deeper amount of detail to the image. In fact all of the modulate type methods add this level of detail and complexity to your patches. They all are modulated versions of the geometric functions like modulateScroll() , modulatePixelate() and modulateRotate() .
osc(40,0.2,1)
.modulateScale(osc(-40,0,1).kaleid(80))
.repeat(2)
.modulate(o0,0.05)
.modulateKaleid(shape(4,320,69))
.out(o0)There are also other categories of methods, such as ‘external sources’, ‘synth settings’, ‘audio’ and ‘array’. The most important for live coding method is probably the audio ‘fft’ method which letthe images react to music with ()=>a.fft[0] chained onto your patch. The external methods let you use a webcam source or image sources to use as templates for the source views on the result of the patch. The bpm() method will let you explicitly tell the rate of modulation, rotation, or oscillation to a specified amount of ‘beats per minute’. All of these come together to make some really cool and entertaining effects for any sort of creative endeavor for coding and art enthusiasts alike.
Get Royce Taylor’s stories in your inbox
Join Medium for free to get updates from this writer.
The live, and easy to use/learn aspect is the main draw for Hydra as a live coding visual platform. Olivia Jack, the creator of Hydra, built this visualization platform for this very reason. The fact that Hydra runs in a browser also adds to it’s appeal since it allows a programmer to display the images in as big of a view as possible, in comparison to other live coding visualizers that utilize a two panel system. You can get started yourself with this link here !
Sources:
