color caching

index.js

@@ -13,6 +13,20 @@
   let source
   let started = false
 
+  const gColorTable = []
+  const bColorTable = []
+  for (let i = 0; i <= 256; i++) { // include 256
+    const color = 'rgb(' + i + ',0,0)'
+    const gGrad = gctx.createLinearGradient(0, 0, 0, 1)
+    gGrad.addColorStop(0, color)
+    gGrad.addColorStop(1, color)
+    gColorTable.push(gGrad)
+    const bGrad = bctx.createLinearGradient(0, 0, 0, 1)
+    bGrad.addColorStop(0, color)
+    bGrad.addColorStop(1, color)
+    bColorTable.push(bGrad)
+  }
+
   function resize () {
     const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
     const vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0) - 5
@@ -36,13 +50,14 @@
       const p = i / dataArray.length
       const h = graph.height - p * graph.height
       const c = Math.max((dataArray[i] - analyser.minDecibels) / 100, 0)
-      const s = 'rgb(' + (c * 255) + ',0,0)'
+      // if (c === 0) continue
-      gctx.fillStyle = s
+      const s = Math.floor(c * 256)
+      gctx.fillStyle = gColorTable[s]
       gctx.fillRect(graph.width - rate, h, rate, dheight)
 
       // const freq = i * context.sampleRate / analyser.fftSize
       const bar = (dataArray[i] + 100)
-      bctx.fillStyle = s
+      bctx.fillStyle = bColorTable[s]
       bctx.fillRect(0, h, bar, dheight)
     }
   }