/* opticslab.jsx — OpticsTutor: the optical bench (single converging lens). Built on
window.BenchKit (loaded first), so this file is just the FIGURE + computeFields().
Defines window.OpticsTutor. computeFields() returns EXACTLY the fields
server/benches/optics.js declares, since tasks are graded against this live state. */
(function () {
const { useState, useMemo, useEffect, useRef } = React;
const K = window.BenchKit, C = K.C, fmt = K.fmt, clamp = K.clamp, btn = K.btn, SVG_BG = K.SVG_BG;
/* ── the physics: thin converging lens. EXACTLY the fields optics.js declares. ── */
function computeFields(doCm, fCm) {
const di = Math.abs(doCm - fCm) < 1e-6 ? Infinity : (doCm * fCm) / (doCm - fCm);
const m = isFinite(di) ? -di / doCm : Infinity;
const absMag = Math.abs(m);
return {
objectDistance: Math.round(doCm),
focalLength: Math.round(fCm),
imageDistance: isFinite(di) ? Math.round(di * 10) / 10 : 99999,
magnification: isFinite(m) ? Math.round(m * 100) / 100 : 9999,
absMag: isFinite(absMag) ? Math.round(absMag * 100) / 100 : 9999,
isReal: isFinite(di) && di > 0,
isVirtual: isFinite(di) && di < 0,
isInverted: isFinite(m) && m < 0,
isUpright: isFinite(m) && m > 0,
isMagnified: isFinite(absMag) && absMag > 1.05,
isDiminished: isFinite(absMag) && absMag < 0.95,
insideF: doCm < fCm,
beyond2F: doCm > 2 * fCm,
atF: Math.abs(doCm - fCm) <= 2,
at2F: Math.abs(doCm - 2 * fCm) <= 2,
};
}
/* ── the figure: drag the object along the rail; tune f; rays + image update ── */
function OpticsFig({ task, setTask, tasks, report, event, done }) {
const [doCm, setDoCm] = useState(45);
const [fCm, setFCm] = useState(15);
const [drag, setDrag] = useState(false);
const svgRef = useRef(null), dragV = useRef(45);
const fld = useMemo(() => computeFields(doCm, fCm), [doCm, fCm]);
useEffect(() => { report(fld); }, [doCm, fCm]); // eslint-disable-line
// geometry: principal axis, lens at LENSX; SCALE px per cm.
const VBW = 600, AY = 175, LENSX = 305, SCALE = 2.4, H = 46;
const cmToX = (cm) => LENSX + cm * SCALE; // +cm to the right of the lens
const objX = LENSX - doCm * SCALE; // object sits left of the lens
const di = fld.imageDistance === 99999 ? Infinity : fld.imageDistance;
const m = fld.magnification === 9999 ? Infinity : fld.magnification;
const imgX = isFinite(di) ? LENSX + di * SCALE : null; // real di>0 → right; virtual di<0 → left
const objTipY = AY - H;
const imgTipY = isFinite(m) ? AY - H * m : AY; // m<0 inverted (below); m>0 upright (above)
const Fr = cmToX(fCm), Fl = cmToX(-fCm), F2r = cmToX(2 * fCm), F2l = cmToX(-2 * fCm);
const EDGE = 588;
// ray through lens center (undeviated): obj tip → (LENSX, AY) → forward
const slopeC = (AY - objTipY) / (LENSX - objX);
const centerFwdY = AY + slopeC * (EDGE - LENSX);
// ray parallel to axis then through far focus Fr: obj tip → (LENSX, objTipY) → through (Fr, AY)
const slopeF = (AY - objTipY) / (Fr - LENSX);
const parFwdY = objTipY + slopeF * (EDGE - LENSX);
useEffect(() => {
if (!drag) return;
const move = (e) => {
const rect = svgRef.current.getBoundingClientRect();
const sx = (e.clientX - rect.left) / rect.width * VBW;
const cm = clamp((LENSX - sx) / SCALE, 5, 110);
dragV.current = Math.round(cm); setDoCm(Math.round(cm));
};
const up = () => { const f = computeFields(dragV.current, fCm); event("adjusted", `Moved object to ${dragV.current} cm`, { response: `di ${fmt(f.imageDistance)} cm, m ${fmt(f.magnification, 2)}` }, C.blue); setDrag(false); };
window.addEventListener("pointermove", move); window.addEventListener("pointerup", up);
return () => { window.removeEventListener("pointermove", move); window.removeEventListener("pointerup", up); };
}, [drag, fCm]); // eslint-disable-line
const t = tasks.find((x) => x.id === task) || tasks[0];
const imageKind = fld.atF ? "no image (rays parallel)" : fld.isReal ? `real · ${fld.isInverted ? "inverted" : "upright"} · ${fld.isMagnified ? "enlarged" : fld.isDiminished ? "reduced" : "same size"}` : `virtual · ${fld.isUpright ? "upright" : "inverted"} · ${fld.isMagnified ? "enlarged" : "reduced"}`;
return (
<>
{fld.atF ? "Object at the focal point — refracted rays are parallel; the image is at infinity." : `Image: ${imageKind}.`} Drag the object along the rail.