Harmonics: Fundamental + Overtones

// Harmonics: build a periodic waveform by summing a fundamental and its
// integer-multiple overtones. Top half shows each harmonic on its own;
// bottom half is the live sum. A spectrum bar chart on the right shows
// which partials are active and their amplitudes (1/n weighting).
const N_HARM = 7;
const F0 = 1.5; // visual frequency in cycles across the wave panel
let W = 0, H = 0;
let on; // boolean[N_HARM+1], 1-indexed
let phase = 0; // continuous time (seconds)
let prevKeys; // for justPressed-like fallback if needed
let spectrumBox = null; // last drawn spectrum panel rect, used for tap hit-testing

function init({ width, height }) {
  W = width; H = height;
  on = new Array(N_HARM + 1).fill(false);
  on[1] = true; // start with fundamental only
}

function handleKeys(input) {
  for (let n = 1; n <= N_HARM; n++) {
    const k = String(n);
    if (input.justPressed && input.justPressed(k)) on[n] = !on[n];
  }
  if (input.justPressed && input.justPressed('0')) {
    for (let n = 1; n <= N_HARM; n++) on[n] = false;
    on[1] = true;
  }
  if (input.justPressed && input.justPressed('a')) {
    for (let n = 1; n <= N_HARM; n++) on[n] = true;
  }
}

function partial(n, t) {
  // 1/n amplitude weighting (classic sawtooth-ish falloff)
  return Math.sin(2 * Math.PI * n * F0 * t) / n;
}

function sumAt(t) {
  let s = 0;
  for (let n = 1; n <= N_HARM; n++) if (on[n]) s += partial(n, t);
  return s;
}

function colorFor(n) {
  const hue = (n * 47) % 360;
  return `hsl(${hue}, 85%, 65%)`;
}

function drawIndividual(ctx, box) {
  const { x, y, w, h } = box;
  ctx.fillStyle = 'rgba(0,0,0,0.45)';
  ctx.fillRect(x, y, w, h);
  ctx.strokeStyle = 'rgba(255,255,255,0.08)';
  ctx.beginPath(); ctx.moveTo(x, y + h / 2); ctx.lineTo(x + w, y + h / 2); ctx.stroke();

  const SAMPLES = Math.min(720, w | 0);
  const T_VIEW = 2.0; // show 2 seconds of wave at F0=1.5 -> 3 fundamental cycles
  // each harmonic has its own thin row; max amplitude is 1 (normalized 1/n already)
  const rowH = h / N_HARM;
  for (let n = 1; n <= N_HARM; n++) {
    const cy = y + (n - 0.5) * rowH;
    // baseline
    ctx.strokeStyle = 'rgba(255,255,255,0.05)';
    ctx.beginPath(); ctx.moveTo(x, cy); ctx.lineTo(x + w, cy); ctx.stroke();
    // label
    ctx.fillStyle = on[n] ? '#fff' : 'rgba(255,255,255,0.35)';
    ctx.font = '11px monospace';
    ctx.textAlign = 'left';
    ctx.textBaseline = 'middle';
    const freq = (n * 110) | 0; // pretend f0 = 110Hz (A2) for labels
    const note = n === 1 ? '(fundamental)' : n === 2 ? '(octave)' : n === 3 ? '(P5 above 2nd)' : n === 4 ? '(2 octaves)' : n === 5 ? '(major 3rd above 4)' : '';
    ctx.fillText(`n=${n}  ${freq}Hz  ${note}`, x + 6, cy - rowH * 0.5 + 9);
    // wave
    ctx.strokeStyle = on[n] ? colorFor(n) : 'rgba(255,255,255,0.12)';
    ctx.lineWidth = on[n] ? 1.5 : 1;
    ctx.beginPath();
    const amp = (rowH * 0.42);
    for (let i = 0; i <= SAMPLES; i++) {
      const u = i / SAMPLES;
      const t = phase + u * T_VIEW;
      const v = partial(n, t) * n; // raw sin (no 1/n) so each row is full amplitude
      const px = x + u * w;
      const py = cy - v * amp;
      if (i === 0) ctx.moveTo(px, py); else ctx.lineTo(px, py);
    }
    ctx.stroke();
  }
}

