Prism: White Light to Rainbow

// Triangular prism splitting white light into a rainbow.
// Cauchy dispersion n(lambda) = A + B/lambda^2 with crown-glass-ish
// constants. White ray refracts at both prism faces; each wavelength
// in 400-700 nm picks up a slightly different angle, producing a fan.
// Drag the incident ray angle (the white source dot above the prism).

let W = 0, H = 0, drag = false;
const src = { x: 0, y: 0 };
const HIT = { x: 0, y: 0 };          // entry point on left face
const PRISM = { ax: 0, ay: 0, bx: 0, by: 0, cx: 0, cy: 0 };
const CAUCHY_A = 1.5046;             // ~crown glass
const CAUCHY_B = 4200;               // nm^2 — exaggerated for visibility
const LAMBDAS = 24;                  // wavelength samples

function init({ width, height }) {
  W = width; H = height;
  layout();
  src.x = PRISM.ax - 90;
  src.y = HIT.y - 70;
}

function layout() {
  // Equilateral-ish prism, apex up, centered.
  const cx = W * 0.52, cy = H * 0.58;
  const s = Math.min(W, H) * 0.55;
  PRISM.ax = cx - s * 0.5; PRISM.ay = cy + s * 0.28;     // bottom-left
  PRISM.bx = cx + s * 0.5; PRISM.by = cy + s * 0.28;     // bottom-right
  PRISM.cx = cx;           PRISM.cy = cy - s * 0.38;     // apex
  // Default hit point: middle of left face.
  HIT.x = (PRISM.ax + PRISM.cx) * 0.5;
  HIT.y = (PRISM.ay + PRISM.cy) * 0.5;
}

// Convert wavelength (380-750 nm) to an approximate sRGB color.
function wavelengthRGB(l) {
  let r = 0, g = 0, b = 0;
  if (l >= 380 && l < 440) { r = -(l - 440) / 60; b = 1; }
  else if (l < 490)        { g = (l - 440) / 50;  b = 1; }
  else if (l < 510)        { g = 1; b = -(l - 510) / 20; }
  else if (l < 580)        { r = (l - 510) / 70;  g = 1; }
  else if (l < 645)        { r = 1; g = -(l - 645) / 65; }
  else if (l <= 750)       { r = 1; }
  let f = 1;
  if (l < 420)      f = 0.3 + 0.7 * (l - 380) / 40;
  else if (l > 700) f = 0.3 + 0.7 * (750 - l) / 50;
  r = Math.pow(Math.max(0, Math.min(1, r * f)), 0.8);
  g = Math.pow(Math.max(0, Math.min(1, g * f)), 0.8);
  b = Math.pow(Math.max(0, Math.min(1, b * f)), 0.8);
  return [r * 255 | 0, g * 255 | 0, b * 255 | 0];
}

// Refract an incoming unit vector I across a unit normal N (pointing
// into the medium the ray came FROM) with index ratio eta = n1/n2.
// Returns the refracted unit vector, or null on TIR.
function refract(ix, iy, nx, ny, eta) {
  const cosI = -(ix * nx + iy * ny);
  const k = 1 - eta * eta * (1 - cosI * cosI);
  if (k < 0) return null;
  const c2 = Math.sqrt(k);
  const tx = eta * ix + (eta * cosI - c2) * nx;
  const ty = eta * iy + (eta * cosI - c2) * ny;
  const l = Math.sqrt(tx * tx + ty * ty) || 1;
  return [tx / l, ty / l];
}

// Intersect a ray (ox,oy)+t*(dx,dy), t>EPS, with segment a-b.
// Returns {t, x, y, nx, ny} where (nx,ny) is the outward unit normal of
// the segment relative to the prism interior (point p0 inside).
function segHit(ox, oy, dx, dy, ax, ay, bx, by, p0x, p0y) {
  const ex = bx - ax, ey = by - ay;
  const denom = dx * ey - dy * ex;
  if (Math.abs(denom) < 1e-9) return null;
  const t  = ((ax - ox) * ey - (ay - oy) * ex) / denom;
  const u  = ((ax - ox) * dy - (ay - oy) * dx) / denom;
  if (t < 1e-4 || u < -1e-4 || u > 1 + 1e-4) return null;
  // Normal candidates.
  let nx = -ey, ny = ex;
  const ll = Math.sqrt(nx * nx + ny * ny) || 1;
  nx /= ll; ny /= ll;
  // Flip so it points AWAY from p0 (i.e. outward from prism interior).
  const mx = (ax + bx) * 0.5, my = (ay + by) * 0.5;
  if ((mx - p0x) * nx + (my - p0y) * ny < 0) { nx = -nx; ny = -ny; }
  return { t, x: ox + dx * t, y: oy + dy * t, nx, ny };
}

