// The Determinant as Area — Manimo lesson scene.
// Chapter 2 (Lineærtransformasjoner). A 2x2 matrix maps the unit square
// to a parallelogram whose signed area is det A. Beat 2 morphs identity →
// A continuously. Beat 4 scrubs one entry of A through det = 0; the
// parallelogram collapses to a line and re-emerges with reversed
// orientation when det goes negative.
//
// Beats:
// 0– 4 Manimo intro
// 4–14 Unit square morphs into the parallelogram under A
// 14–23 det A = ad − bc, area readout
// 23–35 Scrub a parameter s; det = 3 − s passes through zero;
// orientation flips, fill switches amber → rose
// 35–40 Takeaway
//
// Genuine animation: the continuous morph in beat 2 and the parameter
// scrub through det = 0 in beat 4 are useSprite-driven, not FadeUp.
const SCENE_DURATION = 46;
const NARRATION = [
/* 0– 4 */ 'How much does a matrix stretch the space it acts on?',
/* 4–14 */ 'Start with the unit square — the patch sitting on e one and e two. Apply a matrix A. The square morphs into a parallelogram, with the columns of A as its two sides.',
/* 14–23 */ 'The signed area of that parallelogram is the determinant. For a two by two matrix it is a d minus b c.',
/* 23–35 */ 'Watch what happens as we scrub one entry of A. The area shrinks. At determinant zero the parallelogram collapses to a line. Push past zero and the determinant goes negative — the basis vectors have flipped, the orientation is reversed.',
/* 35–40 */ 'Determinant equals area times orientation. One number, two stories.',
];
const NARRATION_AUDIO = 'audio/determinant-as-area/scene.mp3';
// The matrix for beat 2 / beat 3: A = [[2, 1], [0.5, 1.5]]; det = 2·1.5 - 1·0.5 = 2.5.
const A_FIXED = [[2, 1], [0.5, 1.5]];
// ─── Geometry helpers ─────────────────────────────────────────────────────
function geom(portrait) {
return portrait
? { vbW: 640, vbH: 720, ox: 320, oy: 420, unit: 56,
gridXMin: -3, gridXMax: 5, gridYMin: -3, gridYMax: 5 }
: { vbW: 760, vbH: 600, ox: 380, oy: 380, unit: 64,
gridXMin: -3, gridXMax: 5, gridYMin: -3, gridYMax: 4 };
}
function toSvgF(G, x, y) {
return { sx: G.ox + x * G.unit, sy: G.oy - y * G.unit };
}
function applyM(M, x, y) {
return [M[0][0] * x + M[0][1] * y, M[1][0] * x + M[1][1] * y];
}
function ReferenceGridSvg({ G, opacity = 0.22 }) {
const lines = [];
for (let k = G.gridXMin; k <= G.gridXMax; k++) {
const a = toSvgF(G, k, G.gridYMin);
const b = toSvgF(G, k, G.gridYMax);
lines.push();
}
for (let k = G.gridYMin; k <= G.gridYMax; k++) {
const a = toSvgF(G, G.gridXMin, k);
const b = toSvgF(G, G.gridXMax, k);
lines.push();
}
return {lines};
}
function Axes2DSvg({ G }) {
const l = toSvgF(G, G.gridXMin, 0), r = toSvgF(G, G.gridXMax, 0);
const b = toSvgF(G, 0, G.gridYMin), t = toSvgF(G, 0, G.gridYMax);
return (
);
}
// Filled parallelogram with sides (a1, a2) anchored at origin.
function Parallelogram({ G, a1, a2, fill, fillOpacity = 0.35,
stroke, strokeWidth = 2, strokeOpacity = 0.85 }) {
const c0 = toSvgF(G, 0, 0);
const c1 = toSvgF(G, a1[0], a1[1]);
const c2 = toSvgF(G, a1[0] + a2[0], a1[1] + a2[1]);
const c3 = toSvgF(G, a2[0], a2[1]);
const pts = `${c0.sx},${c0.sy} ${c1.sx},${c1.sy} ${c2.sx},${c2.sy} ${c3.sx},${c3.sy}`;
return (
{stroke && (
)}
);
}
function ArrowFromOrigin({ G, x, y, color, label = null, labelDX = 0, labelDY = 0,
strokeWidth = 3.4, opacity = 1 }) {
const a = toSvgF(G, 0, 0);
const b = toSvgF(G, x, y);
const dx = b.sx - a.sx, dy = b.sy - a.sy;
const len = Math.hypot(dx, dy);
if (len < 1) return null;
const ux = dx / len, uy = dy / len;
const headLen = 12, headHalf = 6.5;
const baseX = b.sx - ux * headLen;
const baseY = b.sy - uy * headLen;
const perpX = -uy, perpY = ux;
const lx = baseX + perpX * headHalf, ly = baseY + perpY * headHalf;
const rx = baseX - perpX * headHalf, ry = baseY - perpY * headHalf;
return (
{label != null && (
{label}
)}
);
}
function SoftPanel({ G, portrait, children }) {
return (
{children}
);
}
// ─── Scene ────────────────────────────────────────────────────────────────
function Scene() {
return (
);
}
// ─── Beat 2: Square morphs into parallelogram ─────────────────────────────
function MorphSquareBeat() {
const portrait = usePortrait();
const G = geom(portrait);
const { localTime } = useSprite();
// Morph t in [0, 1]: lerp identity → A_FIXED.
const t = clamp((localTime - 1.6) / 3.5, 0, 1);
const tEased = Easing.easeInOutCubic(t);
// Lerped matrix M(t) = (1-t)·I + t·A.
const M = [
[1 + tEased * (A_FIXED[0][0] - 1), tEased * A_FIXED[0][1]],
[tEased * A_FIXED[1][0], 1 + tEased * (A_FIXED[1][1] - 1)],
];
// Image of e1 and e2 under M.
const me1 = [M[0][0], M[1][0]];
const me2 = [M[0][1], M[1][1]];
return (
<>
unit square → parallelogram
A =
[[2, 1], [0.5, 1.5]]
The columns of A — call them a₁ and a₂ — are the sides of the parallelogram.
);
}
// ─── Beat 3: Area = det A ─────────────────────────────────────────────────
function AreaIsDetBeat() {
const portrait = usePortrait();
const G = geom(portrait);
const a1 = [A_FIXED[0][0], A_FIXED[1][0]];
const a2 = [A_FIXED[0][1], A_FIXED[1][1]];
return (
<>
determinant formula
det A = a·d − b·c
det = 2·1.5 − 1·0.5 = 2.5
Area scales by |det A| under any linear map.
);
}
// ─── Beat 4: Sign flip — scrub s through det = 0 ──────────────────────────
function SignFlipBeat() {
const portrait = usePortrait();
const G = geom(portrait);
const { localTime } = useSprite();
// s: 0.5 → 3.0 → 5.0 across the beat (12s total).
// Three phases: 0–4s ramp 0.5 → 3.0; 4–6s hold near 3; 6–10s ramp 3.0 → 5.0; 10–12s hold.
function sAt(t) {
if (t < 0.6) return 0.5;
if (t < 4.6) return 0.5 + (3.0 - 0.5) * Easing.easeInOutCubic((t - 0.6) / 4.0);
if (t < 6.0) return 3.0;
if (t < 10.0) return 3.0 + (5.0 - 3.0) * Easing.easeInOutCubic((t - 6.0) / 4.0);
return 5.0;
}
const s = sAt(localTime);
// A(s) = [[2, 1], [s, 1.5]]; det(s) = 2*1.5 - 1*s = 3 - s.
const A = [[2, 1], [s, 1.5]];
const det = 3 - s;
const a1 = [A[0][0], A[1][0]]; // (2, s)
const a2 = [A[0][1], A[1][1]]; // (1, 1.5)
const negative = det < 0;
const fillColor = negative ? 'var(--rose-400)' : 'var(--amber-400)';
return (
<>
scrubbing one entry
A(s) =
[[2, 1], [s, 1.5]]
{/* Live readouts */}
s = {s.toFixed(2)}
det = 3 − s = {det.toFixed(2)}
area = {Math.abs(det).toFixed(2)}
{negative ? 'orientation reversed — basis vectors have crossed'
: 'sign of det = orientation of the basis'}
);
}
// ─── Beat 5: Takeaway ─────────────────────────────────────────────────────
function TakeawayBeat() {
const portrait = usePortrait();
return (
the takeaway
det A = area
× orientation
Zero says the matrix flattens the plane.