Beats: Two Close Frequencies

// Beats: two close frequencies superposed produce slow amplitude
// modulation at the difference frequency. We render three rows:
// f1 alone, f2 = f1 + Δf alone, and their sum showing the
// characteristic envelope at f_beat = |Δf|.

let W = 0, H = 0;
const F1 = 6; // base "visual" frequency, cycles across the panel
let deltaF = 0.4; // visual detune; can go negative
let phase = 0;
// tap-button hit-rects (set each frame; consumed by handleClicks)
const btnDec = { x: 0, y: 0, w: 0, h: 0 };
const btnReset = { x: 0, y: 0, w: 0, h: 0 };
const btnInc = { x: 0, y: 0, w: 0, h: 0 };

function init({ width, height }) { W = width; H = height; }

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

function handleClicks(input) {
  if (!input || !input.consumeClicks) return;
  const clicks = input.consumeClicks();
  if (!clicks || !clicks.length) return;
  for (const c of clicks) {
    if (inRect(c.x, c.y, btnDec)) deltaF -= 0.2;
    else if (inRect(c.x, c.y, btnInc)) deltaF += 0.2;
    else if (inRect(c.x, c.y, btnReset)) deltaF = 0;
  }
  if (deltaF > 4) deltaF = 4;
  if (deltaF < -4) deltaF = -4;
}

function handleKeys(input, dt) {
  const step = 0.6 * dt;
  if (input.keyDown && input.keyDown('ArrowUp')) deltaF += step;
  if (input.keyDown && input.keyDown('ArrowDown')) deltaF -= step;
  if (input.keyDown && input.keyDown('ArrowRight')) deltaF += step;
  if (input.keyDown && input.keyDown('ArrowLeft')) deltaF -= step;
  if (input.justPressed && input.justPressed(' ')) deltaF = 0;
  if (input.justPressed && input.justPressed('0')) deltaF = 0;
  if (input.justPressed && input.justPressed('r')) deltaF = 0.4;
  // clamp
  if (deltaF > 4) deltaF = 4;
  if (deltaF < -4) deltaF = -4;
}

function drawWave(ctx, box, f, color, amp) {
  const { x, y, w, h } = box;
  ctx.fillStyle = 'rgba(0,0,0,0.4)';
  ctx.fillRect(x, y, w, h);
  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();
  // wave
  const SAMPLES = Math.min(900, w | 0);
  const T_VIEW = 2.0; // sec
  ctx.strokeStyle = color;
  ctx.lineWidth = 1.5;
  ctx.beginPath();
  for (let i = 0; i <= SAMPLES; i++) {
    const u = i / SAMPLES;
    const t = phase + u * T_VIEW;
    const v = amp(t, f);
    const px = x + u * w;
    const py = y + h / 2 - v * (h / 2 - 4);
    if (i === 0) ctx.moveTo(px, py); else ctx.lineTo(px, py);
  }
  ctx.stroke();
}

function drawButton(ctx, r, label) {
  ctx.fillStyle = 'rgba(255,255,255,0.10)';
  ctx.fillRect(r.x, r.y, r.w, r.h);
  ctx.strokeStyle = 'rgba(255,255,255,0.35)';
  ctx.lineWidth = 1;
  ctx.strokeRect(r.x + 0.5, r.y + 0.5, r.w - 1, r.h - 1);
  ctx.fillStyle = '#fff';
  ctx.font = '14px monospace';
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';
  ctx.fillText(label, r.x + r.w / 2, r.y + r.h / 2);
  ctx.textAlign = 'left';
  ctx.textBaseline = 'top';
}

