NOTE: experimental / unstable

A custom element for wrapping the hydra-synth engine for use in wobble web.

Adaptation of by jdomizz, but with a few notable differences.

Livecodeability

Text inside the element is interpreted as code and is "live code-able". For example,

<hydra-canvas>
  <pre>
    osc().out()
  </pre>
<hydra-canvas>

will render an oscillator. editing the inner text in the browser console will update the visuals.

Efficient attribute updates

Changing an attribute does not reload the entire context, but just updates the relevant property

No global mode

Package

Install the package from npm with the following command.

npm install hydra-canvas

Once you’ve done that, import the custom element in your javascript module.

import 'hydra-canvas'

Usage

Include your code between the element tags.

<hydra-canvas>
  s0.initImage("https://upload.wikimedia.org/wikipedia/commons/2/25/Hydra-Foto.jpg")

  osc(30,0.01,1)
    .mult(osc(() => (100 * Math.sin(time * 0.1)),-0.1,1).modulate(noise(3,1)).rotate(0.7))
    .blend(src(s0))
    .posterize([3,10,2].fast(0.5).smooth(1))
    .modulateRotate(o0, () => mouse.x * 0.003)
    .out()
</hydra-canvas>

Note you can load scripts as in the hydra editor.

<hydra-canvas>
  await loadScript('https://cdn.jsdelivr.net/npm/hydra-midi@latest/dist/index.js')

  await midi.start({ input: '*', channel: '*' }).show()
</hydra-canvas>

Configuration

You can use the following attributes and properties to configure the embeded engine. Read the hydra-synth API documentation for more information about these options.

Attributes width and height

In addition to the engine, the custom element also takes care of the canvas. By default it creates one the size of the window, which is useful for many cases. If this is not yours, you can use the width and height attributes to modify the canvas size.

<hydra-canvas width="250" height="250"></hydra-canvas>

Attribute sources

You can use the sources attribute to set the number of source buffers available for multimedia resources. The default value is 4.

<hydra-canvas sources="8">
  s0.initCam()
  s1.initScreen()
  s6.initImage('https://upload.wikimedia.org/wikipedia/commons/2/25/Hydra-Foto.jpg')
  s7.initVideo('https://media.giphy.com/media/AS9LIFttYzkc0/giphy.mp4')

  src(s0)
    .blend(src(s1))
    .blend(src(s6))
    .blend(src(s7))
    .out()
</hydra-canvas>

Attribute outputs

You can use the outputs attribute to set the number of output buffers to use. The default value is 4.

<hydra-canvas outputs="8">
  osc().out(o7)

  render(o7)
</hydra-canvas>

Warning Note that hydra-synth itself has only been tested with 4 outputs, so use this attribute with caution.

Attribute precision

You can use the precision attribute to force precision of shaders. By default no precision is specified, so the engine will use highp for iOS and mediump for everything else. Avaiblable options are highp, mediump and lowp.

<hydra-canvas precision="highp"></hydra-canvas>