render relabi wave to canvas

1 files changed, 71 insertions, 0 deletions

diff --git a/src/ui/App.jsx b/src/ui/App.jsx
new file mode 100644
index 0000000..5ee21b7
--- /dev/null
+++ b/src/ui/App.jsx
@@ -0,0 +1,71 @@
+/**
+ * Relabi generator UI
+ * @module src/ui/App.js;
+ */
+
+import * as React from "react";
+import { useState, useEffect } from "react";
+import Relabi from "../relabi";
+import { Kalimba, Drums } from "../lib/instruments";
+
+export default function App() {
+  const [relabi, setRelabi] = useState();
+
+  /**
+   * Instantiate the Relabi generator
+   */
+  useEffect(() => {
+    if (!relabi) {
+      const relabiGenerator = new Relabi({
+        waves: [
+          { type: "sine", frequency: 0.75 },
+          { type: "sine", frequency: 1.0 },
+          { type: "sine", frequency: 1.617 },
+          { type: "sine", frequency: 3.141 },
+        ],
+        bounds: [
+          {
+            level: -0.75,
+            color: "#f00",
+            sounds: [
+              { instrument: Drums, index: 0 },
+              { instrument: Drums, index: 1 },
+            ],
+          },
+          {
+            level: 0.75,
+            color: "#f00",
+            sounds: [
+              { instrument: Drums, index: 2 },
+              { instrument: Drums, index: 3 },
+            ],
+          },
+          {
+            level: -0.25,
+            color: "#00f",
+            sounds: [
+              { instrument: Kalimba, frequency: 440 },
+              { instrument: Kalimba, frequency: (440 * 3) / 2 },
+            ],
+          },
+          {
+            level: 0.25,
+            color: "#00f",
+            sounds: [
+              { instrument: Kalimba, frequency: (440 * 6) / 5 },
+              { instrument: Kalimba, frequency: (440 * 6) / 7 },
+            ],
+          },
+        ],
+      });
+      relabiGenerator.start();
+      setRelabi(relabiGenerator);
+    }
+  }, [relabi]);
+
+  /**
+   * Render
+   */
+
+  return <div>Relabi generator</div>;
+}