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.

To include in a webpage (bundled version):

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

<script src="https://unpkg.com/hydra-synth"></script>
<script>
      // create a new hydra-synth instance
      var hydra = new Hydra({ detectAudio: false })
      osc(4, 0.1, 1.2).out()
</script>

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:

import Hydra from 'hydra-synth'

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

To use using cjs/require syntax:

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:

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

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

If makeGlobal is set to false, buffers and functions can be accessed via the synth property of the hydra instance.

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.

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:

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:

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.

Known issues / troubleshooting

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)

define: {
  global: {},
},

Autoplay on iOS

from issue #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 <video> element is not rendered on screen, the video does not update. As a workaround, you can make a small render of the video in a corner and this seems to work

    <video style="position:static;top:1px;width:1px;height:1px" id="vid" autoplay loop muted playsinline crossorigin>
      <source src="https://cdn.glitch.global/8df667c3-e544-4cbb-8c16-f604238e8d2e/paper.mov?v=1682418858521">
    </video>

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