Add 1D convolution audio visualizer

Initial implementation of a 1D convolution audio visualizer with interactive UI.

Author: xcontcom

1d-with-sound/app.js

@@ -0,0 +1,389 @@
+let pad = 1;
+
+// integer kernel
+let kernel = [0, 0, 0]; // [a,b,c]
+
+// audio
+let audioCtx = null;
+let masterGain = null;
+let scheduled = []; // oscillators we can stop
+
+// ---------- helpers ----------
+
+function modN(x, n) {
+	return ((x % n) + n) % n;
+}
+
+function getIterations() {
+	return parseInt(document.getElementById("iterations").value, 10);
+}
+
+function getPixelSize() {
+	return parseInt(document.getElementById("pixelSize").value, 10);
+}
+
+function getSqueezeMod() {
+	return parseInt(document.getElementById("squeezeMod").value, 10);
+}
+
+function getCoreRange() {
+	return parseInt(document.getElementById("coreRange").value, 10);
+}
+
+// ---------- 1D math ----------
+
+function padding1D(arr, k) {
+	if (arr.length === 1) return [1, 0];
+
+	const n = arr.length;
+	const out = new Array(n * 2);
+
+	for (let i = 0; i < n; i++) {
+		out[i * 2]     = arr[i];
+		out[i * 2 + 1] = k * arr[i];
+	}
+	return out;
+}
+
+function convolution1D(arr, k) {
+	const n = arr.length;
+	const out = new Array(n);
+
+	for (let i = 0; i < n; i++) {
+		const im = (i - 1 + n) % n;
+		const ip = (i + 1) % n;
+
+		out[i] =
+			arr[im] * k[0] +
+			arr[i ] * k[1] +
+			arr[ip] * k[2];
+	}
+	return out;
+}
+
+function squeezeField1D(arr, mod) {
+	if (!mod || mod <= 0) return arr;
+
+	const n = arr.length;
+	const out = new Array(n);
+
+	for (let i = 0; i < n; i++) {
+		const s = Math.round(arr[i]);
+		out[i] = modN(s, mod);
+	}
+	return out;
+}
+
+function evolve1D(iterCount) {
+	let arr = [1];
+	const sq = getSqueezeMod();
+
+	for (let i = 0; i < iterCount; i++) {
+		arr = padding1D(arr, pad);
+		arr = convolution1D(arr, kernel);
+		arr = squeezeField1D(arr, sq);
+	}
+	return arr;
+}
+
+// ---------- drawing ----------
+
+function draw(arr) {
+	const canvas = document.getElementById("canvas");
+	const px = getPixelSize();
+
+	const w = arr.length * px;
+	const h = 260;
+
+	canvas.width = w;
+	canvas.height = h;
+
+	const ctx = canvas.getContext("2d");
+	ctx.fillStyle = "#000";
+	ctx.fillRect(0, 0, w, h);
+
+	// min/max
+	let min = Infinity, max = -Infinity;
+	for (const v of arr) {
+		if (v < min) min = v;
+		if (v > max) max = v;
+	}
+	const span = (max - min) || 1;
+
+	// waveform curve
+	ctx.strokeStyle = "#fff";
+	ctx.beginPath();
+	for (let i = 0; i < arr.length; i++) {
+		const x = i * px + px / 2;
+		const y = h * 0.40 - ((arr[i] - min) / span) * (h * 0.35);
+
+		if (i === 0) ctx.moveTo(x, y);
+		else ctx.lineTo(x, y);
+	}
+	ctx.stroke();
+
+	// symbolic dots (mod-4 partition, canonical)
+	for (let i = 0; i < arr.length; i++) {
+		const s = Math.round(arr[i]*Math.sqrt(2));
+		const r = modN(s, 4);
+		if (r === 0 || r === 1) {
+			ctx.fillStyle = "#fff";
+			ctx.fillRect(i * px, h - 18, px, 10);
+		}
+	}
+}
+
+function dumpKernel(arr) {
+	const iters = getIterations();
+	const sq = getSqueezeMod();
+
+	let min = Infinity, max = -Infinity;
+	for (const v of arr) {
+		if (v < min) min = v;
+		if (v > max) max = v;
+	}
+
+	document.getElementById("kernelDump").textContent =
+		`iter=${iters} size=${arr.length} pad=${pad} ` +
+		`squeeze=${sq} kernel=[${kernel.join(", ")}] ` +
+		`min=${min.toFixed(3)} max=${max.toFixed(3)}`;
+}
+
+// live redraw only
+function regenerateVisual() {
+	const arr = evolve1D(getIterations());
+	draw(arr);
+	dumpKernel(arr);
+}
+
+// ---------- sound (notes) ----------
+
+// C D E F G A B semitone offsets (no bemols)
+const majorOffsets = [0, 2, 4, 5, 7, 9, 11];
+
+function midiToFreq(m) {
+	return 440 * Math.pow(2, (m - 69) / 12);
+}
+
+function soundInit() {
+	if (!audioCtx)
+		audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+
+	if (!masterGain) {
+		masterGain = audioCtx.createGain();
+		masterGain.connect(audioCtx.destination);
+	}
+
+	// if the browser suspended it, resume on this user gesture
+	if (audioCtx.state === "suspended")
+		audioCtx.resume();
+}
+
+function stopSound() {
+	// stop everything we scheduled
+	for (const o of scheduled) {
+		try { o.stop(0); } catch (e) {}
+		try { o.disconnect(); } catch (e) {}
+	}
+	scheduled = [];
+
+	// hard silence as well
+	if (masterGain) {
+		try { masterGain.gain.setValueAtTime(0.0, audioCtx.currentTime); } catch (e) {}
+	}
+}
+
+function playNotesFromArray(arr) {
+	soundInit();
+
+	// stop previous playback to avoid overlap mess
+	stopSound();
+
+	// restore volume
+	const vol = parseFloat(document.getElementById("volume").value);
+	masterGain.gain.setValueAtTime(vol, audioCtx.currentTime);
+
+	const now = audioCtx.currentTime;
+	const noteMs = parseInt(document.getElementById("noteMs").value, 10);
+	const dt = Math.max(0.005, noteMs / 1000);
+
+	const mod = parseInt(document.getElementById("noteMod").value, 10);
+	const step = parseInt(document.getElementById("noteStep").value, 10);
+
+	// base octave (C3..C6 range depending on mod)
+	const baseOctave = 3;
+
+	let t = now;
+
+	for (let i = 0; i < arr.length; i += step) {
+		const s = Math.round(arr[i]);
+		const r = modN(s, mod);
+
+		const degree = r % 7;               // 0..6
+		const oct = Math.floor(r / 7);      // 0..(mod/7 - 1)
+
+		const midi = 12 + (baseOctave + oct) * 12 + majorOffsets[degree];
+		const freq = midiToFreq(midi);
+
+		const o = audioCtx.createOscillator();
+		const g = audioCtx.createGain();
+
+		o.type = "square";
+		o.frequency.value = freq;
+
+		// envelope (like goody)
+		g.gain.setValueAtTime(vol, t);
+		g.gain.linearRampToValueAtTime(0.0, t + dt * 0.95);
+
+		o.connect(g);
+		g.connect(masterGain);
+
+		o.start(t);
+		o.stop(t + dt);
+
+		scheduled.push(o);
+
+		t += dt;
+	}
+}
+
+// ---------- UI wiring ----------
+
+function setKernelSliderConfig() {
+	const R = getCoreRange();
+
+	const ids = ["ka", "kb", "kc"];
+	for (const id of ids) {
+		const s = document.getElementById(id);
+		s.min = -R;
+		s.max = R;
+		s.step = 1;
+	}
+}
+
+function syncKernelFromSliders() {
+	kernel[0] = parseInt(document.getElementById("ka").value, 10);
+	kernel[1] = parseInt(document.getElementById("kb").value, 10);
+	kernel[2] = parseInt(document.getElementById("kc").value, 10);
+
+	document.getElementById("kaLabel").textContent = kernel[0];
+	document.getElementById("kbLabel").textContent = kernel[1];
+	document.getElementById("kcLabel").textContent = kernel[2];
+}
+
+function randomKernel() {
+	const R = getCoreRange();
+	function ri() { return Math.floor(Math.random() * (2 * R + 1)) - R; }
+
+	document.getElementById("ka").value = ri();
+	document.getElementById("kb").value = ri();
+	document.getElementById("kc").value = ri();
+
+	syncKernelFromSliders();
+	regenerateVisual();
+	commitSoundRestart();
+}
+
+function initUI() {
+	setKernelSliderConfig();
+
+	// init labels
+	document.getElementById("squeezeLabel").textContent = getSqueezeMod();
+
+	// kernel sliders (visual only)
+	["ka","kb","kc"].forEach(id => {
+		const s = document.getElementById(id);
+
+		// live preview (canvas only)
+		s.oninput = () => {
+			syncKernelFromSliders();
+			regenerateVisual();
+		};
+
+		// commit on release (sound restart)
+		s.onchange = () => {
+			commitSoundRestart();
+		};
+	});
+
+	// core range changes slider bounds (visual only)
+	document.getElementById("coreRange").oninput = () => {
+		setKernelSliderConfig();
+		// keep current values clamped by browser automatically
+		syncKernelFromSliders();
+		regenerateVisual();
+	};
+
+	// iterations/pixel/squeeze are visual only
+	document.getElementById("iterations").oninput = regenerateVisual;
+	document.getElementById("pixelSize").oninput = regenerateVisual;
+
+	const squeeze = document.getElementById("squeezeMod");
+
+	squeeze.oninput = () => {
+		document.getElementById("squeezeLabel").textContent = getSqueezeMod();
+		regenerateVisual();
+	};
+
+	squeeze.onchange = () => {
+		commitSoundRestart();
+	};
+
+	// pad toggle
+	document.querySelectorAll('input[name="padmode"]').forEach(r => {
+		r.addEventListener("change", e => {
+			pad = Number(e.target.value);
+			regenerateVisual();
+			commitSoundRestart();
+		});
+	});
+
+	// random kernel
+	document.getElementById("randomBtn").onclick = randomKernel;
+
+	// play/stop
+	document.getElementById("playBtn").onclick = () => {
+		const arr = evolve1D(getIterations());
+		playNotesFromArray(arr);
+	};
+
+	document.getElementById("stopBtn").onclick = stopSound;
+
+	const noteMod = document.getElementById("noteMod");
+	noteMod.onchange = () => {
+		commitSoundRestart();
+	};
+	
+	const noteStep = document.getElementById("noteStep");
+	noteStep.onchange = () => {
+		commitSoundRestart();
+	};
+	
+	const noteMs = document.getElementById("noteMs");
+	noteMs.onchange = () => {
+		commitSoundRestart();
+	};
+	
+	const volume = document.getElementById("volume");
+
+	volume.onchange = () => {
+		commitSoundRestart();
+	};
+	
+}
+
+function commitSoundRestart() {
+	// nothing to restart if sound never played
+	if (!audioCtx) return;
+
+	stopSound();
+
+	const arr = evolve1D(getIterations());
+	playNotesFromArray(arr);
+}
+
+// init
+document.addEventListener("DOMContentLoaded", () => {
+	initUI();
+	randomKernel();
+});