This document provides an introduction to creating generative visuals using Hydra, a tool for live-coding networked visuals. It discusses Hydra's layers, modifiers, outputs, evaluating code, built-in functions, blending outputs, reacting to sound, adding sources like video/images, and sharing outputs across servers using rtc-patch-bay. The presenter is Zach Krall, an artist and designer researching live coding visuals.

1. Generative Visuals using Hydra Zach Krall @zachkrall
Introduction to making generative
visuals using Hydra, a tool for live-
coding networked visuals
github.com/zachkrall/hydra-workshop
4:30 PM

2. Generative Visuals using Hydra Zach Krall @zachkrall
Zach Krall @zachkrall
Artist / Developer / Design Researcher
MFA Design + Technology student at
Parsons School of Design
Member of LiveCode.NYC

3. Generative Visuals using Hydra Zach Krall @zachkrall
Caution:
Some results for generative visuals
can cause really fast flashing and
rapid color changes.

4. Generative Visuals using Hydra Zach Krall @zachkrall

5. Generative Visuals using Hydra Zach Krall @zachkrall
Olivia Jack
github.com/ojack
Hydra: Live Coding networked visuals
presentation at International Conference
for Live Coding (ICLC) at Medialab Prado
(Madrid, Spain) 18 January 2019.

6. Generative Visuals using Hydra Zach Krall @zachkrall
https://www.youtube.com/watch?
v=VMTZSw4xqi4
Sandin Image Processor <https://en.wikipedia.org/wiki/VJing#/
media/File:Sandin_Image_Processor.jpg>

7. Generative Visuals using Hydra Zach Krall @zachkrall
Hydra takes an input → modifies it → and returns an output

8. Generative Visuals using Hydra Zach Krall @zachkrall
arrays
[ 20, 5, 30, 150 ]
// myArray[2] returns 30
integer
5
float
21.0
// function( x ){
// return x;
// }
( x ) => x
functions

9. Generative Visuals using Hydra Zach Krall @zachkrall
Layers, modifiers, output1
Evaluating code & custom functions2
Blending & webcam3
Reacting to sound4
Adding other sources ( video, image )5
Sharing across rtc-patch-bay6

10. Generative Visuals using Hydra Zach Krall @zachkrall
o0 o2
o1 o3
s0 s2
s1 s3
a
output buffersmedia sources audio input
osc
noise
gradient shape
voronoi
solid
base layers
Layers, modifiers, output1

11. Generative Visuals using Hydra Zach Krall @zachkrall
o0 o2
o1 o3
s0 s2
s1 s3
a
output buffersmedia sources audio input
osc
noise
gradient shape
voronoi
solid
base layers
modifiers
contrast color
invert luma
treshold
rotate
scale
kaleid
pixelate
blending

12. Generative Visuals using Hydra Zach Krall @zachkrall
out o0
saturate
pixelate
scale a (mic)
osc
modulate
s0 (webcam)

13. Generative Visuals using Hydra Zach Krall @zachkrall
out
modulate
o0
saturate
pixelate
scale a (mic)
osc
s0 (webcam)

14. Generative Visuals using Hydra Zach Krall @zachkrall
s0.initCam();
a.show();
a.setBins(3);
osc( 60, 0.1, 0 )
.modulate(
src(s0) , 2
)
.saturate( 0.7 )
.pixelate( 10 , 15 )
.scale(
() => a.fft[0]
).out( o0 );
render(o0);out
modulate
o0
saturate
pixelate
scale a (mic)
s0 (webcam)
osc

15. Generative Visuals using Hydra Zach Krall @zachkrall
hydra-editor.glitch.me
Evaluating code & custom functions2

16. Generative Visuals using Hydra Zach Krall @zachkrall
osc( ).out( );
to evaluate entire code
Ctrl + Shift + Enter
to evaluate single block
Ctrl + Enter

17. Generative Visuals using Hydra Zach Krall @zachkrall
noise( scale, speed ) voronoi( scale, speed ) gradient( speed )
osc( freq, speed, offset ) shape( sides, blur, scale )solid( red, green, blue )

