Snell's Law and Total Internal Reflection

// Snell's law refraction at a flat interface.
// n1 sin(theta1) = n2 sin(theta2). When n1>n2 and theta1 exceeds
// arcsin(n2/n1), all light reflects (total internal reflection).
// Drag the white source dot to change theta1. Tap < > to cycle media.

let W = 0, H = 0, drag = false, n1Idx = 0, n2Idx = 2;
const src = { x: 0, y: 0 };
const MEDIA = [
  { name: "air", n: 1.00, tint: "rgba(120,160,200,0.15)" },
  { name: "water", n: 1.33, tint: "rgba(60,140,220,0.28)" },
  { name: "glass", n: 1.50, tint: "rgba(180,200,230,0.28)" },
  { name: "diamond", n: 2.42, tint: "rgba(200,230,255,0.38)" },
];
const BTN = 44, PAD = 12;

function init({ width, height }) {
  W = width; H = height;
  src.x = W * 0.28;
  src.y = H * 0.5 - Math.max(80, H * 0.18);
}

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

function rects() {
  const rx = W - PAD - BTN;
  return {
    n1m: { x: rx - BTN - 8, y: PAD, w: BTN, h: BTN },
    n1p: { x: rx,           y: PAD, w: BTN, h: BTN },
    n2m: { x: rx - BTN - 8, y: H - PAD - BTN, w: BTN, h: BTN },
    n2p: { x: rx,           y: H - PAD - BTN, w: BTN, h: BTN },
  };
}

function drawBtn(ctx, r, label) {
  ctx.fillStyle = "rgba(0,0,0,0.65)"; ctx.fillRect(r.x, r.y, r.w, r.h);
  ctx.strokeStyle = "rgba(255,255,255,0.45)"; ctx.lineWidth = 1;
  ctx.strokeRect(r.x + 0.5, r.y + 0.5, r.w - 1, r.h - 1);
  ctx.fillStyle = "#fff";
  ctx.font = "bold 24px ui-sans-serif, system-ui";
  ctx.textAlign = "center"; ctx.textBaseline = "middle";
  ctx.fillText(label, r.x + r.w / 2, r.y + r.h / 2);
}

