From c472fd1dfc6b8968f3015ea3963e9322a3797ad6 Mon Sep 17 00:00:00 2001
From: Raphael Forment <raphael.forment@gmail.com>
Date: Tue, 31 Oct 2023 01:08:31 +0100
Subject: [PATCH 1/3] augment default fftsize

---
 src/main.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/main.ts b/src/main.ts
index d1c8203..11570a3 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -64,7 +64,7 @@ export class Editor {
     color: "#fdba74",
     thickness: 4,
     refresh: 1,
-    fftSize: 256,
+    fftSize: 1024,
     orientation: "horizontal",
     is3D: false,
     size: 1,

From 164e8ea9da42ef6e0605f7a747eb5ee5f425742b Mon Sep 17 00:00:00 2001
From: Raphael Forment <raphael.forment@gmail.com>
Date: Tue, 31 Oct 2023 01:20:04 +0100
Subject: [PATCH 2/3] better smearing

---
 src/AudioVisualisation.ts | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/AudioVisualisation.ts b/src/AudioVisualisation.ts
index c5dddc0..9778bf6 100644
--- a/src/AudioVisualisation.ts
+++ b/src/AudioVisualisation.ts
@@ -163,6 +163,8 @@ export const runOscilloscope = (
     }
 
     analyzer.getFloatTimeDomainData(dataArray);
+    canvasCtx.globalCompositeOperation = 'source-over';
+
 
     canvasCtx.fillStyle = "rgba(0, 0, 0, 0)";
     canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
@@ -179,6 +181,9 @@ export const runOscilloscope = (
     } else {
       canvasCtx.strokeStyle = app.osc.color;
     }
+    const remainingRefreshTime = app.clock.time_position.pulse % app.osc.refresh;
+    const opacityRatio = 1 - (remainingRefreshTime / app.osc.refresh);
+    canvasCtx.globalAlpha = opacityRatio;
     canvasCtx.beginPath();
 
     // Drawing logic varies based on orientation and 3D setting
@@ -213,6 +218,7 @@ export const runOscilloscope = (
     }
 
     canvasCtx.stroke();
+    canvasCtx.globalAlpha = 1.0;  // Reset globalAlpha to default
   }
   draw();
 };

From 370624e4bfeccf6688417c25b545aeed79f491ab Mon Sep 17 00:00:00 2001
From: Raphael Forment <raphael.forment@gmail.com>
Date: Tue, 31 Oct 2023 01:43:18 +0100
Subject: [PATCH 3/3] cooler scope

---
 src/AudioVisualisation.ts | 43 ++++++++++++++++++++++++++++++---------
 1 file changed, 33 insertions(+), 10 deletions(-)

diff --git a/src/AudioVisualisation.ts b/src/AudioVisualisation.ts
index 9778bf6..dc0b06b 100644
--- a/src/AudioVisualisation.ts
+++ b/src/AudioVisualisation.ts
@@ -125,6 +125,8 @@ export interface OscilloscopeConfig {
   size: number;
 }
 
+let lastZeroCrossingType: string | null = null;  // 'negToPos' or 'posToNeg'
+
 /**
  * Initializes and runs an oscilloscope using an AnalyzerNode.
  * @param {HTMLCanvasElement} canvas - The canvas element to draw the oscilloscope.
@@ -186,39 +188,60 @@ export const runOscilloscope = (
     canvasCtx.globalAlpha = opacityRatio;
     canvasCtx.beginPath();
 
-    // Drawing logic varies based on orientation and 3D setting
+
+    let startIndex = 0;
+    for (let i = 1; i < dataArray.length; ++i) {
+      let currentType = null;
+      if (dataArray[i] >= 0 && dataArray[i - 1] < 0) {
+        currentType = 'negToPos';
+      } else if (dataArray[i] < 0 && dataArray[i - 1] >= 0) {
+        currentType = 'posToNeg';
+      }
+
+      if (currentType) {
+        if (lastZeroCrossingType === null || currentType === lastZeroCrossingType) {
+          startIndex = i;
+          lastZeroCrossingType = currentType;
+          break;
+        }
+      }
+    }
+
+
     if (app.osc.is3D) {
-      for (let i = 0; i < dataArray.length; i += 2) {
+      for (let i = startIndex; i < dataArray.length; i += 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);
+        i === startIndex ? canvasCtx.moveTo(x, y) : canvasCtx.lineTo(x, y);
       }
     } else if (app.osc.orientation === "horizontal") {
-      let x = 0;
       const sliceWidth = (WIDTH * 1.0) / dataArray.length;
       const yOffset = HEIGHT / 4;
-      for (let i = 0; i < dataArray.length; i++) {
+      let x = 0;
+      for (let i = startIndex; i < dataArray.length; i++) {
         const v = dataArray[i] * 0.5 * HEIGHT * app.osc.size;
         const y = v + yOffset;
-        i === 0 ? canvasCtx.moveTo(x, y) : canvasCtx.lineTo(x, y);
+        i === startIndex ? canvasCtx.moveTo(x, y) : canvasCtx.lineTo(x, y);
         x += sliceWidth;
       }
       canvasCtx.lineTo(WIDTH, yOffset);
     } else {
-      let y = 0;
       const sliceHeight = (HEIGHT * 1.0) / dataArray.length;
       const xOffset = WIDTH / 4;
-      for (let i = 0; i < dataArray.length; i++) {
+      let y = 0;
+      for (let i = startIndex; i < dataArray.length; i++) {
         const v = dataArray[i] * 0.5 * WIDTH * app.osc.size;
         const x = v + xOffset;
-        i === 0 ? canvasCtx.moveTo(x, y) : canvasCtx.lineTo(x, y);
+        i === startIndex ? canvasCtx.moveTo(x, y) : canvasCtx.lineTo(x, y);
         y += sliceHeight;
       }
       canvasCtx.lineTo(xOffset, HEIGHT);
     }
 
     canvasCtx.stroke();
-    canvasCtx.globalAlpha = 1.0;  // Reset globalAlpha to default
+    canvasCtx.globalAlpha = 1.0;
   }
+
+
   draw();
 };