Visualizer.ts

import type { AudioFrame, VizMode } from "./types";

const BAR_FILL_RATIO = 0.7;
const BG_FLASH_DECAY = 0.07;
const HUE_MIN = 260;
const HUE_MAX = 320;

export class Visualizer {
	private canvas: HTMLCanvasElement;
	private ctx: CanvasRenderingContext2D;
	private mode: VizMode = "bars";

	private bgFlashIntensity = 0;

	constructor(canvas: HTMLCanvasElement) {
		this.canvas = canvas;
		const ctx = canvas.getContext("2d");
		if (!ctx) throw new Error("Could not get 2D canvas context");
		this.ctx = ctx;
		this.bindResize();
	}

	setMode(mode: VizMode): void {
		this.mode = mode;
	}

	render(frame: AudioFrame): void {
		this.tickBgFlash(frame.isBeat);
		this.clearCanvas();
		switch (this.mode) {
			case "bars":
				this.drawBars(frame);
				break;
			case "radial":
				this.drawRadial(frame);
				break;
			case "waveform":
				this.drawWaveform(frame);
				break;
		}
	}

	private tickBgFlash(isBeat: boolean): void {
		this.bgFlashIntensity = isBeat
			? 1
			: Math.max(0, this.bgFlashIntensity - BG_FLASH_DECAY);
	}

	private clearCanvas(): void {
		const { width, height } = this.canvas;

		this.ctx.fillStyle = "#000008";
		this.ctx.fillRect(0, 0, width, height);

		if (this.bgFlashIntensity > 0) {
			this.ctx.fillStyle = `rgba(157,78,221,${(this.bgFlashIntensity * 0.18).toFixed(3)})`;
			this.ctx.fillRect(0, 0, width, height);
		}
	}

	private purpleColor(t: number, value: number): string {
		const hue = HUE_MIN + t * (HUE_MAX - HUE_MIN);
		const sat = 80 + t * 20;
		const lit = 25 + (value / 255) * 40;
		return `hsl(${hue.toFixed(1)},${sat.toFixed(1)}%,${lit.toFixed(1)}%)`;
	}

	private drawBars(frame: AudioFrame): void {
		const { width, height } = this.canvas;
		const data = frame.frequencyData;
		const renderBins = data.length >> 1;
		const barStep = width / renderBins;
		const barWidth = barStep * BAR_FILL_RATIO;

		for (let i = 0; i < renderBins; i++) {
			const value = data[i];
			if (value === 0) continue;

			const barHeight = (value / 255) * height;
			const t = i / renderBins;
			const x = i * barStep;
			const y = height - barHeight;

			const grad = this.ctx.createLinearGradient(x, y, x, height);
			grad.addColorStop(0, this.purpleColor(t, value));
			grad.addColorStop(1, "rgba(80,20,120,0.4)");
			this.ctx.fillStyle = grad;
			this.ctx.fillRect(x, y, barWidth, barHeight);

			this.ctx.fillStyle = this.purpleColor(t, 255);
			this.ctx.fillRect(x, y, barWidth, 1.5);
		}
	}

	private drawRadial(frame: AudioFrame): void {
		const { width, height } = this.canvas;
		const data = frame.frequencyData;
		const cx = width / 2;
		const cy = height / 2;
		const renderBins = data.length >> 1;
		const minDim = Math.min(width, height);
		const innerRadius = minDim * 0.18;
		const maxBarLen = minDim * 0.32;
		const angleStep = (Math.PI * 2) / renderBins;
		const lineWidth = Math.max(1, (width / renderBins) * 1.2);

		this.ctx.shadowBlur = 6;
		this.ctx.shadowColor = "rgba(157,78,221,0.6)";
		this.ctx.lineWidth = lineWidth;

		for (let i = 0; i < renderBins; i++) {
			const value = data[i];
			if (value === 0) continue;

			const barLen = (value / 255) * maxBarLen;
			const angle = i * angleStep - Math.PI / 2;
			const cos = Math.cos(angle);
			const sin = Math.sin(angle);

			this.ctx.strokeStyle = this.purpleColor(i / renderBins, value);
			this.ctx.beginPath();
			this.ctx.moveTo(cx + cos * innerRadius, cy + sin * innerRadius);
			this.ctx.lineTo(
				cx + cos * (innerRadius + barLen),
				cy + sin * (innerRadius + barLen),
			);
			this.ctx.stroke();
		}

		this.ctx.shadowBlur = 12;
		this.ctx.shadowColor = "rgba(199,125,255,0.8)";
		this.ctx.strokeStyle = "rgba(199,125,255,0.5)";
		this.ctx.lineWidth = 1;
		this.ctx.beginPath();
		this.ctx.arc(cx, cy, innerRadius - 2, 0, Math.PI * 2);
		this.ctx.stroke();

		this.ctx.shadowBlur = 0;
	}

	private drawWaveform(frame: AudioFrame): void {
		const { width, height } = this.canvas;
		const data = frame.timeDomainData;
		const sliceW = width / data.length;

		this.ctx.lineWidth = 6;
		this.ctx.strokeStyle = "rgba(157,78,221,0.2)";
		this.ctx.shadowBlur = 0;
		this.traceWaveform(data, sliceW, height);

		this.ctx.lineWidth = 1.5;
		this.ctx.strokeStyle = "#c77dff";
		this.ctx.shadowColor = "#c77dff";
		this.ctx.shadowBlur = 10;
		this.traceWaveform(data, sliceW, height);

		this.ctx.shadowBlur = 0;
	}

	private traceWaveform(
		data: Uint8Array,
		sliceW: number,
		height: number,
	): void {
		const half = height / 2;
		this.ctx.beginPath();
		for (let i = 0; i < data.length; i++) {
			const y = half + (data[i] / 128 - 1) * half * 0.8;
			i === 0 ? this.ctx.moveTo(0, y) : this.ctx.lineTo(i * sliceW, y);
		}
		this.ctx.stroke();
	}

	private bindResize(): void {
		const sync = (): void => {
			this.canvas.width = this.canvas.clientWidth;
			this.canvas.height = this.canvas.clientHeight;
		};
		sync();
		window.addEventListener("resize", sync);
	}
}