From 9ca8853539a07e0e9eafa4b43981b0d580f3b08b Mon Sep 17 00:00:00 2001
From: Raphael Forment <raphael.forment@gmail.com>
Date: Sun, 22 Oct 2023 23:23:19 +0200
Subject: [PATCH] more work on oscilloscope

---
 index.html                |  2 +-
 src/API.ts                |  2 +-
 src/AudioVisualisation.ts | 35 ++++++++++++++++++++++-------------
 src/main.ts               |  4 +++-
 4 files changed, 27 insertions(+), 16 deletions(-)

diff --git a/index.html b/index.html
index 11a7f62..e394563 100644
--- a/index.html
+++ b/index.html
@@ -465,8 +465,8 @@
          </ul>
          <!-- Here comes the editor itself -->
           <div id="editor" class="relative flex flex-row h-screen overflow-y-hidden">
-            <canvas id="feedback"></canvas>
             <canvas id="hydra-bg"></canvas>
+            <canvas id="feedback"></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>
diff --git a/src/API.ts b/src/API.ts
index 19ba16a..92cff71 100644
--- a/src/API.ts
+++ b/src/API.ts
@@ -1977,6 +1977,6 @@ export class UserAPI {
      * Configures the oscilloscope.
      * @param config - The configuration object
      */
-    this.app.oscilloscope_config = config;
+    this.app.osc = config;
   };
 }
diff --git a/src/AudioVisualisation.ts b/src/AudioVisualisation.ts
index 7232edb..3bef205 100644
--- a/src/AudioVisualisation.ts
+++ b/src/AudioVisualisation.ts
@@ -121,6 +121,7 @@ export interface OscilloscopeConfig {
   fftSize: number; // multiples of 256
   orientation: "horizontal" | "vertical";
   is3D: boolean;
+  size: number;
 }
 
 /**
@@ -132,7 +133,7 @@ export const runOscilloscope = (
   canvas: HTMLCanvasElement,
   app: Editor
 ): void => {
-  let config = app.oscilloscope_config;
+  let config = app.osc;
   let analyzer = getAnalyser(config.fftSize);
   let dataArray = new Float32Array(analyzer.frequencyBinCount);
   const canvasCtx = canvas.getContext("2d")!;
@@ -140,14 +141,14 @@ export const runOscilloscope = (
   const HEIGHT = canvas.height;
 
   function draw() {
-    if (!app.oscilloscope_config.enabled) {
+    if (!app.osc.enabled) {
       canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);
       return;
     }
 
     // Update analyzer and dataArray if fftSize changes
-    if (analyzer.fftSize !== app.oscilloscope_config.fftSize) {
-      analyzer = getAnalyser(app.oscilloscope_config.fftSize);
+    if (analyzer.fftSize !== app.osc.fftSize) {
+      analyzer = getAnalyser(app.osc.fftSize);
       dataArray = new Float32Array(analyzer.frequencyBinCount);
     }
 
@@ -158,28 +159,36 @@ export const runOscilloscope = (
     canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
     canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);
 
-    canvasCtx.lineWidth = app.oscilloscope_config.thickness;
-    canvasCtx.strokeStyle = app.oscilloscope_config.color;
+    canvasCtx.lineWidth = app.osc.thickness;
+
+    if (app.osc.color === "random") {
+      if (app.clock.time_position.pulse % 16 === 0) {
+        canvasCtx.strokeStyle = `hsl(${Math.random() * 360}, 100%, 50%)`;
+      }
+    } else {
+      canvasCtx.strokeStyle = app.osc.color;
+    }
     canvasCtx.beginPath();
 
     // Drawing logic varies based on orientation and 3D setting
-    if (app.oscilloscope_config.is3D) {
+    if (app.osc.is3D) {
       // For demonstration, assume dataArray alternates between left and right channel
       for (let i = 0; i < dataArray.length; i += 2) {
-        const x = dataArray[i] * WIDTH + WIDTH / 2;
-        const y = dataArray[i + 1] * HEIGHT + HEIGHT / 2;
+        const x = (dataArray[i] * WIDTH * app.osc.size) / 2 + WIDTH / 4;
+        const y = (dataArray[i + 1] * HEIGHT * app.osc.size) / 2 + HEIGHT / 4;
         i === 0 ? canvasCtx.moveTo(x, y) : canvasCtx.lineTo(x, y);
       }
-    } else if (app.oscilloscope_config.orientation === "horizontal") {
+    } else if (app.osc.orientation === "horizontal") {
       let x = 0;
       const sliceWidth = (WIDTH * 1.0) / dataArray.length;
+      const yOffset = HEIGHT / 4; // Adjust this to move the oscilloscope up
       for (let i = 0; i < dataArray.length; i++) {
-        const v = dataArray[i] * 0.5 * HEIGHT;
-        const y = v + HEIGHT / 2;
+        const v = dataArray[i] * 0.5 * HEIGHT * app.osc.size;
+        const y = v + yOffset;
         i === 0 ? canvasCtx.moveTo(x, y) : canvasCtx.lineTo(x, y);
         x += sliceWidth;
       }
-      canvasCtx.lineTo(WIDTH, HEIGHT / 2);
+      canvasCtx.lineTo(WIDTH, yOffset);
     } else {
       // Vertical drawing logic
     }
diff --git a/src/main.ts b/src/main.ts
index ef8058e..e65ffc8 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -59,13 +59,15 @@ export class Editor {
   buttonElements: Record<string, HTMLButtonElement[]> = {};
   interface: ElementMap = {};
   blinkTimeouts: Record<number, number> = {};
-  oscilloscope_config: OscilloscopeConfig = {
+  osc: OscilloscopeConfig = {
     enabled: true,
     color: "#fdba74",
+    randomColor: true,
     thickness: 2,
     fftSize: 2048,
     orientation: "horizontal",
     is3D: true,
+    size: 1,
   };
 
   // UserAPI