hydra-synth

$3

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

$3

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

$3

Download the module:
`
npm install --save hydra-synth
`

Include in your app:
`javascript
import Hydra from 'hydra-synth'

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

$3


`javascript
const Hydra = require('hydra-synth')
`

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:
`javascript
const hydra = new Hydra([opts])
`
create a new hydra instance

If opts is specified, the default options (shown below) will be overridden.

`javascript
{
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

$3


`javascript
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
If makeGlobal is set to false, buffers and functions can be accessed via the synth property of the hydra instance.
`javascript
const h = new Hydra({ makeGlobal: false, detectAudio: false }).synth
h.osc().rotate().out()
`

In non-global mode, it is important to start all hydra functions, buffers, and variables by referencing the instance of hydra synth you are currently using.e.g.
`javascript
const h = new Hydra({ makeGlobal: false, detectAudio: false }).synth
h.osc().diff(h.shape()).out()
h.gradient().out(h.o1)
h.render()
`

This also makes it possible to use more than one hydra canvas at once:
`javascript
const h = new Hydra({ makeGlobal: false, detectAudio: false }).synth
h.osc().diff(h.shape()).out()
h.gradient().out(h.o1)
h.render()

const h2 = new Hydra({ makeGlobal: false, detectAudio: false }).synth
h2.shape(4).diff(h2.osc(2, 0.1, 1.2)).out()
`

See https://glitch.com/edit/#!/multi-hydra for a working example of multiple hydra canvases, created by Naoto Hieda.

If you would like to keep the same syntax as hydra in non-global mode, consider destructuring the object further:
`javascript
const { src, osc, gradient, shape, voronoi, noise, s0, s1, s2, s3, o0, o1, o2, o3, render } = hydra
shape(4).diff(osc(2, 0.1, 1.2)).out()
`

hydra-ts is a fork of hydra-synth in Typescript maintained by @folz.

$3

#### Vite
When using hydra with Vite, you might see the error Uncaught ReferenceError: global is not defined. This is an issue in hydra-synth dependency, which further depends on node's global.

- To fully mitigate the issue: add a polyfill for global. (See ref)
- To workaround: add the following snippet to vite.config.json. (See ref)
` js
define: {
global: {},
},
`

#### Autoplay on iOS

from issue https://github.com/hydra-synth/hydra-synth/issues/137

It seems on mobile safari, videos won't autoplay because of several reasons:

* you need playsinline attribute (which can be added programmatically) https://stackoverflow.com/questions/43570460/html5-video-autoplay-on-iphone
* If the

`html

`

`
let v = document.getElementById("vid")
v.addEventListener('loadeddata', () => {
s0.init({src: v})
})
``

Here is a live example: https://glitch.com/edit/#!/hydra-video-autoplay-ios