// RC High-Pass Filter: Why Gain Rolls In Past the Cutoff — Manimo lesson scene.
// Swap C and R in the RC filter: capacitor in series, resistor to ground,
// V_out across the resistor. H(jω) = jωRC / (1 + jωRC). Gain rises at
// +20 dB/decade below ω_c = 1/RC and is flat (0 dB) above; phase shifts
// from +90° at DC down to 0° at high frequency.
//
// Genuine animation lives in Beat 3 (FrequencySweep): a single ω parameter
// scrubs through three decades while two sinusoids redraw frame-by-frame —
// V_in stays at unit amplitude, V_out grows from near zero up toward V_in,
// leading then in phase. Beat 4 sweeps the same parameter while the Bode
// magnitude curve traces in left-to-right.
//
// Beats:
// 0.00– 5.00 Manimo intro: same parts, swapped — which way does gain go?
// 5.00–13.00 Circuit: C in series, R to ground, output across R
// 13.00–25.00 Frequency sweep: ω scrubs; V_out grows and leads
// 25.00–36.00 Bode magnitude: rises at +20 dB/decade, flat past ω_c
// 36.00–46.00 Takeaway: ω_c = 1/RC; low frequencies get killed
const SCENE_DURATION = 46;
const NARRATION = [
/* 0.00– 5.00 */ 'Swap the R and the C in our filter — what changes?',
/* 5.00–13.00 */ 'The capacitor sits in series; the resistor goes to ground; V out is taken across the resistor.',
/* 13.00–25.00 */ 'Step the input frequency from low to high. At low frequencies the capacitor blocks the signal and V out collapses. As the frequency climbs past the cutoff, V out grows up to match V in.',
/* 25.00–36.00 */ 'Plot the gain in decibels against frequency on a log axis. Below the cutoff the gain climbs at twenty decibels every decade; above the cutoff it is flat at zero dB.',
/* 36.00–46.00 */ 'Above omega equals one over R C the filter passes the signal through. Below, it kills low frequencies — that is why we call it a high pass filter.',
];
const NARRATION_AUDIO = 'audio/high-pass-bode/scene.mp3';
function Scene() {
return (
);
}
// ─── Shared transfer-function helpers ────────────────────────────────────
// H(jω) for an RC high-pass = jωRC / (1 + jωRC). With x = ω/ω_c:
// |H| = x / √(1 + x²), phase = π/2 − atan(x) (lead at low freq)
function magdB(x) {
return 20 * Math.log10(x / Math.sqrt(1 + x * x));
}
function magLin(x) {
return x / Math.sqrt(1 + x * x);
}
function phaseLeadRad(x) {
// V_out leads V_in by π/2 − atan(x): 90° at x→0, 0° at x→∞.
return Math.PI / 2 - Math.atan(x);
}
// Sine path from (x0, yMid) over `width` pixels — `cyclesAcross` cycles,
// amplitude `amp` px, phase shift `phi` rad.
function sinePath(x0, yMid, width, amp, cyclesAcross, phi, samples = 240) {
const pts = [`M ${x0} ${(yMid - amp * Math.sin(phi)).toFixed(2)}`];
for (let i = 1; i <= samples; i++) {
const f = i / samples;
const x = x0 + f * width;
const y = yMid - amp * Math.sin(2 * Math.PI * cyclesAcross * f + phi);
pts.push(`L ${x.toFixed(2)} ${y.toFixed(2)}`);
}
return pts.join(' ');
}
// ─── Beat 2: Circuit — C in series, R to ground ──────────────────────────
function CircuitBeat() {
const portrait = usePortrait();
const G = portrait
? { vbW: 600, vbH: 580,
leftX: 110, midX: 320, rightX: 480,
topY: 130, botY: 380,
zigAmp: 18, fontMain: 22, capY: 480, formulaY: 540 }
: { vbW: 920, vbH: 380,
leftX: 160, midX: 460, rightX: 720,
topY: 90, botY: 280,
zigAmp: 12, fontMain: 22, capY: 310, formulaY: 360 };
const inLabelX = G.leftX - 20;
const inLabelY = (G.topY + G.botY) / 2;
const capCx = G.midX;
const rX = G.rightX - 60;
const rTop = G.topY;
const rBot = G.botY;
return (
);
}
// ─── Beat 3: Frequency sweep — V_out grows and leads ─────────────────────
// ω scrubs from 0.1·ω_c to 10·ω_c across the beat. V_in stays at unit
// amplitude; V_out amplitude = x/√(1+x²), phase lead = π/2 − atan(x).
// Visible cycles fixed at 3 for legibility (the same way low-pass-bode
// does it) so the motion shows amplitude + phase, not period.
function FrequencySweepBeat() {
const portrait = usePortrait();
const { localTime, duration: spriteDur } = useSprite();
const G = portrait
? { vbW: 600, vbH: 800,
panelX: 60, panelW: 480,
inY: 140, outY: 380, panelH: 180,
readoutY: 640, captionY: 720,
fontReadout: 18 }
: { vbW: 1080, vbH: 500,
panelX: 120, panelW: 840,
inY: 80, outY: 250, panelH: 140,
readoutY: 430, captionY: 470,
fontReadout: 18 };
// Log-linear sweep of x = ω/ω_c from 0.1 to 10 across the beat.
const HOLD = 0.6;
const TAIL = 0.6;
const SWEEP = Math.max(spriteDur - HOLD - TAIL, 1);
const sFrac = clamp((localTime - HOLD) / SWEEP, 0, 1);
const logX = -1 + 2 * sFrac;
const x = Math.pow(10, logX);
const amp = magLin(x);
const lead = phaseLeadRad(x);
const tWave = localTime * 1.2 * Math.PI * 2;
const cyclesVisible = 3;
const ampPx = G.panelH / 2 - 14;
const inPath = sinePath(G.panelX, G.inY + G.panelH / 2, G.panelW,
ampPx, cyclesVisible, tWave);
// V_out leads V_in: same time origin, but its phase is ahead by `lead`.
const outPath = sinePath(G.panelX, G.outY + G.panelH / 2, G.panelW,
ampPx * amp, cyclesVisible, tWave + lead);
return (