Single-Slit Diffraction: sinc² Pattern

// Fraunhofer single-slit diffraction.
// Slit at the top, intensity sinc^2 on the screen below, Huygens wavelets
// from sampled slit points visualized in the propagation region between.
// Touch/mouse Y is split into two zones: top half scrubs wavelength lambda,
// bottom half scrubs slit width a. Desktop users can hold Shift to force
// lambda scrubbing regardless of Y zone (legacy keyboard shortcut).

let W = 0, H = 0;
let a = 60;      // slit width in canvas px
let lam = 28;    // wavelength in canvas px
let aTarget = 60, lamTarget = 28;
const A_MIN = 10, A_MAX = 220;
const LAM_MIN = 10, LAM_MAX = 80;

// Lower-res offscreen for the diffraction strip — phones choked on the
// per-frame full-width getImageData/putImageData when W ~ 800. We render
// the pattern into a 128-wide buffer, then drawImage-scale it up.
const STRIP_COLS = 128;
let stripCanvas = null;
let stripCtx = null;
let stripImg = null;
const STRIP_ROWS = 24;

function init({ width, height }) {
  W = width; H = height;
  a = aTarget = Math.max(A_MIN, Math.min(A_MAX, height * 0.12));
  try {
    stripCanvas = new OffscreenCanvas(STRIP_COLS, STRIP_ROWS);
    stripCtx = stripCanvas.getContext("2d");
    stripImg = stripCtx.createImageData(STRIP_COLS, STRIP_ROWS);
  } catch (e) {
    stripCanvas = null;
  }
}

function clamp(v, lo, hi) { return v < lo ? lo : v > hi ? hi : v; }

