/* lagrangelab.jsx — LagrangeTutor: the Lagrange multipliers bench. Built on window.BenchKit
(harness) + window.BenchFields (shared field math), so this file is just the FIGURE.
computeFields = window.BenchFields.lagrange — the SAME function server/benches/lagrange.js
calls, so client and server fields are identical by construction. The learner slides a point
around the constraint circle x²+y²=r² to maximize f = xy; the level curves of f (hyperbolas)
and the gradient arrows ∇f = (y,x) and ∇g = (2x,2y) make the Lagrange condition ∇f = λ∇g
visible — at the optimum the gradients are parallel and a level curve is tangent to the circle. */
(function () {
const { useState, useMemo, useEffect } = React;
const K = window.BenchKit, C = K.C, SVG_BG = K.SVG_BG, fmt = K.fmt;
const TaskStrip = K.TaskStrip, StatMeter = K.StatMeter;
const compute = (s) => window.BenchFields.lagrange(s);
function Slider({ label, value, set, min, max, step, unit, color, onUp }) {
return (
);
}
function LagrangeFig({ task, setTask, tasks, report, event, done }) {
const [r, setR] = useState(2);
const [t, setT] = useState(45);
const fld = useMemo(() => compute({ r, t }), [r, t]);
useEffect(() => { report(fld); }, [r, t]); // eslint-disable-line
// world→screen: centered axes, px-per-unit S
const cx0 = 175, cy0 = 150, S = 38;
const sx = (wx) => cx0 + wx * S, sy = (wy) => cy0 - wy * S;
// constraint circle of radius r
const circR = r * S;
// a couple of level curves of f = xy (hyperbolas) for reference: xy = c, y = c/x
const hyper = (c) => {
const pts = [];
for (let i = 0; i <= 60; i++) {
const wx = 0.2 + (i / 60) * 3.6; // first-quadrant branch
const wy = c / wx;
if (Math.abs(wy) <= 3.2) pts.push(`${sx(wx).toFixed(1)},${sy(wy).toFixed(1)}`);
}
const neg = [];
for (let i = 0; i <= 60; i++) {
const wx = -(0.2 + (i / 60) * 3.6); // third-quadrant branch
const wy = c / wx;
if (Math.abs(wy) <= 3.2) neg.push(`${sx(wx).toFixed(1)},${sy(wy).toFixed(1)}`);
}
return { pos: pts.join(" "), neg: neg.join(" ") };
};
const levels = [0.8, 2].map((c) => hyper(c));
// the point on the constraint
const px = sx(fld.xPt), py = sy(fld.yPt);
// gradient arrows from the point: ∇f = (y,x), ∇g = (2x,2y), scaled to screen
const gfScale = 22, ggScale = 12;
const fx2 = px + fld.yPt * gfScale, fy2 = py - fld.xPt * gfScale; // ∇f = (y,x)
const gx2 = px + (2 * fld.xPt) * ggScale, gy2 = py - (2 * fld.yPt) * ggScale; // ∇g = (2x,2y)
const opt = fld.atOptimum;
const gfColor = opt ? C.teal : C.amber;
const tk = tasks.find((q) => q.id === task) || tasks[0];
return (
<>
f = {fmt(fld.fValue)} at ({fmt(fld.xPt)}, {fmt(fld.yPt)}); gradient misalignment cross = {fmt(fld.cross)}. {opt ? <>⚑ ∇f = λ∇g — a level curve is tangent to the circle; f is at its constrained maximum r²/2. : Rotate the point toward t = 45° so ∇f lines up with ∇g and f climbs to its maximum.}