Thin Lens: Principal Rays

// Thin converging lens: principal-ray construction.
// Lens centered on the optical axis; user drags the object (an arrow)
// freely. Image distance v solves the thin-lens equation
//   1/v = 1/f - 1/u    (u = object distance, taken positive)
// Magnification m = -v/u. v > 0 => real inverted image to the right;
// v < 0 => virtual upright image on the same side as the object.
// Three principal rays are drawn from the object tip:
//   (1) parallel to the axis, then through the far focal point F'
//   (2) straight through the lens center (undeflected)
//   (3) through the near focal point F, then parallel to the axis
// Click within ~14 px of either +/- f marker to retune f (drag-to-set).

let W = 0, H = 0;
let cx = 0, cy = 0;          // lens / axis position
let f = 140;                 // focal length in px
let obj = { x: -220, y: -70 }; // object tip relative to lens (x<0 left, y<0 up)
const OBJ_MIN_DIST = 14;
let dragging = null;         // "obj" | "f+" | "f-" | null
let fSetMode = false;        // when true, dragging "f+" tunes f live

function init({ width, height }) {
  W = width; H = height;
  cx = W * 0.55; cy = H * 0.55;
  f = Math.min(180, Math.max(80, Math.min(W, H) * 0.22));
  obj = { x: -Math.min(W * 0.28, f * 1.6), y: -Math.min(H * 0.18, 80) };
}

