// The Power Triangle — Manimo lesson scene.
// AC power decomposes into three quantities related by a right triangle:
// real power P (watts), reactive power Q (vars), and apparent power S
// (volt-amps). The phase angle φ between voltage and current sets how
// each one slices out of the apparent power. Sweep φ and the triangle
// morphs; the power-factor readout falls from one to zero.
//
// Beats (placeholder timings — overwritten by rewire-scene.js):
// 0.00– 6.00 Manimo intro — not every volt-amp does work
// 6.00–18.00 V(t) leads, I(t) lags by φ on stacked scopes
// 18.00–30.00 Decompose I into in-phase (P) and quadrature (Q) components
// 30.00–44.00 Sweep φ from 0° to 90° — triangle morphs, PF readout falls
// 44.00–50.00 Takeaway — utilities bill for apparent power
//
// Authoring notes:
// • Beat 4 ("sweepPhi") is THE motion beat: useSprite() drives φ as a
// triangle wave from ~5° to ~85°, and P, Q, |S| and cos φ are all
// computed each frame so the readouts and triangle edges stay coherent.
// • Beat 2 (waveforms) is also motion-rich: the I(t) trace draws in
// beneath V(t) with a clear time lag, and a phase-difference bracket
// calls out φ between the corresponding peaks.
const SCENE_DURATION = 58;
const NARRATION = [
/* 0.00– 6.00 */ "An AC source can deliver volt-amps that never become watts. So where does the power go?",
/* 6.00–18.00 */ "Drive a reactive load with a sinusoidal voltage. The current rises and falls at the same frequency, but its peaks arrive a quarter cycle late. The phase angle between the two is phi.",
/* 18.00–30.00 */ "Project the current onto V and you get the in-phase part, which carries real power P. Project it perpendicular and you get the quadrature part, which carries reactive power Q. They live at right angles to each other.",
/* 30.00–44.00 */ "Now sweep phi from zero to ninety degrees. The hypotenuse stays the same length — that is apparent power S. Real power P shrinks; reactive power Q grows. The power factor cos phi falls from one to zero.",
/* 44.00–50.00 */ "Utilities bill for apparent power. Real power lights the room; reactive power just sloshes back and forth through the wires. That is why power factor correction is worth money.",
];
const NARRATION_AUDIO = 'audio/power-triangle/scene.mp3';
function Scene() {
return (
);
}
// ─── Shared helpers ──────────────────────────────────────────────────────
function sampleSine(fn, x0, yBaseline, width, amplitude, samples = 160) {
const pts = [];
for (let i = 0; i <= samples; i++) {
const u = i / samples;
const x = x0 + u * width;
const y = yBaseline - fn(u) * amplitude;
pts.push(`${i === 0 ? 'M' : 'L'} ${x.toFixed(2)} ${y.toFixed(2)}`);
}
return pts.join(' ');
}
// Small arrow-tip path on a vector ending at (x,y) coming from (x0,y0).
function arrowHeadPath(x0, y0, x, y, size = 9) {
const dx = x - x0, dy = y - y0;
const len = Math.hypot(dx, dy) || 1;
const ux = dx / len, uy = dy / len;
// perpendicular
const px = -uy, py = ux;
const baseX = x - ux * size;
const baseY = y - uy * size;
const halfW = size * 0.55;
return `M ${x} ${y} L ${(baseX + px * halfW).toFixed(2)} ${(baseY + py * halfW).toFixed(2)} L ${(baseX - px * halfW).toFixed(2)} ${(baseY - py * halfW).toFixed(2)} Z`;
}
// ─── Beat 2: Waveforms — V leads, I lags by φ ────────────────────────────
function WaveformBeat() {
const portrait = usePortrait();
const { localTime, duration: spriteDur } = useSprite();
const HOLD = 0.6;
const TRACE_DUR = Math.max(spriteDur - HOLD - 2.5, 1);
const traceFrac = clamp((localTime - HOLD) / TRACE_DUR, 0, 1);
const CYCLES = 2;
const PHI = Math.PI / 3; // 60° — generous so the lag is visible
const phiPx_per_cycle_frac = PHI / (2 * Math.PI);
const G = portrait
? { vbW: 600, vbH: 720,
panelX: 60, panelW: 480,
vY0: 90, vH: 230, iY0: 380, iH: 230,
captionY: 695, fontEyebrow: 10, fontLabel: 13 }
: { vbW: 1100, vbH: 440,
panelX: 80, panelW: 940,
vY0: 40, vH: 160, iY0: 240, iH: 160,
captionY: 420, fontEyebrow: 11, fontLabel: 14 };
const vBase = G.vY0 + G.vH / 2;
const iBase = G.iY0 + G.iH / 2;
const amp = (G.vH / 2) * 0.82;
const vD = sampleSine((u) => Math.sin(2 * Math.PI * CYCLES * u),
G.panelX, vBase, G.panelW, amp);
const iD = sampleSine((u) => Math.sin(2 * Math.PI * CYCLES * u - PHI),
G.panelX, iBase, G.panelW, amp);
// x-coords of the first V peak and the first I peak so we can drop a
// φ-bracket between them.
// V peak: 2π·CYCLES·u = π/2 → u = 1/(4·CYCLES). First peak.
const uVpeak = 1 / (4 * CYCLES);
// I peak: 2π·CYCLES·u − φ = π/2 → u = (π/2 + φ)/(2π·CYCLES) = 1/(4·CYCLES) + phiPx_per_cycle_frac/CYCLES
const uIpeak = uVpeak + phiPx_per_cycle_frac / CYCLES;
const xVpeak = G.panelX + uVpeak * G.panelW;
const xIpeak = G.panelX + uIpeak * G.panelW;
// Cursor for highlighting (only visible while drawing).
const cursorX = G.panelX + G.panelW * traceFrac;
return (
);
}
// ─── Beat 3: Decompose the current into P and Q parts ────────────────────
function DecomposeBeat() {
const portrait = usePortrait();
// Fixed phase angle for this beat (matches the lag shown in beat 2)
const PHI = Math.PI / 3; // 60°
const G = portrait
? { vbW: 600, vbH: 740,
origX: 300, origY: 360, R: 210,
fontMain: 18, fontLabel: 14, capRowY: 600, captionY: 710 }
: { vbW: 1100, vbH: 520,
origX: 380, origY: 260, R: 210,
fontMain: 20, fontLabel: 15, capRowY: 430, captionY: 495 };
// V phasor: horizontal, along +x axis
const vTipX = G.origX + G.R;
const vTipY = G.origY;
// I phasor: at angle −φ from +x (lagging)
const iTipX = G.origX + Math.cos(-PHI) * G.R;
const iTipY = G.origY + Math.sin(-PHI) * G.R; // below the axis (lag)
// Foot of perpendicular from I onto V (in-phase projection)
const projX = G.origX + Math.cos(-PHI) * G.R; // = iTipX in plane angle, but project to x-axis
const projXOnV = G.origX + G.R * Math.cos(PHI); // length cos φ along +x
const projYOnV = G.origY;
// Quadrature component endpoint (vertical from foot of perpendicular)
const quadEndX = projXOnV;
const quadEndY = G.origY - G.R * Math.sin(PHI); // ABOVE axis? Reactive Q is downward for lagging current actually
// For a lagging current (inductive), reactive power Q is positive and conventionally drawn
// as +Q vertical UP from P. Real power P is +x. So in the power triangle (not the I-V phasor
// diagram), P is along +x and Q is along +y. We'll draw the power triangle elsewhere.
return (
);
}
// ─── Beat 4: Sweep φ — power triangle morphs ─────────────────────────────
// Triangle wave over the sprite: φ ramps 5° → 85° → 5°. Each frame we
// compute (P, Q, S, cos φ) from φ and redraw the triangle. The hypotenuse
// length |S| is fixed; only its angle changes. The "motor analogy" label
// appears at low power factor (cos φ < 0.5).
function SweepPhiBeat() {
const portrait = usePortrait();
const { localTime, duration: spriteDur } = useSprite();
const HOLD = 0.6;
const SWEEP_DUR = Math.max(spriteDur - HOLD - 1.4, 1);
const u = clamp((localTime - HOLD) / SWEEP_DUR, 0, 1);
// Triangle wave 0..1..0
const tri = u < 0.5 ? (u * 2) : (2 - u * 2);
const PHI_MIN_DEG = 5;
const PHI_MAX_DEG = 85;
const phiDeg = PHI_MIN_DEG + (PHI_MAX_DEG - PHI_MIN_DEG) * Easing.easeInOutCubic(tri);
const phi = phiDeg * Math.PI / 180;
// Normalised triangle: |S| = 1 (in arbitrary VA units). Choose a pixel
// scale R so the hypotenuse fits the canvas.
const G = portrait
? { vbW: 600, vbH: 720,
origX: 130, origY: 460, R: 360,
panelX: 80, panelY: 540, panelW: 440, panelH: 170,
fontMain: 18, fontLabel: 14 }
: { vbW: 1100, vbH: 460,
origX: 220, origY: 360, R: 320,
panelX: 700, panelY: 80, panelW: 380, panelH: 320,
fontMain: 20, fontLabel: 15 };
const S = 1;
const P = S * Math.cos(phi);
const Q = S * Math.sin(phi);
const Px = G.origX + P * G.R; // along +x
const Py = G.origY;
const Sx = Px;
const Sy = G.origY - Q * G.R; // S tip: above and to the right
// (P horizontal from origin; Q vertical UP from (Px,Py); S hypotenuse from origin to Sx,Sy)
return (