function traceWavelength(lambda, ix, iy) {
  // Index for this wavelength (Cauchy).
  const n = CAUCHY_A + CAUCHY_B / (lambda * lambda);
  // Entry: left face (a-c). Outward normal points away from prism centroid.
  const Lx = PRISM.cx - PRISM.ax, Ly = PRISM.cy - PRISM.ay;
  let nx = -Ly, ny = Lx;
  const ll = Math.sqrt(nx * nx + ny * ny) || 1; nx /= ll; ny /= ll;
  const centX = (PRISM.ax + PRISM.bx + PRISM.cx) / 3;
  const centY = (PRISM.ay + PRISM.by + PRISM.cy) / 3;
  if ((HIT.x - centX) * nx + (HIT.y - centY) * ny < 0) { nx = -nx; ny = -ny; }
  // Incoming side: outside (air, n=1). N for refract() points into source medium = outward.
  const t1 = refract(ix, iy, nx, ny, 1 / n);
  if (!t1) return null;
  // March inside prism to the next face.
  let h = null;
  const bottom = segHit(HIT.x, HIT.y, t1[0], t1[1], PRISM.ax, PRISM.ay, PRISM.bx, PRISM.by, centX, centY);
  const right  = segHit(HIT.x, HIT.y, t1[0], t1[1], PRISM.bx, PRISM.by, PRISM.cx, PRISM.cy, centX, centY);
  if (bottom && (!right || bottom.t < right.t)) h = bottom;
  else if (right) h = right;
  if (!h) return null;
  // Exit refraction: now N points outward (away from interior) — flip to source side.
  const t2 = refract(t1[0], t1[1], -h.nx, -h.ny, n / 1);
  if (!t2) return { entry: [HIT.x, HIT.y], mid: [h.x, h.y], out: null };
  return { entry: [HIT.x, HIT.y], mid: [h.x, h.y], outDir: t2, outOrigin: [h.x, h.y] };
}

function clampHitToLeftFace(px, py) {
  // Project (px,py) onto segment a->c, clamped 0.08..0.92.
  const dx = PRISM.cx - PRISM.ax, dy = PRISM.cy - PRISM.ay;
  const len2 = dx * dx + dy * dy;
  let t = ((px - PRISM.ax) * dx + (py - PRISM.ay) * dy) / len2;
  t = Math.max(0.08, Math.min(0.92, t));
  HIT.x = PRISM.ax + dx * t;
  HIT.y = PRISM.ay + dy * t;
}

