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.
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
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()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).
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
}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
npm run devSets 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.
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.
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: {},
},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
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent