Young's Double-Slit Interference

// Young's double-slit interference.
// Coherent monochromatic source -> barrier with two slits separated by d
// -> screen with fringe pattern I(theta) = cos^2(pi*d*sin(theta)/lambda).
// Top half: source, wavefronts, two slits, Huygens arcs, live strip.
// Bottom half: cos^2 intensity curve colored by lambda.
// Controls: mouse Y in top half scrubs lambda, in bottom half scrubs d;
// keys [/] for d, -/= for lambda.

let W = 0, H = 0;
let d = 80, lam = 50, dTarget = 80, lamTarget = 50;
const D_MIN = 30, D_MAX = 220, LAM_MIN = 18, LAM_MAX = 90, SLIT_W = 6;

function clamp(v, lo, hi) { return v < lo ? lo : v > hi ? hi : v; }
function lamHue(l) { return 270 - ((l - LAM_MIN) / (LAM_MAX - LAM_MIN)) * 270; }
function lamColor(l, a) { return `hsla(${lamHue(l).toFixed(0)},95%,60%,${a})`; }
function hslToRgb(h, s, l) {
  h /= 360; const a = s * Math.min(l, 1 - l);
  const f = (n) => { const k = (n + h * 12) % 12; return l - a * Math.max(-1, Math.min(Math.min(k - 3, 9 - k), 1)); };
  return [f(0) * 255, f(8) * 255, f(4) * 255];
}

function init({ width, height }) {
  W = width; H = height;
  dTarget = d = clamp(width * 0.12, D_MIN, D_MAX);
  lamTarget = lam = 48;
}

function tick({ ctx, dt, time, width, height, input }) {
  W = width; H = height;
  const cx = W / 2;
  const midY = Math.round(H * 0.5);
  const sourceY = 30;
  const slitY = Math.round(midY * 0.78);
  const screenY = midY - 8;
  const Dprop = Math.max(40, screenY - slitY);

  // Input
  if (input.mouseY > 0 && input.mouseY < midY) {
    // Top half: scrub lambda across full range
    const t = clamp(input.mouseY / midY, 0, 1);
    lamTarget = LAM_MIN + t * (LAM_MAX - LAM_MIN);
  } else if (input.mouseY >= midY && input.mouseY < H) {
    // Bottom half: scrub d across full range
    const t = clamp((input.mouseY - midY) / (H - midY), 0, 1);
    dTarget = D_MIN + t * (D_MAX - D_MIN);
  }
  if (input.keyDown) {
    if (input.keyDown("[")) dTarget = clamp(dTarget - 60 * dt, D_MIN, D_MAX);
    if (input.keyDown("]")) dTarget = clamp(dTarget + 60 * dt, D_MIN, D_MAX);
    if (input.keyDown("-")) lamTarget = clamp(lamTarget - 40 * dt, LAM_MIN, LAM_MAX);
    if (input.keyDown("=")) lamTarget = clamp(lamTarget + 40 * dt, LAM_MIN, LAM_MAX);
  }
  const ease = Math.min(1, dt * 9);
  d   += (dTarget   - d)   * ease;
  lam += (lamTarget - lam) * ease;

  // Background + divider
  ctx.fillStyle = "#04060c";
  ctx.fillRect(0, 0, W, H);
  ctx.strokeStyle = "rgba(140,170,220,0.18)";
  ctx.lineWidth = 1;
  ctx.beginPath(); ctx.moveTo(0, midY); ctx.lineTo(W, midY); ctx.stroke();

  // Plane wavefronts source->slits
  const drift = (time * 90) % lam;
  ctx.strokeStyle = lamColor(lam, 0.22);
  for (let y = slitY - 8 - drift; y > sourceY + 6; y -= lam) {
    ctx.beginPath(); ctx.moveTo(28, y); ctx.lineTo(W - 28, y); ctx.stroke();
  }

  // Source dot with glow
  const sg = ctx.createRadialGradient(cx, sourceY, 0, cx, sourceY, 20);
  sg.addColorStop(0, lamColor(lam, 0.95));
  sg.addColorStop(1, lamColor(lam, 0));
  ctx.fillStyle = sg;
  ctx.beginPath(); ctx.arc(cx, sourceY, 20, 0, Math.PI * 2); ctx.fill();
  ctx.fillStyle = lamColor(lam, 1);
  ctx.beginPath(); ctx.arc(cx, sourceY, 2.5, 0, Math.PI * 2); ctx.fill();

  // Barrier with two slits centered around cx, separated by d
  const barrierH = 10, s1 = cx - d / 2, s2 = cx + d / 2;
  ctx.fillStyle = "#1a2335";
  ctx.fillRect(0, slitY - barrierH / 2, s1 - SLIT_W / 2, barrierH);
  ctx.fillRect(s1 + SLIT_W / 2, slitY - barrierH / 2, (s2 - SLIT_W / 2) - (s1 + SLIT_W / 2), barrierH);
  ctx.fillRect(s2 + SLIT_W / 2, slitY - barrierH / 2, W - (s2 + SLIT_W / 2), barrierH);

  // Huygens wavelets from each slit
  for (const sx of [s1, s2]) {
    for (let r = 0; r < 4; r++) {
      const radius = ((time * 90 + r * lam * 1.4) % (Dprop + lam * 2));
      if (radius < 4 || radius > Dprop + 4) continue;
      const a = 0.45 * (1 - radius / (Dprop + lam * 2));
      ctx.strokeStyle = lamColor(lam, a);
      ctx.beginPath(); ctx.arc(sx, slitY, radius, 0, Math.PI, false); ctx.stroke();
    }
  }

  // Live thin strip of fringes on the geometric screen
  const stripH = 12, stripTop = screenY - stripH;
  const stripImg = ctx.getImageData(0, stripTop, W, stripH);
  const sp = stripImg.data;
  const [cr, cg, cb] = hslToRgb(lamHue(lam), 0.95, 0.6);
  for (let x = 0; x < W; x++) {
    const theta = Math.atan2(x - cx, Dprop);
    const arg = (Math.PI * d * Math.sin(theta)) / lam;
    const I2 = Math.cos(arg) * Math.cos(arg);
    for (let y = 0; y < stripH; y++) {
      const dy = (y - stripH / 2) / (stripH / 2);
      const env = Math.exp(-dy * dy * 1.5);
      const p = (y * W + x) * 4;
      sp[p] = cr * I2 * env + 8;
      sp[p + 1] = cg * I2 * env + 10;
      sp[p + 2] = cb * I2 * env + 18;
      sp[p + 3] = 255;
    }
  }
  ctx.putImageData(stripImg, 0, stripTop);

  // Intensity curve (bottom half)
  const curveTop = midY + 16, curveBot = H - 28, curveH = curveBot - curveTop;
  ctx.strokeStyle = "rgba(140,170,220,0.10)";
  for (let i = 0; i <= 4; i++) {
    const y = curveTop + (curveH * i) / 4;
    ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(W, y); ctx.stroke();
  }
  ctx.fillStyle = "rgba(160,180,210,0.55)";
  ctx.font = "10px monospace";
  ctx.fillText("I=1", 4, curveTop + 10);
  ctx.fillText("I=0", 4, curveBot - 2);

  // Filled area + curve line (one pass each, math repeated but cheap at ~W px)
  ctx.beginPath(); ctx.moveTo(0, curveBot);
  for (let x = 0; x < W; x++) {
    const theta = Math.atan2(x - cx, Dprop);
    const arg = (Math.PI * d * Math.sin(theta)) / lam;
    const I2 = Math.cos(arg) * Math.cos(arg);
    ctx.lineTo(x, curveBot - I2 * curveH);
  }
  ctx.lineTo(W, curveBot); ctx.closePath();
  ctx.fillStyle = lamColor(lam, 0.28); ctx.fill();

  ctx.strokeStyle = lamColor(lam, 0.95);
  ctx.lineWidth = 1.5;
  ctx.beginPath();
  for (let x = 0; x < W; x++) {
    const theta = Math.atan2(x - cx, Dprop);
    const arg = (Math.PI * d * Math.sin(theta)) / lam;
    const I2 = Math.cos(arg) * Math.cos(arg);
    const y = curveBot - I2 * curveH;
    if (x === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
  }
  ctx.stroke();

  // Bright-fringe order markers: d sin(theta_m) = m*lambda
  ctx.font = "10px monospace";
  for (let m = -6; m <= 6; m++) {
    const s = (m * lam) / d;
    if (Math.abs(s) >= 1) continue;
    const xm = cx + Dprop * Math.tan(Math.asin(s));
    if (xm < 4 || xm > W - 4) continue;
    ctx.strokeStyle = "rgba(255,255,255,0.35)";
    ctx.setLineDash([3, 4]);
    ctx.beginPath(); ctx.moveTo(xm, curveTop); ctx.lineTo(xm, curveBot); ctx.stroke();
    ctx.setLineDash([]);
    ctx.fillStyle = "rgba(255,255,255,0.85)";
    ctx.fillText(`m=${m}`, xm + 3, curveTop + 10);
  }

  // HUD
  ctx.fillStyle = "rgba(220,230,255,0.95)";
  ctx.font = "12px monospace";
  ctx.fillText(`d = ${d.toFixed(0)} px   lambda = ${lam.toFixed(0)} px   d/lambda = ${(d/lam).toFixed(2)}`, 12, 16);
  const dx = (lam * Dprop) / d;
  ctx.fillStyle = "rgba(180,200,230,0.8)";
  ctx.fillText(`fringe spacing ~ ${dx.toFixed(1)} px`, 12, 32);
  ctx.fillStyle = "rgba(160,180,210,0.7)";
  ctx.fillText("top half: lambda  ·  bottom half: slit separation d  ( keys: -/= lambda, [/] d )", 12, H - 10);
}