// Best Approximation: The Perpendicular Wins — Manimo lesson scene.
// Chapter 3 / week 7 of mat2b. Visual proof that the closest point in a
// subspace to an outside vector is the orthogonal projection.
//
// 2D analogue (line L instead of plane, point u above it):
// • L = span((1, 0)) — the x-axis for simplicity
// • u = (3, 2) — the point above the line
// • foot p = (3, 0) = proj_L(u)
// • Candidate q slides along L; ‖u − q‖ pulses but always ≥ ‖u − p‖ = 2.
//
// Beats:
// 0– 4 Manimo hook
// 4–10 Setup — line L, point u, ask the question
// 10–19 Candidates — slide q, watch the distance
// 19–28 Perpendicular — drop, name p, right-angle mark + inequality
// 28–end Hero outro
//
// Colour discipline:
// chalk-300 reference grid
// chalk-200 line L + axes
// rose-400 the outside point u (target)
// teal-400 candidate points on L + their connecting distances
// amber-400 the perpendicular drop
// emerald-400 the winning foot p + right angle
// amber-300 takeaway accent
const SCENE_DURATION = 35;
const NARRATION = [
"What point on a line is closest to a point off the line? Find out.",
"Here's a point u sitting off a line L. We want the closest point on L to u.",
"Try any other point on L — measure the distance. As we slide along the line, the distance changes, but it never beats the perpendicular drop.",
"Drop a perpendicular from u straight down onto L. That foot, p, is the projection — and it is the unique closest point.",
"The closest point in any subspace to a vector outside it is the orthogonal projection. That's the best approximation theorem.",
];
const NARRATION_AUDIO = 'audio/best-approximation/scene.mp3';
// ─── Coordinate system ────────────────────────────────────────────────────
const ORIGIN_X = 460;
const ORIGIN_Y = 460;
const UNIT = 80;
const GRID_X_MIN = -2, GRID_X_MAX = 7;
const GRID_Y_MIN = -1, GRID_Y_MAX = 4;
// The outside point u and the line direction. L is the x-axis so the
// projection is just (u_x, 0).
const U = [3, 2];
const P = [3, 0]; // foot of perpendicular from u to L
function toSvg(x, y) {
return { sx: ORIGIN_X + x * UNIT, sy: ORIGIN_Y - y * UNIT };
}
function GridMaskedSvg({ maskId, children }) {
const gradId = `${maskId}-grad`;
return (
);
}
function FaintGrid({ opacity = 0.22 }) {
const lines = [];
for (let k = GRID_X_MIN; k <= GRID_X_MAX; k++) {
const a = toSvg(k, GRID_Y_MIN), b = toSvg(k, GRID_Y_MAX);
lines.push();
}
for (let k = GRID_Y_MIN; k <= GRID_Y_MAX; k++) {
const a = toSvg(GRID_X_MIN, k), b = toSvg(GRID_X_MAX, k);
lines.push();
}
return {lines};
}
// The line L — drawn extra prominent.
function LineL({ glow = false }) {
const a = toSvg(GRID_X_MIN, 0);
const b = toSvg(GRID_X_MAX, 0);
return (
{glow && (
)}
L
);
}
function VerticalAxis() {
const a = toSvg(0, GRID_Y_MIN);
const b = toSvg(0, GRID_Y_MAX);
return (
);
}
function PointDot({ x, y, color, label = null, labelDX = 0, labelDY = 0,
r = 7, glow = 0 }) {
const p = toSvg(x, y);
return (
{glow > 0 && (
)}
{label != null && (
{label}
)}
);
}
function DistanceSegment({ from, to, color, strokeWidth = 2.6, dashed = false, opacity = 0.95 }) {
const a = toSvg(from[0], from[1]);
const b = toSvg(to[0], to[1]);
return (
);
}
function SoftPanel({ children, right = 64, top = 196, width = 380, left, bottom, transform }) {
const positioning = left != null || bottom != null
? { left, bottom, top: top != null && bottom == null ? top : undefined, right: undefined, transform }
: { right, top, transform };
return (
{children}
);
}
function RightAngleSq({ at, alongDeg, perpDeg, size = 16, color = 'var(--emerald-400)' }) {
// Draws a right-angle square with one side along `alongDeg` and the other along `perpDeg`.
const aRad = alongDeg * Math.PI / 180;
const pRad = perpDeg * Math.PI / 180;
const u = [Math.cos(aRad), Math.sin(aRad)];
const w = [Math.cos(pRad), Math.sin(pRad)];
const su = size / UNIT;
const p0 = toSvg(at[0], at[1]);
const p1 = toSvg(at[0] + u[0] * su, at[1] + u[1] * su);
const p2 = toSvg(at[0] + u[0] * su + w[0] * su, at[1] + u[1] * su + w[1] * su);
const p3 = toSvg(at[0] + w[0] * su, at[1] + w[1] * su);
return (
);
}
// ─── Scene ────────────────────────────────────────────────────────────────
function Scene() {
return (
);
}
// ─── Beat 1: Manimo intro ─────────────────────────────────────────────────
function ManimoBubbleIntro() {
return (
Where on the line is closest?
);
}
// ─── Beat 2: Setup ────────────────────────────────────────────────────────
function SetupBeat() {
return (
<>
the question
Which point on L
is closest to u?
Distance is the length of the segment from u to the candidate.
);
}
// ─── Beat 3: Candidates ───────────────────────────────────────────────────
function CandidatesBeat() {
const { localTime, duration: spriteDur } = useSprite();
// q slides across L from x=0 to x=6 and back, easing.
// Period ~ 7 s; ensure at least one full back-and-forth.
const phase = (localTime / spriteDur) * 2 * Math.PI;
const qx = 3 + 3 * Math.sin(phase); // 0 → 6
const qy = 0;
const dist = Math.hypot(U[0] - qx, U[1] - qy);
return (
<>
{/* Distance segment u → q. */}
{/* The target u — pinned. */}
{/* Candidate q on the line. */}
{/* Live distance readout above the segment midpoint. */}
‖u − q‖ = {dist.toFixed(2)}
slide the candidate
The distance to q
wobbles as it moves.
Notice how it dips when q passes underneath u — that's the clue.
);
}
// ─── Beat 4: Perpendicular ────────────────────────────────────────────────
function PerpendicularBeat() {
const { localTime } = useSprite();
// Phase 0–1.5 drop the perpendicular from u down to p.
// Phase 1.5–3.0 reveal foot p + right-angle marker.
// Phase 3.0+ inequality statement.
const dropT = Easing.easeInOutCubic(clamp(localTime / 1.4, 0, 1));
const footReveal = clamp((localTime - 1.5) / 0.8, 0, 1);
const rightT = clamp((localTime - 2.2) / 0.6, 0, 1);
// Faded teal candidate showing q at some other spot — to compare.
const compareQ = [5.4, 0];
return (
<>
{/* The faded losing candidate q. */}
{/* The perpendicular drop from u to p, animated. */}
{/* Foot p with emerald glow. */}
{footReveal > 0.05 && (
)}
{/* Right-angle marker at p. */}
{rightT > 0.05 && (
)}
{/* The target u — pinned. */}
drop the perpendicular
The foot p
is the projection of u onto L.
‖u − p‖ ≤
‖u − q‖
For any other point q
on L. Pythagoras forces it.
);
}
// ─── Beat 5: Hero outro ───────────────────────────────────────────────────
function HeroOutro() {
return (
best approximation theorem
Closest = perpendicular.
In any subspace, the closest point to an outside vector
is its orthogonal projection.
p = projL(u)