// Euler vs RK4: Same Step Size, Different Curves — Manimo lesson scene.
// Chapter 4 / week 10 of mat2b. Pairs with `euler-step`: same ODE, same h,
// but classical Runge-Kutta uses four slope samples per step and lands on
// top of the true curve while Euler drifts.
//
// Concrete ODE (reused from euler-step):
// y' = y − t + 0.4
// y(0) = 0.4
//
// Beats:
// 0– 4.8 Manimo hook
// 4.8–16 Side-by-side: Euler drifts (left) vs RK4 hugs the truth (right)
// 16–26 Zoom: the four slope samples inside one RK4 step
// 26–35 Log-log error plot — slopes 1 and 4
// 35–end Hero outro
//
// Sprite ranges are placeholder until `npm run audio` rewires.
//
// Colour discipline:
// chalk-300 slope-field strokes, faint reference grid
// chalk-200 axes
// violet-400 the true solution curve (the reference)
// rose-400 Euler march / Euler error line
// emerald-400 RK4 march / RK4 error line / "verified" accent
// amber-400 live highlight: the slope sample currently being read
// amber-300 takeaway accent
const SCENE_DURATION = 53;
const NARRATION = [
"Same problem. Same step size. Why does one method hug the curve while the other drifts?",
"On the left, Euler walks one tangent per step. On the right, R K four samples four slopes per step and averages them. With the same step size, R K four lands almost on the true curve.",
"Inside one R K four step: sample the slope at the start, twice in the middle, and once at the end. The next point is the start plus h times a weighted average of these four slopes.",
"Halve the step size. Euler's error halves. R K four's error drops by a factor of sixteen. On a log log plot of error against step size, the slopes are one and four — the orders of the two methods.",
"More work per step buys you a much faster fall in error. For the same accuracy, higher order means fewer steps.",
];
const NARRATION_AUDIO = 'audio/euler-vs-rk4/scene.mp3';
// ─── ODE + integrators ─────────────────────────────────────────────────────
function f(t, y) { return y - t + 0.4; }
const Y0 = 0.4;
const T_MIN = 0, T_MAX = 5;
const Y_MIN = -1, Y_MAX = 3;
// Reference truth via tiny RK2 (visually indistinguishable from the analytic
// solution at this scale; saves a closed-form solver).
function truePolylinePoints(originX, originY, unitX, unitY, steps = 200) {
const dt = (T_MAX - T_MIN) / steps;
let t = T_MIN, y = Y0;
const pts = [];
pts.push({ sx: originX + t * unitX, sy: originY - y * unitY });
for (let i = 0; i < steps; i++) {
const k1 = f(t, y);
const k2 = f(t + dt / 2, y + (dt / 2) * k1);
y = y + dt * k2;
t = t + dt;
pts.push({ sx: originX + t * unitX, sy: originY - y * unitY });
}
return pts;
}
function pointsToPath(pts) {
return pts.map((p, i) => `${i === 0 ? 'M' : 'L'} ${p.sx.toFixed(1)} ${p.sy.toFixed(1)}`).join(' ');
}
function eulerPath(h) {
let t = T_MIN, y = Y0;
const out = [{ t, y }];
while (t < T_MAX - 1e-9) {
y = y + h * f(t, y);
t = t + h;
out.push({ t, y });
}
return out;
}
function rk4Path(h) {
let t = T_MIN, y = Y0;
const out = [{ t, y }];
while (t < T_MAX - 1e-9) {
const k1 = f(t, y);
const k2 = f(t + h / 2, y + (h / 2) * k1);
const k3 = f(t + h / 2, y + (h / 2) * k2);
const k4 = f(t + h, y + h * k3);
y = y + (h / 6) * (k1 + 2 * k2 + 2 * k3 + k4);
t = t + h;
out.push({ t, y });
}
return out;
}
// Truth value at a given t for error comparison.
function truthAt(tEnd, sub = 200) {
let t = T_MIN, y = Y0;
const dt = (tEnd - T_MIN) / sub;
for (let i = 0; i < sub; i++) {
const k1 = f(t, y);
const k2 = f(t + dt / 2, y + (dt / 2) * k1);
y = y + dt * k2;
t = t + dt;
}
return y;
}
// ─── Shared SVG helpers ───────────────────────────────────────────────────
function GridMaskedSvg({ maskId, cx = '48%', cy = '54%', r = '60%', children }) {
const gradId = `${maskId}-grad`;
return (
);
}
function SoftPanel({ children, right = 64, top = 196, width = 380, left, bottom, transform }) {
const positioning = left != null || bottom != null
? { left, bottom, top: top != null && bottom == null ? top : undefined, right: undefined, transform }
: { right, top, transform };
return (