Gatsby: save wip

pln/package.json

@@ -14,6 +14,7 @@
     "gatsby-plugin-sharp": "^3.2.1",
     "gatsby-source-filesystem": "^3.2.0",
     "gatsby-transformer-sharp": "^3.2.0",
+    "hydra-synth": "^1.3.8",
     "prop-types": "^15.7.2",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",

pln/src/components/canvas.js

+// we create a React context with a _null_ default value
+const SharingContext = React.createContext(null);
+
+const Canvas = (props) => {
+  const canvasRef = React.useRef(null);
+  const [
+    renderingContext,
+    setRenderingContext,
+  ] = React.useState(null);
+
+  // the canvas rendering context is not immediately avalaible
+  // the canvas node first needs to be added to the DOM by react
+  React.useEffect(() => {
+    const context2d = canvasRef.current.getContext("2d");
+    setRenderingContext(context2d);
+  }, []);
+
+  return (
+    <SharingContext.Provider value={renderingContext}>
+      <canvas ref={canvasRef} />
+      {/* hexagons are passed through the `children` prop */}
+      {props.children}
+    </SharingContext.Provider>
+  );
+};

pln/src/components/hydra-synth.js

+import PropTypes from "prop-types"
+
+const Hydra = require('hydra-synth')
+
+function HydraSynth({ canvasId }) {
+  const hydra = new Hydra({
+    canvas: document.getElementById(canvasId),
+    detectAudio: false,
+    makeGlobal: true })
+
+  const synth = hydra.synth
+
+  synth.osc(4, 0.1, 1.2).out()
+
+  return null
+}
+HydraSynth.defaultProps = {
+  canvasId: `canvas`,
+}
+
+HydraSynth.propTypes = {
+  canvasId: PropTypes.string.isRequired,
+}
+
+export default HydraSynth

pln/src/pages/hydra.js

@@ -4,18 +4,23 @@ import { StaticImage } from "gatsby-plugin-image"
 
 import Layout from "../components/layout"
 import Seo from "../components/seo"
+import HydraSynth from "../components/hydra-synth"
+
 
 const Hydra = () => (
   <Layout>
     <Seo title="Hydra" />
+    <HydraSynth canvasId="myCanvas"/>
     <h1>Hydra</h1>
     <p>With <a href="https://github.com/ojack/hydra/">Hydra</a>, I create some eye-catchers:</p>
+    <canvas id="canvas"/>
+    <h2>Work Process</h2>
     <StaticImage
       src="../images/WIP_GaLactic.png"
       width={2048}
       quality={95}
       formats={["AUTO", "WEBP", "AVIF"]}
-      alt="A Gatsby astronaut"
+      alt="A screenshot of four intermediary steps of the GaLactic work"
       style={{ marginBottom: `1.45rem` }}
     />
     <Link to="/">Home</Link>