Hydra's loadScript() imports arbitrary JavaScript libraries (Three.js, Tone.js, p5.js) into the live editor

The await loadScript(url) function fetches and executes a JavaScript library URL inside the Hydra editor’s global scope. After loading, the library’s globals (e.g. THREE, Tone) are available immediately. Three.js can render a 3D scene onto a WebGL canvas, which is then passed to Hydra as s0.init({ src: renderer.domElement }). Tone.js adds Web Audio synthesis alongside the visuals. p5.js can be initialized with new P5() and its canvas used as s0.init({src: p5.canvas}). The update hook lets external renderers integrate with Hydra’s render loop.

Examples

await loadScript('https://threejs.org/build/three.js')
// set up scene, then:
s0.init({ src: renderer.domElement })
src(s0).repeat().out()

Assessment

Using loadScript, load p5.js and draw a mouse-following rectangle, then pipe the p5 canvas into Hydra and apply a diff with an oscillator. Explain what update = () => {…} does.