Polarization — Malus's Law and the 3-Filter Paradox

// Linear polarization with 1–3 filters and Malus's law.
// Beam travels left to right. Each filter passes only the E-field component
// along its transmission axis: I' = I * cos^2(theta_in - theta_axis).
// Crossed polarizers (0° and 90°) block all light. Inserting a 45° filter
// between them restores I = (1/2)*(1/2)*(1/2) = 1/8 of the source.

const HANDLE_R = 22;
const HIT_R = 36;
const SLOT_W = 70;
const SLOT_H = 220;
const PIN_R = 5;

let filters = null;       // [{x, angle, enabled}]
let dragging = -1;
let mode = 3;             // 1, 2, or 3 filters
let lastClickFrame = -10;

let W = 0, H = 0;
let inited = false;
let timeAcc = 0;

function layout(width, height) {
  W = width; H = height;
  // Three filters spaced across the right two-thirds of the canvas.
  const leftPad = Math.max(140, width * 0.22);
  const rightPad = Math.max(60, width * 0.10);
  const span = width - leftPad - rightPad;
  const slots = [leftPad + span * 0.0, leftPad + span * 0.5, leftPad + span * 1.0];
  if (!filters) {
    filters = [
      { x: slots[0], angle: 0,              enabled: true },
      { x: slots[1], angle: Math.PI / 4,    enabled: true },
      { x: slots[2], angle: Math.PI / 2,    enabled: true },
    ];
  } else {
    for (let i = 0; i < 3; i++) filters[i].x = slots[i];
  }
  inited = true;
}

function init({ width, height }) {
  layout(width, height);
}

function activeFilters() {
  const out = [];
  for (let i = 0; i < mode; i++) out.push(filters[i]);
  return out;
}

// Returns array of intensities AFTER each active filter (0..1), starting at 1.0 unpolarized
// then 0.5 after first filter (unpolarized -> polarized), then cos^2 cascades.
function intensityChain() {
  const f = activeFilters();
  const out = [1.0];
  if (f.length === 0) return out;
  // Unpolarized source -> first filter halves the intensity and sets the axis.
  let I = 0.5;
  out.push(I);
  for (let i = 1; i < f.length; i++) {
    const d = f[i].angle - f[i - 1].angle;
    I *= Math.cos(d) * Math.cos(d);
    out.push(I);
  }
  return out;
}

function drawBeam(ctx, x0, x1, axisAngle, intensity, t, polarized) {
  if (x1 <= x0 + 1 || intensity < 1e-4) return;
  const yMid = H / 2;
  const amp = Math.min(46, H * 0.13) * Math.sqrt(Math.max(0, Math.min(1, intensity)));
  const k = 0.085;
  const omega = 6.0;
  const ca = Math.cos(axisAngle), sa = Math.sin(axisAngle);

  // Unpolarized: draw two overlapping orthogonal traces, faded.
  if (!polarized) {
    drawSinusoid(ctx, x0, x1, yMid, amp, k, omega, t, 0,            `rgba(120,220,255,${0.55 * intensity + 0.25})`);
    drawSinusoid(ctx, x0, x1, yMid, amp, k, omega, t, Math.PI / 2,  `rgba(255,180,120,${0.45 * intensity + 0.2})`);
    return;
  }
  // Polarized: oscillates along the axis. Y offset = sin(...) * amp * sin(angle).
  // We render as a 3D-ish wavy ribbon by projecting onto screen Y only — the
  // visual "tilt" comes from drawing many parallel strokes at angle.
  ctx.lineWidth = 2.2;
  ctx.strokeStyle = `rgba(120,220,255,${0.35 + 0.6 * intensity})`;
  ctx.beginPath();
  const steps = Math.max(40, Math.floor((x1 - x0) / 4));
  for (let i = 0; i <= steps; i++) {
    const x = x0 + (x1 - x0) * (i / steps);
    const phase = k * (x - x0) - omega * t;
    const s = Math.sin(phase) * amp;
    // project along the axis: screen-y = s * sin(axisAngle), screen-x offset = s * cos(axisAngle)
    const px = x + s * ca * 0.18; // light parallax so horizontal axis still looks wavy
    const py = yMid + s * sa;
    if (i === 0) ctx.moveTo(px, py); else ctx.lineTo(px, py);
  }
  ctx.stroke();

  // Faint envelope dots to hint at oscillation magnitude.
  ctx.fillStyle = `rgba(160,235,255,${0.18 * intensity})`;
  for (let i = 0; i <= steps; i += 4) {
    const x = x0 + (x1 - x0) * (i / steps);
    const phase = k * (x - x0) - omega * t;
    const s = Math.sin(phase) * amp;
    ctx.beginPath();
    ctx.arc(x + s * ca * 0.18, yMid + s * sa, 1.1, 0, Math.PI * 2);
    ctx.fill();
  }
}

