FM Modulation and Bessel Sidebands

// Frequency modulation: c(t) = sin(2π fc t + I·sin(2π fm t))
// Three stacked time-domain panels (modulator, carrier, result) plus a
// magnitude-spectrum panel showing Bessel-J sidebands at fc ± n·fm.
// Mouse X picks fm (1..14 Hz), mouse Y picks modulation index I (0..6).

const FC = 30;            // carrier frequency (cycles per window width)
const NS = 512;           // samples per panel
const NSIDE = 12;         // sidebands per side (n = -12..12)
let W = 0, H = 0;
let fm = 6;               // modulator frequency (live)
let mIndex = 2;           // modulation index I (live)
let targetFm = 6;
let targetI = 2;
let phase = 0;            // animation time
let modBuf, carBuf, resBuf;
let bessel;               // J_n(I) for n=0..NSIDE+2 (recomputed when I changes)
let lastI = -1;

function init() {
  modBuf = new Float32Array(NS);
  carBuf = new Float32Array(NS);
  resBuf = new Float32Array(NS);
  bessel = new Float32Array(NSIDE + 3);
}

// Bessel function of the first kind J_n(x) via power series.
// Accurate enough for the small I and small n we use (I ≤ 6, n ≤ 14).
function besselJ(n, x) {
  if (x === 0) return n === 0 ? 1 : 0;
  // Sum_{k=0..K} ((-1)^k / (k! (n+k)!)) * (x/2)^(n+2k)
  const half = x / 2;
  let term = 1;
  for (let i = 1; i <= n; i++) term *= half / i; // (x/2)^n / n!
  let sum = term;
  const h2 = half * half;
  for (let k = 1; k < 30; k++) {
    term *= -h2 / (k * (n + k));
    sum += term;
    if (Math.abs(term) < 1e-10 * Math.abs(sum)) break;
  }
  return sum;
}

function computeBessel(I) {
  for (let n = 0; n <= NSIDE + 2; n++) bessel[n] = besselJ(n, I);
}

function fillWaves(t0) {
  // Render one window-width of seconds; the visible wave scrolls with t0.
  // Use a logical "time" axis of 1.0s across the panel for clean ratios.
  const span = 1.0;
  for (let i = 0; i < NS; i++) {
    const t = t0 + (i / NS) * span;
    const m = Math.sin(2 * Math.PI * fm * t);
    modBuf[i] = m;
    carBuf[i] = Math.sin(2 * Math.PI * FC * t);
    resBuf[i] = Math.sin(2 * Math.PI * FC * t + mIndex * m);
  }
}

function layout() {
  const pad = 8;
  const headerH = 24;
  const hintH = 16;
  // 4 panels: mod, car, res, spectrum. Roughly equal heights.
  const usable = H - headerH - hintH - pad * 5;
  const panelH = Math.max(40, Math.floor(usable / 4));
  const y0 = headerH;
  return {
    pad,
    headerH,
    hintH,
    panelH,
    modY: y0,
    carY: y0 + panelH + pad,
    resY: y0 + (panelH + pad) * 2,
    specY: y0 + (panelH + pad) * 3,
  };
}

function drawPanel(ctx, x, y, w, h, buf, color, label, scale) {
  ctx.fillStyle = "#0a0d14"; ctx.fillRect(x, y, w, h);
  // Midline.
  const mid = y + h / 2;
  ctx.strokeStyle = "rgba(120,140,180,0.18)"; ctx.lineWidth = 1;
  ctx.beginPath(); ctx.moveTo(x, mid); ctx.lineTo(x + w, mid); ctx.stroke();
  // Waveform.
  ctx.strokeStyle = color; ctx.lineWidth = 1.5;
  ctx.beginPath();
  const amp = (h / 2 - 3) / scale;
  for (let i = 0; i < NS; i++) {
    const X = x + (i / (NS - 1)) * w;
    const Y = mid - buf[i] * amp;
    if (i === 0) ctx.moveTo(X, Y); else ctx.lineTo(X, Y);
  }
  ctx.stroke();
  // Label.
  ctx.fillStyle = "rgba(220,228,240,0.85)";
  ctx.font = "11px system-ui, sans-serif";
  ctx.fillText(label, x + 6, y + 13);
  // Border.
  ctx.strokeStyle = "rgba(120,140,180,0.25)";
  ctx.strokeRect(x + 0.5, y + 0.5, w - 1, h - 1);
}

