Merge pull request #818 from atfornes/main

Hydra fixes and improvements

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

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);
   }
 }
 

website/src/pages/learn/hydra.mdx

@@ -41,6 +41,8 @@ note("[a,c,e,<a4 ab4 g4 gb4>,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:
 
 <MiniRepl
@@ -48,8 +50,50 @@ There is a special function `H` that allows you to use a pattern as an input to
   tune={`await initHydra()
 let pattern = "3 4 5 [6 7]*2"
 shape(H(pattern)).out(o0)
-n(pattern).scale("A:minor").piano().room(1) 
+n(pattern).scale("A:minor").piano().room(1)
+`}
+/>
+
+## detectAudio
+
+To use hydra audio capture, call `initHydra` with `{detectAudio:true}` configuration param:
+
+<MiniRepl
+  client:only="react"
+  tune={`await initHydra({detectAudio:true})
+let pattern = "<3 4 5 [6 7]*2>"
+shape(H(pattern)).repeat()
+  .scrollY(
+    ()=> 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:
+
+<MiniRepl
+  client:only="react"
+  tune={`await initHydra({feedStrudel:1})
+//
+src(s0).kaleid(H("<4 5 6>"))
+  .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("[<g1!3 <bb1 <f1 d1>>>]*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})`}
+/>