MVP: Hydra integration

next/components/hydra.js

+import React, { useRef, useEffect } from "react";
+
+class HydraSynth extends React.Component {
+  constructor(props) {
+    super(props);
+    this.width = props.width;
+    this.height = props.height;
+  }
+
+  componentDidMount() {
+    const Hydra = require('hydra-synth');
+    const hydra = new Hydra({
+      // canvas element to render to. If none is supplied, a canvas will be created and appended to the screen
+      // canvas: this.canvasRef,
+      autoLoop: true,
+      makeGlobal: true,
+      numSources: 4,
+      detectAudio: false,
+      numOutputs: 4,
+    });
+    hydra.setResolution(this.width, this.height);
+
+    // This works! Now generate one for each :D
+    // TODO: One per page, with template and lib
+    // FIXME: Canvas position
+    // s0.initImage("https://git.plnech.fr/pln/Hydra/raw/master/StarryNights/img/halley.png");
+    // src(s0).out(o0)
+    // src(o0)
+    //   .modulate(src(o0),() => Math.sin(time/100) / 10)
+    // .out(o1)
+    // src(o1)
+    //   .modulateScale(osc(1,0.4),0.05)
+    //   .blend(noise(100,0.92).colorama(),0.07)
+    // .out(o2)
+    // src(o2)
+    //   .blend(src(o2).thresh(), () => 0.5 + 0.125 * Math.sin(time / 100 % 180))
+    //   .scrollX(-0.05)
+    //   // .scrollY(-0.1)
+    //   .scale(1.08)
+    // .out(o3)
+    // render(o3)
+
+  }
+  render() {
+    return <canvas ref="{this.canvasRef}" width={this.width} height={this.height} />;
+  }
+}
+
+export default HydraSynth

next/package.json

@@ -12,6 +12,7 @@
     "classnames": "^2.3.1",
     "date-fns": "^2.21.1",
     "gray-matter": "^4.0.2",
+    "hydra-synth": "^1.3.8",
     "next": "^10.1.3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

next/pages/hydra.js

@@ -2,6 +2,7 @@ import Image from "next/image";
 import Link from "next/link";
 import Head from "next/head";
 import Layout from "../components/layout";
+import HydraSynth from "../components/hydra";
 
 export async function getStaticProps(context) {
   return {
@@ -26,6 +27,9 @@ export default function Hydra() {
           height={475}
         />
         <p><i>Intermediary steps of <a href="https://nech.pl/nights-galactic">GaLactic</a></i></p>
+        <HydraSynth
+        width={700}
+        height={475} />
       </div>
       </Layout>
   );