From ae06952e7390ad12aa04026be603b2ce49e4f0e1 Mon Sep 17 00:00:00 2001
From: ergz <emnlrodriguez@gmail.com>
Date: Thu, 12 Oct 2023 22:38:21 -0700
Subject: [PATCH] added osc to the rest of the voices

---
 synth.html | 15 ++++++++-
 synth.js   | 89 ++++++++++++++++++++++++++++++------------------------
 2 files changed, 64 insertions(+), 40 deletions(-)

diff --git a/synth.html b/synth.html
index e97958d..ebe9b93 100644
--- a/synth.html
+++ b/synth.html
@@ -50,7 +50,6 @@
                 <div id = "wave1viz" class="canvas-container">
                     <canvas id ="wave1canvas"></canvas>
                 </div>
-                <!-- Rest of your HTML for this container... -->
             </div>
             
             
@@ -79,6 +78,13 @@
                 </fieldset>
             </div>
             
+            <div class="flex-container flex-grow border-2 border-gray-800 rounded-md p-4 m-4">
+                <div id = "wave2viz" class="canvas-container">
+                    <canvas id ="wave2canvas"></canvas>
+                </div>
+            </div>
+
+
             <button id="activateVoice2" class="bg-green-700 hover:bg-green-600 text-white font-bold text-sm py-1 px-2 rounded">On</button>
         </div>
         
@@ -104,6 +110,13 @@
                 </fieldset>
             </div>
             
+            <div class="flex-container flex-grow border-2 border-gray-800 rounded-md p-4 m-4">
+                <div id = "wave3viz" class="canvas-container">
+                    <canvas id ="wave3canvas"></canvas>
+                </div>
+            </div>
+
+
             <button id="activateVoice3" class="bg-green-700 hover:bg-green-600 text-white font-bold text-sm py-1 px-2 rounded">On</button>
         </div>
         
diff --git a/synth.js b/synth.js
index 04af6e4..8375ca7 100644
--- a/synth.js
+++ b/synth.js
@@ -336,56 +336,67 @@ window.onload = function () {
   });
 
   // do the viz
-  const vizCanvas = document.getElementById("wave1canvas");
-  const ctx = vizCanvas.getContext("2d");
-  const analyser = synth.audioContext.createAnalyser();
-  analyser.fftSize = 2048;
-  let osc = synth.oscillators[0].osc;
-  osc.connect(analyser);
-  const bufferLength = analyser.fftSize;
-  const dataArray = new Uint8Array(bufferLength);
+  const canvasIds = ["wave1canvas", "wave2canvas", "wave3canvas"];
+
+  const vizObjects = canvasIds.map((id, index) => {
+    const canvas = document.getElementById(id);
+    const ctx = canvas.getContext("2d");
+
+    const analyser = synth.audioContext.createAnalyser();
+    analyser.fftSize = 2048;
+
+    synth.oscillators[index].osc.connect(analyser);
+    const bufferLength = analyser.fftSize;
+    const dataArray = new Uint8Array(bufferLength);
+
+    return { canvas, ctx, analyser, index, bufferLength, dataArray };
+  });
 
   function draw() {
-    // Get the waveform data
-    analyser.getByteTimeDomainData(dataArray);
+    vizObjects.forEach((viz) => {
+      // Get the waveform data
+      viz.analyser.getByteTimeDomainData(viz.dataArray);
 
-    // Clear the canvas
-    ctx.clearRect(0, 0, vizCanvas.width, vizCanvas.height);
+      // Clear the canvas
+      viz.ctx.clearRect(0, 0, viz.canvas.width, viz.canvas.height);
 
-    ctx.fillStyle = "black";
-    ctx.fillRect(0, 0, vizCanvas.width, vizCanvas.height);
-    // Set up the drawing parameters
-    ctx.lineWidth = 2;
-    ctx.strokeStyle = "rgb(0, 200, 100)";
+      // Set the background color
+      viz.ctx.fillStyle = "black";
+      viz.ctx.fillRect(0, 0, viz.canvas.width, viz.canvas.height);
 
-    // Set up the glowing effect
-    ctx.shadowBlur = 12; // Adjust the level of glow by changing this value
-    ctx.shadowColor = "rgb(0, 200, 100)"; // Make sure the shadow color matches the stroke color
-    // Optionally, you can offset the shadow if desired
-    ctx.shadowOffsetX = 2;
-    ctx.shadowOffsetY = 5;
+      // Set up the drawing parameters
+      viz.ctx.lineWidth = 2;
+      viz.ctx.strokeStyle = "rgb(0, 200, 100)";
 
-    // Begin the path
-    ctx.beginPath();
+      // Set up the glowing effect
+      viz.ctx.shadowBlur = 12; // Adjust the level of glow by changing this value
+      viz.ctx.shadowColor = "rgb(0, 200, 100)"; // Make sure the shadow color matches the stroke color
+      // Optionally, you can offset the shadow if desired
+      viz.ctx.shadowOffsetX = 2;
+      viz.ctx.shadowOffsetY = 5;
 
-    const sliceWidth = (vizCanvas.width * 1.0) / bufferLength;
-    let x = 0;
+      // Begin the path
+      viz.ctx.beginPath();
 
-    for (let i = 0; i < bufferLength; i++) {
-      const v = dataArray[i] / 128.0;
-      const y = (v * vizCanvas.height) / 2;
+      const sliceWidth = (viz.canvas.width * 1.0) / viz.bufferLength;
+      let x = 0;
 
-      if (i === 0) {
-        ctx.moveTo(x, y);
-      } else {
-        ctx.lineTo(x, y);
+      for (let i = 0; i < viz.bufferLength; i++) {
+        const v = viz.dataArray[i] / 128.0;
+        const y = (v * viz.canvas.height) / 2;
+
+        if (i === 0) {
+          viz.ctx.moveTo(x, y);
+        } else {
+          viz.ctx.lineTo(x, y);
+        }
+
+        x += sliceWidth;
       }
 
-      x += sliceWidth;
-    }
-
-    ctx.lineTo(vizCanvas.width, vizCanvas.height / 2);
-    ctx.stroke();
+      viz.ctx.lineTo(viz.canvas.width, viz.canvas.height / 2);
+      viz.ctx.stroke();
+    });
 
     requestAnimationFrame(draw);
   }