function drawSum(ctx, box) {
  const { x, y, w, h } = box;
  ctx.fillStyle = 'rgba(0,0,0,0.55)';
  ctx.fillRect(x, y, w, h);
  // grid
  ctx.strokeStyle = 'rgba(255,255,255,0.07)';
  ctx.beginPath(); ctx.moveTo(x, y + h / 2); ctx.lineTo(x + w, y + h / 2); ctx.stroke();
  // amplitude scale: theoretical max if all on = sum(1/n)
  let maxAmp = 0;
  for (let n = 1; n <= N_HARM; n++) if (on[n]) maxAmp += 1 / n;
  if (maxAmp < 0.1) maxAmp = 1;

  const SAMPLES = Math.min(900, w | 0);
  const T_VIEW = 2.0;
  ctx.strokeStyle = '#ffd17a';
  ctx.lineWidth = 2;
  ctx.beginPath();
  for (let i = 0; i <= SAMPLES; i++) {
    const u = i / SAMPLES;
    const t = phase + u * T_VIEW;
    const v = sumAt(t);
    const px = x + u * w;
    const py = y + h / 2 - (v / maxAmp) * (h / 2 - 6);
    if (i === 0) ctx.moveTo(px, py); else ctx.lineTo(px, py);
  }
  ctx.stroke();
  // label
  ctx.fillStyle = '#ffd17a';
  ctx.font = '12px monospace';
  ctx.textAlign = 'left';
  ctx.textBaseline = 'top';
  ctx.fillText('SUM:  f(t) = Σ (1/n) sin(2π n f0 t)', x + 8, y + 6);
}

function drawSpectrum(ctx, box) {
  const { x, y, w, h } = box;
  spectrumBox = { x, y, w, h };
  ctx.fillStyle = 'rgba(0,0,0,0.55)';
  ctx.fillRect(x, y, w, h);
  ctx.fillStyle = '#fff';
  ctx.font = '11px monospace';
  ctx.textAlign = 'left';
  ctx.textBaseline = 'top';
  ctx.fillText('amplitude spectrum', x + 6, y + 4);
  // bar chart 1..N_HARM
  const top = y + 22;
  const bot = y + h - 18;
  const barW = (w - 12) / N_HARM;
  for (let n = 1; n <= N_HARM; n++) {
    const bx = x + 6 + (n - 1) * barW;
    const a = on[n] ? 1 / n : 0;
    const bh = a * (bot - top);
    // outline
    ctx.strokeStyle = 'rgba(255,255,255,0.18)';
    ctx.strokeRect(bx + 2, top, barW - 6, bot - top);
    // bar
    ctx.fillStyle = on[n] ? colorFor(n) : 'rgba(255,255,255,0.08)';
    ctx.fillRect(bx + 2, bot - bh, barW - 6, bh);
    // label
    ctx.fillStyle = on[n] ? '#fff' : 'rgba(255,255,255,0.35)';
    ctx.textAlign = 'center';
    ctx.fillText(String(n), bx + barW / 2, bot + 3);
    ctx.fillText((1 / n).toFixed(2), bx + barW / 2, bot - bh - 12);
  }
}

function drawHUD(ctx) {
  ctx.fillStyle = 'rgba(0,0,0,0.6)';
  ctx.fillRect(8, 8, W - 16, 30);
  ctx.fillStyle = '#fff';
  ctx.font = '12px monospace';
  ctx.textAlign = 'left';
  ctx.textBaseline = 'middle';
  let active = [];
  for (let n = 1; n <= N_HARM; n++) if (on[n]) active.push(n);
  ctx.fillText(`f0 = 110 Hz (A2)   active harmonics: [${active.join(', ') || 'none'}]   tap bars or press 1-7 • 0=reset • a=all`, 16, 23);
}

function handleClicks(input) {
  if (!spectrumBox || !input || !input.consumeClicks) return;
  const clicks = input.consumeClicks();
  if (!clicks || !clicks.length) return;
  const { x, y, w, h } = spectrumBox;
  const barW = (w - 12) / N_HARM;
  for (const c of clicks) {
    const cx = c.x, cy = c.y;
    // full-height hit rect for ergonomic tapping
    if (cx < x || cx > x + w || cy < y || cy > y + h) continue;
    const rel = cx - (x + 6);
    if (rel < 0) continue;
    const n = Math.floor(rel / barW) + 1;
    if (n >= 1 && n <= N_HARM) on[n] = !on[n];
  }
}

function tick({ ctx, dt, width, height, input }) {
  if (width !== W || height !== H) { W = width; H = height; }
  handleKeys(input);
  handleClicks(input);
  phase += dt * 0.25; // slow scroll so the eye can track

  ctx.fillStyle = '#0a0e1a';
  ctx.fillRect(0, 0, W, H);

  const pad = 10;
  const hudH = 38;
  const top = pad + hudH;
  const specW = Math.min(220, Math.max(150, W * 0.28));
  const waveW = W - specW - pad * 3;
  const halfH = (H - top - pad * 2) / 2;

  drawIndividual(ctx, { x: pad, y: top, w: waveW, h: halfH - 4 });
  drawSum(ctx, { x: pad, y: top + halfH + 4, w: waveW, h: halfH - 4 });
  drawSpectrum(ctx, { x: pad * 2 + waveW, y: top, w: specW, h: (halfH - 4) * 2 + 8 });
  drawHUD(ctx);
}