// Linear Combinations: Mix Two Arrows — Manimo lesson scene.
// Chapter 1 (Vektorrom). Two arrows v1 and v2; two scalar dials a and b.
// Beat 3 fixes b=0 and sweeps a — the output point P = a·v1 + b·v2 slides
// along a line through the origin. Beat 4 turns both dials simultaneously
// (Lissajous-style); the output point wanders the plane, leaving a trail
// that demonstrates the span fills R^2.
//
// Beats:
// 0– 4 Manimo intro
// 4–11 Two vectors + recipe formula
// 11–21 Sweep a (b = 0): line trail
// 21–31 Sweep a and b: plane trail
// 31–36 Hero takeaway
//
// Genuine animation: the output dot in beats 3 and 4 is driven by
// useSprite localTime, not by FadeUp/TraceIn.
const SCENE_DURATION = 44;
const NARRATION = [
/* 0– 4 */ 'What can you build with just two arrows and a pair of dials?',
/* 4–11 */ 'Pick two arrows v one and v two. A linear combination is a v one plus b v two, where a and b are any two real numbers. That formula is the recipe.',
/* 11–21 */ 'Fix b at zero and sweep the dial for a. The output point slides along a single line through the origin — the line of every multiple of v one.',
/* 21–31 */ 'Now turn both dials at once. The point wanders all over the plane. Every reachable spot is some recipe a v one plus b v two — that whole region is the span.',
/* 31–36 */ 'Linear combinations are how you turn arrows into reach. Two dials, two arrows, the whole plane.',
];
const NARRATION_AUDIO = 'audio/linear-combination-recipe/scene.mp3';
// ─── Geometry helpers (per-aspect) ────────────────────────────────────────
function geom(portrait) {
return portrait
? { vbW: 640, vbH: 680, ox: 320, oy: 360, unit: 52,
gridXMin: -5, gridXMax: 5, gridYMin: -5, gridYMax: 5 }
: { vbW: 760, vbH: 580, ox: 380, oy: 300, unit: 56,
gridXMin: -6, gridXMax: 6, gridYMin: -4, gridYMax: 4 };
}
function toSvgF(G, x, y) {
return { sx: G.ox + x * G.unit, sy: G.oy - y * G.unit };
}
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 (
);
}
function ArrowFromOrigin({ G, x, y, color, label = null, labelDX = 0, labelDY = 0,
strokeWidth = 3.4, progress = 1, opacity = 1,
dashed = false }) {
const a = toSvgF(G, 0, 0);
const b = toSvgF(G, x * progress, y * progress);
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 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 && progress > 0.85 && (
{label}
)}
);
}
function SoftPanel({ G, portrait, children }) {
return (
{children}
);
}
// The two source vectors, chosen non-parallel so they span R^2.
const V1 = [2.6, 0.4];
const V2 = [-0.7, 1.9];
// ─── Scene ────────────────────────────────────────────────────────────────
function Scene() {
return (
);
}
// ─── Beat 2: Two vectors + recipe formula ─────────────────────────────────
function RecipeBeat() {
const portrait = usePortrait();
const G = geom(portrait);
return (
<>
the recipe
p = a v₁ +
b v₂
a and b are dials — any two real numbers.
);
}
// ─── Beat 3: Sweep a (b = 0) ──────────────────────────────────────────────
// Sweep `a` over [-2, 2], leaving a trail. Output point P = a·V1.
function SweepABeat() {
const portrait = usePortrait();
const G = geom(portrait);
const { localTime } = useSprite();
// Sweep window: start at t=1.0s, end at t=8.5s; total 7.5s for a smooth
// back-and-forth motion. Eases give a "drag the dial" feel.
const aMin = -2, aMax = 2;
const sweepStart = 1.0, sweepEnd = 8.5;
const phase = clamp((localTime - sweepStart) / (sweepEnd - sweepStart), 0, 1);
// Use a triangle wave for one round trip then settle in middle:
// 0 → -2
// 0.4 → +2
// 0.7 → -1
// 1.0 → +1.5
// Implemented as easing through keyframes.
function aAt(p) {
if (p < 0.4) return aMin + (aMax - aMin) * Easing.easeInOutCubic(p / 0.4);
if (p < 0.7) return aMax + (-1 - aMax) * Easing.easeInOutCubic((p - 0.4) / 0.3);
return -1 + (1.5 - -1) * Easing.easeInOutCubic((p - 0.7) / 0.3);
}
const aVal = phase > 0 ? aAt(phase) : aMin;
// Trail samples: every 0.06s from sweepStart to current localTime.
const trailPoints = [];
if (localTime >= sweepStart) {
const tEnd = Math.min(localTime, sweepEnd);
const dt = 0.06;
for (let t = sweepStart; t <= tEnd; t += dt) {
const p = clamp((t - sweepStart) / (sweepEnd - sweepStart), 0, 1);
const aT = aAt(p);
const pos = toSvgF(G, aT * V1[0], aT * V1[1]);
trailPoints.push(`${pos.sx.toFixed(1)},${pos.sy.toFixed(1)}`);
}
}
const trailD = trailPoints.length > 1 ? 'M ' + trailPoints.join(' L ') : '';
// Current output point.
const outPt = toSvgF(G, aVal * V1[0], aVal * V1[1]);
return (
<>
one dial
p = a v₁,
b = 0
{/* Live a readout */}
a = {aVal.toFixed(2)}
P traces the line spanned by v₁.
);
}
// ─── Beat 4: Sweep a and b ────────────────────────────────────────────────
// Both dials sweep simultaneously along low-frequency sinusoids of
// different periods (so the (a, b) pair traces a Lissajous-like path
// that covers a region of the plane).
function SweepBothBeat() {
const portrait = usePortrait();
const G = geom(portrait);
const { localTime } = useSprite();
const sweepStart = 0.6;
// a(t) ranges over [-1.8, 1.8] with period 4.8s.
// b(t) ranges over [-1.6, 1.6] with period 6.4s.
function abAt(t) {
if (t < sweepStart) return null;
const dt = t - sweepStart;
const a = 1.8 * Math.sin((2 * Math.PI / 4.8) * dt);
const b = 1.6 * Math.sin((2 * Math.PI / 6.4) * dt + Math.PI / 2);
return [a, b];
}
const ab = abAt(localTime);
// Trail samples: every 0.08s from sweepStart up to current localTime.
const trailPoints = [];
if (localTime >= sweepStart) {
const dt = 0.08;
for (let t = sweepStart; t <= localTime; t += dt) {
const [a, b] = abAt(t);
const x = a * V1[0] + b * V2[0];
const y = a * V1[1] + b * V2[1];
const pos = toSvgF(G, x, y);
trailPoints.push(`${pos.sx.toFixed(1)},${pos.sy.toFixed(1)}`);
}
}
const trailD = trailPoints.length > 1 ? 'M ' + trailPoints.join(' L ') : '';
// Current output point and parallelogram construction.
let outPt = null, aV1Pt = null, bV2EndPt = null;
let aVal = 0, bVal = 0;
if (ab) {
[aVal, bVal] = ab;
const x = aVal * V1[0] + bVal * V2[0];
const y = aVal * V1[1] + bVal * V2[1];
outPt = toSvgF(G, x, y);
aV1Pt = toSvgF(G, aVal * V1[0], aVal * V1[1]);
bV2EndPt = outPt;
}
return (
<>
both dials
p = a v₁ +
b v₂
{/* Live (a, b) readout */}
a = {aVal.toFixed(2)}, b = {bVal.toFixed(2)}
Two non-parallel arrows fill the whole plane.
);
}
// ─── Beat 5: Takeaway ─────────────────────────────────────────────────────
function TakeawayBeat() {
const portrait = usePortrait();
return (
the takeaway
Two dials, two arrows — the whole plane.
That reachable region is the span.