From 3900f5eef510f62667623fb04a12c936df0f969a Mon Sep 17 00:00:00 2001
From: Raphael Forment <raphael.forment@gmail.com>
Date: Mon, 23 Oct 2023 00:05:55 +0200
Subject: [PATCH] flesh out oscilloscope documentation

---
 src/AudioVisualisation.ts         | 12 ++++++++++--
 src/documentation/oscilloscope.ts | 21 +++++++++++++++++++++
 2 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/src/AudioVisualisation.ts b/src/AudioVisualisation.ts
index 64c3145..b28fcae 100644
--- a/src/AudioVisualisation.ts
+++ b/src/AudioVisualisation.ts
@@ -172,7 +172,6 @@ export const runOscilloscope = (
 
     // Drawing logic varies based on orientation and 3D setting
     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 * app.osc.size) / 2 + WIDTH / 4;
         const y = (dataArray[i + 1] * HEIGHT * app.osc.size) / 2 + HEIGHT / 4;
@@ -190,7 +189,16 @@ export const runOscilloscope = (
       }
       canvasCtx.lineTo(WIDTH, yOffset);
     } else {
-      // Vertical drawing logic
+      let y = 0;
+      const sliceHeight = (HEIGHT * 1.0) / dataArray.length;
+      const xOffset = WIDTH / 4; // Adjust this to move the oscilloscope to the side
+      for (let i = 0; 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);
+        y += sliceHeight;
+      }
+      canvasCtx.lineTo(xOffset, HEIGHT);
     }
 
     canvasCtx.stroke();
diff --git a/src/documentation/oscilloscope.ts b/src/documentation/oscilloscope.ts
index 3b1dda6..4d1f371 100644
--- a/src/documentation/oscilloscope.ts
+++ b/src/documentation/oscilloscope.ts
@@ -4,5 +4,26 @@ import { makeExampleFactory } from "../Documentation";
 export const oscilloscope = (application: Editor): string => {
   const makeExample = makeExampleFactory(application);
   return `# Oscilloscope
+
+You can turn on the oscilloscope to generate interesting visuals or to inspect audio. Use the <ic>scope()</ic> function to turn it on and off. The oscilloscope is off by default.
+
+${makeExample(
+  "Oscilloscope configuration",
+  `
+scope({
+    enabled: true, // off by default
+    color: "#fdba74", // any valid CSS color or "random"
+    thickness: 4, // stroke thickness
+    fftSize: 256, // multiples of 128
+    orientation: "horizontal", // "vertical" or "horizontal"
+    is3D: false, // 3D oscilloscope
+    size: 1, // size of the oscilloscope
+})
+  `,
+  true
+)}
+
+Note that these values can be patterned as well! You can transform the oscilloscope into its own light show if you want. The picture is not stable anyway so you won't have much use of it for precision work :)
+
   `;
 };