Sneaky addition of the Hydra Synth (performance?)

index.html

@@ -7,6 +7,7 @@
     <title>Topos</title>
     <link rel="stylesheet" href="/src/output.css" />
     <link rel="stylesheet" href='/fonts/index.css' >
+    <script src="https://unpkg.com/hydra-synth"></script>
   </head>
   <style>
 
@@ -21,6 +22,19 @@
       padding: 0;
     }
 
+    #hydra-bg {
+      position: fixed; /* ignore margins */
+      top: 0px;
+      left: 0px;
+      width: 100%; /* fill screen */
+      height: 100%;
+      background-size: cover;
+      overflow-y: hidden;
+      z-index: -1; /* place behind everything else */
+      display: block;
+    }
+
+
 		details br {
 			display: none;
 		}
@@ -306,6 +320,7 @@
          </ul>
          <!-- Here comes the editor itself -->
           <div id="editor" class="relative flex flex-row h-screen overflow-y-hidden">
+            <canvas id="hydra-bg"></canvas>
 					</div>
           <p id="error_line" class="hidden text-red-400 w-screen bg-neutral-900 font-mono absolute bottom-0 pl-2 py-2">Hello kids</p>
         </div>

src/API.ts

@@ -1455,6 +1455,17 @@ export class UserAPI {
       });
   };
 
+  // =============================================================
+  // Hydra integration
+  // =============================================================
+
+  stop_hydra = (): void => {
+    /**
+     * Empties the buffer of the Hydra sketch.
+     */
+    this.app.hydra.hush();
+  };
+
   // =============================================================
   // Trivial functions
   // =============================================================

src/main.ts

@@ -197,6 +197,18 @@ export class Editor {
   ) as HTMLElement;
   show_error: boolean = false;
 
+  // Hydra integration
+  hydra_canvas: HTMLCanvasElement = document.getElementById(
+    "hydra-bg"
+  ) as HTMLCanvasElement;
+  //@ts-ignore
+  public hydra_backend = new Hydra({
+    canvas: this.hydra_canvas,
+    detectAudio: false,
+    enableStreamCapture: false,
+  });
+  public hydra: any = this.hydra_backend.synth;
+
   constructor() {
     // ================================================================================
     // Loading the universe from local storage
@@ -680,6 +692,8 @@ export class Editor {
         }
       }
     }
+
+    this.hydra = this.hydra_backend.synth;
   }
 
   get note_buffer() {

src/themes/toposTheme.ts

@@ -24,7 +24,7 @@ const base00 = "#262626",
 const invalid = base_red,
   darkBackground = "#fdf6e3",
   highlightBackground = "#454545",
-  background = base00,
+  // background = base00,
   tooltipBackground = base01,
   cursor = base04;
 
@@ -33,7 +33,8 @@ export const toposDarkTheme = EditorView.theme(
   {
     "&": {
       color: base05,
-      backgroundColor: background,
+      // backgroundColor: background,
+      backgroundColor: "transparent",
       fontSize: "24px",
       fontFamily: "'Victor Mono', monospace",
     },
@@ -53,7 +54,10 @@ export const toposDarkTheme = EditorView.theme(
     ".cm-searchMatch.cm-searchMatch-selected": {
       backgroundColor: highlightBackground,
     },
-    ".cm-activeLine": { backgroundColor: highlightBackground },
+    ".cm-activeLine": {
+      // backgroundColor: highlightBackground
+      backgroundColor: "rgb(76,86,106, 0.4)",
+    },
     ".cm-selectionMatch": {
       backgroundColor: base04,
       outline: `1px solid ${base_red}`,
@@ -69,7 +73,8 @@ export const toposDarkTheme = EditorView.theme(
     },
 
     ".cm-gutters": {
-      backgroundColor: base00,
+      //backgroundColor: base00,
+      backgroundColor: "transparent",
       color: base02,
     },