// Matrix as Function: T(v) = Av — Manimo lesson scene.
// Chapter 2 (Lineærtransformasjoner). A matrix-vector multiplication IS
// the linear transformation. Show v on the left, the matrix machine in
// the middle, the output on the right, then walk through row-by-column
// arithmetic.
const SCENE_DURATION = 38;
const NARRATION = [
"What does a matrix actually do to a vector? Let's compute.",
"Send in a vector. The matrix is the rule. The output is another vector — same dimension, new direction.",
"Multiply row by column. One times one plus two times two gives five. Three times one minus one times two gives one. So A v equals the column five, one.",
"That's it. Every linear function from the plane to the plane is just multiplication by some matrix, written T of v equals A v.",
"Pick a matrix. Pick a vector. Multiply. Get a new vector.",
];
const NARRATION_AUDIO = 'audio/matrix-as-function/scene.mp3';
// Inputs to the example computation.
const A = [[1, 2], [3, -1]];
const V = [1, 2];
const AV = [A[0][0] * V[0] + A[0][1] * V[1],
A[1][0] * V[0] + A[1][1] * V[1]]; // (5, 1)
// ─── Geometry ────────────────────────────────────────────────────────────
// Three boxes laid out horizontally at the same vertical centre, each with
// its own little coordinate frame. Centre box is the matrix; outer boxes
// are tiny grids showing v and Av as arrows.
const PANEL_CY = 400;
const LEFT_CX = 220;
const MID_CX = 640;
const RIGHT_CX = 1060;
const MINI_UNIT = 26;
const MINI_X_MIN = -2, MINI_X_MAX = 6;
const MINI_Y_MIN = -2, MINI_Y_MAX = 4;
function miniToSvg(cx, x, y) {
return { sx: cx + x * MINI_UNIT, sy: PANEL_CY - y * MINI_UNIT };
}
// ─── Grid mask ───────────────────────────────────────────────────────────
function GridMaskedSvg({ maskId, children }) {
const gradId = `${maskId}-grad`;
return (
);
}
// ─── Mini grid ───────────────────────────────────────────────────────────
function MiniGrid({ cx, opacity = 0.35 }) {
const lines = [];
for (let k = MINI_X_MIN; k <= MINI_X_MAX; k++) {
const a = miniToSvg(cx, k, MINI_Y_MIN);
const b = miniToSvg(cx, k, MINI_Y_MAX);
lines.push();
}
for (let k = MINI_Y_MIN; k <= MINI_Y_MAX; k++) {
const a = miniToSvg(cx, MINI_X_MIN, k);
const b = miniToSvg(cx, MINI_X_MAX, k);
lines.push();
}
// Axes
const xleft = miniToSvg(cx, MINI_X_MIN, 0), xright = miniToSvg(cx, MINI_X_MAX, 0);
const ytop = miniToSvg(cx, 0, MINI_Y_MAX), ybot = miniToSvg(cx, 0, MINI_Y_MIN);
lines.push();
lines.push();
return {lines};
}
function MiniVector({ cx, x, y, color, label = null, labelDX = 0, labelDY = 0,
strokeWidth = 3.2, headLen = 10, headHalf = 5.5 }) {
const o = miniToSvg(cx, 0, 0);
const tip = miniToSvg(cx, x, y);
const dx = tip.sx - o.sx, dy = tip.sy - o.sy;
const len = Math.hypot(dx, dy);
if (len < 0.5) return null;
const ux = dx / len, uy = dy / len;
const baseX = tip.sx - ux * headLen;
const baseY = tip.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({ children, right, top, left, bottom, width = 360, align = 'left' }) {
const positioning = left != null ? { left, top, right: undefined }
: { right, top };
return (
);
}
// ─── Scene ────────────────────────────────────────────────────────────────
function Scene() {
return (
);
}
function ManimoBubbleIntro() {
return (
A is a rule. v is the input. A v is the output.
);
}
// Big chevron / arrow drawn between mini-grids, indicating flow.
function FlowChevron({ x, y, color = 'var(--chalk-300)' }) {
return (
);
}
// ─── Beat 2: machine layout — three boxes ────────────────────────────────
function MachineLayoutBeat() {
return (
<>
{/* Left mini-grid + v */}
{/* origin tick */}
{/* Right placeholder mini-grid */}
{/* Flow chevrons */}
{/* Centre matrix box, HTML so the type renders crisp */}
matrix A
{/* "input → matrix → output" caption strip */}
input → matrix → output
The matrix is the rule. The arrow goes in. A new arrow comes out.