Concave Mirror: Principal Rays

// Concave spherical mirror: principal-ray construction.
// Pole P on the right; F at distance f to the left; C at 2f (R = 2f).
// Mirror equation: 1/u + 1/v = 1/f, magnification m = -v/u.
// u > f -> real, inverted. u < f -> virtual, upright, behind mirror.
// Three principal rays from the object tip:
//   (1) parallel -> reflects through F
//   (2) through F -> reflects parallel to axis
//   (3) through C -> reflects back along itself.
// Drag the green object arrow anywhere to the left of the mirror.

let W = 0, H = 0;
let px = 0, py = 0;            // pole P of the mirror (on axis)
let f = 150;                   // focal length in px
let obj = { x: -260, y: -70 }; // object tip relative to P (x<0 = left, y<0 = up)
const OBJ_MIN_DIST = 14;
let dragging = false;

function init({ width, height }) {
  W = width; H = height;
  px = W * 0.78; py = H * 0.55;
  f = Math.min(170, Math.max(80, Math.min(W, H) * 0.22));
  obj = { x: -Math.min(W * 0.5, f * 1.7), y: -Math.min(H * 0.18, 70) };
}

function drawArrow(ctx, x0, y0, x1, y1, col, head) {
  ctx.strokeStyle = col; ctx.fillStyle = col; ctx.lineWidth = 2;
  ctx.beginPath(); ctx.moveTo(x0, y0); ctx.lineTo(x1, y1); ctx.stroke();
  if (!head) return;
  const ang = Math.atan2(y1 - y0, x1 - x0);
  const a = 7;
  ctx.beginPath();
  ctx.moveTo(x1, y1);
  ctx.lineTo(x1 - a * Math.cos(ang - 0.4), y1 - a * Math.sin(ang - 0.4));
  ctx.lineTo(x1 - a * Math.cos(ang + 0.4), y1 - a * Math.sin(ang + 0.4));
  ctx.closePath(); ctx.fill();
}

// Extend a ray from (x,y) along (dx,dy) until it hits a canvas border.
function extend(x, y, dx, dy) {
  const ts = [];
  if (dx > 1e-6) ts.push((W - 2 - x) / dx);
  else if (dx < -1e-6) ts.push((2 - x) / dx);
  if (dy > 1e-6) ts.push((H - 2 - y) / dy);
  else if (dy < -1e-6) ts.push((2 - y) / dy);
  let t = Infinity;
  for (const v of ts) if (v > 0 && v < t) t = v;
  if (!isFinite(t)) t = 0;
  return { x: x + dx * t, y: y + dy * t };
}

