// Superposition: One Source at a Time — Manimo lesson scene.
// A two-source linear circuit (V1 on the left, I2 on the right) drives a
// shared load R_L. Compute the current through R_L by zeroing one source
// at a time: kill the current source (open it) for the V1 response, kill
// the voltage source (short it) for the I2 response, then sum. Linear =
// sources add independently.
//
// Beats (timed to single-track narration in motion/ade/audio/superposition/):
// 0.00– 5.00 Manimo intro + hook caption
// 5.00–14.00 Setup — full circuit, both sources active, "what's I_L?"
// 14.00–24.00 Kill I2: replace with open; V1-only current dots through R_L (rightward)
// 24.00–34.00 Kill V1: replace with short; I2-only current dots through R_L (leftward)
// 34.00–44.00 Sum + linearity takeaway
//
// Authoring notes:
// • Shared circuit geometry lives in circuitGeometry(portrait); the three
// diagram beats all reuse it so the schematic stays anchored across beats.
// • Charge dots are driven from useSprite() localTime so the "current flowing"
// visualisation is genuinely time-dependent, not a static label.
// • Beat 3 / Beat 4 flip dot direction by negating the phase increment.
const SCENE_DURATION = 51;
const NARRATION = [
/* 0.00– 5.00 */ "Two sources, one resistor — what's the current through it? Mesh equations work, but there's a slicker way.",
/* 5.00–14.00 */ "Here's the circuit. A voltage source V one on the left, a current source I two on the right, and a load resistor R L in the middle.",
/* 14.00–24.00 */ "Step one: kill the current source — replace it with an open circuit. Now only V one drives the network. Charge flows along this path, and the current through R L is the first contribution.",
/* 24.00–34.00 */ "Step two: bring back the current source, but kill V one — replace it with a short. Now I two drives the network. Charge flows the other way through R L; that's the second contribution.",
/* 34.00–44.00 */ "Add the two contributions and you've found the current with both sources live. Superposition works because the circuit is linear — sources add their effects independently.",
];
const NARRATION_AUDIO = 'audio/superposition/scene.mp3';
function Scene() {
return (
);
}
// ─── Shared circuit geometry ─────────────────────────────────────────────
// Bridge-style network: V1 on the left arm, R1 in series with V1, the
// middle (load) branch is R_L vertical between the top and bottom rails,
// and the right arm carries R2 in series with current source I2.
// nodeA ── R1 ── nodeB ──┬── nodeC ── R2 ── nodeD
// R_L
// nodeA' ─────────────── nodeB' ────────── nodeD' (bottom rail)
function circuitGeometry(portrait) {
return portrait
? { vbW: 600, vbH: 560,
topY: 140, botY: 360,
v1X: 80, r1X1: 130, r1X2: 230,
rlX: 300, rlY1: 150, rlY2: 350,
r2X1: 370, r2X2: 470, i2X: 520,
captionY: 510, fontFormula: 22 }
: { vbW: 1100, vbH: 460,
topY: 130, botY: 330,
v1X: 100, r1X1: 170, r1X2: 350,
rlX: 500, rlY1: 140, rlY2: 320,
r2X1: 650, r2X2: 830, i2X: 920,
captionY: 430, fontFormula: 26 };
}
function resistorHorizontalD(xLeft, xRight, cy, amp = 9, n = 6) {
const dx = (xRight - xLeft) / n;
const pts = [`M ${xLeft} ${cy}`];
for (let i = 1; i < n; i++) {
const x = xLeft + i * dx;
const y = cy + (i % 2 === 1 ? -amp : amp);
pts.push(`L ${x.toFixed(1)} ${y}`);
}
pts.push(`L ${xRight} ${cy}`);
return pts.join(' ');
}
function resistorVerticalD(cx, yTop, yBot, amp = 9, n = 6) {
const dy = (yBot - yTop) / n;
const pts = [`M ${cx} ${yTop}`];
for (let i = 1; i < n; i++) {
const y = yTop + i * dy;
const x = cx + (i % 2 === 1 ? -amp : amp);
pts.push(`L ${x} ${y.toFixed(1)}`);
}
pts.push(`L ${cx} ${yBot}`);
return pts.join(' ');
}
// Voltage source: long plate (+) + short plate (−), centred at (cx, cy).
function BatterySymbol({ cx, cy, label = 'V₁' }) {
return (
{label}+−
);
}
// Current source: circle with internal upward arrow, centred at (cx, cy).
function CurrentSourceSymbol({ cx, cy, label = 'I₂' }) {
return (
{label}
);
}
// Big red "X" overlay — used to mark a killed source.
function KillX({ cx, cy, size = 18 }) {
return (
);
}
// Render the shared schematic with optional per-source killing. When
// `killCurrent` is true the I2 is shown opened (gap in the right arm);
// when `killVoltage` is true V1 is shown shorted (a wire replaces it).
function CircuitDiagram({ G, beatDelay = 0, killCurrent = false, killVoltage = false }) {
return (
{/* Top rail and bottom rail wires */}
{/* Vertical wires from source bodies to rails */}
{/* V1 voltage source — shown as a wire (short) when killed */}
{killVoltage ? (
V₁ → 0
) : (
)}
{/* R1 zigzag (top-left arm) */}
R₁
{/* R_L vertical zigzag in the middle branch */}
RL
{/* R2 zigzag (top-right arm) */}
R₂
{/* I2 current source — shown as an open gap when killed */}
{killCurrent ? (
{/* Two short stubs on either side with a gap */}
I₂ → 0 (open)
) : (
)}
);
}
// Path samplers — discrete control points for the current loop, used to
// place charge dots that flow around the network. Each path is described
// as a polyline of (x, y) waypoints; we linearly interpolate by phase
// across cumulative segment lengths.
function pathTotal(waypoints) {
let total = 0;
for (let i = 1; i < waypoints.length; i++) {
total += Math.hypot(waypoints[i].x - waypoints[i - 1].x,
waypoints[i].y - waypoints[i - 1].y);
}
return total;
}
function sampleAt(waypoints, u) {
const tot = pathTotal(waypoints);
let target = u * tot;
for (let i = 1; i < waypoints.length; i++) {
const dx = waypoints[i].x - waypoints[i - 1].x;
const dy = waypoints[i].y - waypoints[i - 1].y;
const seg = Math.hypot(dx, dy);
if (target <= seg) {
const f = seg > 0 ? target / seg : 0;
return { x: waypoints[i - 1].x + dx * f, y: waypoints[i - 1].y + dy * f };
}
target -= seg;
}
return waypoints[waypoints.length - 1];
}
// ─── Beat 2: Setup — full circuit, both sources live ─────────────────────
function SetupBeat() {
const portrait = usePortrait();
const G = circuitGeometry(portrait);
return (
);
}
// ─── Beat 4: Kill V1 (short) — I2 only, dots flow the other way ─────────
function KillVoltageBeat() {
const portrait = usePortrait();
const { localTime } = useSprite();
const G = circuitGeometry(portrait);
// With V1 shorted, the network is a current source I2 feeding into
// R2 || (R1, R_L). Through R_L, current flows UPWARD (opposite of beat 3).
// Approximate loop: I2 → top rail (right→left) → R2 (right→left) →
// junction → down through R_L → bottom rail (left→right) → up to I2.
const loopI2 = [
{ x: G.i2X + 22, y: G.topY },
{ x: G.r2X2, y: G.topY },
{ x: G.r2X1, y: G.topY },
{ x: G.rlX, y: G.topY },
{ x: G.rlX, y: G.botY },
{ x: G.i2X + 22, y: G.botY },
{ x: G.i2X + 22, y: G.topY },
];
const NUM = 8;
const phase = Math.max(0, localTime - 2.2) / 4.0;
const dots = [];
for (let i = 0; i < NUM; i++) {
// Note: phase advances in the same direction as we wrote the waypoints;
// we wrote them right→left along the top rail and down through R_L,
// so the dots correctly flow from I2 back through R_L.
const u = ((phase + i / NUM) % 1);
dots.push(sampleAt(loopI2, u));
}
return (
);
}
// ─── Beat 5: Sum + linearity takeaway ────────────────────────────────────
function SumBeat() {
const portrait = usePortrait();
return (
Linearity adds them up
IL(1)
+
IL(2)
=
IL
works for any linear circuit — no matter how many sources
kill V → short · kill I → open · watch the signs
);
}
window.sceneNarration = NARRATION;
// ─── Mount ────────────────────────────────────────────────────────────────
function App() {
return (
);
}
ReactDOM.createRoot(document.getElementById('root')).render();