function drawSinusoid(ctx, x0, x1, yMid, amp, k, omega, t, phaseOff, color) {
  ctx.strokeStyle = color;
  ctx.lineWidth = 1.6;
  ctx.beginPath();
  const steps = Math.max(40, Math.floor((x1 - x0) / 4));
  for (let i = 0; i <= steps; i++) {
    const x = x0 + (x1 - x0) * (i / steps);
    const s = Math.sin(k * (x - x0) - omega * t + phaseOff) * amp;
    if (i === 0) ctx.moveTo(x, yMid + s * 0.5); else ctx.lineTo(x, yMid + s * 0.5);
  }
  ctx.stroke();
}

function drawFilter(ctx, f, i, enabled, isDrag) {
  const yMid = H / 2;
  const slotTop = yMid - SLOT_H / 2;
  const slotBot = yMid + SLOT_H / 2;
  // Frame
  ctx.fillStyle = enabled ? "rgba(40,55,80,0.85)" : "rgba(40,55,80,0.35)";
  ctx.strokeStyle = isDrag ? "rgba(255,220,120,0.95)" : "rgba(180,200,230,0.75)";
  ctx.lineWidth = 2;
  ctx.beginPath();
  ctx.rect(f.x - SLOT_W / 2, slotTop, SLOT_W, SLOT_H);
  ctx.fill();
  ctx.stroke();

  // Hash lines along axis
  const ca = Math.cos(f.angle), sa = Math.sin(f.angle);
  ctx.strokeStyle = enabled ? "rgba(200,225,255,0.85)" : "rgba(200,225,255,0.35)";
  ctx.lineWidth = 1.4;
  const r = SLOT_W * 0.45;
  for (let s = -SLOT_H * 0.42; s <= SLOT_H * 0.42; s += 8) {
    const cx = f.x + (-sa) * s;
    const cy = yMid + ca * s;
    ctx.beginPath();
    ctx.moveTo(cx - ca * r, cy - sa * r);
    ctx.lineTo(cx + ca * r, cy + sa * r);
    ctx.stroke();
  }

  // Drag pin at top
  ctx.fillStyle = isDrag ? "rgba(255,220,120,0.95)" : "rgba(120,180,255,0.95)";
  ctx.strokeStyle = "rgba(255,255,255,0.9)";
  ctx.lineWidth = 1.4;
  ctx.beginPath();
  ctx.arc(f.x, slotTop - 14, PIN_R + 3, 0, Math.PI * 2);
  ctx.fill();
  ctx.stroke();

  // Axis arrow inside circle indicator at bottom
  ctx.strokeStyle = "rgba(255,220,120,0.9)";
  ctx.lineWidth = 2;
  const ax = f.x, ay = slotBot + 22;
  ctx.beginPath();
  ctx.moveTo(ax - ca * 10, ay - sa * 10);
  ctx.lineTo(ax + ca * 10, ay + sa * 10);
  ctx.stroke();

  // Angle label
  let deg = (f.angle * 180 / Math.PI) % 180;
  if (deg < 0) deg += 180;
  ctx.fillStyle = "rgba(230,240,255,0.92)";
  ctx.font = "12px ui-monospace, monospace";
  ctx.textAlign = "center";
  ctx.fillText(`${deg.toFixed(0)}°`, f.x, slotBot + 44);
  ctx.textAlign = "left";
}

