A collection of different visuals that I have created with Hydra, a JavaScript-based web tool for creating synthesized visuals. You can use it in your browser, download it as a package with the Atom IDE, or connect it to your own webpage with the hydra-synth engine, available via npm.

• Copy one of the scripts from this repository to your clipboard.
• Open the Hydra Editor in your browser (Chrome).
• Click the trash can at the top right of the screen to delete the current visual (after admiring the mesmerizing display).
• Paste the script from your clipboard into the editor.
• Press the play button in the top right of the screen, or press CTRL+SHIFT+ENTER.

• The creator of Hydra, Olivia Jack, has written some instructions for using basic functions.
• You can easily modify values and press the run button to execute the code and create your own visuals.
• Try adding a single oscillator as a source. PLEASE NOTE: high frequency oscillations or bright flashes can trigger photosensitive epilepsy. There is the potential for lots of colorful flashing when using moving sources. I recommend using a relatively low integer or decimal (-5.0 - 5.0) as the first and second parameters when first experimenting with the oscillator source. Many sources have a sync (speed) parameter which can control how much movement is happening.

  // create oscillator ( frequency, speed, gradient )
  osc(1,1,0)
    .out()

• Adding effects before the .out() function:

  osc(1,1,0)
    .diff(noise(2,1)) // apply a difference color filter (with this new perlin noise source) to the oscillator
    .out()

• Reference the complete list of Hydra functions to see a variety of uses for different sources and effects
• Pressing CTRL+SHIFT+H will hide/show the code within the editor