hydra synth custom element

Live-codeable hydra element. Code can be specified either via the "code" attribute or within the body of the element.

Allows specifying sources and live-codeable parameters via separate attributes.

Available attributes:

• fps: set frames per second. (default null)
• speed: global synth speed (default 1)
• s0, s1, s2, s3: tag selector for a source element. Can be an image, video, canvas, or hydra-synth html element. For example, the following code uses one hydra element as a source element for another:

    <script src="/dist/hydra-synth-element.js" type="module"></script>
     <hydra-synth id="hello" code="osc(20, 0.1, 1.2).blend(noise(1)).out()"></hydra-synth>
    <hydra-synth s0="#hello" code="src(s0).blend(noise(1)).out()"></hydra-synth>

• n0, n1, n2, n3: numerical attributes that can be used within hydra code For example, to control a hydra parameter using a slider:

<hydra-synth id="parameters" code="osc(20, 0.1, 1.2).modulate(noise(4), n0).out()"></hydra-synth>
<input type="range" min="0" max="1" step="0.01" value="0.1" oninput="document.getElementById('parameters').setAttribute('n0', this.value)" />

• width, height: sets resolution of output canvas. if no width and height are specified, uses the "clientWidth" and "clientHeight" properties of the element

To do

• add 'numSources' and 'numOutputs' attributes