Karplus-Strong

// Karplus-Strong plucked-string synthesis. A circular buffer of length N is
// filled with white noise (the "pluck") and then repeatedly low-pass filtered:
// y[i] <- 0.5 * (y[i] + y[(i+1) mod N]). The averaging of adjacent samples is
// a one-pole comb filter whose impulse response, on a wraparound buffer of
// length N, lives only at integer multiples of the fundamental f0 = fs/N.
// High-frequency content decays quickly; low partials decay slowly; the result
// is a softening, sinusoidal-tending tone -- the same algorithm used to drive
// the original 1980s plucked-string synths.
//
// Left panel: the buffer drawn as a wheel. The radius of each point is the
// sample value, color tracks index, the rotating tick marks the read head.
// Right panel: live magnitude spectrum (256-point real FFT, log-y). At pluck
// time the spectrum is white; over a few hundred steps it collapses onto a
// picket fence at f0 and its harmonics.
//
// Click anywhere to re-pluck (refill with fresh noise).

const N = 128;                        // delay-line length (power of 2)
const FS = 8000;                      // notional sample rate for axis labels
const STEPS_PER_FRAME = 6;            // KS iterations per render frame
const F0 = FS / N;                    // 62.5 Hz fundamental at fs=8 kHz, N=128

let buf;            // Float32Array(N): the circular delay line
let head;           // int: read/write head into buf
let stepCount;      // total KS steps since last pluck
let lastPluckTime;  // seconds, for HUD

// FFT scratch (size N).
let re, im, revIdx;

function init() {
  buf = new Float32Array(N);
  re = new Float32Array(N);
  im = new Float32Array(N);
  revIdx = new Uint16Array(N);
  const bits = Math.log2(N) | 0;
  for (let i = 0; i < N; i++) {
    let r = 0, x = i;
    for (let b = 0; b < bits; b++) { r = (r << 1) | (x & 1); x >>= 1; }
    revIdx[i] = r;
  }
  pluck(0);
}

function pluck(t) {
  for (let i = 0; i < N; i++) buf[i] = Math.random() * 2 - 1;
  head = 0;
  stepCount = 0;
  lastPluckTime = t;
}

// One Karplus-Strong tick: emit buf[head], then write the averaged value
// back. Equivalent to advancing the read pointer by one and applying a
// length-2 box filter. The decay factor (slightly below 1.0) lets the
// envelope die out so the spectrum eventually quiets.
function ksStep() {
  const i = head;
  const j = (head + 1) % N;
  buf[i] = 0.5 * (buf[i] + buf[j]) * 0.996;
  head = (head + 1) % N;
  stepCount++;
}

function fft() {
  for (let i = 0; i < N; i++) {
    const j = revIdx[i];
    if (j > i) {
      const tr = re[i]; re[i] = re[j]; re[j] = tr;
      const ti = im[i]; im[i] = im[j]; im[j] = ti;
    }
  }
  for (let size = 2; size <= N; size <<= 1) {
    const half = size >> 1;
    const theta = -2 * Math.PI / size;
    const wpr = Math.cos(theta), wpi = Math.sin(theta);
    for (let k = 0; k < N; k += size) {
      let wr = 1, wi = 0;
      for (let m = 0; m < half; m++) {
        const a = k + m, b = a + half;
        const tr = wr * re[b] - wi * im[b];
        const ti = wr * im[b] + wi * re[b];
        re[b] = re[a] - tr; im[b] = im[a] - ti;
        re[a] = re[a] + tr; im[a] = im[a] + ti;
        const nwr = wr * wpr - wi * wpi;
        wi = wr * wpi + wi * wpr; wr = nwr;
      }
    }
  }
}

