Hydra is a browser-based platform for live coding visuals.
Built using WebRTC (peer-to-peer web streaming) and WegGL, hydra allows each connected browser/device/person to output a video signal or stream, and receive and modify streams from other browsers/devices/people. The API is inspired by analog modular synthesis, in which multiple visual sources (oscillators, cameras, application windows, other connected windows) can be transformed, modulated, and composited via combining sequences of functions.
Just remember:
There is no wrong way to use Hydra as it follows the live coding paradigm. Feel free to express yourself in anyway, any function
Every piece of run code makes its own URL. You can share the link with other people and get feedback for ideas. This is great for community remixes
Experimentation and Playing and finding your own voice within the language will make the experience.
HYDRA TUTORIAL STEPS
Step 1. Test out & learn the Hydra functions.
Step 2. Test in Hydra interface (scroll down below).
Step 3. What we are doing for CBF Community Media Visual Projections. All code in Hydra is indicated in red.
Step 4. Examples in Hydra (you can skip this step).
Step 5. Submit into CBF Community Media & Hydra Creative Code. You will need to sign in with your Gmail ID to submit in form or email it to Kavita [k.gonsalves@hdr.qut.edu.au].
STEP 1. Test out & Learn Hydra functions
Open Hydra in another webpage or try it out in Step 2.
The left image explains the buttons on Hydra interface.
Test Hydra function below. For egs, click on "noise", "rotate", "modulaterepeat" and more.
Copy-paste and try out different combinations in Step 2.
TIPS & TRICKS
Shortcuts
CTRL-Enter: Run a line of code
CTRL-Shift-Enter: Run all code on screen
ALT-Enter: Run a block of code
CTRL-Shift-H: Hide or show code
CTRL-Shift-F: Format code using Prettier
CTRL-Shift-S: Save screenshot and download as local file/ image
CTRL-Shift-G: Share to twitter (if available). Shares to twitter.com/hydra_patterns
CTRL-Shift-L: Generates a URL with your code (CTRL+Shift+Enter also does this)
CTRL-Z : Undo
CTRL-Shift-Z : Redo
We will be using the Camera Filter Code:
s0.initCam() // initialize a webcam in source buffer s0
src(s0).kaleid(4).out() // render the webcam to a kaleidoscope
Step 2. Test in Hydra interface
Step 3. What we will be experimenting with for CBF Community Media Visuals Projections
In this snippet of code, s0 refers to the camera source , which most likely would be your webcam.
To initialize a webcam in source buffer s0
s0.initCam()
The code below renders the webcam to a scroll function and manipulates them through the functions of Scale and Noise with a speed of 0.5
src(s0).scrollX(0.125,0.325).scrollY(0.125,0.325).modulateScale(noise(0.2,0.2,0.2)).out()
Combine the code together and try it out in Hydra
s0.initCam()
src(s0).scrollX(0.125,0.325).scrollY(0.125,0.325).modulateScale(noise(0.2,0.2,0.2)).out()
Step 4. Examples of Hydra
Step 4: Contribute your code
Submit into CBF Community Media & Hydra Creative Code. You will need to sign in with your Gmail ID to submit in form or email it to Kavita [k.gonsalves@hdr.qut.edu.au].
More info on Hydra
Tutorials Written:
Video Tutorials