18. Generative Visuals using Hydra Zach Krall @zachkrall
osc(
freq: how many times it repeats
across horizontal axis ,
speed: how quickly it scrolls
left (positive) or right (negative) ,
offset: separation of color layers
)
offset

19. Generative Visuals using Hydra Zach Krall @zachkrall
any parameter that accepts
a value can also accept a
function that returns a value

20. Generative Visuals using Hydra Zach Krall @zachkrall
shape(3)
.scale(
() => Math.sin(time)
)
.out()

21. Generative Visuals using Hydra Zach Krall @zachkrall

22. Generative Visuals using Hydra Zach Krall @zachkrall
Math.sin( ) // fluid looping animation
Math.abs( ) // keeps values positive
Math.random( ) // honestly like ... a lot

23. Generative Visuals using Hydra Zach Krall @zachkrall
Helpful Functions / Variables
Time (elapsed in milliseconds)
time
Mouse
mouse.x or mouse.y
// mouse = { x: , y: }
Window
window.innerWidth
window.innerHeight
Set Beats-Per-Minute
bpm(120);
Save Image
screencap();

24. Generative Visuals using Hydra Zach Krall @zachkrall
Iterating over array is built in!
shape( [3, 4] )
.out()

25. Generative Visuals using Hydra Zach Krall @zachkrall
Blending & webcam3
blend add mult diff
combine color
modulate modulateHue modulateKaleid modulatePixelate
modulateScale
combine coordinates
modulateRotate

26. Generative Visuals using Hydra Zach Krall @zachkrall

27. Generative Visuals using Hydra Zach Krall @zachkrall
out
o0
o1
o2
o0
diff
o2
o1

28. Generative Visuals using Hydra Zach Krall @zachkrall
out
o0
o1
o2
o0
diff
o2
o1
s0.initCam();
src(s0).color(1,0,0).out(o0);
osc(60, 0, 0).out(o2);
src( o0 )
.diff(
o2, 1
)
.out( o1 );
render( o1 );

29. Generative Visuals using Hydra Zach Krall @zachkrall
out
o0
modulateRotate
o2
o1

30. Generative Visuals using Hydra Zach Krall @zachkrall
s0.initCam(); s0.initScreen(); s0.clear();
Blending & webcam3

31. Generative Visuals using Hydra Zach Krall @zachkrall
s0.initScreen(4);

32. Generative Visuals using Hydra Zach Krall @zachkrall
Reacting to sound4 a
a.show()
a.setBins(4)
a.setSmooth()
a.hide()
a.fft // new Array(4)
// [ X, X, X, X ]

33. Generative Visuals using Hydra Zach Krall @zachkrall
a.show();
a.setBins(4);
shape( 3 )
.rotate(
() => Math.PI * mouse.x / 180
)
.repeatX( 3 )
.repeatY( 3 )
.scale(
() => a.fft[0]*4
)
.out( o0 );
render(o0);

34. Generative Visuals using Hydra Zach Krall @zachkrall
Adding other sources5
a source buffer expects an HTML element as input
s0.initCam();
<video
autoplay="true"
id="webcam">
</video>

35. Generative Visuals using Hydra Zach Krall @zachkrall
s0.init(
{
src: myElement , // variable that holds element
dynamic: false // set true for video
}
);
var myElement = document.createElement('img'); // <img />
myElement.src = '/path/to/img.jpg'; // <img src=" " />

36. Generative Visuals using Hydra Zach Krall @zachkrall
Sharing across rtc-patch-bay6
pb.setName("zachpb")
Share your output
pb.list()
Find other outputs
s0.initSource("zachpb")
Use stream as source
→ →
Must be connected to the same hydra server
e.g. localhost:8000 → http://192.1.1.10:8000

37. Generative Visuals using Hydra Zach Krall @zachkrall
social media
@zachkrall
email
zach@zachkrall.com
livecode lab
musiccommunitylab.org
livecode nyc
livecode.nyc