function tick({ ctx, time, width, height, input }) {
  W = width; H = height;
  const iy = H * 0.5;
  const R = rects();

  for (const c of input.consumeClicks()) {
    if      (inRect(c.x, c.y, R.n1m)) n1Idx = (n1Idx + MEDIA.length - 1) % MEDIA.length;
    else if (inRect(c.x, c.y, R.n1p)) n1Idx = (n1Idx + 1) % MEDIA.length;
    else if (inRect(c.x, c.y, R.n2m)) n2Idx = (n2Idx + MEDIA.length - 1) % MEDIA.length;
    else if (inRect(c.x, c.y, R.n2p)) n2Idx = (n2Idx + 1) % MEDIA.length;
  }

  const overBtn = inRect(input.mouseX, input.mouseY, R.n1m) ||
                  inRect(input.mouseX, input.mouseY, R.n1p) ||
                  inRect(input.mouseX, input.mouseY, R.n2m) ||
                  inRect(input.mouseX, input.mouseY, R.n2p);
  if (input.mouseDown && !overBtn) {
    if (!drag) {
      const dx = input.mouseX - src.x, dy = input.mouseY - src.y;
      if (dx * dx + dy * dy < 1600 || input.mouseY < iy - 6) drag = true;
    }
    if (drag) {
      src.x = Math.max(8, Math.min(W - BTN * 2 - PAD - 24, input.mouseX));
      src.y = Math.max(8, Math.min(iy - 8, input.mouseY));
    }
  } else {
    drag = false;
  }

  const n1 = MEDIA[n1Idx].n, n2 = MEDIA[n2Idx].n;

  // Background and medium tints.
  ctx.fillStyle = "#06080f"; ctx.fillRect(0, 0, W, H);
  ctx.fillStyle = MEDIA[n1Idx].tint; ctx.fillRect(0, 0, W, iy);
  ctx.fillStyle = MEDIA[n2Idx].tint; ctx.fillRect(0, iy, W, H - iy);
  ctx.strokeStyle = "rgba(255,255,255,0.55)";
  ctx.lineWidth = 1.5;
  ctx.beginPath(); ctx.moveTo(0, iy); ctx.lineTo(W, iy); ctx.stroke();

  // Hit point in the middle of the canvas on the interface.
  const hx = W * 0.5, hy = iy;
  let ix = hx - src.x, iyv = hy - src.y;
  const ilen = Math.sqrt(ix * ix + iyv * iyv) || 1;
  ix /= ilen; iyv /= ilen;

  // Normal points up (into medium 1): N = (0,-1). cos1 = -I·N = iyv.
  const cos1 = Math.min(1, Math.max(0, iyv));
  const sin1 = Math.sqrt(Math.max(0, 1 - cos1 * cos1));
  const theta1 = Math.acos(cos1);

  const sinT2 = (n1 / n2) * sin1;
  const tir = sinT2 > 1;
  const theta2 = tir ? 0 : Math.asin(sinT2);

  // Reflected ray: R = I - 2(I·N)N, with N=(0,-1): R = (ix, -iyv).
  const rx = ix, ry = -iyv;

  // Refracted ray: T = (n1/n2)·I + ((n1/n2)·cos1 - cos2)·N.
  let tx = 0, ty = 0;
  if (!tir) {
    const eta = n1 / n2;
    const cos2 = Math.sqrt(Math.max(0, 1 - sinT2 * sinT2));
    tx = eta * ix;                          // N.x = 0
    ty = eta * iyv + (eta * cos1 - cos2) * -1; // N.y = -1
    const tl = Math.sqrt(tx * tx + ty * ty) || 1;
    tx /= tl; ty /= tl;
  }

  // Animated dashes give the beams motion.
  const dash = -(time * 80) % 16;
  const farL = Math.max(W, H);

  ctx.lineCap = "round";
  ctx.setLineDash([10, 6]);

  // Incident.
  ctx.lineWidth = 3;
  ctx.strokeStyle = "rgba(255,90,90,0.95)";
  ctx.lineDashOffset = dash;
  ctx.beginPath(); ctx.moveTo(src.x, src.y); ctx.lineTo(hx, hy); ctx.stroke();

  // Reflected.
  ctx.lineWidth = tir ? 3 : 1.5;
  ctx.strokeStyle = tir ? "rgba(255,170,90,1.0)" : "rgba(255,170,90,0.55)";
  ctx.lineDashOffset = -dash;
  ctx.beginPath(); ctx.moveTo(hx, hy); ctx.lineTo(hx + rx * farL, hy + ry * farL); ctx.stroke();

  // Refracted.
  if (!tir) {
    ctx.lineWidth = 3;
    ctx.strokeStyle = "rgba(120,220,255,0.95)";
    ctx.lineDashOffset = dash;
    ctx.beginPath(); ctx.moveTo(hx, hy); ctx.lineTo(hx + tx * farL, hy + ty * farL); ctx.stroke();
  }
  ctx.setLineDash([]);

  // Normal.
  ctx.setLineDash([4, 4]);
  ctx.lineWidth = 1;
  ctx.strokeStyle = "rgba(255,255,255,0.35)";
  ctx.beginPath(); ctx.moveTo(hx, hy - 80); ctx.lineTo(hx, hy + 80); ctx.stroke();
  ctx.setLineDash([]);

  // Angle arcs (between normal and ray).
  const arcR = 28, aUp = -Math.PI / 2, aDn = Math.PI / 2;
  ctx.lineWidth = 1.5;
  ctx.strokeStyle = "rgba(255,140,140,0.9)";
  const a1 = Math.atan2(-iyv, -ix);
  ctx.beginPath(); ctx.arc(hx, hy, arcR, Math.min(aUp, a1), Math.max(aUp, a1)); ctx.stroke();
  if (!tir) {
    ctx.strokeStyle = "rgba(120,220,255,0.9)";
    const a2 = Math.atan2(ty, tx);
    ctx.beginPath(); ctx.arc(hx, hy, arcR, Math.min(aDn, a2), Math.max(aDn, a2)); ctx.stroke();
  } else {
    ctx.strokeStyle = "rgba(255,170,90,0.9)";
    const ar = Math.atan2(ry, rx);
    ctx.beginPath(); ctx.arc(hx, hy, arcR + 6, Math.min(aUp, ar), Math.max(aUp, ar)); ctx.stroke();
  }

  // Source handle.
  ctx.fillStyle = drag ? "#ffd17a" : "#fff";
  ctx.beginPath(); ctx.arc(src.x, src.y, 7, 0, Math.PI * 2); ctx.fill();
  ctx.strokeStyle = "rgba(0,0,0,0.6)"; ctx.lineWidth = 1; ctx.stroke();

  // HUD.
  const t1d = theta1 * 180 / Math.PI;
  const t2d = tir ? NaN : theta2 * 180 / Math.PI;
  const cArg = n2 / n1;
  const cDeg = cArg < 1 ? Math.asin(cArg) * 180 / Math.PI : NaN;

  ctx.fillStyle = "rgba(0,0,0,0.6)"; ctx.fillRect(PAD, PAD, 250, 100);
  ctx.fillStyle = "#fff"; ctx.font = "13px monospace";
  ctx.textAlign = "left"; ctx.textBaseline = "alphabetic";
  ctx.fillText(`n1 = ${n1.toFixed(2)} (${MEDIA[n1Idx].name})`, PAD + 10, PAD + 20);
  ctx.fillText(`n2 = ${n2.toFixed(2)} (${MEDIA[n2Idx].name})`, PAD + 10, PAD + 38);
  ctx.fillText(`theta1 = ${t1d.toFixed(1)} deg`, PAD + 10, PAD + 58);
  ctx.fillText(tir ? "TIR (no refraction)" : `theta2 = ${t2d.toFixed(1)} deg`,
    PAD + 10, PAD + 76);
  ctx.fillStyle = isFinite(cDeg) ? "rgba(255,200,140,0.9)" : "rgba(180,200,230,0.7)";
  ctx.fillText(isFinite(cDeg) ? `theta_c = ${cDeg.toFixed(1)} deg` : "no critical angle (n1<=n2)",
    PAD + 10, PAD + 94);

  ctx.fillStyle = "rgba(255,255,255,0.85)";
  ctx.font = "11px monospace"; ctx.textAlign = "right";
  ctx.fillText(`n1: ${MEDIA[n1Idx].name}`, R.n1m.x - 4, R.n1m.y + BTN / 2 + 4);
  ctx.fillText(`n2: ${MEDIA[n2Idx].name}`, R.n2m.x - 4, R.n2m.y + BTN / 2 + 4);

  drawBtn(ctx, R.n1m, "<"); drawBtn(ctx, R.n1p, ">");
  drawBtn(ctx, R.n2m, "<"); drawBtn(ctx, R.n2p, ">");

  ctx.fillStyle = "rgba(180,200,230,0.7)";
  ctx.font = "11px monospace"; ctx.textAlign = "left";
  ctx.fillText("drag the white dot   tap < > to cycle media", PAD, H - PAD);
}