function tick({ ctx, width, height, input }) {
  W = width; H = height;
  px = W * 0.78; py = H * 0.55;

  const mxR = input.mouseX - px, myR = input.mouseY - py;
  const objAbs = { x: px + obj.x, y: py + obj.y };
  const fAbs = { x: px - f, y: py };
  const cAbs = { x: px - 2 * f, y: py };

  // Drag handling. Click anywhere on the left of the mirror to grab/move object.
  const clicks = input.consumeClicks ? input.consumeClicks() : [];
  for (const c of clicks) {
    if (c.x < px - 4) {
      dragging = true;
      obj.x = c.x - px; obj.y = c.y - py;
    }
  }
  if (input.mouseDown && dragging) {
    obj.x = Math.min(-OBJ_MIN_DIST, mxR);
    obj.y = myR;
  } else if (!input.mouseDown) {
    dragging = false;
  }
  // Safety clamp.
  if (obj.x > -OBJ_MIN_DIST) obj.x = -OBJ_MIN_DIST;

  // Physics. u, v positive measured to the left; v<0 means behind mirror.
  const u = -obj.x;
  const h = -obj.y;
  const invV = 1 / f - 1 / u;
  const v = Math.abs(invV) < 1e-6 ? Infinity : 1 / invV;
  const m = isFinite(v) ? -v / u : -Infinity;
  const imgX = isFinite(v) ? px - v : NaN;
  const imgY = isFinite(v) ? py - m * h : NaN;
  const real = isFinite(v) && v > 0;

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

  // Optical axis.
  ctx.strokeStyle = "rgba(160,180,210,0.4)";
  ctx.lineWidth = 1;
  ctx.beginPath(); ctx.moveTo(0, py); ctx.lineTo(W, py); ctx.stroke();

  // Concave arc. Center C, radius R = 2f, opens to the left.
  const R = 2 * f;
  const mirrorHalfH = Math.min(H * 0.42, 200);
  const maxTheta = Math.asin(Math.min(0.95, mirrorHalfH / R));
  ctx.strokeStyle = "rgba(140,210,255,0.9)";
  ctx.lineWidth = 2.5;
  ctx.beginPath();
  ctx.arc(cAbs.x, cAbs.y, R, -maxTheta, maxTheta);
  ctx.stroke();
  // Silvering hatches on the back side.
  ctx.strokeStyle = "rgba(140,210,255,0.45)";
  ctx.lineWidth = 1;
  ctx.beginPath();
  for (let k = -6; k <= 6; k++) {
    const th = (k / 6) * maxTheta * 0.95;
    const ax = cAbs.x + R * Math.cos(th);
    const ay = cAbs.y + R * Math.sin(th);
    ctx.moveTo(ax, ay); ctx.lineTo(ax + 6, ay - 6);
  }
  ctx.stroke();

  // Pole, F, C markers.
  for (const [pt, lbl] of [[{ x: px, y: py }, "P"], [fAbs, "F"], [cAbs, "C"]]) {
    ctx.fillStyle = lbl === "P" ? "rgba(210,225,250,0.9)" : "rgba(255,200,120,0.9)";
    ctx.beginPath(); ctx.arc(pt.x, pt.y, 4, 0, Math.PI * 2); ctx.fill();
    ctx.font = "11px monospace";
    ctx.fillText(lbl, pt.x - 4, py + 16);
  }

  // Object arrow.
  drawArrow(ctx, objAbs.x, py, objAbs.x, objAbs.y, "#7cf09a", true);

  // Principal rays from the object tip.
  const tip = objAbs;

  // (1) Parallel -> through F.
  const r1Hit = { x: px, y: tip.y };
  const d1x = fAbs.x - r1Hit.x, d1y = fAbs.y - r1Hit.y;
  const e1 = extend(r1Hit.x, r1Hit.y, d1x, d1y);
  const e1back = extend(r1Hit.x, r1Hit.y, -d1x, -d1y);

  // (2) Through F -> parallel to axis (going left, away from mirror).
  const t2 = (px - tip.x) / ((fAbs.x - tip.x) || 1e-6);
  const r2Hit = { x: px, y: tip.y + t2 * (fAbs.y - tip.y) };
  const e2 = extend(r2Hit.x, r2Hit.y, -1, 0);
  const e2back = extend(r2Hit.x, r2Hit.y, 1, 0);

  // (3) Through C -> reflects back along the same line. Paraxial: hit at x=px.
  const t3 = (px - tip.x) / ((cAbs.x - tip.x) || 1e-6);
  const r3Hit = { x: px, y: tip.y + t3 * (cAbs.y - tip.y) };
  const b3x = tip.x - r3Hit.x, b3y = tip.y - r3Hit.y;
  const e3 = extend(r3Hit.x, r3Hit.y, b3x, b3y);
  const e3back = extend(r3Hit.x, r3Hit.y, -b3x, -b3y);

  // Incoming segments (tip -> mirror) in cool blue.
  ctx.strokeStyle = "rgba(120,180,255,0.7)";
  ctx.lineWidth = 1.2;
  ctx.beginPath();
  ctx.moveTo(tip.x, tip.y); ctx.lineTo(r1Hit.x, r1Hit.y);
  ctx.moveTo(tip.x, tip.y); ctx.lineTo(r2Hit.x, r2Hit.y);
  ctx.moveTo(tip.x, tip.y); ctx.lineTo(r3Hit.x, r3Hit.y);
  ctx.stroke();

  // Reflected segments in warm color.
  ctx.strokeStyle = "rgba(255,200,140,0.85)";
  ctx.beginPath();
  ctx.moveTo(r1Hit.x, r1Hit.y); ctx.lineTo(e1.x, e1.y);
  ctx.moveTo(r2Hit.x, r2Hit.y); ctx.lineTo(e2.x, e2.y);
  ctx.moveTo(r3Hit.x, r3Hit.y); ctx.lineTo(e3.x, e3.y);
  ctx.stroke();

  // Virtual image: extend reflected rays BEHIND the mirror (right side) as dashed.
  if (isFinite(v) && !real) {
    ctx.setLineDash([4, 4]);
    ctx.strokeStyle = "rgba(255,200,140,0.45)";
    ctx.beginPath();
    ctx.moveTo(r1Hit.x, r1Hit.y); ctx.lineTo(e1back.x, e1back.y);
    ctx.moveTo(r2Hit.x, r2Hit.y); ctx.lineTo(e2back.x, e2back.y);
    ctx.moveTo(r3Hit.x, r3Hit.y); ctx.lineTo(e3back.x, e3back.y);
    ctx.stroke();
    ctx.setLineDash([]);
  }

  // Image arrow.
  if (isFinite(v) && isFinite(imgX) && isFinite(imgY)) {
    drawArrow(ctx, imgX, py, imgX, imgY,
      real ? "#ff90a8" : "rgba(255,144,168,0.6)", true);
  }

  // HUD.
  ctx.fillStyle = "rgba(210,225,250,0.95)";
  ctx.font = "12px monospace";
  ctx.fillText(`f = ${f.toFixed(0)} px   u = ${u.toFixed(0)} px`, 12, 16);
  if (isFinite(v)) {
    const kind = real ? "real, inverted" : "virtual, upright";
    ctx.fillText(`v = ${v.toFixed(0)} px   M = ${m.toFixed(2)}   ${kind}`, 12, 32);
  } else {
    ctx.fillText(`v -> infinity   (object at the focal point)`, 12, 32);
  }
  ctx.fillStyle = "rgba(160,180,210,0.7)";
  ctx.fillText("drag the green object arrow", 12, H - 10);
}