Fourier Harmonics Lab

// Build f(t) = sum_{k=1..6} a_k * sin(2*pi*k*f0*t) from user-set amplitudes.
// Top: time-domain waveform. Bottom: bar-style DFT magnitude spectrum.
// On-canvas vertical sliders (drag), plus "square" and "clear" buttons.

const K = 6;          // number of harmonics
const NS = 256;       // samples per period for DFT
let amps;             // current amplitudes a_1..a_K
let targets;          // smoothed targets (eases when preset clicked)
let phase;            // animation phase for live trace dot
let dragK;            // which slider is being dragged (1..K) or 0
let mag;              // magnitude buffer length K+1 (index 0 unused)
let waveBuf;          // precomputed wave samples per frame, length NS
let W = 0, H = 0;

function init() {
  amps = new Float32Array(K + 1);
  targets = new Float32Array(K + 1);
  for (let k = 1; k <= K; k++) { amps[k] = 0; targets[k] = 0; }
  amps[1] = 1; targets[1] = 1;
  mag = new Float32Array(K + 1);
  waveBuf = new Float32Array(NS);
  phase = 0;
  dragK = 0;
}

// Layout rectangles, recomputed every frame from W,H.
function layout() {
  const pad = 10;
  const headerH = 26;
  const btnH = 36;
  const sliderH = 110;
  const topY = headerH;
  const topH = Math.max(80, Math.floor((H - headerH - sliderH - btnH - pad * 3) * 0.55));
  const botY = topY + topH + pad;
  const botH = Math.max(80, H - botY - sliderH - btnH - pad * 2);
  const slidersY = botY + botH + pad;
  const btnY = H - btnH - pad;
  return { pad, headerH, topY, topH, botY, botH, slidersY, sliderH, btnY, btnH };
}

function sliderRects(L) {
  // K vertical sliders distributed across full width.
  const trackW = 8;
  const hit = 44; // touch-friendly hit width
  const margin = 24;
  const usable = W - margin * 2;
  const step = usable / K;
  const rects = [];
  for (let k = 1; k <= K; k++) {
    const cx = margin + step * (k - 0.5);
    const x = cx - hit / 2;
    rects.push({
      k,
      cx,
      x,
      y: L.slidersY,
      w: hit,
      h: L.sliderH,
      trackX: cx - trackW / 2,
      trackW,
    });
  }
  return rects;
}

function buttonRects(L) {
  const w = 110;
  const gap = 12;
  const totalW = w * 2 + gap;
  const x0 = (W - totalW) / 2;
  return [
    { id: "square", x: x0, y: L.btnY, w, h: L.btnH, label: "square" },
    { id: "clear", x: x0 + w + gap, y: L.btnY, w, h: L.btnH, label: "clear" },
  ];
}

function pointIn(x, y, r) {
  return x >= r.x && x <= r.x + r.w && y >= r.y && y <= r.y + r.h;
}

// Map slider y-coord to amplitude in [-1, 1] (top = +1, bottom = -1).
function yToAmp(y, sl) {
  const t = (y - sl.y) / sl.h;
  return Math.max(-1, Math.min(1, 1 - 2 * t));
}
function ampToY(a, sl) {
  return sl.y + (1 - (a + 1) / 2) * sl.h;
}

// Naive O(K*NS) DFT-magnitude proxy: since we KNOW the basis,
// the magnitude at bin k equals |a_k| (Parseval-clean). We just
// surface that — it doubles as the teaching point.
function computeMag() {
  for (let k = 1; k <= K; k++) mag[k] = Math.abs(amps[k]);
}

function fillWave() {
  // Sum waveform across one period [0, 2*pi).
  for (let i = 0; i < NS; i++) {
    const t = (i / NS) * 2 * Math.PI;
    let s = 0;
    for (let k = 1; k <= K; k++) s += amps[k] * Math.sin(k * t);
    waveBuf[i] = s;
  }
}

