// Global Extrema on a Triangle — Manimo lesson scene.
// Chapter 6 / week 16 of mat2b. Plenum 6 problem 3, the highest-leverage
// exam workout in chapter 6. Find the global min and max of
// f(x, y) = x² + y² − xy + x + y
// on the triangle x ≤ 0, y ≤ 0, x + y ≥ −3.
//
// The recipe: extreme-value theorem guarantees a global min and max exist;
// candidates live in three places — interior critical points, edge
// minimisers, corners. Compare them all and read off the smallest and
// largest.
//
// Solved values (worked out and verified in spec narrative):
// interior critical point: (−1, −1) f = −1 ← global min
// edge x = 0: (0, −1/2) f = −1/4
// edge y = 0: (−1/2, 0) f = −1/4
// edge x + y = −3: (−3/2, −3/2) f = −3/4
// corner: (0, 0) f = 0
// corner: (−3, 0) f = 6 ← global max
// corner: (0, −3) f = 6 ← global max
//
// Beats (placeholder timings — re-wired by `npm run audio`):
// 0– 4.5 Manimo
// 4.5–13 Setup — triangle + axes + function
// 13–22.5 Interior critical point lights up
// 22.5–33.5 Three edge minimisers light up
// 33.5–43 Three corners light up
// 43–49 Compare card — global min and max declared
// 49–end Hero outro
//
// Colour discipline (this scene specifically):
// chalk-300 reference contour lines
// chalk-200 axes, region stroke
// amber-400 the region itself (currently being acted on) and the
// global-maximum corners (the answer that "wins")
// emerald-400 the interior critical point (global minimum candidate that
// turns out to be the winner)
// rose-400 the three edge minimisers (the also-rans)
// chalk-100 the origin corner (f = 0, also an also-ran)
// amber-300 takeaway accent
const SCENE_DURATION = 86;
const NARRATION = [
"A continuous function on a closed bounded region always has a global minimum and a global maximum. The trick is finding them — and there are only three places they can hide.",
"Here's the region: the triangle with x at most zero, y at most zero, and x plus y at least minus three. Inside that triangle we want the smallest and largest values of f of x comma y equals x squared plus y squared minus x y plus x plus y.",
"First place to look — interior critical points. Set the gradient to zero. That gives x equals y equals minus one, and f equals minus one. Already a strong candidate for the minimum.",
"Second place to look — the three edges. On each edge, restrict f to a single variable function and minimise. You get three more candidate points, with values of minus a quarter, minus a quarter, and minus three quarters.",
"Third place to look — the corners. f at the origin is zero. f at the other two corners is six and six. Big numbers — the maximum is going to live here.",
"Compare the seven candidates. The smallest value is minus one at the interior critical point — that's the global minimum. The largest is six, hit at two of the corners — that's the global maximum.",
"Three places, three checks, one comparison. That's the whole recipe.",
];
const NARRATION_AUDIO = 'audio/global-extrema-triangle/scene.mp3';
// ─── Coordinate system ────────────────────────────────────────────────────
// Math origin near the top-right of the triangle area; the triangle lies
// down-and-left of the origin so we need negative-x and negative-y room.
const ORIGIN_X = 600;
const ORIGIN_Y = 220;
const UNIT = 80;
const X_MIN = -3.6, X_MAX = 0.6;
const Y_MIN = -3.6, Y_MAX = 0.6;
// Triangle vertices.
const V_OO = { x: 0, y: 0 };
const V_MO = { x: -3, y: 0 };
const V_OM = { x: 0, y: -3 };
// Candidates.
const INTERIOR = { x: -1, y: -1, v: -1 };
const EDGE_X0 = { x: 0, y: -0.5, v: -0.25 };
const EDGE_Y0 = { x: -0.5, y: 0, v: -0.25 };
const EDGE_DIAG = { x: -1.5, y: -1.5, v: -0.75 };
const CORNER_OO = { x: 0, y: 0, v: 0 };
const CORNER_MO = { x: -3, y: 0, v: 6 };
const CORNER_OM = { x: 0, y: -3, v: 6 };
function f(x, y) {
return x * x + y * y - x * y + x + y;
}
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 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
);
}
function Triangle({ fill = 'var(--amber-400)', stroke = 'var(--amber-400)',
fillOpacity = 0.10, strokeOpacity = 0.7, strokeWidth = 2.4 }) {
const a = toSvg(V_OO.x, V_OO.y);
const b = toSvg(V_MO.x, V_MO.y);
const c = toSvg(V_OM.x, V_OM.y);
const pts = `${a.sx},${a.sy} ${b.sx},${b.sy} ${c.sx},${c.sy}`;
return (
);
}
// Marching-squares contour generator, clipped to the triangle.
function pointInTriangle(x, y) {
return x <= 1e-6 && y <= 1e-6 && (x + y) >= -3 - 1e-6;
}
function contourPaths(levels) {
const NX = 90, NY = 90;
const dx = (X_MAX - X_MIN) / NX;
const dy = (Y_MAX - Y_MIN) / NY;
const grid = new Array(NX + 1);
for (let i = 0; i <= NX; i++) {
grid[i] = new Array(NY + 1);
const x = X_MIN + i * dx;
for (let j = 0; j <= NY; j++) {
const y = Y_MIN + j * dy;
grid[i][j] = f(x, y);
}
}
const out = [];
for (const c of levels) {
const segments = [];
for (let i = 0; i < NX; i++) {
for (let j = 0; j < NY; j++) {
const x0 = X_MIN + i * dx, y0 = Y_MIN + j * dy;
const x1 = x0 + dx, y1 = y0 + dy;
const cx = (x0 + x1) / 2, cy = (y0 + y1) / 2;
if (!pointInTriangle(cx, cy)) continue;
const a = grid[i][j], b = grid[i + 1][j],
cc = grid[i + 1][j + 1], d = grid[i][j + 1];
const pts = [];
const lerp = (va, vb, xa, ya, xb, yb) => {
const t = (c - va) / (vb - va);
return [xa + t * (xb - xa), ya + t * (yb - ya)];
};
if ((a - c) * (b - c) < 0) pts.push(lerp(a, b, x0, y0, x1, y0));
if ((b - c) * (cc - c) < 0) pts.push(lerp(b, cc, x1, y0, x1, y1));
if ((cc - c) * (d - c) < 0) pts.push(lerp(cc, d, x1, y1, x0, y1));
if ((d - c) * (a - c) < 0) pts.push(lerp(d, a, x0, y1, x0, y0));
if (pts.length >= 2) {
const p0 = toSvg(pts[0][0], pts[0][1]);
const p1 = toSvg(pts[1][0], pts[1][1]);
segments.push(`M ${p0.sx.toFixed(1)} ${p0.sy.toFixed(1)} L ${p1.sx.toFixed(1)} ${p1.sy.toFixed(1)}`);
}
}
}
out.push(segments.join(' '));
}
return out;
}
const CONTOUR_LEVELS = [-0.9, -0.4, 0.2, 1.0, 2.0, 3.2, 4.6, 6.0];
function Contours({ opacity = 0.45 }) {
const paths = contourPaths(CONTOUR_LEVELS);
return (
{paths.map((d, i) => (
))}
);
}
// A labelled candidate dot. Renders a coloured circle at (x, y) with the
// f-value beside it.
function Candidate({ x, y, color, label, labelDX = 14, labelDY = -14, radius = 8 }) {
const p = toSvg(x, y);
return (
{label}
);
}
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 (
Interior, edges, corners.
);
}
// ─── Beat 2: Setup ────────────────────────────────────────────────────────
function SetupBeat() {
return (
<>
the function
f = x2 + y2 − x y + x + y
x ≤ 0, y ≤ 0, x + y ≥ −3
Closed, bounded, continuous — a min and a max exist.
);
}
// ─── Beat 3: Interior critical point ──────────────────────────────────────
function InteriorBeat() {
return (
<>
1. interior critical point
∇f = (2x − y + 1, 2y − x + 1)
∇f = 0 → (x, y) = (−1, −1)
f(−1, −1) = −1
Inside the triangle — a strong candidate for the minimum.
);
}
// ─── Beat 4: Three edge minimisers ────────────────────────────────────────
function EdgesBeat() {
return (
<>
{/* Interior candidate stays faded as context. */}
2. edge minimisers
On x = 0: f(0, y) = y2 + y →
(0, −1/2), f = −1/4
On y = 0: f(x, 0) = x2 + x →
(−1/2, 0), f = −1/4
On x + y = −3 →
(−3/2, −3/2), f = −3/4
Restrict, take a one-variable derivative, solve.
);
}
// ─── Beat 5: Three corners ────────────────────────────────────────────────
function CornersBeat() {
return (
<>
{/* Prior candidates stay faded. */}
3. corners
(0, 0): f = 0
(−3, 0): f = 6
(0, −3): f = 6
The big values live at the corners.
);
}
// ─── Beat 6: Compare and declare winners ──────────────────────────────────
function CompareBeat() {
return (
compare candidates
global minimum
f = −1
at (−1, −1) — interior critical point
global maximum
f = 6
at (−3, 0) and (0, −3) — two corners
seven candidates → smallest and largest win
);
}
// ─── Beat 7: Hero outro ───────────────────────────────────────────────────
function HeroOutro() {
return (