Add P function to hydra, that is able to resolve strudel like pattern…

…s for value control

Strudel needs to be loaded first, in order to be able to use the mini parser.
We also just access strudel via the window parent object, which might cause problems in some sandboxes?

packages/web/src/lib/hydra-wrapper.ts

@@ -7,6 +7,7 @@ declare global {
     src: Function;
     H: Function;
     P5: Function;
+    P: Function;
   }
 }
 
@@ -64,6 +65,22 @@ export class HydraWrapper {
 
     window.H = this._hydra;
 
+    // Enable using strudel style mini-patterns for argument control on Hydra.
+    // strudel needs to be loaded first, otherwise this will cause warnings, and rendering will not
+    // include the mini-pattern.
+    window.P = (pattern: any) => {
+      return () => {
+        // parse using the strudel mini parser
+        const reified = window.strudel.mini.minify(pattern)
+
+        const now = window.strudel.core.getTime()
+
+        // query the current value
+        const arc = reified.queryArc(now, now)
+        return arc[0].value;
+      }
+    }
+
     this.initialized = true;
     console.log("Hydra initialized");
   }

packages/web/src/routes/frames/hydra.tsx

@@ -56,6 +56,7 @@ export function Component() {
   useAnimationFrame(
     useCallback(() => {
       window.m = window.parent?.mercury?.m;
+      window.strudel = window.parent?.strudel?.strudel;
     }, [])
   );
 

packages/web/src/routes/frames/strudel.tsx

@@ -34,6 +34,8 @@ export function Component() {
       }
     };
 
+    window.strudel = instance;
+
     window.addEventListener("message", handleWindowMessage);
 
     return () => {