diff --git a/packages/hydra/README.md b/packages/hydra/README.md index d300bb88..0b238692 100644 --- a/packages/hydra/README.md +++ b/packages/hydra/README.md @@ -12,6 +12,12 @@ await initHydra(); Then you can use hydra below! +### options + +You can also pass options to the `initHydra` function. These can be used to set [hydra options](https://github.com/hydra-synth/hydra-synth#api) + these strudel specific options: + +- `feedStrudel`: sends the strudel canvas to `s0`. The strudel canvas is used to draw `pianoroll`, `spiral`, `scope` etc.. + ## Usage via npm ```sh diff --git a/packages/hydra/hydra.mjs b/packages/hydra/hydra.mjs index 3e86504c..97ca5ac4 100644 --- a/packages/hydra/hydra.mjs +++ b/packages/hydra/hydra.mjs @@ -1,20 +1,38 @@ import { getDrawContext } from '@strudel.cycles/core'; -export async function initHydra( - options = { - src: 'https://unpkg.com/hydra-synth', - detectAudio: false, - }, -) { +let latestOptions; + +function appendCanvas(c) { + const { canvas: testCanvas } = getDrawContext(); + c.canvas.id = 'hydra-canvas'; + c.canvas.style.position = 'fixed'; + c.canvas.style.top = '0px'; + testCanvas.after(c.canvas); + return testCanvas; +} + +export async function initHydra(options = {}) { + // reset if options have changed since last init + if (latestOptions && JSON.stringify(latestOptions) !== JSON.stringify(options)) { + document.getElementById('hydra-canvas').remove(); + } + latestOptions = options; + //load and init hydra if (!document.getElementById('hydra-canvas')) { - const { canvas: testCanvas } = getDrawContext(); - const { src, ...opts } = options; + console.log('reinit..'); + const { + src = 'https://unpkg.com/hydra-synth', + feedStrudel = false, + ...hydraConfig + } = { detectAudio: false, ...options }; await import(src); - const hydraCanvas = testCanvas.cloneNode(true); - hydraCanvas.id = 'hydra-canvas'; - testCanvas.after(hydraCanvas); - new Hydra(Object.assign({ canvas: hydraCanvas }, opts)); - s0.init({ src: testCanvas }); + const hydra = new Hydra(hydraConfig); + if (feedStrudel) { + const { canvas } = getDrawContext(); + canvas.style.display = 'none'; + hydra.synth.s0.init({ src: canvas }); + } + appendCanvas(hydra); } } diff --git a/website/src/pages/learn/hydra.mdx b/website/src/pages/learn/hydra.mdx index a506e53c..f1ace48b 100644 --- a/website/src/pages/learn/hydra.mdx +++ b/website/src/pages/learn/hydra.mdx @@ -41,6 +41,8 @@ note("[a,c,e,,b4]/4").s("sawtooth").vib(2) `} /> +## H patterns + There is a special function `H` that allows you to use a pattern as an input to hydra: + +## detectAudio + +To use hydra audio capture, call `initHydra` with `{detectAudio:true}` configuration param: + + a.fft[0]*.25 + ) + .add(src(o0).color(.71 ).scrollX(.005),.95) +.out(o0) +n(pattern).scale("A:minor").piano().room(1) `} /> You might now be able to see this properly here: [open in REPL](/#YXdhaXQgaW5pdEh5ZHJhKCkKbGV0IHBhdHRlcm4gPSAiMyA0IDUgWzYgN10qMiIKc2hhcGUoSChwYXR0ZXJuKSkub3V0KG8wKQpuKHBhdHRlcm4pLnNjYWxlKCJBOm1pbm9yIikucGlhbm8oKS5yb29tKDEpIA%3D%3D) + +Similar to `detectAudio`, all the [available hydra options](https://github.com/hydra-synth/hydra-synth#api) can be passed to `initHydra`. + +## feedStrudel + +Using the `feedStrudel` option, you can transform strudel visualizations with hydra: + +")) + .diff(osc(1,0.5,5)) + .modulateScale(osc(2,-0.25,1)) + .out() +// +stack( + s("bd*2,[hh:0:<.5 1>]*4,~ rim").bank("RolandTR909").speed(.9), + note("[>>]*3").s("sawtooth") + .room(.75).sometimes(add(note(12))).clip(.3) + .lpa(.05).lpenv(-4).lpf(2000).lpq(8).ftype('24db') +).fft(4) + .scope({pos:0,smear:.95})`} +/>