From 109b659f0ed6574cb50bb18931b86dfea55acefd Mon Sep 17 00:00:00 2001 From: Evert Prants Date: Sun, 27 Sep 2020 08:38:01 +0300 Subject: [PATCH] color caching --- index.js | 21 ++++++++++++++++++--- 1 file changed, 18 insertions(+), 3 deletions(-) diff --git a/index.js b/index.js index 0c474e7..a4367bf 100644 --- a/index.js +++ b/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)' - gctx.fillStyle = s + // if (c === 0) continue + 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) } }