Need help with hydra-synth?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

ojack
166 Stars 58 Forks GNU Affero General Public License v3.0 267 Commits 25 Opened issues

Description

Synth engine for hydra

Services available

!
?

Need anything else?

Contributors list

# 114,278
CSS
HTML
160 commits
# 207,935
HTML
CSS
Django
transac...
9 commits
# 126,111
pinboar...
Shell
Docker
pure-da...
4 commits
# 408,239
CSS
HTML
4 commits
# 186,308
PHP
openfra...
OpenCV
p5js
4 commits
# 65,693
CSS
Apache ...
Jupyter...
data-ex...
2 commits
# 149,468
Neovim
PHP
livecod...
live-co...
1 commit
# 185,145
webmidi
web-mid...
node
macOS
1 commit
# 237,193
CSS
HTML
esoteri...
osc
1 commit
# 271,943
glsl
shader-...
Electro...
C
1 commit

Hydra-Synth

Video synth engine for hydra.

Currently experimental / in-progress.

This is the main logic of hydra packaged as a javascript module, intended for use within javascript projects. If you are looking to get started with hydra quickly, visit the web editor or the main repo. To use hydra within atom, follow the instructions at https://github.com/ojack/hydra-examples.

image of hydra in webpage

To include in a webpage (bundled version):

Include the bundled version of this library in your html file:

html


You can see and remix a live example here: https://glitch.com/edit/#!/hydra-webpage

To use as a module:

Download the module:

npm install --save hydra-synth

Include in your app: ```javascript const Hydra = require('hydra-synth')

const hydra = new Hydra({ detectAudio: false }) osc(4, 0.1, 1.2).out() ```

The rest of this README is about configuring hydra-synth. For broader hydra documentation and usage, see getting started, interactive function documentation, and Hydra Book (by Naoto Hieda).

API:

const hydra = new Hydra([opts])

create a new hydra instance

If

opts
is specified, the default options (shown below) will be overridden.
{
  canvas: null, // canvas element to render to. If none is supplied, a canvas will be created and appended to the screen

width: // defaults to canvas width when included, 1280 if not

height: // defaults to canvas height when included, 720 if not

autoLoop: true, // if true, will automatically loop using requestAnimationFrame.If set to false, you must implement your own loop function using the tick() method (below)

makeGlobal: true, // if false, will not pollute global namespace (note: there are currently bugs with this)

detectAudio: true, // recommend setting this to false to avoid asking for microphone

numSources: 4, // number of source buffers to create initially

numOutputs: 4, // number of output buffers to use. Note: untested with numbers other than 4. render() method might behave unpredictably

extendTransforms: [] // An array of transforms to be added to the synth, or an object representing a single transform

precision: null // force precision of shaders, can be 'highp', 'mediump', or 'lowp' (recommended for ios). When no precision is specified, will use highp for ios, and mediump for everything else.

pb = null, // instance of rtc-patch-bay to use for streaming }

Custom render loop

You can use your own render loop for triggering hydra updates, instead of the automatic looping. To use, set autoLoop to false, and call

javascript
hydra.tick(dt)
where dt is the time elapsed in milliseconds since the last update

To develop:

npm run dev

Sets up an example using hydra-synth that is automatically updated when source files are updated. It is possible to write test code by editing /example/index.js or by writing hydra code into the developer console.

Non-global mode [in progress]

If makeGlobal is set to false, buffers and functions can be accessed via the synth property of the hydra instance. Note that sources and buffers are contained in an array and accessed by index. E.g.:

javascript
let synth = hydra.synth
synth.osc().out()
synth.s0.initCam()

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.