// Diagonalisation: Eigenvectors as Natural Axes — Manimo lesson scene.
// Chapter 4 (Differensialligninger, eigen-stuff). Apply the symmetric
// matrix A = [[2, 1], [1, 2]] to the unit circle. It becomes an ellipse.
// Two directions (the eigenvectors) only stretch and never rotate — they
// are the natural axes of A, and in those coordinates A is diagonal.
const SCENE_DURATION = 40;
const NARRATION = [
"Apply a matrix to every point on the unit circle. What comes out?",
"Start with the unit circle, and pick a matrix — say A equals two, one, one, two.",
"Send every point through A. The circle becomes an ellipse. Most directions tilt as they stretch.",
"But two directions are stubborn — they only stretch, they don't rotate. These are the eigenvectors, and their stretch factors are the eigenvalues lambda one and lambda two.",
"Use them as a new basis. In those coordinates, A is just diagonal — pure stretching along the axes.",
"Hard problems become easy in the right basis.",
];
const NARRATION_AUDIO = 'audio/diagonalisation-eigenaxes/scene.mp3';
// ─── Geometry ────────────────────────────────────────────────────────────
const ORIGIN_X = 500;
const ORIGIN_Y = 380;
const UNIT = 76;
const GRID_X_MIN = -5, GRID_X_MAX = 8;
const GRID_Y_MIN = -4, GRID_Y_MAX = 4;
// The matrix we diagonalise.
const A = [[2, 1], [1, 2]];
// Eigenvalues 3 and 1, eigenvectors (1, 1)/√2 and (1, −1)/√2.
const SQRT2 = Math.SQRT2;
const E1 = [1 / SQRT2, 1 / SQRT2]; // eigenvector with λ = 3 (along +45°)
const E2 = [1 / SQRT2, -1 / SQRT2]; // eigenvector with λ = 1 (along −45°)
const LAMBDA1 = 3;
const LAMBDA2 = 1;
function toSvg(x, y) {
return { sx: ORIGIN_X + x * UNIT, sy: ORIGIN_Y - y * UNIT };
}
function applyM(M, x, y) {
return [M[0][0] * x + M[0][1] * y, M[1][0] * x + M[1][1] * y];
}
// ─── Grid mask ───────────────────────────────────────────────────────────
function GridMaskedSvg({ maskId, children }) {
const gradId = `${maskId}-grad`;
return (
);
}
function ReferenceGrid({ opacity = 0.3 }) {
const lines = [];
for (let k = GRID_X_MIN; k <= GRID_X_MAX; k++) {
const a = toSvg(k, GRID_Y_MIN);
const 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);
const b = toSvg(GRID_X_MAX, k);
lines.push();
}
return {lines};
}
function Axes() {
const left = toSvg(GRID_X_MIN, 0), right = toSvg(GRID_X_MAX, 0);
const bot = toSvg(0, GRID_Y_MIN), top = toSvg(0, GRID_Y_MAX);
return (
);
}
// Unit circle (or its image under M·lerp). Each sample point is t-lerped
// from its position on the unit circle to Ap.
function MorphedShape({ M, t = 0, color = 'var(--amber-400)',
samples = 80, strokeWidth = 2.2,
dashed = false, opacity = 1, showPoints = false }) {
const pts = [];
const dotElements = [];
for (let i = 0; i < samples; i++) {
const theta = (i / samples) * 2 * Math.PI;
const cx = Math.cos(theta), cy = Math.sin(theta);
const [ax, ay] = applyM(M, cx, cy);
const x = cx + (ax - cx) * t;
const y = cy + (ay - cy) * t;
const p = toSvg(x, y);
pts.push(`${p.sx.toFixed(1)},${p.sy.toFixed(1)}`);
if (showPoints && i % 6 === 0) {
dotElements.push(
);
}
}
const d = 'M ' + pts.join(' L ') + ' Z';
return (
{dotElements}
);
}
function Vector({
x, y, color, label = null, labelDX = 0, labelDY = 0,
strokeWidth = 3.6, headLen = 13, headHalf = 7,
fromX = 0, fromY = 0, opacity = 1, dashed = false,
}) {
const a = toSvg(fromX, fromY);
const b = toSvg(x, y);
const dx = b.sx - a.sx, dy = b.sy - a.sy;
const len = Math.hypot(dx, dy);
if (len < 0.5) return null;
const ux = dx / len, uy = dy / len;
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}
)}
);
}
// Long dashed line through origin along direction `v`.
function AxisLine({ v, color = 'var(--amber-300)', k = 4, opacity = 0.65 }) {
const a = toSvg(-k * v[0], -k * v[1]);
const b = toSvg( k * v[0], k * v[1]);
return (
);
}
function SoftPanel({ children, right = 60, top = 200, width = 360 }) {
return (
);
}
// ─── Scene ────────────────────────────────────────────────────────────────
function Scene() {
return (
);
}
function ManimoBubbleIntro() {
return (
A circle, a matrix, an ellipse — and two stubborn axes.
);
}
// ─── Beat 2: unit circle + matrix card ───────────────────────────────────
function SetupCircleBeat() {
return (
<>
the matrix
We'll send every point of the unit circle through A.
);
}
// ─── Beat 3: morph circle → ellipse ──────────────────────────────────────
function ApplyMorphBeat() {
const { localTime } = useSprite();
// Settle 0.6s, morph 2.6s, hold.
const morphT = clamp((localTime - 0.6) / 2.6, 0, 1);
const morphEased = Easing.easeInOutCubic(morphT);
return (
<>
{/* Ghost of original unit circle (dim) */}
{/* Active morph */}
circle → ellipse
Every point p moves to Ap.
Most points tilt and stretch as they go.
);
}
// ─── Beat 4: reveal eigenvectors ─────────────────────────────────────────
function RevealEigenBeat() {
const { localTime } = useSprite();
// Show e1 and its image λ₁·e1, glowing.
const e1tipImage = [LAMBDA1 * E1[0], LAMBDA1 * E1[1]];
// e2 image is itself (λ₂ = 1).
return (
<>
{/* Persistent unit circle + ellipse */}
{/* The eigen-axes — long dashed lines through origin */}
{/* Eigenvector v1 violet, with its image (stretched by 3) */}
{/* Eigenvector v2 teal, image identical (λ₂ = 1) */}
eigenvalues
λ₁ = 3 λ₂ = 1
A v = λ v — no tilt, just stretch.
);
}
// ─── Beat 5: diagonalisation formula ─────────────────────────────────────
function DiagonaliseBeat() {
return (
in the eigenbasis
A = PP−1
change basis → stretch on each axis → change back.
P = [ v₁ | v₂ ]
·
D = diag(3, 1)
);
}
// ─── Hero outro ──────────────────────────────────────────────────────────
function HeroOutro() {
return (
the takeaway
Eigenvectors are the natural axes.
A acts diagonally in its own coordinates.