Hydra in a Webpage | hydra video synth

Hydra-Synth #

In addition to using hydra within the hydra web editor, it is also possible to use the hydra video-synth engine as a library within your own javascript projects.

hydra-synth is a javascript library containing the main logic of hydra packaged as a javascript module.

image of hydra in webpage

To include in a webpage (bundled version): #

Include the bundled version of hydra-synth 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 learning hydra

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

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 <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