function sinc(x) {
  if (Math.abs(x) < 1e-6) return 1;
  return Math.sin(x) / x;
}

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

  // Layout
  const slitY = Math.max(36, H * 0.18);
  const screenY = H - 64;
  const D = Math.max(60, screenY - slitY);   // propagation distance
  const cx = W / 2;

  // Input: split mouseY into two zones.
  // - Top half (y < H/2): scrub lambda. Map y in [4, H/2] to [LAM_MAX, LAM_MIN].
  // - Bottom half (y >= H/2): scrub a. Map y in [H/2, H-4] to [A_MAX, A_MIN].
  // Shift key (desktop) forces lambda zone regardless.
  const shift = input.keyDown && (input.keyDown("Shift") || input.keyDown("shift"));
  const my = clamp(input.mouseY, 4, H - 4);
  const inLambdaZone = shift || my < H * 0.5;
  if (inLambdaZone) {
    const y0 = 4, y1 = shift ? (H - 4) : (H * 0.5);
    const t = 1 - (clamp(my, y0, y1) - y0) / Math.max(1, y1 - y0);
    lamTarget = LAM_MIN + t * (LAM_MAX - LAM_MIN);
  } else {
    const y0 = H * 0.5, y1 = H - 4;
    const t = 1 - (clamp(my, y0, y1) - y0) / Math.max(1, y1 - y0);
    aTarget = A_MIN + t * (A_MAX - A_MIN);
  }
  // smooth toward target
  a += (aTarget - a) * Math.min(1, dt * 8);
  lam += (lamTarget - lam) * Math.min(1, dt * 8);

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

  // Barrier with slit
  const barrierH = 10;
  ctx.fillStyle = "#1a2335";
  ctx.fillRect(0, slitY - barrierH / 2, cx - a / 2, barrierH);
  ctx.fillRect(cx + a / 2, slitY - barrierH / 2, W - (cx + a / 2), barrierH);
  ctx.strokeStyle = "rgba(180,210,255,0.35)";
  ctx.lineWidth = 1;
  ctx.beginPath();
  ctx.moveTo(cx - a / 2, slitY - barrierH / 2);
  ctx.lineTo(cx - a / 2, slitY + barrierH / 2);
  ctx.moveTo(cx + a / 2, slitY - barrierH / 2);
  ctx.lineTo(cx + a / 2, slitY + barrierH / 2);
  ctx.stroke();

  // Incoming plane wavefronts drifting downward into the barrier.
  ctx.strokeStyle = "rgba(120,200,255,0.22)";
  ctx.lineWidth = 1;
  const drift = (time * 90) % lam;
  const topRegion = slitY - barrierH / 2 - 6;
  for (let y = topRegion - drift; y > 4; y -= lam) {
    ctx.beginPath();
    ctx.moveTo(20, y);
    ctx.lineTo(W - 20, y);
    ctx.stroke();
  }

  // Huygens wavelets in the propagation region.
  // Sample ~ a/4 points across the slit; each emits circular wavefronts.
  const nSrc = clamp(Math.round(a / 6), 3, 14);
  ctx.lineWidth = 1;
  for (let s = 0; s < nSrc; s++) {
    const fx = cx - a / 2 + (a * (s + 0.5)) / nSrc;
    const fy = slitY;
    // draw two arcs per source at increasing radii synced to time
    for (let r = 0; r < 3; r++) {
      const radius = ((time * 90 + r * lam * 1.6 + s * 4) % (D + lam * 2));
      if (radius < 6 || radius > D + 4) continue;
      const alpha = 0.35 * (1 - radius / (D + lam * 2));
      ctx.strokeStyle = `rgba(140,210,255,${alpha.toFixed(3)})`;
      ctx.beginPath();
      ctx.arc(fx, fy, radius, 0, Math.PI, false);
      ctx.stroke();
    }
  }

  // Intensity pattern on the screen.
  // I(theta) = I0 * sinc^2(pi*a*sin(theta)/lambda)
  // theta from screen x: tan(theta) = (x - cx) / D
  const screenH = 56;
  const top = screenY - 2;
  const grad = ctx.createLinearGradient(0, top, 0, top + screenH);
  grad.addColorStop(0, "#0a1020");
  grad.addColorStop(1, "#05070d");
  ctx.fillStyle = grad;
  ctx.fillRect(0, top, W, screenH);

  // Paint strip into a small offscreen, then drawImage-scale up.
  if (stripCanvas && stripImg) {
    const px = stripImg.data;
    for (let i = 0; i < STRIP_COLS; i++) {
      // map column center to canvas x to keep sampling consistent
      const x = ((i + 0.5) / STRIP_COLS) * W;
      const theta = Math.atan2(x - cx, D);
      const arg = (Math.PI * a * Math.sin(theta)) / lam;
      const I = sinc(arg) * sinc(arg);
      const r = clamp(40 + I * 230, 0, 255);
      const g = clamp(120 + I * 200, 0, 255);
      const b = clamp(180 + I * 75, 0, 255);
      for (let y = 0; y < STRIP_ROWS; y++) {
        const dy = (y - STRIP_ROWS / 2) / (STRIP_ROWS / 2);
        const env = Math.exp(-dy * dy * 1.6);
        const p = (y * STRIP_COLS + i) * 4;
        px[p] = r * env * I + 10;
        px[p + 1] = g * env * I + 14;
        px[p + 2] = b * env * I + 22;
        px[p + 3] = 255;
      }
    }
    stripCtx.putImageData(stripImg, 0, 0);
    // scale up — smoothing across columns is acceptable for a glow strip.
    ctx.imageSmoothingEnabled = true;
    ctx.drawImage(stripCanvas, 0, 0, STRIP_COLS, STRIP_ROWS, 0, top, W, screenH);
  } else {
    // Fallback: original per-pixel path (older runtimes without OffscreenCanvas).
    const img = ctx.getImageData(0, top, W, screenH);
    const px = img.data;
    for (let x = 0; x < W; x++) {
      const theta = Math.atan2(x - cx, D);
      const arg = (Math.PI * a * Math.sin(theta)) / lam;
      const I = sinc(arg) * sinc(arg);
      const r = clamp(40 + I * 230, 0, 255);
      const g = clamp(120 + I * 200, 0, 255);
      const b = clamp(180 + I * 75, 0, 255);
      for (let y = 0; y < screenH; y++) {
        const dy = (y - screenH / 2) / (screenH / 2);
        const env = Math.exp(-dy * dy * 1.6);
        const p = (y * W + x) * 4;
        px[p] = r * env * I + 10;
        px[p + 1] = g * env * I + 14;
        px[p + 2] = b * env * I + 22;
        px[p + 3] = 255;
      }
    }
    ctx.putImageData(img, 0, top);
  }

  // Curve overlay (sinc^2 profile above the strip).
  ctx.strokeStyle = "rgba(180,230,255,0.85)";
  ctx.lineWidth = 1.5;
  ctx.beginPath();
  const curveTop = top - 70, curveH = 64;
  for (let x = 0; x < W; x++) {
    const theta = Math.atan2(x - cx, D);
    const arg = (Math.PI * a * Math.sin(theta)) / lam;
    const I = sinc(arg) * sinc(arg);
    const y = curveTop + curveH - I * curveH;
    if (x === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
  }
  ctx.stroke();

  // First-minimum markers: sin(theta1) = lambda / a  =>  x1 = cx +/- D*tan(theta1)
  const ratio = lam / a;
  if (Math.abs(ratio) < 1) {
    const th1 = Math.asin(ratio);
    const x1 = D * Math.tan(th1);
    ctx.strokeStyle = "rgba(255,180,120,0.6)";
    ctx.setLineDash([4, 4]);
    ctx.beginPath();
    ctx.moveTo(cx - x1, slitY + 4);
    ctx.lineTo(cx - x1, top + screenH);
    ctx.moveTo(cx + x1, slitY + 4);
    ctx.lineTo(cx + x1, top + screenH);
    ctx.stroke();
    ctx.setLineDash([]);
  }

  // Zone divider — faint horizontal line at H/2 hinting at the touch zones.
  ctx.strokeStyle = inLambdaZone ? "rgba(140,210,255,0.18)" : "rgba(255,200,140,0.18)";
  ctx.setLineDash([2, 6]);
  ctx.beginPath();
  ctx.moveTo(0, H * 0.5);
  ctx.lineTo(W, H * 0.5);
  ctx.stroke();
  ctx.setLineDash([]);

  // HUD
  ctx.fillStyle = "rgba(200,220,255,0.92)";
  ctx.font = "12px monospace";
  ctx.fillText(`a = ${a.toFixed(0)} px   lambda = ${lam.toFixed(0)} px   lambda/a = ${(lam/a).toFixed(3)}`, 12, 16);
  const th1deg = Math.abs(lam / a) < 1 ? (Math.asin(lam / a) * 180 / Math.PI) : NaN;
  ctx.fillText(`theta_1 = ${isFinite(th1deg) ? th1deg.toFixed(2) + " deg" : "no minimum (a<lambda)"}`, 12, 32);
  ctx.fillStyle = "rgba(160,180,210,0.7)";
  const hint = inLambdaZone
    ? (shift ? "shift: scrubbing lambda" : "top zone: scrubbing lambda (move down for slit width)")
    : "bottom zone: scrubbing slit width a (move up for lambda)";
  ctx.fillText(hint, 12, H - 10);
}