function drawWave(ctx, L) {
  const x0 = 12, y0 = L.topY, w = W - 24, h = L.topH;
  ctx.fillStyle = "#0a0d14"; ctx.fillRect(x0, y0, w, h);
  ctx.strokeStyle = "rgba(120,140,180,0.18)"; ctx.lineWidth = 1;
  const midY = y0 + h / 2;
  ctx.beginPath(); ctx.moveTo(x0, midY); ctx.lineTo(x0 + w, midY); ctx.stroke();

  // Y scale: clamp to maximum theoretical sum |a_k| (>= 1).
  let scale = 0;
  for (let k = 1; k <= K; k++) scale += Math.abs(amps[k]);
  scale = Math.max(1.05, scale * 1.05);
  const yOf = (v) => midY - (v / scale) * (h / 2 - 4);

  // Reference +/-1.
  ctx.strokeStyle = "rgba(120,140,180,0.18)"; ctx.setLineDash([2, 4]);
  ctx.beginPath();
  ctx.moveTo(x0, yOf(1)); ctx.lineTo(x0 + w, yOf(1));
  ctx.moveTo(x0, yOf(-1)); ctx.lineTo(x0 + w, yOf(-1));
  ctx.stroke(); ctx.setLineDash([]);

  // Waveform.
  ctx.strokeStyle = "#ffd166"; ctx.lineWidth = 2;
  ctx.beginPath();
  for (let i = 0; i < NS; i++) {
    const X = x0 + (i / (NS - 1)) * w;
    const Y = yOf(waveBuf[i]);
    if (i === 0) ctx.moveTo(X, Y); else ctx.lineTo(X, Y);
  }
  ctx.stroke();

  // Moving phase dot.
  const t = phase % (2 * Math.PI);
  let v = 0;
  for (let k = 1; k <= K; k++) v += amps[k] * Math.sin(k * t);
  const X = x0 + (t / (2 * Math.PI)) * w;
  ctx.fillStyle = "#fff";
  ctx.beginPath(); ctx.arc(X, yOf(v), 3, 0, 6.283); ctx.fill();

  ctx.fillStyle = "rgba(180,195,220,0.75)";
  ctx.font = "11px system-ui, sans-serif";
  ctx.fillText("time domain  f(t) = Σ a_k sin(2π k f₀ t)", x0 + 8, y0 + 14);
}

function drawSpectrum(ctx, L) {
  const x0 = 12, y0 = L.botY, w = W - 24, h = L.botH;
  ctx.fillStyle = "#0a0d14"; ctx.fillRect(x0, y0, w, h);

  // Baseline axis at bottom.
  const baseY = y0 + h - 18;
  ctx.strokeStyle = "rgba(120,140,180,0.3)";
  ctx.beginPath(); ctx.moveTo(x0, baseY); ctx.lineTo(x0 + w, baseY); ctx.stroke();

  // Bars.
  const slotW = w / K;
  const maxBarH = h - 32;
  for (let k = 1; k <= K; k++) {
    const m = Math.min(1, mag[k]);
    const bh = m * maxBarH;
    const bw = slotW * 0.55;
    const bx = x0 + slotW * (k - 1) + (slotW - bw) / 2;
    const by = baseY - bh;
    ctx.fillStyle = `hsla(${200 + (k * 32) % 160}, 80%, 60%, 0.95)`;
    ctx.fillRect(bx, by, bw, bh);
    ctx.strokeStyle = "rgba(255,255,255,0.15)";
    ctx.strokeRect(bx + 0.5, by + 0.5, bw - 1, bh - 1);
    ctx.fillStyle = "rgba(220,228,240,0.85)";
    ctx.font = "11px system-ui, sans-serif";
    ctx.textAlign = "center";
    ctx.fillText(`${k}f₀`, bx + bw / 2, baseY + 14);
    ctx.fillText(mag[k].toFixed(2), bx + bw / 2, by - 4);
    ctx.textAlign = "left";
  }

  ctx.fillStyle = "rgba(180,195,220,0.75)";
  ctx.font = "11px system-ui, sans-serif";
  ctx.fillText("magnitude spectrum |X(k)|", x0 + 8, y0 + 14);
}

function drawSliders(ctx, L, rects) {
  for (const sl of rects) {
    // Track.
    ctx.fillStyle = "rgba(120,140,180,0.15)";
    ctx.fillRect(sl.trackX, sl.y, sl.trackW, sl.h);
    // Midline (a = 0).
    const midY = sl.y + sl.h / 2;
    ctx.strokeStyle = "rgba(120,140,180,0.4)"; ctx.setLineDash([2, 3]);
    ctx.beginPath(); ctx.moveTo(sl.cx - 14, midY); ctx.lineTo(sl.cx + 14, midY); ctx.stroke();
    ctx.setLineDash([]);
    // Fill from middle to current amp.
    const a = amps[sl.k];
    const yA = ampToY(a, sl);
    const hue = 200 + (sl.k * 32) % 160;
    ctx.fillStyle = `hsla(${hue}, 80%, 60%, 0.65)`;
    if (a >= 0) ctx.fillRect(sl.trackX, yA, sl.trackW, midY - yA);
    else ctx.fillRect(sl.trackX, midY, sl.trackW, yA - midY);
    // Thumb.
    ctx.fillStyle = `hsl(${hue}, 90%, 70%)`;
    ctx.beginPath();
    ctx.arc(sl.cx, yA, 9, 0, 6.283); ctx.fill();
    ctx.strokeStyle = "rgba(0,0,0,0.5)"; ctx.lineWidth = 1;
    ctx.stroke();
    // Label below.
    ctx.fillStyle = "rgba(220,228,240,0.9)";
    ctx.font = "11px system-ui, sans-serif";
    ctx.textAlign = "center";
    ctx.fillText(`a${sl.k}`, sl.cx, sl.y + sl.h + 14);
    ctx.fillText(a.toFixed(2), sl.cx, sl.y - 6);
    ctx.textAlign = "left";
  }
}

