/* lineintegrallab.jsx — LineIntegralTutor: the line-integral (work) bench. Built on
window.BenchKit (harness) + window.BenchFields (shared field math), so this file is just the
FIGURE. computeFields = window.BenchFields.lineintegral — the SAME function
server/benches/lineintegral.js calls, so client and server fields are identical by construction.
The learner sets the arc (radius R, span θmax) and the number of segments n; the work of the
shear field F = (y, 0) along the circular arc r(θ) = (R cosθ, R sinθ) is read off a midpoint
Riemann sum as it converges onto the exact work −R²(θmax/2 − sin(2θmax)/4). */
(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.lineintegral(s);
function Slider({ label, value, set, min, max, step, unit, color, onUp }) {
return (
);
}
function LineIntegralFig({ task, setTask, tasks, report, event, done }) {
const [R, setR] = useState(2);
const [thMax, setThMax] = useState(150);
const [n, setN] = useState(4);
const fld = useMemo(() => compute({ R, thMax, n }), [R, thMax, n]);
useEffect(() => { report(fld); }, [R, thMax, n]); // eslint-disable-line
// centred axes on the left; the circular arc r(θ)=(R cosθ, R sinθ), θ:0→θmax.
const cx = 150, cy = 150, pxPerUnit = 34; // px per unit radius
const rPx = Math.max(0.5, R) * pxPerUnit;
const thR = (Math.max(1, thMax) * Math.PI) / 180;
const ni = Math.max(1, Math.round(n));
// SVG y grows downward → negate the y of each point.
const pt = (th) => [cx + rPx * Math.cos(th), cy - rPx * Math.sin(th)];
// sampled polyline along the arc
const SAMP = 64;
let arc = "";
for (let i = 0; i <= SAMP; i++) {
const [px, py] = pt((i / SAMP) * thR);
arc += `${i === 0 ? "M" : "L"} ${px.toFixed(1)} ${py.toFixed(1)} `;
}
// n segment-division dots along the arc
const dots = [];
for (let i = 0; i <= ni; i++) {
const [px, py] = pt((i / ni) * thR);
dots.push();
}
// a few field arrows F=(y,0): horizontal, length ∝ y = R sinθ (sampled at segment midpoints)
const NARROW = Math.min(ni, 7);
const arrows = [];
const aScale = 26; // px per unit of y
for (let i = 0; i < NARROW; i++) {
const th = ((i + 0.5) / NARROW) * thR;
const [px, py] = pt(th);
const y = R * Math.sin(th); // F = (y, 0)
const len = y * aScale; // horizontal arrow length ∝ y
const ex = px + len;
arrows.push();
}
const t = tasks.find((x) => x.id === task) || tasks[0];
const okColor = fld.converged ? C.teal : C.amber;
const RX = 320; // right-side readout x
return (
<>
Midpoint Riemann sum = {fmt(fld.riemann)} vs exact work −R²(θmax/2 − sin(2θmax)/4) = {fmt(fld.work)}. {fld.converged ? <>⚑ Converged — the Riemann sum has closed onto the exact work. : Not converged yet — add segments (raise n) to shrink the error.}