function drawModeButton(ctx, x, y, n, active) {
  const w = 36, h = 30;
  ctx.fillStyle = active ? "rgba(255,210,90,0.85)" : "rgba(40,55,80,0.85)";
  ctx.strokeStyle = active ? "rgba(255,235,160,1)" : "rgba(180,200,230,0.6)";
  ctx.lineWidth = 1.6;
  ctx.beginPath();
  ctx.rect(x, y, w, h);
  ctx.fill();
  ctx.stroke();
  ctx.fillStyle = active ? "rgba(20,20,30,0.95)" : "rgba(230,240,255,0.9)";
  ctx.font = "bold 14px ui-monospace, monospace";
  ctx.textAlign = "center";
  ctx.textBaseline = "middle";
  ctx.fillText(String(n), x + w / 2, y + h / 2 + 1);
  ctx.textAlign = "left";
  ctx.textBaseline = "alphabetic";
  return { x, y, w, h };
}

function tick({ ctx, dt, frame, width, height, input }) {
  if (!inited || width !== W || height !== H) layout(width, height);
  timeAcc += Math.min(0.05, dt || 0.016);
  const t = timeAcc;

  // Handle clicks for mode buttons (drain queue).
  const btnX = 12;
  const btnRects = [];
  for (let i = 0; i < 3; i++) btnRects.push({ x: btnX + i * 42, y: 12, w: 36, h: 30, n: i + 1 });

  if (typeof input.consumeClicks === "function") {
    const clicks = input.consumeClicks();
    for (const c of clicks) {
      for (const r of btnRects) {
        if (c.x >= r.x && c.x <= r.x + r.w && c.y >= r.y && c.y <= r.y + r.h) {
          mode = r.n;
        }
      }
    }
  }

  const mx = input.mouseX, my = input.mouseY;

  // Drag: pick filter on first press near pin OR on filter body.
  if (input.mouseDown && dragging === -1) {
    let best = -1, bestD = HIT_R;
    for (let i = 0; i < mode; i++) {
      const f = filters[i];
      const yMid = H / 2;
      const pinY = yMid - SLOT_H / 2 - 14;
      const dPin = Math.hypot(mx - f.x, my - pinY);
      if (dPin < bestD) { bestD = dPin; best = i; }
      // Also allow grabbing the slot body itself.
      if (Math.abs(mx - f.x) < SLOT_W / 2 && Math.abs(my - yMid) < SLOT_H / 2 + 30) {
        const dBody = Math.abs(mx - f.x);
        if (dBody < bestD) { bestD = dBody; best = i; }
      }
    }
    if (best !== -1) dragging = best;
  }
  if (!input.mouseDown) dragging = -1;

  // While dragging: angle follows mouse direction from filter center.
  if (dragging !== -1) {
    const f = filters[dragging];
    const yMid = H / 2;
    const dx = mx - f.x;
    const dy = my - yMid;
    if (Math.hypot(dx, dy) > 12) {
      // Wrap into [0, π) — physical axis (unsigned direction).
      let a = Math.atan2(dy, dx);
      if (a < 0) a += Math.PI;
      if (a >= Math.PI) a -= Math.PI;
      f.angle = a;
    }
  }

  // Background.
  ctx.fillStyle = "#070a14";
  ctx.fillRect(0, 0, width, height);

  // Faint grid.
  ctx.strokeStyle = "rgba(120,140,180,0.05)";
  ctx.lineWidth = 1;
  ctx.beginPath();
  for (let x = 0; x < width; x += 40) { ctx.moveTo(x, 0); ctx.lineTo(x, height); }
  for (let y = 0; y < height; y += 40) { ctx.moveTo(0, y); ctx.lineTo(width, y); }
  ctx.stroke();

  // Source lamp on the left.
  const sourceX = 30;
  const yMid = H / 2;
  const grad = ctx.createRadialGradient(sourceX, yMid, 4, sourceX, yMid, 60);
  grad.addColorStop(0, "rgba(255,250,200,0.95)");
  grad.addColorStop(1, "rgba(255,250,200,0)");
  ctx.fillStyle = grad;
  ctx.beginPath();
  ctx.arc(sourceX, yMid, 60, 0, Math.PI * 2);
  ctx.fill();
  ctx.fillStyle = "rgba(255,250,200,1)";
  ctx.beginPath();
  ctx.arc(sourceX, yMid, 8, 0, Math.PI * 2);
  ctx.fill();

  // Walk filters in x-order and draw beam segments.
  const active = activeFilters().slice().sort((a, b) => a.x - b.x);
  const chain = [1.0];
  let prevAxis = 0;
  let polarized = false;
  let segStart = sourceX + 10;
  const xs = [];
  // Build x-positions including end-of-screen.
  for (const f of active) xs.push(f.x);
  xs.push(width - 20);

  let curI = 1.0;
  for (let i = 0; i < xs.length; i++) {
    const xEnd = xs[i];
    drawBeam(ctx, segStart, xEnd, prevAxis, curI, t, polarized);
    segStart = xEnd;
    if (i < active.length) {
      const f = active[i];
      if (i === 0) {
        curI = 0.5; // unpolarized -> polarized
      } else {
        const d = f.angle - prevAxis;
        curI *= Math.cos(d) * Math.cos(d);
      }
      prevAxis = f.angle;
      polarized = true;
      chain.push(curI);
    }
  }

  // Detector / screen on the right.
  const detX = width - 20;
  ctx.fillStyle = `rgba(255,255,200,${0.15 + 0.75 * Math.max(0, Math.min(1, curI))})`;
  ctx.fillRect(detX - 4, yMid - 80, 10, 160);
  ctx.strokeStyle = "rgba(220,230,255,0.6)";
  ctx.lineWidth = 1;
  ctx.strokeRect(detX - 4, yMid - 80, 10, 160);

  // Draw filters on top.
  for (let i = 0; i < mode; i++) {
    drawFilter(ctx, filters[i], i, true, dragging === i);
  }

  // Mode buttons.
  ctx.fillStyle = "rgba(220,230,250,0.85)";
  ctx.font = "11px ui-monospace, monospace";
  ctx.fillText("# filters", btnX, 9);
  for (const r of btnRects) drawModeButton(ctx, r.x, r.y, r.n, mode === r.n);

  // HUD: intensities after each filter.
  ctx.fillStyle = "rgba(230,240,255,0.92)";
  ctx.font = "13px ui-monospace, monospace";
  let hy = 70;
  ctx.fillText(`I_source = 1.00`, 12, hy); hy += 18;
  const sorted = active;
  let runI = 1.0, runAxis = 0;
  for (let i = 0; i < sorted.length; i++) {
    const f = sorted[i];
    if (i === 0) runI = 0.5;
    else { const d = f.angle - runAxis; runI *= Math.cos(d) * Math.cos(d); }
    runAxis = f.angle;
    let deg = (f.angle * 180 / Math.PI); if (deg < 0) deg += 180; deg %= 180;
    ctx.fillStyle = "rgba(230,240,255,0.92)";
    ctx.fillText(`I_${i + 1} (${deg.toFixed(0)}°) = ${runI.toFixed(3)}`, 12, hy);
    hy += 18;
  }
  ctx.fillStyle = "rgba(255,220,120,0.95)";
  ctx.fillText(`I_out = ${curI.toFixed(3)}`, 12, hy);

  // Footer hint.
  ctx.fillStyle = "rgba(200,210,230,0.6)";
  ctx.font = "12px ui-monospace, monospace";
  ctx.fillText("drag filters to rotate", width - 200, height - 12);

  // 3-filter paradox annotation when crossed + middle 45°.
  if (mode === 3) {
    const f0 = filters[0], f1 = filters[1], f2 = filters[2];
    const dOuter = Math.abs(((f2.angle - f0.angle) * 180 / Math.PI) % 180 - 90);
    if (dOuter < 8) {
      ctx.fillStyle = "rgba(255,200,120,0.85)";
      ctx.font = "12px ui-monospace, monospace";
      ctx.fillText("outer filters crossed: middle filter rescues the beam", 12, height - 28);
    }
  } else if (mode === 2) {
    const d = Math.abs(((filters[1].angle - filters[0].angle) * 180 / Math.PI) % 180 - 90);
    if (d < 4) {
      ctx.fillStyle = "rgba(255,140,140,0.9)";
      ctx.font = "12px ui-monospace, monospace";
      ctx.fillText("crossed polarizers: I_out → 0", 12, height - 28);
    }
  }
}