// Linearisation: The Tangent Plane Snaps On — Manimo lesson scene.
// Chapter 5 / week 13 of mat2b. Linear approximation in two variables. We
// lead with the one-variable picture (a curve and its tangent line) because
// it's the same idea in a more readable diagram, then zoom in to feel
// "second-order error", then declare the two-variable formula.
//
// Beats (placeholder timings — re-wired by `npm run audio`):
// 0– 4.2 Manimo
// 4.2–14 Curve + point P + tangent line
// 14–22 Zoom — gap shrinks, second-order intuition
// 22–30.5 Two-variable formula L(x, y)
// 30.5–end Hero outro
//
// Colour discipline:
// chalk-300 default ink, axes
// chalk-200 reference marks (zoom frame brackets when not the focus)
// violet-400 the curve / x-partial column
// teal-400 y-partial column
// amber-400 the tangent line (the object being acted on)
// rose-400 the zoom frame / residual error indicators
// amber-300 takeaway accent
const SCENE_DURATION = 42;
const NARRATION = [
"Up close, every smooth surface looks flat. Linearisation is the rule that turns that picture into a formula.",
"Take a single variable picture first. A curve, and a point on it. The tangent line at that point matches both the value and the slope of the curve.",
"Zoom in on the point. The curve and the tangent line drift apart only at second order, so for any small step they trace nearly the same height.",
"The two variable version reads the same. Match the value, match the x slope, match the y slope. That's the equation of the tangent plane.",
"Differentiability, in one sentence: the surface is well approximated by a plane.",
];
const NARRATION_AUDIO = 'audio/tangent-plane-linearisation/scene.mp3';
// ─── Coordinate system (for the curve + tangent beats) ────────────────────
const ORIGIN_X = 460;
const ORIGIN_Y = 460;
const UNIT_X = 88;
const UNIT_Y = 88;
const X_MIN = -1.6, X_MAX = 2.6;
const Y_MIN = -0.6, Y_MAX = 3.2;
// Curve: f(x) = 0.35 x^3 - 0.6 x^2 + 0.4 x + 1.6. Smooth, non-symmetric so
// the tangent at our point is visibly distinct from the curve away from it.
function f1(x) {
return 0.35 * x * x * x - 0.6 * x * x + 0.4 * x + 1.6;
}
function f1p(x) {
return 1.05 * x * x - 1.2 * x + 0.4;
}
const A = 1.3; // chosen point P_x
const FA = f1(A);
const FPA = f1p(A);
function toSvg(x, y) {
return { sx: ORIGIN_X + x * UNIT_X, sy: ORIGIN_Y - y * UNIT_Y };
}
function GridMaskedSvg({ maskId, children }) {
const gradId = `${maskId}-grad`;
return (
);
}
function Axes({ opacity = 1 }) {
const left = toSvg(X_MIN, 0), right = toSvg(X_MAX, 0);
const bottom = toSvg(0, Y_MIN), top = toSvg(0, Y_MAX);
return (
xy
);
}
// Curve path, sampled densely. Optional progress (0..1) for stroke reveal.
function curvePath(xMin = X_MIN, xMax = X_MAX, n = 220) {
const dx = (xMax - xMin) / n;
const pts = [];
for (let i = 0; i <= n; i++) {
const x = xMin + i * dx;
pts.push(toSvg(x, f1(x)));
}
return pts.map((p, i) => `${i === 0 ? 'M' : 'L'} ${p.sx.toFixed(1)} ${p.sy.toFixed(1)}`).join(' ');
}
// Tangent line L(x) = f(a) + f'(a)(x - a), drawn over [xMin, xMax].
function tangentPath(xMin = X_MIN, xMax = X_MAX) {
const ya = FA + FPA * (xMin - A);
const yb = FA + FPA * (xMax - A);
const a = toSvg(xMin, ya);
const b = toSvg(xMax, yb);
return `M ${a.sx.toFixed(1)} ${a.sy.toFixed(1)} L ${b.sx.toFixed(1)} ${b.sy.toFixed(1)}`;
}
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}
);
}
// ─── Scene ────────────────────────────────────────────────────────────────
function Scene() {
return (
);
}
// ─── Beat 1: Manimo intro ─────────────────────────────────────────────────
function ManimoBubbleIntro() {
return (
Up close, flat.
);
}
// ─── Beat 2: Curve + tangent ──────────────────────────────────────────────
function CurveBeat() {
const { localTime } = useSprite();
const path = curvePath();
const tan = tangentPath();
const P = toSvg(A, FA);
// Curve reveals over ~2.4 s; tangent over 1.4 s once curve is drawn.
const curveT = clamp(localTime / 2.4, 0, 1);
const tangentT = clamp((localTime - 4.0) / 1.4, 0, 1);
// Approximate path length (chord-sum) for stroke-dashoffset.
const CURVE_LEN = 1100; // generous upper bound; dasharray clips outside
const TAN_LEN = 800;
return (
<>
{/* Curve. */}
{/* Point P. */}
{localTime > 2.3 && (
P
)}
{/* Tangent line. */}
{tangentT > 0 && (
)}
one-variable case
The tangent matches value and slope at P.
L(x) = f(a) + f′(a)(x − a)
Same height, same direction. For one short step, they coincide.
);
}
// ─── Beat 3: Zoom ─────────────────────────────────────────────────────────
function ZoomBeat() {
const { localTime } = useSprite();
// Zoom window narrows around A over ~3 s.
const halfW0 = 1.8;
const halfW1 = 0.4;
const zoomT = clamp((localTime - 0.5) / 3.0, 0, 1);
const eased = Easing.easeInOutCubic(zoomT);
const halfW = halfW0 + (halfW1 - halfW0) * eased;
// Re-render the curve and tangent restricted to [A - halfW, A + halfW]
// but with a viewBox transform so the local detail fills the diagram area.
// Easier path: redraw with re-scaled UNIT_X/UNIT_Y on the fly. We'll fake
// a "zoom" by drawing the curve over the same axes but with halfW bounds
// and showing a rose-400 bracket marking the focus window.
const xLeft = A - halfW;
const xRight = A + halfW;
const path = curvePath(xLeft, xRight, 200);
const tan = tangentPath(xLeft, xRight);
const Pleft = toSvg(xLeft, 0);
const Pright = toSvg(xRight, 0);
const P = toSvg(A, FA);
return (
<>
{/* Bracket marking the local window. */}
{/* Curve restricted to the local window. */}
{/* Tangent restricted to the local window. */}
{/* Point P. */}
Pzoom in
The gap shrinks faster than the step.
They share value and slope. They disagree only at second order.
error ∼ ½ f″(a) (x − a)²
);
}
// ─── Beat 4: Two-variable formula ─────────────────────────────────────────
function TwoVarBeat() {
return (
two variables — same idea
L(x, y) = f(a, b)
+
fx(a, b)(x − a)
+
fy(a, b)(y − b)
Value,
x-slope,
y-slope — all three locked in.
z = L(x, y) is the tangent plane at (a, b)
);
}
// ─── Beat 5: Hero outro ───────────────────────────────────────────────────
function HeroOutro() {
return (
the takeaway
Smooth means flat at the point.
The tangent plane is the surface's best linear copy.