function drawButtons(ctx, btns, hover) {
  for (const b of btns) {
    const hot = hover === b.id;
    ctx.fillStyle = hot ? "rgba(255,160,60,0.85)" : "rgba(0,0,0,0.55)";
    ctx.fillRect(b.x, b.y, b.w, b.h);
    ctx.strokeStyle = "rgba(255,255,255,0.35)";
    ctx.strokeRect(b.x + 0.5, b.y + 0.5, b.w - 1, b.h - 1);
    ctx.fillStyle = "#fff";
    ctx.font = "bold 14px system-ui, sans-serif";
    ctx.textAlign = "center"; ctx.textBaseline = "middle";
    ctx.fillText(b.label, b.x + b.w / 2, b.y + b.h / 2);
    ctx.textAlign = "left"; ctx.textBaseline = "alphabetic";
  }
}

function applyPreset(id) {
  if (id === "square") {
    // 1, 0, 1/3, 0, 1/5, 0  (odd harmonics with 1/k weight)
    targets[1] = 1; targets[2] = 0; targets[3] = 1 / 3;
    targets[4] = 0; targets[5] = 1 / 5; targets[6] = 0;
  } else if (id === "clear") {
    for (let k = 1; k <= K; k++) targets[k] = 0;
  }
}

function tick({ ctx, dt, width, height, input }) {
  if (width !== W || height !== H) { W = width; H = height; }
  ctx.fillStyle = "#07080d"; ctx.fillRect(0, 0, W, H);

  const L = layout();
  const sliders = sliderRects(L);
  const btns = buttonRects(L);

  // Handle clicks first (drains the click queue).
  for (const c of input.consumeClicks()) {
    let onSlider = false;
    for (const sl of sliders) {
      if (pointIn(c.x, c.y, sl)) {
        // Tap on slider snaps target AND starts a drag (mouseDown will pick it up).
        targets[sl.k] = yToAmp(c.y, sl);
        amps[sl.k] = targets[sl.k];
        onSlider = true;
        break;
      }
    }
    if (!onSlider) {
      for (const b of btns) {
        if (pointIn(c.x, c.y, b)) { applyPreset(b.id); break; }
      }
    }
  }

  // Drag handling: when mouseDown starts inside a slider hit-rect, latch onto it.
  if (input.mouseDown) {
    if (!dragK) {
      for (const sl of sliders) {
        if (pointIn(input.mouseX, input.mouseY, sl)) { dragK = sl.k; break; }
      }
    }
    if (dragK) {
      const sl = sliders[dragK - 1];
      const a = yToAmp(input.mouseY, sl);
      targets[dragK] = a;
      amps[dragK] = a;
    }
  } else {
    dragK = 0;
  }

  // Ease toward targets (smooth for preset transitions).
  const k = Math.min(1, dt * 8);
  for (let i = 1; i <= K; i++) amps[i] += (targets[i] - amps[i]) * k;

  phase += dt * 1.2;

  fillWave();
  computeMag();

  // Header.
  ctx.fillStyle = "rgba(230,235,245,0.95)";
  ctx.font = "bold 13px system-ui, sans-serif";
  ctx.fillText("Fourier Harmonics Lab — drag sliders to build a wave", 12, 18);

  drawWave(ctx, L);
  drawSpectrum(ctx, L);
  drawSliders(ctx, L, sliders);

  // Hover detection for buttons.
  let hoverId = null;
  for (const b of btns) {
    if (pointIn(input.mouseX, input.mouseY, b)) { hoverId = b.id; break; }
  }
  drawButtons(ctx, btns, hoverId);
}