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

twitter.com/hydra_patterns

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].