Branch: master
Clone or download
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples added key press example Feb 4, 2019
.gitignore added installation guide Jan 20, 2019 added link to functions doc Feb 4, 2019

An Introduction to Hydra

What is Hydra

Hydra is a live-coding library created by Olivia Jack. While Hydra uses JavaScript, it is structured in a way that requires little intimate knowledge of JavaScript. If you are coming from another language, or are new to programming, you can build really interesting visuals in Hydra.

Essentially, Hydra takes an input → modifies it → and returns an output.

Installing Hydra

There are three options for getting Hydra onto your computer. I recommend starting with the online editor before downloading the Atom package.

Using a Web Browser:

Using Atom:

  • Download and install Atom, an open source text editor built by GitHub.
  • Install inside Atom:
    • Open Preferences
    • Click Install on left sidebar
    • Search for "atom-hydra" using search bar and click install
    • Restart atom editor
  • Install using APM (Atom Package Manager):
    • The Atom Package Manager is a Command Line tool that you can use to install atom plugins
    • Open terminal
    • Run apm install atom-hydra

To start Hydra inside Atom, click Packages in top menu bar. Under "atom-hydra" select Toggle. Press Control + Option + Enter to evaluate a block of code.

Running Locally (Requires Node):

  • Open Terminal
  • Run git clone
  • Run cd hydra to move into newly created hydra directory
  • Install dependencies by running npm install
  • Start local server by running npm start


To follow along with slides, use example files found in examples


List of all available function

Variables & Functions

name description example
bpm change bpm of hydra cycles bpm( 120 );
Math.abs keep values position Math.abs(-1) // returns 1
Math.random creates a random float between 0 and 1 Math.random()*2
Math.sin sin wave for more fluid animation Math.sin(value)
mouse.x x position of mouse mouse.x / window.innerWidth * 100
mouse.y y position of mouse mouse.y / window.innerHeight * 100
time elapse time in milliseconds () => Math.sin(time)
window.innerWidth width of window
window.innerHeight height of window
screencap eval this function to save an image of your hydra sketch screencap();