function tick({ ctx, dt, width, height, input }) {
  if (width !== W || height !== H) { W = width; H = height; }
  handleKeys(input, dt);
  handleClicks(input);
  phase += dt * 0.4;

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

  // HUD
  ctx.fillStyle = 'rgba(0,0,0,0.55)';
  ctx.fillRect(8, 8, W - 16, 72);
  ctx.fillStyle = '#fff';
  ctx.font = '13px monospace';
  ctx.textAlign = 'left';
  ctx.textBaseline = 'top';
  // Use "real" audio frequencies for labels (440 Hz reference)
  const realF1 = 440;
  const realF2 = realF1 + deltaF * 10; // scale visual Δf to audible
  const realDelta = realF2 - realF1;
  ctx.fillText(`Beats   f1 = ${realF1.toFixed(2)} Hz (A4)   f2 = ${realF2.toFixed(2)} Hz   Δf = ${realDelta.toFixed(2)} Hz`, 16, 16);
  ctx.fillStyle = '#ffd17a';
  ctx.font = '13px monospace';
  if (Math.abs(realDelta) > 0.01) {
    const Tbeat = 1 / Math.abs(realDelta);
    ctx.fillText(`Beat frequency  f_beat = |Δf| = ${Math.abs(realDelta).toFixed(3)} Hz     Beat period T = 1/|Δf| = ${Tbeat.toFixed(3)} s   (${(Tbeat * 1000).toFixed(0)} ms)`, 16, 36);
  } else {
    ctx.fillText('Δf = 0 → no beating (perfect unison)', 16, 36);
  }
  ctx.fillStyle = 'rgba(255,255,255,0.55)';
  ctx.font = '11px monospace';
  ctx.fillText('tap buttons below or arrows: change Δf   space / 0: unison   r: reset', 16, 58);

  // tap buttons strip (below HUD)
  const btnH = 26;
  const btnY = 84;
  const btnGap = 6;
  const groupW = Math.min(360, W - 32);
  const btnW = (groupW - btnGap * 2) / 3;
  const groupX = (W - groupW) / 2;
  btnDec.x = groupX;                       btnDec.y = btnY;   btnDec.w = btnW; btnDec.h = btnH;
  btnReset.x = groupX + (btnW + btnGap);   btnReset.y = btnY; btnReset.w = btnW; btnReset.h = btnH;
  btnInc.x = groupX + (btnW + btnGap) * 2; btnInc.y = btnY;   btnInc.w = btnW; btnInc.h = btnH;
  drawButton(ctx, btnDec, '− Δf');
  drawButton(ctx, btnReset, 'unison');
  drawButton(ctx, btnInc, '+ Δf');

  // Three panels
  const pad = 10;
  const top = 124;
  const usableH = H - top - pad;
  const rowH = usableH / 3 - 6;

  // f1
  ctx.fillStyle = '#7ad8ff';
  ctx.font = '12px monospace';
  ctx.fillText(`f1   sin(2π f1 t)`, pad + 6, top - 16);
  drawWave(ctx,
    { x: pad, y: top, w: W - pad * 2, h: rowH },
    F1, '#7ad8ff',
    (t, f) => Math.sin(2 * Math.PI * f * t));

  // f2
  const y2 = top + rowH + 22;
  ctx.fillStyle = '#ff8acc';
  ctx.fillText(`f2 = f1 + Δf   sin(2π f2 t)`, pad + 6, y2 - 16);
  const f2vis = F1 + deltaF;
  drawWave(ctx,
    { x: pad, y: y2, w: W - pad * 2, h: rowH },
    f2vis, '#ff8acc',
    (t, f) => Math.sin(2 * Math.PI * f * t));

  // sum with envelope
  const y3 = y2 + rowH + 22;
  ctx.fillStyle = '#ffd17a';
  ctx.fillText(`sum: sin(2π f1 t) + sin(2π f2 t) = 2 cos(π Δf t) sin(2π f̄ t)`, pad + 6, y3 - 16);
  const box3 = { x: pad, y: y3, w: W - pad * 2, h: rowH };
  // background
  ctx.fillStyle = 'rgba(0,0,0,0.4)';
  ctx.fillRect(box3.x, box3.y, box3.w, box3.h);
  ctx.strokeStyle = 'rgba(255,255,255,0.07)';
  ctx.beginPath(); ctx.moveTo(box3.x, box3.y + box3.h / 2); ctx.lineTo(box3.x + box3.w, box3.y + box3.h / 2); ctx.stroke();
  // draw envelope (dashed) as ±|2 cos(π Δf t)|
  const SAMPLES = Math.min(900, box3.w | 0);
  const T_VIEW = 2.0;
  ctx.setLineDash([4, 4]);
  ctx.strokeStyle = 'rgba(255,209,122,0.45)';
  ctx.lineWidth = 1;
  for (const sign of [1, -1]) {
    ctx.beginPath();
    for (let i = 0; i <= SAMPLES; i++) {
      const u = i / SAMPLES;
      const t = phase + u * T_VIEW;
      const env = sign * Math.abs(2 * Math.cos(Math.PI * deltaF * t));
      const px = box3.x + u * box3.w;
      const py = box3.y + box3.h / 2 - env * (box3.h / 4 - 4);
      if (i === 0) ctx.moveTo(px, py); else ctx.lineTo(px, py);
    }
    ctx.stroke();
  }
  ctx.setLineDash([]);
  // actual sum
  ctx.strokeStyle = '#ffd17a';
  ctx.lineWidth = 1.5;
  ctx.beginPath();
  for (let i = 0; i <= SAMPLES; i++) {
    const u = i / SAMPLES;
    const t = phase + u * T_VIEW;
    const v = 0.5 * (Math.sin(2 * Math.PI * F1 * t) + Math.sin(2 * Math.PI * (F1 + deltaF) * t));
    const px = box3.x + u * box3.w;
    const py = box3.y + box3.h / 2 - v * (box3.h / 2 - 4);
    if (i === 0) ctx.moveTo(px, py); else ctx.lineTo(px, py);
  }
  ctx.stroke();

  // beat tick marks (where envelope hits zero)
  if (Math.abs(deltaF) > 0.001) {
    const beatPeriod = 1 / Math.abs(deltaF); // in same units as t
    // first zero at t s.t. cos(π Δf t) = 0 → π Δf t = π/2 + k π → t = 1/(2|Δf|) + k/|Δf|
    let t0 = 1 / (2 * Math.abs(deltaF));
    while (t0 - phase > T_VIEW) t0 -= beatPeriod;
    while (t0 - phase < 0) t0 += beatPeriod;
    ctx.strokeStyle = 'rgba(154,255,176,0.5)';
    ctx.lineWidth = 1;
    for (let t = t0; t - phase < T_VIEW; t += beatPeriod) {
      const u = (t - phase) / T_VIEW;
      const px = box3.x + u * box3.w;
      ctx.beginPath();
      ctx.moveTo(px, box3.y);
      ctx.lineTo(px, box3.y + box3.h);
      ctx.stroke();
    }
    ctx.fillStyle = '#9affb0';
    ctx.font = '10px monospace';
    ctx.textAlign = 'left';
    ctx.fillText('green = envelope nodes (beats)', box3.x + 6, box3.y + box3.h - 6);
  }
}