Fix Hydra canvas order

index.html

@@ -31,6 +31,18 @@
       transition: background-color 0.05s ease-in-out;
     }
 
+    .hydracanvas {
+      position: fixed; /* ignore margins */
+      top: 0px;
+      left: 0px;
+      width: 100%; /* fill screen */
+      height: 100%;
+      background-size: cover;
+      overflow-y: hidden;
+      z-index: -5; /* place behind everything else */
+      display: block;
+    }
+
     .fullscreencanvas {
       position: fixed; /* ignore margins */
       top: 0px;
@@ -560,9 +572,9 @@
          <!-- Here comes the editor itself -->
           <div id="editor" class="relative flex flex-row h-screen overflow-y-hidden">
             <canvas id="scope" class="fullscreencanvas"></canvas>
-            <canvas id="hydra-bg" class="fullscreencanvas"></canvas>
             <canvas id="feedback" class="fullscreencanvas"></canvas>
             <canvas id="drawings" class="fullscreencanvas"></canvas>
+            <canvas id="hydra-bg" class="hydracanvas"></canvas>
 					</div>
           <p id="error_line" class="hidden w-screen bg-background font-mono absolute bottom-0 pl-2 py-2">Hello kids</p>
         </div>

src/extensions/NumberExtensions.ts

@@ -4,6 +4,7 @@ import { Player } from "../classes/ZPlayer";
 import { SoundEvent } from "../classes/SoundEvent";
 import { SkipEvent } from "../classes/SkipEvent";
 
+
 declare global {
   interface Number {
     z(): Player;
@@ -60,16 +61,16 @@ export const makeNumberExtensions = (api: UserAPI) => {
     inMin: number, inMax: number,
     outMin: number, outMax: number,
     curve: number) {
-      if(this.valueOf() <= inMin) return outMin;
+    if (this.valueOf() <= inMin) return outMin;
-      if(this.valueOf() >= inMax) return outMax;
+    if (this.valueOf() >= inMax) return outMax;
-		  if(Math.abs(curve) < 0.001) {
+    if (Math.abs(curve) < 0.001) {
-		  	return (this.valueOf() - inMin) / (inMax - inMin) * (outMax - outMin) + outMin;
+      return (this.valueOf() - inMin) / (inMax - inMin) * (outMax - outMin) + outMin;
-		  };
+    };
-		  let grow = Math.exp(curve);
+    let grow = Math.exp(curve);
-		  let a = outMax - outMin / (1.0 - grow);
+    let a = outMax - outMin / (1.0 - grow);
-		  let b = outMin + a;
+    let b = outMin + a;
-		  let scaled = (this.valueOf() - inMin) / (inMax - inMin);
+    let scaled = (this.valueOf() - inMin) / (inMax - inMin);
-		  return b - (a * Math.pow(grow, scaled))
+    return b - (a * Math.pow(grow, scaled))
   }
 
   Number.prototype.linexp = function(a: number, b: number, c: number, d: number) {

src/main.ts

@@ -229,13 +229,13 @@ export class Editor {
       replace: (match, p1) => `<${key} class="${this.documentationStyle[key]}" ${p1}>`,
     }));
 
-     // Get documentation id from hash parameter
+    // Get documentation id from hash parameter
-     const document_id = window.location.hash.slice(1);
+    const document_id = window.location.hash.slice(1);
-      if(document_id && document_id !== "" && documentation_pages.includes(document_id)) {
+    if (document_id && document_id !== "" && documentation_pages.includes(document_id)) {
-       this.currentDocumentationPane = document_id
+      this.currentDocumentationPane = document_id
-       updateDocumentationContent(this, this.bindings);
+      updateDocumentationContent(this, this.bindings);
-       showDocumentation(this);
+      showDocumentation(this);
-     }
+    }
 
 
   }
@@ -565,7 +565,7 @@ export class Editor {
       console.log("Hydra loaded successfully");
       this.initializeHydra();
     };
-    script.onerror = function () {
+    script.onerror = function() {
       console.error("Error loading Hydra script");
     };
     document.head.appendChild(script);
@@ -578,12 +578,13 @@ export class Editor {
     // @ts-ignore
     this.hydra_backend = new Hydra({
       canvas: this.interface.hydra_canvas as HTMLCanvasElement,
+      width: 1280,
+      height: 768,
       detectAudio: false,
       enableStreamCapture: false,
     });
     this.hydra = this.hydra_backend.synth;
     (globalThis as any).hydra = this.hydra;
-    this.hydra.setResolution(1024, 768);
   }
 
   private setCanvas(canvas: HTMLCanvasElement): void {
@@ -603,25 +604,25 @@ export class Editor {
     }
   }
 
-  private updateInterfaceTheme(selected_theme: {[key: string]: string}): void {
+  private updateInterfaceTheme(selected_theme: { [key: string]: string }): void {
-    function hexToRgb(hex: string): {r: number, g: number, b: number} | null {
+    function hexToRgb(hex: string): { r: number, g: number, b: number } | null {
       let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-          return result ? {
+      return result ? {
-            r: parseInt(result[1], 16),
+        r: parseInt(result[1], 16),
-            g: parseInt(result[2], 16),
+        g: parseInt(result[2], 16),
-            b: parseInt(result[3], 16)
+        b: parseInt(result[3], 16)
-          } : null;
+      } : null;
-        };
+    };
-        for (const [key, value] of Object.entries(selected_theme)) {
+    for (const [key, value] of Object.entries(selected_theme)) {
-          let color = hexToRgb(value);
+      let color = hexToRgb(value);
-          if (color) {
+      if (color) {
-            let colorString = `${color.r} ${color.g} ${color.b}`
+        let colorString = `${color.r} ${color.g} ${color.b}`
-            document.documentElement.style.setProperty("--" + key, colorString);
+        document.documentElement.style.setProperty("--" + key, colorString);
-          }
-        }
       }
+    }
+  }
 
-      getColorScheme(theme_name: string): {[key: string]: string} {
+  getColorScheme(theme_name: string): { [key: string]: string } {
     // Check if the theme exists in colors.json
     let themes: Record<string, { [key: string]: any }> = colors;
     return themes[theme_name];