function tick({ ctx, time, width, height, input }) {
  if (W !== width || H !== height) { W = width; H = height; layout(); }
  const PAD = 12;

  // Drag handling: drag source dot to steer the incident ray.
  if (input.mouseDown) {
    if (!drag) {
      const dx = input.mouseX - src.x, dy = input.mouseY - src.y;
      if (dx * dx + dy * dy < 2500) drag = true;
    }
    if (drag) {
      // Keep source outside prism, on the left/upper side.
      src.x = Math.max(8, Math.min(PRISM.ax - 6, input.mouseX));
      src.y = Math.max(8, Math.min(H - 8, input.mouseY));
      // Recompute entry point: where the source-to-prism-centroid line
      // crosses the left face. Simpler: project current source onto left
      // face along the ray pointing toward the prism centroid.
      const centX = (PRISM.ax + PRISM.bx + PRISM.cx) / 3;
      const centY = (PRISM.ay + PRISM.by + PRISM.cy) / 3;
      let ix = centX - src.x, iy = centY - src.y;
      const il = Math.sqrt(ix * ix + iy * iy) || 1; ix /= il; iy /= il;
      const hit = segHit(src.x, src.y, ix, iy, PRISM.ax, PRISM.ay, PRISM.cx, PRISM.cy, centX, centY);
      if (hit) { HIT.x = hit.x; HIT.y = hit.y; clampHitToLeftFace(HIT.x, HIT.y); }
    }
  } else {
    drag = false;
  }

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

  // Prism fill (subtle glassy).
  ctx.beginPath();
  ctx.moveTo(PRISM.ax, PRISM.ay); ctx.lineTo(PRISM.bx, PRISM.by);
  ctx.lineTo(PRISM.cx, PRISM.cy); ctx.closePath();
  const g = ctx.createLinearGradient(PRISM.ax, PRISM.cy, PRISM.bx, PRISM.by);
  g.addColorStop(0, "rgba(180,210,240,0.10)");
  g.addColorStop(1, "rgba(120,160,220,0.06)");
  ctx.fillStyle = g; ctx.fill();
  ctx.strokeStyle = "rgba(220,235,255,0.55)"; ctx.lineWidth = 1.2; ctx.stroke();

  // Incident white ray direction (src -> HIT).
  let ix = HIT.x - src.x, iy = HIT.y - src.y;
  const il = Math.sqrt(ix * ix + iy * iy) || 1; ix /= il; iy /= il;

  // Incident beam (white-ish, animated dashes).
  const dash = -(time * 80) % 16;
  ctx.lineCap = "round";
  ctx.setLineDash([10, 6]); ctx.lineDashOffset = dash;
  ctx.lineWidth = 3;
  ctx.strokeStyle = "rgba(255,255,255,0.92)";
  ctx.beginPath(); ctx.moveTo(src.x, src.y); ctx.lineTo(HIT.x, HIT.y); ctx.stroke();
  ctx.setLineDash([]);

  // Per-wavelength rays. Draw with additive blending so the fan glows.
  ctx.globalCompositeOperation = "lighter";
  const farL = Math.max(W, H) * 1.6;
  for (let k = 0; k < LAMBDAS; k++) {
    const lambda = 400 + (700 - 400) * (k / (LAMBDAS - 1));
    const path = traceWavelength(lambda, ix, iy);
    if (!path) continue;
    const [r, gg, bb] = wavelengthRGB(lambda);
    ctx.strokeStyle = `rgba(${r},${gg},${bb},0.55)`;
    ctx.lineWidth = 1.6;
    // Inside-prism segment.
    ctx.beginPath();
    ctx.moveTo(path.entry[0], path.entry[1]);
    ctx.lineTo(path.mid[0], path.mid[1]);
    ctx.stroke();
    // Exit fan.
    if (path.outDir) {
      const ex = path.outOrigin[0] + path.outDir[0] * farL;
      const ey = path.outOrigin[1] + path.outDir[1] * farL;
      ctx.beginPath();
      ctx.moveTo(path.outOrigin[0], path.outOrigin[1]);
      ctx.lineTo(ex, ey);
      ctx.stroke();
    }
  }
  ctx.globalCompositeOperation = "source-over";

  // Entry dot.
  ctx.fillStyle = "rgba(255,255,255,0.9)";
  ctx.beginPath(); ctx.arc(HIT.x, HIT.y, 3, 0, Math.PI * 2); ctx.fill();

  // 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 incAngleDeg = Math.atan2(iy, ix) * 180 / Math.PI;
  const nRed   = CAUCHY_A + CAUCHY_B / (700 * 700);
  const nViolet = CAUCHY_A + CAUCHY_B / (400 * 400);
  ctx.fillStyle = "rgba(0,0,0,0.6)"; ctx.fillRect(PAD, PAD, 246, 80);
  ctx.fillStyle = "#fff";
  ctx.font = "13px monospace";
  ctx.textAlign = "left"; ctx.textBaseline = "alphabetic";
  ctx.fillText(`n(lambda) = A + B/lambda^2`, PAD + 10, PAD + 20);
  ctx.fillText(`n(700nm) = ${nRed.toFixed(3)}  red`, PAD + 10, PAD + 38);
  ctx.fillText(`n(400nm) = ${nViolet.toFixed(3)}  violet`, PAD + 10, PAD + 56);
  ctx.fillText(`incident = ${incAngleDeg.toFixed(1)} deg`, PAD + 10, PAD + 74);

  ctx.fillStyle = "rgba(180,200,230,0.7)";
  ctx.font = "11px monospace";
  ctx.fillText("drag the white dot to change the incident angle", PAD, H - PAD);
}