function tick({ ctx, time, width: w, height: h, input }) {
  // Click anywhere to re-pluck.
  const clicks = input.consumeClicks();
  if (clicks.length > 0) pluck(time);

  for (let s = 0; s < STEPS_PER_FRAME; s++) ksStep();

  // Background with trail-fade for spectrum panel feel.
  ctx.fillStyle = "rgba(8,8,16,1)";
  ctx.fillRect(0, 0, w, h);

  // Two-panel layout: left = wheel, right = spectrum. Split at 45/55.
  const splitX = Math.floor(w * 0.45);

  // ---- Left panel: the circular buffer drawn as a wheel ----
  const cx = splitX * 0.5;
  const cy = h * 0.5;
  const baseR = Math.min(splitX, h) * 0.32;
  const ampR = baseR * 0.55;

  // Faint reference circle.
  ctx.strokeStyle = "rgba(80,90,120,0.4)";
  ctx.lineWidth = 1;
  ctx.beginPath();
  ctx.arc(cx, cy, baseR, 0, Math.PI * 2);
  ctx.stroke();

  // Buffer samples as a closed glowing polygon.
  ctx.shadowColor = "rgba(120,220,255,0.9)";
  ctx.shadowBlur = 10;
  ctx.strokeStyle = "rgba(180,240,255,0.95)";
  ctx.lineWidth = 1.6;
  ctx.beginPath();
  for (let i = 0; i < N; i++) {
    const idx = (head + i) % N;
    const ang = (i / N) * Math.PI * 2 - Math.PI / 2;
    const r = baseR + buf[idx] * ampR;
    const x = cx + Math.cos(ang) * r;
    const y = cy + Math.sin(ang) * r;
    if (i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
  }
  ctx.closePath();
  ctx.stroke();
  ctx.shadowBlur = 0;

  // Read-head tick.
  ctx.strokeStyle = "rgba(255,200,120,0.95)";
  ctx.lineWidth = 2;
  ctx.beginPath();
  const ha = -Math.PI / 2;
  ctx.moveTo(cx + Math.cos(ha) * (baseR - ampR - 4), cy + Math.sin(ha) * (baseR - ampR - 4));
  ctx.lineTo(cx + Math.cos(ha) * (baseR + ampR + 4), cy + Math.sin(ha) * (baseR + ampR + 4));
  ctx.stroke();

  // Left HUD.
  ctx.fillStyle = "rgba(200,210,235,0.9)";
  ctx.font = "12px system-ui, monospace";
  ctx.fillText("delay buffer (N=" + N + ")", 10, 18);
  ctx.fillStyle = "rgba(160,180,210,0.75)";
  ctx.fillText("steps: " + stepCount, 10, 34);
  ctx.fillText("f0 = fs/N = " + F0.toFixed(1) + " Hz", 10, 50);

  // ---- Right panel: magnitude spectrum (log-y) ----
  for (let i = 0; i < N; i++) { re[i] = buf[i]; im[i] = 0; }
  fft();

  const pad = 14;
  const sx = splitX + pad;
  const sw = w - splitX - pad * 2;
  const sy = 30;
  const sh = h - sy - 26;

  // Plot frame.
  ctx.strokeStyle = "rgba(80,90,120,0.5)";
  ctx.strokeRect(sx + 0.5, sy + 0.5, sw, sh);

  const half = N / 2;
  const FLOOR_DB = -60;
  const CEIL_DB = 0;
  const SPAN = CEIL_DB - FLOOR_DB;

  // Bars.
  const bw = sw / half;
  for (let k = 0; k < half; k++) {
    const mag = Math.sqrt(re[k] * re[k] + im[k] * im[k]) / (N * 0.5);
    const db = 20 * Math.log10(mag + 1e-9);
    let v = (db - FLOOR_DB) / SPAN;
    if (v < 0) v = 0; else if (v > 1) v = 1;
    const bh = v * sh;
    // Color: low-freq = warm, high-freq = cool, so the picket fence reads.
    const hue = 200 - (k / half) * 140;
    ctx.fillStyle = "hsla(" + hue + ",80%,60%," + (0.4 + 0.6 * v) + ")";
    ctx.fillRect(sx + k * bw, sy + sh - bh, Math.max(1, bw - 0.5), bh);
  }

  // Fundamental marker at bin 1 (= f0 in our DFT) -- always present after a few steps.
  const f0x = sx + 1 * bw + bw * 0.5;
  ctx.strokeStyle = "rgba(255,200,120,0.6)";
  ctx.setLineDash([3, 3]);
  ctx.beginPath();
  ctx.moveTo(f0x, sy);
  ctx.lineTo(f0x, sy + sh);
  ctx.stroke();
  ctx.setLineDash([]);

  // Right HUD + axis.
  ctx.fillStyle = "rgba(200,210,235,0.9)";
  ctx.font = "12px system-ui, monospace";
  ctx.fillText("magnitude spectrum (dB)", sx, 22);
  ctx.fillStyle = "rgba(160,180,210,0.75)";
  ctx.font = "10px system-ui, monospace";
  ctx.fillText("0", sx + 2, sy + 10);
  ctx.fillText("-60 dB", sx + 2, sy + sh - 4);
  ctx.fillText("DC", sx, sy + sh + 12);
  ctx.fillText("fs/2", sx + sw - 18, sy + sh + 12);
  ctx.fillText("f0", f0x - 5, sy + sh + 12);

  // Footer hint.
  ctx.fillStyle = "rgba(180,200,230,0.7)";
  ctx.font = "12px system-ui, monospace";
  ctx.fillText("click to re-pluck", 10, h - 10);
}