// Phasors: A Rotating Arrow Becomes a Sinusoid — Manimo lesson scene.
// Genuine animation lives in Beat 3: a phasor arrow rotates CCW on a
// complex plane; its real-axis projection feeds a synchronously-traced
// cosine on the right scope. Every frame, the projection drop-line and
// the time cursor are derived from the same `phaseAt(t)` so they cannot
// drift out of sync.
//
// Beats (timing aligned to single-track narration in motion/ade/audio/phasor-rotation/):
// 0.00– 7.97 Manimo intro: rotating arrow as a tool for AC
// 7.97–14.66 Complex plane setup: V_m, φ, magnitude vs angle
// 14.66–22.96 Rotate + trace: arrow turns, projection traces cosine
// 22.96–30.26 Two phasors 90° apart → cosine + sine in lock-step
// 30.26–40.00 Takeaway: vectors instead of integrals
//
// Authoring notes:
// • All animation in beats 3 + 4 is parametric — every visible
// element reads localTime and recomputes from a single phase value,
// so the on-screen story is impossible to desync.
// • Portrait branch stacks the complex plane above the scope (it would
// be unreadably narrow side-by-side in 720 px wide).
const SCENE_DURATION = 39;
const NARRATION = [
/* 0.00– 7.97 */ "An AC voltage swings sinusoidally — but there's a clearer way to picture it: a rotating arrow.",
/* 7.97–14.66 */ "Set up the complex plane. The voltage is an arrow of length V m, sitting at angle phi to the real axis.",
/* 14.66–22.96 */ "Now spin it. As the arrow rotates at omega, its projection on the real axis traces the cosine wave you see on the right.",
/* 22.96–30.26 */ "Add a second phasor lagging by ninety degrees. Both rotate together — and their two waves stay locked in phase difference.",
/* 30.26–40.00 */ "Each AC voltage becomes one number — magnitude and angle — that you can add like a vector. No more integrating sines.",
];
const NARRATION_AUDIO = 'audio/phasor-rotation/scene.mp3';
function Scene() {
return (
);
}
// ─── Shared helpers ─────────────────────────────────────────────────────
// Tiny axis pair centred at (cx, cy), width w, height h.
function Axes({ cx, cy, w, h, labels = ['Re', 'Im'], color = 'var(--chalk-300)' }) {
return (
{labels[0] && (
{labels[0]}
)}
{labels[1] && (
{labels[1]}
)}
);
}
// Arrow from (x0, y0) to (x1, y1). Arrowhead size proportional to length.
function Arrow({ x0, y0, x1, y1, color = 'var(--amber-400)', width = 2.4 }) {
const dx = x1 - x0, dy = y1 - y0;
const len = Math.sqrt(dx * dx + dy * dy);
if (len < 1e-3) return null;
const ux = dx / len, uy = dy / len;
const head = Math.min(12, len * 0.18);
const tipLen = Math.max(6, head);
// Shorten line so the head sits flush at (x1, y1)
const xLineEnd = x1 - ux * tipLen * 0.6;
const yLineEnd = y1 - uy * tipLen * 0.6;
// Perpendicular for the head wings
const px = -uy, py = ux;
const baseX = x1 - ux * tipLen, baseY = y1 - uy * tipLen;
const wingHalf = tipLen * 0.55;
return (
);
}
// ─── Beat 2: Complex plane setup (static phasor at angle φ) ──────────────
function ComplexPlaneBeat() {
const portrait = usePortrait();
// Centre of the plane on canvas. Portrait centres higher.
const G = portrait
? { cx: 360, cy: 480, axW: 480, axH: 480, R: 170, phi: -45 }
: { cx: 640, cy: 410, axW: 460, axH: 380, R: 150, phi: -45 };
const phiRad = (G.phi * Math.PI) / 180;
const tipX = G.cx + G.R * Math.cos(phiRad);
const tipY = G.cy + G.R * Math.sin(phiRad); // SVG y down; angle uses standard math convention with y inverted
return (
);
}
// ─── Beat 3: Rotating phasor + synchronous cosine trace (genuine motion) ──
function RotateAndTraceBeat() {
const portrait = usePortrait();
const { localTime, duration: spriteDur } = useSprite();
// Layout — landscape: side-by-side; portrait: plane above, scope below.
const L = portrait
? {
// complex plane
pcx: 360, pcy: 380, R: 150,
// scope
scopeX0: 70, scopeXW: 580, scopeY0: 720, scopeYH: 220,
}
: {
pcx: 360, pcy: 410, R: 145,
scopeX0: 690, scopeXW: 520, scopeY0: 290, scopeYH: 240,
};
// Rotation: hold briefly, then 1.5 full revolutions over the rest of
// the beat. ω is chosen so the cosine fills the scope width exactly
// by the end (CYCLES = 1.5 cycles == 1.5 × 2π).
const HOLD = 1.0;
const TAIL = 0.4;
const ROT_T = Math.max(spriteDur - HOLD - TAIL, 4);
const CYCLES = 1.5;
const rotProg = clamp((localTime - HOLD) / ROT_T, 0, 1);
// Phase angle (CCW positive, math convention). At rotProg=0 the arrow
// starts at the +Re axis (angle 0) so the cosine begins at +1.
const theta = rotProg * 2 * Math.PI * CYCLES;
// Arrow tip in SVG coords — Im is up in the math plane, so y is
// negated: y = pcy − R sin θ.
const tipX = L.pcx + L.R * Math.cos(theta);
const tipY = L.pcy - L.R * Math.sin(theta);
// Real-axis projection of the tip
const projY = L.pcy;
const projX = tipX;
// Cosine baseline + amplitude on the scope
const sBaseY = L.scopeY0 + L.scopeYH / 2;
const sAmp = (L.scopeYH / 2) * 0.85;
// Build the cosine path drawn so far (from rotProg=0 to rotProg=now)
const SAMPLES = 140;
const drawn = Math.max(2, Math.round(SAMPLES * rotProg));
const pts = [];
for (let i = 0; i <= drawn; i++) {
const f = (i / SAMPLES); // 0..rotProg
const ang = f * 2 * Math.PI * CYCLES;
const x = L.scopeX0 + (i / SAMPLES) * L.scopeXW;
const y = sBaseY - sAmp * Math.cos(ang);
pts.push((i === 0 ? 'M ' : 'L ') + x.toFixed(2) + ' ' + y.toFixed(2));
}
const traceD = pts.join(' ');
// Scope cursor (vertical line at the current x-position) and the live
// value dot.
const cursorX = L.scopeX0 + L.scopeXW * rotProg;
const cursorY = sBaseY - sAmp * Math.cos(theta);
// Reference background grid lines on the scope (zero axis + 4 v-ticks)
const tickXs = [0.25, 0.5, 0.75].map(f => L.scopeX0 + L.scopeXW * f);
return (