From e71d7c7f54cfaed980f7f421e8acbc07dd7ac95a Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Mon, 23 Dec 2019 21:33:50 -0800
Subject: [PATCH] Move printBarFrame into visualizerUtils

---
 js/components/Visualizer.js      | 56 +++++++---------------------
 js/components/visualizerUtils.ts | 63 +++++++++++++++++++++++++++++++-
 2 files changed, 76 insertions(+), 43 deletions(-)

diff --git a/js/components/Visualizer.js b/js/components/Visualizer.js
index b4da97be..33f78a48 100644
--- a/js/components/Visualizer.js
+++ b/js/components/Visualizer.js
@@ -9,11 +9,9 @@ import {
   preRenderBar,
   paintOscilloscopeFrame,
   octaveBucketsForBufferLength,
-  printBar,
+  paintBarFrame,
   NUM_BARS,
-  BAR_WIDTH,
   PIXEL_DENSITY,
-  BAR_PEAK_DROP_RATE,
 } from "./visualizerUtils";
 
 class Visualizer extends React.Component {
@@ -128,51 +126,25 @@ class Visualizer extends React.Component {
         break;
       case VISUALIZERS.BAR:
         this.canvasCtx.drawImage(this.bgCanvas, 0, 0);
-        this._paintBarFrame();
+        paintBarFrame({
+          analyser: this.props.analyser,
+          dataArray: this.dataArray,
+          renderHeight: this._renderHeight(),
+          octaveBuckets: this.octaveBuckets,
+          barPeaks: this.barPeaks,
+          barPeakFrames: this.barPeakFrames,
+          height: this._height(),
+          canvasCtx: this.canvasCtx,
+          barCanvas: this.barCanvas,
+          windowShade: this.props.windowShade,
+          colors: this.props.colors,
+        });
         break;
       default:
         this.canvasCtx.clearRect(0, 0, this.canvas.width, this.canvas.height);
     }
   }
 
-  _paintBarFrame() {
-    this.props.analyser.getByteFrequencyData(this.dataArray);
-    const heightMultiplier = this._renderHeight() / 256;
-    const xOffset = BAR_WIDTH + PIXEL_DENSITY; // Bar width, plus a pixel of spacing to the right.
-    for (let j = 0; j < NUM_BARS - 1; j++) {
-      const start = this.octaveBuckets[j];
-      const end = this.octaveBuckets[j + 1];
-      let amplitude = 0;
-      for (let k = start; k < end; k++) {
-        amplitude += this.dataArray[k];
-      }
-      amplitude /= end - start;
-
-      // The drop rate should probably be normalized to the rendering FPS, for now assume 60 FPS
-      let barPeak =
-        this.barPeaks[j] -
-        BAR_PEAK_DROP_RATE * Math.pow(this.barPeakFrames[j], 2);
-      if (barPeak < amplitude) {
-        barPeak = amplitude;
-        this.barPeakFrames[j] = 0;
-      } else {
-        this.barPeakFrames[j] += 1;
-      }
-      this.barPeaks[j] = barPeak;
-
-      printBar({
-        x: j * xOffset,
-        _height: amplitude * heightMultiplier,
-        peakHeight: barPeak * heightMultiplier,
-        height: this._height(),
-        canvasCtx: this.canvasCtx,
-        barCanvas: this.barCanvas,
-        windowShade: this.props.windowShade,
-        colors: this.props.colors,
-      });
-    }
-  }
-
   render() {
     const { width, height } = this.props;
     return (
diff --git a/js/components/visualizerUtils.ts b/js/components/visualizerUtils.ts
index e2669d2a..9df2c8fa 100644
--- a/js/components/visualizerUtils.ts
+++ b/js/components/visualizerUtils.ts
@@ -142,7 +142,7 @@ export function paintOscilloscopeFrame({
   //
   // We use the  2x scale here since we only want to plot values for
   // "real" pixels.
-  const sliceWidth = Math.floor(bufferLength / width()) * PIXEL_DENSITY;
+  const sliceWidth = Math.floor(bufferLength / width) * PIXEL_DENSITY;
 
   const h = height;
 
@@ -167,6 +167,67 @@ export function paintOscilloscopeFrame({
   canvasCtx.stroke();
 }
 
+export function paintBarFrame({
+  analyser,
+  dataArray,
+  renderHeight,
+  octaveBuckets,
+  barPeaks,
+  barPeakFrames,
+  height,
+  canvasCtx,
+  barCanvas,
+  windowShade,
+  colors,
+}: {
+  analyser: AnalyserNode;
+  dataArray: Uint8Array /* MUTABLE */;
+  renderHeight: number;
+  octaveBuckets: number[];
+  barPeaks: number[] /* MUTABLE */;
+  barPeakFrames: number[] /* MUTABLE */;
+  height: number;
+  canvasCtx: CanvasRenderingContext2D;
+  barCanvas: HTMLCanvasElement;
+  windowShade: boolean;
+  colors: string[];
+}) {
+  analyser.getByteFrequencyData(dataArray);
+  const heightMultiplier = renderHeight / 256;
+  const xOffset = BAR_WIDTH + PIXEL_DENSITY; // Bar width, plus a pixel of spacing to the right.
+  for (let j = 0; j < NUM_BARS - 1; j++) {
+    const start = octaveBuckets[j];
+    const end = octaveBuckets[j + 1];
+    let amplitude = 0;
+    for (let k = start; k < end; k++) {
+      amplitude += dataArray[k];
+    }
+    amplitude /= end - start;
+
+    // The drop rate should probably be normalized to the rendering FPS, for now assume 60 FPS
+    let barPeak =
+      barPeaks[j] - BAR_PEAK_DROP_RATE * Math.pow(barPeakFrames[j], 2);
+    if (barPeak < amplitude) {
+      barPeak = amplitude;
+      barPeakFrames[j] = 0;
+    } else {
+      barPeakFrames[j] += 1;
+    }
+    barPeaks[j] = barPeak;
+
+    printBar({
+      x: j * xOffset,
+      _height: amplitude * heightMultiplier,
+      peakHeight: barPeak * heightMultiplier,
+      height,
+      canvasCtx,
+      barCanvas,
+      windowShade,
+      colors,
+    });
+  }
+}
+
 export function printBar({
   x,
   _height,