// Same Vector, Two Grids — Manimo lesson scene.
// Chapter 1 (Vektorrom). The coordinates of a vector depend on the basis
// you measure with. Standard grid reads our arrow as (1, 3); a tilted
// basis B = {b₁, b₂} reads the very same arrow as (2, 1).
//
// Visual conventions inherited from the calibration scene:
// chalk-300 / chalk-200 standard reference grid + axes
// amber-400 the arrow itself (the object, not its label)
// violet-400 b₁ and the new lattice lines along b₁
// teal-400 b₂ and the new lattice lines along b₂
// amber-300 the payoff coordinates, hero accent
const SCENE_DURATION = 36;
const NARRATION = [
"A vector is just an arrow. The numbers we attach to it depend on the grid we measure with.",
"Set down the standard grid. Our arrow lives at coordinates one, three — one step right, three steps up.",
"Now overlay a tilted basis — b one going up and right, b two going up and left. Same arrow, but a brand new grid to measure against.",
"Solve the match up: the arrow equals two of b one plus one of b two. In the B basis, the same arrow is the column two, one.",
"Same arrow. New basis. New coordinates.",
];
const NARRATION_AUDIO = 'audio/basis-change-grid/scene.mp3';
// ─── Coordinate system ────────────────────────────────────────────────────
const ORIGIN_X = 540;
const ORIGIN_Y = 420;
const UNIT = 72;
const GRID_X_MIN = -5, GRID_X_MAX = 8;
const GRID_Y_MIN = -3, GRID_Y_MAX = 4;
function toSvg(x, y) {
return { sx: ORIGIN_X + x * UNIT, sy: ORIGIN_Y - y * UNIT };
}
// Vectors used throughout.
const V = [1, 3]; // the arrow we keep re-measuring
const B1 = [1, 1]; // basis vector 1
const B2 = [-1, 1]; // basis vector 2
// v = c₁·b₁ + c₂·b₂ with c₁ = 2, c₂ = 1.
const C1 = 2;
const C2 = 1;
// ─── Grid mask helper ────────────────────────────────────────────────────
function GridMaskedSvg({ maskId, children }) {
const gradId = `${maskId}-grad`;
return (
);
}
// Standard chalk grid (axis-aligned integer lines).
function StandardGrid({ opacity = 0.4 }) {
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};
}
// B-basis lattice: integer translates of the b₁ and b₂ directions, drawn
// as long line segments through the visible math window. `progress` in
// [0, 1] grows the lines outward from origin (rather than fading) so the
// new lattice feels like it's being laid down.
function BasisLattice({ progress = 1, opacityFactor = 1 }) {
const T = 6; // half-extent in basis units
const T0 = -T, T1 = T;
const lines = [];
const farFactor = T * Math.max(0.001, progress);
for (let k = -4; k <= 4; k++) {
// Lines parallel to b₁ at offset k·b₂
const ax = k * B2[0] + (-farFactor) * B1[0];
const ay = k * B2[1] + (-farFactor) * B1[1];
const bx = k * B2[0] + ( farFactor) * B1[0];
const by = k * B2[1] + ( farFactor) * B1[1];
const a = toSvg(ax, ay);
const b = toSvg(bx, by);
lines.push();
// Lines parallel to b₂ at offset k·b₁
const cx = k * B1[0] + (-farFactor) * B2[0];
const cy = k * B1[1] + (-farFactor) * B2[1];
const dx = k * B1[0] + ( farFactor) * B2[0];
const dy = k * B1[1] + ( farFactor) * B2[1];
const c = toSvg(cx, cy);
const d = toSvg(dx, dy);
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 (
);
}
// Vector arrow from (fromX, fromY) to (x, y). Optional dashed stroke.
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}
)}
);
}
function SoftPanel({ children, right = 60, top = 200, width = 360 }) {
return (
{children}
);
}
// Bracketed column vector: a 2x1 column of stacked strings on chalk
// brackets. Used to show [v]_std and [v]_B side by side in panels.
function ColumnBracketed({ entries, eyebrow, colors, fontSize = 32 }) {
return (
{eyebrow}
{entries[0]}{entries[1]}
);
}
// ─── Scene ────────────────────────────────────────────────────────────────
function Scene() {
return (
);
}
// ─── Beat 1: intro ────────────────────────────────────────────────────────
function ManimoBubbleIntro() {
return (
Same arrow. Different numbers — depending on the grid.
);
}
// ─── Beat 2: v in standard coordinates ───────────────────────────────────
function StandardCoordsBeat() {
return (
<>
{/* Projection guides: vertical from (1, 3) down to (1, 0), horizontal across to (0, 3) */}
{(() => {
const top = toSvg(V[0], V[1]);
const bot = toSvg(V[0], 0);
const lft = toSvg(0, V[1]);
return (
);
})()}
{/* Tick labels at (1, 0) and (0, 3) */}
{(() => {
const tx = toSvg(V[0], 0);
const ty = toSvg(0, V[1]);
return (
13
);
})()}
standard coordinates
One step along x, three along y. That's what the standard grid records.
);
}
// ─── Beat 3: overlay the tilted basis ────────────────────────────────────
function OverlayBasisBeat() {
const { localTime } = useSprite();
const latticeT = clamp((localTime - 0.4) / 1.8, 0, 1);
const latticeProgress = Easing.easeOutCubic(latticeT);
return (
<>
a new basis B
B = (b₁, b₂)
Two new directions to measure with. The arrow has not moved.
);
}
// ─── Beat 4: solve for B-coordinates ─────────────────────────────────────
function NewCoordsBeat() {
const { localTime } = useSprite();
// Step 1 (0.6–1.5s): glide along 2·b₁ — dashed violet from origin.
// Step 2 (1.6–2.5s): glide along 1·b₂ from (2,2) to v=(1,3) — dashed teal.
const step1T = clamp((localTime - 0.6) / 1.0, 0, 1);
const step1 = Easing.easeOutCubic(step1T);
const step2T = clamp((localTime - 1.8) / 1.0, 0, 1);
const step2 = Easing.easeOutCubic(step2T);
const mid = [C1 * B1[0], C1 * B1[1]]; // (2, 2)
const end = [mid[0] + C2 * B2[0], mid[1] + C2 * B2[1]]; // should equal V
// Animated intermediate tips
const tip1 = [mid[0] * step1, mid[1] * step1];
const tip2 = [mid[0] + (end[0] - mid[0]) * step2,
mid[1] + (end[1] - mid[1]) * step2];
return (
<>
{/* The two basis arrows (low-key, persistent) */}
{/* Step 1: 2·b₁ tip-to-tail */}
{step1T > 0 && (
)}
{step1T > 0.6 && (
(() => {
const m = toSvg((tip1[0]) / 2, (tip1[1]) / 2);
return (
2 b₁
);
})()
)}
{/* Step 2: 1·b₂ from mid */}
{step2T > 0 && (
)}
{step2T > 0.6 && (
(() => {
const m = toSvg(
mid[0] + (tip2[0] - mid[0]) / 2,
mid[1] + (tip2[1] - mid[1]) / 2
);
return (
1 b₂
);
})()
)}
{/* The vector itself, full intensity */}
B-coordinates
v = 2 b₁ + 1 b₂
Same arrow. New basis. New numbers.
);
}
// ─── Hero outro ──────────────────────────────────────────────────────────
function HeroOutro() {
return (
the takeaway
Coordinates need a basis.
The arrow doesn't move; only its address changes.
[v]ₛₜₐₙ = (1, 3) · [v]ᴮ = (2, 1)