function distPt(ax, ay, bx, by) {
  const dx = ax - bx, dy = ay - by; return Math.sqrt(dx*dx + dy*dy);
}

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) to canvas border, clipped.
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;
  cx = W * 0.55; cy = H * 0.55;

  // Mouse coords relative to lens center.
  const mxR = input.mouseX - cx, myR = input.mouseY - cy;
  const objAbs = { x: cx + obj.x, y: cy + obj.y };
  const fPlus  = { x: cx + f, y: cy };
  const fMinus = { x: cx - f, y: cy };

  // Drain clicks: choose drag target.
  const clicks = input.consumeClicks ? input.consumeClicks() : [];
  for (const c of clicks) {
    const dObj = distPt(c.x, c.y, objAbs.x, objAbs.y);
    const dFp  = distPt(c.x, c.y, fPlus.x, fPlus.y);
    const dFm  = distPt(c.x, c.y, fMinus.x, fMinus.y);
    if (dFp < 16 || dFm < 16) { dragging = "f"; fSetMode = true; }
    else if (dObj < 24) { dragging = "obj"; }
    else { dragging = "obj"; obj.x = c.x - cx; obj.y = c.y - cy; }
  }
  if (input.mouseDown && dragging === "obj") {
    obj.x = mxR; obj.y = myR;
    if (Math.abs(obj.x) < OBJ_MIN_DIST) obj.x = (obj.x < 0 ? -1 : 1) * OBJ_MIN_DIST;
  } else if (input.mouseDown && dragging === "f") {
    f = Math.max(30, Math.min(Math.min(W, H) * 0.42, Math.abs(mxR)));
  } else if (!input.mouseDown) {
    dragging = null; fSetMode = false;
  }

  // Physics. Take u = |obj.x| with object treated as on the left of lens.
  // If object is on the right, mirror by negating x for the construction.
  const sideSign = obj.x < 0 ? 1 : -1;          // +1 normal (object left)
  const u = Math.max(OBJ_MIN_DIST, Math.abs(obj.x));
  const h = -obj.y;                              // height (up positive)
  // 1/v = 1/f - 1/u
  const invV = 1 / f - 1 / u;
  const v = Math.abs(invV) < 1e-6 ? Infinity : 1 / invV;
  const m = -v / u;
  const imgX = isFinite(v) ? cx + sideSign * v : NaN;
  const imgY = isFinite(v) ? cy - 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, cy); ctx.lineTo(W, cy); ctx.stroke();

  // Focal markers (+/- f, and 2f hints).
  for (const [px, lbl] of [[fPlus.x, "F'"], [fMinus.x, "F"]]) {
    ctx.fillStyle = "rgba(255,200,120,0.85)";
    ctx.beginPath(); ctx.arc(px, cy, 4, 0, Math.PI * 2); ctx.fill();
    ctx.fillStyle = "rgba(255,200,120,0.7)";
    ctx.font = "11px monospace";
    ctx.fillText(lbl, px - 4, cy + 16);
  }
  ctx.strokeStyle = "rgba(120,140,170,0.25)";
  ctx.setLineDash([3, 4]);
  ctx.beginPath();
  ctx.moveTo(cx - 2 * f, cy - 6); ctx.lineTo(cx - 2 * f, cy + 6);
  ctx.moveTo(cx + 2 * f, cy - 6); ctx.lineTo(cx + 2 * f, cy + 6);
  ctx.stroke();
  ctx.setLineDash([]);

  // Lens (thin: a vertical line with arrowheads on each end).
  const lensH = Math.min(H * 0.6, 220);
  ctx.strokeStyle = "rgba(140,210,255,0.9)";
  ctx.lineWidth = 2.5;
  ctx.beginPath(); ctx.moveTo(cx, cy - lensH / 2); ctx.lineTo(cx, cy + lensH / 2); ctx.stroke();
  ctx.fillStyle = "rgba(140,210,255,0.9)";
  for (const dir of [-1, 1]) {
    const ty = cy + dir * lensH / 2;
    ctx.beginPath();
    ctx.moveTo(cx, ty);
    ctx.lineTo(cx - 5, ty - dir * 9);
    ctx.lineTo(cx + 5, ty - dir * 9);
    ctx.closePath(); ctx.fill();
  }

  // Object arrow (from axis up to tip).
  const objBase = { x: objAbs.x, y: cy };
  drawArrow(ctx, objBase.x, objBase.y, objAbs.x, objAbs.y, "#7cf09a", true);

  // Principal rays from object tip.
  // We construct rays in canvas coords. For object on the right, mirror sign.
  const tip = objAbs;
  const lensX = cx;
  // (1) Parallel to axis, then through F' on far side.
  const farF = { x: cx + sideSign * f, y: cy };
  const ray1Hit = { x: lensX, y: tip.y };
  // Outgoing direction from lens to farF, then extended.
  let dx1 = farF.x - ray1Hit.x, dy1 = farF.y - ray1Hit.y;
  const e1 = extend(ray1Hit.x, ray1Hit.y, dx1, dy1);
  const e1back = extend(ray1Hit.x, ray1Hit.y, -dx1, -dy1); // for virtual back-trace
  // (2) Through center, undeflected.
  let dx2 = lensX - tip.x, dy2 = cy - tip.y;
  const e2 = extend(lensX, cy, dx2, dy2);
  const e2back = extend(lensX, cy, -dx2, -dy2);
  // (3) Through near F, then parallel.
  const nearF = { x: cx - sideSign * f, y: cy };
  // direction from tip toward nearF, hits lens at:
  // param lambda where x = tip.x + l*(nearF.x - tip.x) = lensX
  const t3 = (lensX - tip.x) / (nearF.x - tip.x || 1e-6);
  const ray3Hit = { x: lensX, y: tip.y + t3 * (nearF.y - tip.y) };
  let dx3 = sideSign, dy3 = 0; // parallel to axis going away from object side
  const e3 = extend(ray3Hit.x, ray3Hit.y, dx3, dy3);
  const e3back = extend(ray3Hit.x, ray3Hit.y, -dx3, -dy3);

  // Draw incoming segments (from tip to lens) in soft blue.
  ctx.strokeStyle = "rgba(120,180,255,0.7)";
  ctx.lineWidth = 1.2;
  ctx.beginPath();
  ctx.moveTo(tip.x, tip.y); ctx.lineTo(ray1Hit.x, ray1Hit.y);
  ctx.moveTo(tip.x, tip.y); ctx.lineTo(lensX, cy);
  ctx.moveTo(tip.x, tip.y); ctx.lineTo(ray3Hit.x, ray3Hit.y);
  ctx.stroke();
  // Outgoing segments in warm color.
  ctx.strokeStyle = "rgba(255,200,140,0.85)";
  ctx.beginPath();
  ctx.moveTo(ray1Hit.x, ray1Hit.y); ctx.lineTo(e1.x, e1.y);
  ctx.moveTo(lensX, cy);           ctx.lineTo(e2.x, e2.y);
  ctx.moveTo(ray3Hit.x, ray3Hit.y); ctx.lineTo(e3.x, e3.y);
  ctx.stroke();

  // For virtual image (v<0): extend outgoing rays BACK on the object side as dashed.
  if (isFinite(v) && !real) {
    ctx.setLineDash([4, 4]);
    ctx.strokeStyle = "rgba(255,200,140,0.45)";
    ctx.beginPath();
    ctx.moveTo(ray1Hit.x, ray1Hit.y); ctx.lineTo(e1back.x, e1back.y);
    ctx.moveTo(lensX, cy);           ctx.lineTo(e2back.x, e2back.y);
    ctx.moveTo(ray3Hit.x, ray3Hit.y); ctx.lineTo(e3back.x, e3back.y);
    ctx.stroke();
    ctx.setLineDash([]);
  }

  // Image arrow.
  if (isFinite(v) && isFinite(imgX) && isFinite(imgY)) {
    drawArrow(ctx, imgX, cy, 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)) {
    ctx.fillText(`v = ${v.toFixed(0)} px   M = ${m.toFixed(2)}   ${real ? "real, inverted" : "virtual, upright"}`, 12, 32);
  } else {
    ctx.fillText(`v = infinity (object at focal point)   M -> infinity`, 12, 32);
  }
  ctx.fillStyle = "rgba(160,180,210,0.7)";
  ctx.fillText("drag the green arrow; click an F marker and drag to retune f", 12, H - 10);
}