webamp/js/components/visualizerUtils.ts

export const PIXEL_DENSITY = 2;
export const NUM_BARS = 20;
export const BAR_WIDTH = 3 * PIXEL_DENSITY;
export const BAR_PEAK_DROP_RATE = 0.01;
export const GRADIENT_COLOR_COUNT = 16;
export const PEAK_COLOR_INDEX = 23;

// Pre-render the background grid
export function preRenderBg(
  width: number,
  height: number,
  bgColor: string,
  fgColor: string,
  windowShade: boolean
): HTMLCanvasElement {
  // Off-screen canvas for pre-rendering the background
  const bgCanvas = document.createElement("canvas");
  bgCanvas.width = width;
  bgCanvas.height = height;
  const distance = 2 * PIXEL_DENSITY;

  const bgCanvasCtx = bgCanvas.getContext("2d")!;
  bgCanvasCtx.fillStyle = bgColor;
  bgCanvasCtx.fillRect(0, 0, width, height);
  if (!windowShade) {
    bgCanvasCtx.fillStyle = fgColor;
    for (let x = 0; x < width; x += distance) {
      for (let y = PIXEL_DENSITY; y < height; y += distance) {
        bgCanvasCtx.fillRect(x, y, PIXEL_DENSITY, PIXEL_DENSITY);
      }
    }
  }
  return bgCanvas;
}

export function preRenderBar(
  height: number,
  colors: string[],
  renderHeight: number
): HTMLCanvasElement {
  /**
   * The order of the colours is commented in the file: the fist two colours
   * define the background and dots (check it to see what are the dots), the
   * next 16 colours are the analyzer's colours from top to bottom, the next
   * 5 colours are the oscilloscope's ones, from center to top/bottom, the
   * last colour is for the analyzer's peak markers.
   */

  // Off-screen canvas for pre-rendering a single bar gradient
  const barCanvas = document.createElement("canvas");
  barCanvas.width = BAR_WIDTH;
  barCanvas.height = height;

  const offset = 2; // The first two colors are for the background;
  const gradientColors = colors.slice(offset, offset + GRADIENT_COLOR_COUNT);

  const barCanvasCtx = barCanvas.getContext("2d")!;
  const multiplier = GRADIENT_COLOR_COUNT / renderHeight;
  // In shade mode, the five colors are, from top to bottom:
  // 214, 102, 0 -- 3
  // 222, 165, 24 -- 6
  // 148, 222, 33 -- 9
  // 57, 181, 16 -- 12
  // 24, 132, 8 -- 15
  // TODO: This could probably be improved by iterating backwards
  for (let i = 0; i < renderHeight; i++) {
    const colorIndex = GRADIENT_COLOR_COUNT - 1 - Math.floor(i * multiplier);
    barCanvasCtx.fillStyle = gradientColors[colorIndex];
    const y = height - i * PIXEL_DENSITY;
    barCanvasCtx.fillRect(0, y, BAR_WIDTH, PIXEL_DENSITY);
  }
  return barCanvas;
}

// Return the average value in a slice of dataArray
export function sliceAverage(
  dataArray: Uint8Array,
  sliceWidth: number,
  sliceNumber: number
) {
  const start = sliceWidth * sliceNumber;
  const end = start + sliceWidth;
  let sum = 0;
  for (let i = start; i < end; i++) {
    sum += dataArray[i];
  }
  return sum / sliceWidth;
}

export function octaveBucketsForBufferLength(bufferLength: number): number[] {
  const octaveBuckets = new Array(NUM_BARS).fill(0);
  const minHz = 200;
  const maxHz = 22050;
  const octaveStep = Math.pow(maxHz / minHz, 1 / NUM_BARS);

  octaveBuckets[0] = 0;
  octaveBuckets[1] = minHz;
  for (let i = 2; i < NUM_BARS - 1; i++) {
    octaveBuckets[i] = octaveBuckets[i - 1] * octaveStep;
  }
  octaveBuckets[NUM_BARS - 1] = maxHz;

  for (let i = 0; i < NUM_BARS; i++) {
    const octaveIdx = Math.floor((octaveBuckets[i] / maxHz) * bufferLength);
    octaveBuckets[i] = octaveIdx;
  }

  return octaveBuckets;
}

// Rendering Functions

export function paintOscilloscopeFrame({
  analyser,
  dataArray,
  canvasCtx,
  height,
  width,
  colors,
  renderWidth,
}: {
  analyser: AnalyserNode;
  dataArray: Uint8Array;
  canvasCtx: CanvasRenderingContext2D;
  height: number;
  width: number;
  colors: string[];
  renderWidth: number;
}) {
  analyser.getByteTimeDomainData(dataArray);

  canvasCtx.lineWidth = PIXEL_DENSITY;

  // Just use one of the viscolors for now
  canvasCtx.strokeStyle = colors[18];

  // Since dataArray has more values than we have pixels to display, we
  // have to average several dataArray values per pixel. We call these
  // groups slices.
  //
  // We use the  2x scale here since we only want to plot values for
  // "real" pixels.
  const sliceWidth = Math.floor(dataArray.length / width) * PIXEL_DENSITY;

  const h = height;

  canvasCtx.beginPath();

  // Iterate over the width of the canvas in "real" pixels.
  for (let j = 0; j <= renderWidth; j++) {
    const amplitude = sliceAverage(dataArray, sliceWidth, j);
    const percentAmplitude = amplitude / 255; // dataArray gives us bytes
    const y = (1 - percentAmplitude) * h; // flip y
    const x = j * PIXEL_DENSITY;

    // Canvas coordinates are in the middle of the pixel by default.
    // When we want to draw pixel perfect lines, we will need to
    // account for that here
    if (x === 0) {
      canvasCtx.moveTo(x, y);
    } else {
      canvasCtx.lineTo(x, y);
    }
  }
  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,
  peakHeight,
  height,
  canvasCtx,
  barCanvas,
  windowShade,
  colors,
}: {
  x: number;
  _height: number;
  peakHeight: number;
  height: number;
  canvasCtx: CanvasRenderingContext2D;
  barCanvas: HTMLCanvasElement;
  windowShade: boolean;
  colors: string[];
}) {
  const barHeight = Math.ceil(_height) * PIXEL_DENSITY;
  peakHeight = Math.ceil(peakHeight) * PIXEL_DENSITY;
  if (barHeight < 1 || peakHeight < 1) {
    return;
  }
  const y = height - barHeight;
  const ctx = canvasCtx;
  // Draw the gradient
  const b = BAR_WIDTH;
  if (barHeight > 0) {
    ctx.drawImage(barCanvas, 0, y, b, barHeight, x, y, b, barHeight);
  }

  // Draw the gray peak line
  if (!windowShade) {
    const peakY = height - peakHeight;
    ctx.fillStyle = colors[PEAK_COLOR_INDEX];
    ctx.fillRect(x, peakY, b, PIXEL_DENSITY);
  }
}