function drawSpectrum(ctx, x, y, w, h) {
  ctx.fillStyle = "#0a0d14"; ctx.fillRect(x, y, w, h);
  const baseY = y + h - 16;
  ctx.strokeStyle = "rgba(120,140,180,0.3)";
  ctx.beginPath(); ctx.moveTo(x, baseY); ctx.lineTo(x + w, baseY); ctx.stroke();

  // Frequency axis: center at fc, span ±(NSIDE+1)*fm but clipped to a visible
  // range so big fm doesn't push sidebands off-canvas. Use a fixed visible
  // half-span in "Hz units" of NSIDE+2 multiples of current fm.
  const halfBins = NSIDE + 1;
  const cx = x + w / 2;
  const binW = (w - 20) / (2 * halfBins);

  const maxBar = h - 28;
  // Carrier line marker.
  ctx.strokeStyle = "rgba(255,255,255,0.15)"; ctx.setLineDash([2, 4]);
  ctx.beginPath(); ctx.moveTo(cx, y + 18); ctx.lineTo(cx, baseY); ctx.stroke();
  ctx.setLineDash([]);

  // Bessel sidebands |J_n(I)| at fc + n*fm for n = -NSIDE..NSIDE.
  for (let n = -NSIDE; n <= NSIDE; n++) {
    const an = bessel[Math.abs(n)];
    // For negative n, J_{-n} = (-1)^n J_n; magnitude is the same.
    const mag = Math.abs(an);
    if (mag < 0.005) continue;
    const bx = cx + n * binW;
    const bw = Math.max(2, binW * 0.55);
    const bh = mag * maxBar;
    const by = baseY - bh;
    // Highlight carrier bin and significant sidebands.
    let hue;
    if (n === 0) hue = 50;
    else hue = 200 + (Math.abs(n) * 25) % 140;
    ctx.fillStyle = `hsla(${hue}, 80%, 60%, 0.9)`;
    ctx.fillRect(bx - bw / 2, by, bw, bh);
    // Tick label only for n ∈ {-3,-2,-1,0,1,2,3} to avoid clutter.
    if (Math.abs(n) <= 3) {
      ctx.fillStyle = "rgba(220,228,240,0.7)";
      ctx.font = "10px system-ui, sans-serif";
      ctx.textAlign = "center";
      const lbl = n === 0 ? "fc" : `fc${n > 0 ? "+" : ""}${n}fm`;
      ctx.fillText(lbl, bx, baseY + 12);
      ctx.textAlign = "left";
    }
  }

  // Carleson rule: bandwidth ~ 2(I+1)fm.
  ctx.fillStyle = "rgba(220,228,240,0.85)";
  ctx.font = "11px system-ui, sans-serif";
  ctx.fillText(
    `spectrum  |J_n(I)| at fc + n·fm   (Carson BW ≈ 2(I+1)fm)`,
    x + 6,
    y + 13,
  );
  ctx.strokeStyle = "rgba(120,140,180,0.25)";
  ctx.strokeRect(x + 0.5, y + 0.5, w - 1, h - 1);
}

function tick({ ctx, dt, width, height, input }) {
  if (width !== W || height !== H) { W = width; H = height; }

  // Read live mouse for fm / I when mouse is over the canvas.
  // Use position regardless of mouseDown so the cursor steers on desktop;
  // mobile still works via tap-drag because input.mouseX updates on touch too.
  const mx = Math.max(0, Math.min(W, input.mouseX));
  const my = Math.max(0, Math.min(H, input.mouseY));
  if (mx > 0 && my > 0) {
    targetFm = 1 + (mx / W) * 13;        // 1..14
    targetI = 6 * (1 - my / H);          // 6..0 (top is high index)
  }
  // Ease toward targets.
  const e = Math.min(1, dt * 6);
  fm += (targetFm - fm) * e;
  mIndex += (targetI - mIndex) * e;

  phase += dt * 0.3;

  if (Math.abs(mIndex - lastI) > 0.01) {
    computeBessel(mIndex);
    lastI = mIndex;
  }

  fillWaves(phase);

  // Background.
  ctx.fillStyle = "#07080d"; ctx.fillRect(0, 0, W, H);

  // Header.
  ctx.fillStyle = "rgba(230,235,245,0.95)";
  ctx.font = "bold 13px system-ui, sans-serif";
  ctx.fillText("FM Modulation — c(t) = sin(2π fc t + I·sin(2π fm t))", 10, 16);
  ctx.fillStyle = "rgba(180,195,220,0.85)";
  ctx.font = "11px system-ui, sans-serif";
  ctx.textAlign = "right";
  ctx.fillText(`fm = ${fm.toFixed(2)}   I = ${mIndex.toFixed(2)}`, W - 10, 16);
  ctx.textAlign = "left";

  const L = layout();
  const x = 10, w = W - 20;

  drawPanel(
    ctx, x, L.modY, w, L.panelH, modBuf,
    "#7dd3fc",
    `modulator  m(t) = sin(2π fm t)   [fm = ${fm.toFixed(2)} Hz]`,
    1.05,
  );
  drawPanel(
    ctx, x, L.carY, w, L.panelH, carBuf,
    "#a78bfa",
    `carrier  sin(2π fc t)   [fc = ${FC} Hz]`,
    1.05,
  );
  drawPanel(
    ctx, x, L.resY, w, L.panelH, resBuf,
    "#ffd166",
    `result  sin(2π fc t + I·sin(2π fm t))   [I = ${mIndex.toFixed(2)}]`,
    1.05,
  );
  drawSpectrum(ctx, x, L.specY, w, L.panelH);

  // Hint footer (inside canvas; safe at any phone width).
  ctx.fillStyle = "rgba(180,195,220,0.6)";
  ctx.font = "10px system-ui, sans-serif";
  ctx.textAlign = "center";
  ctx.fillText("move cursor →  X: mod freq fm   ↕  Y: index I", W / 2, H - 4);
  ctx.textAlign = "left";
}