// Multivariable Limits Fail Along Different Paths — Manimo lesson scene.
// Chapter 5 / week 11 of mat2b. Pure visual proof that a two-variable limit
// can fail to exist even when every directional sub-limit is well defined:
// two paths to the origin give two different values for
// f(x, y) = (xy + y³) / (x² + y²).
//
// Beats:
// 0– 4.4 Manimo hook — every direction has a vote
// 4.4–11 Introduce f, show its level structure on the xy-plane
// 11–19 Path along the x-axis: limit = 0
// 19–28 Path along y = x: limit = 1/2
// 28–end Hero outro — limit does not exist
//
// Sprite ranges are placeholder until `npm run audio` rewires.
//
// Colour discipline:
// chalk-300 axes, faint grid
// chalk-200 axis labels
// violet-400 path along x-axis (limit = 0)
// amber-400 path along y = x (limit = 1/2)
// rose-400 contradiction accent
// amber-300 takeaway accent
const SCENE_DURATION = 58;
const NARRATION = [
"In one variable, a limit just has to agree from the left and from the right. In two variables, every direction has a vote.",
"Consider f of x comma y, equal to x y plus y cubed, divided by x squared plus y squared. The denominator goes to zero at the origin. Does f have a limit there?",
"Walk in along the x-axis. Set y to zero. Then f reduces to x times zero plus zero, divided by x squared. That is zero. The limit along this path is zero.",
"Now walk in along the diagonal where y equals x. Substitute: the numerator becomes x squared plus x cubed; the denominator is two x squared. As x goes to zero, the ratio approaches one half. The limit along this path is one half.",
"Two different answers along two different paths. So the two variable limit at the origin does not exist.",
];
const NARRATION_AUDIO = 'audio/multivariable-limit-paths/scene.mp3';
// ─── Plane coordinates ────────────────────────────────────────────────────
const ORIGIN_X = 470;
const ORIGIN_Y = 380;
const UNIT = 110;
function toSvg(x, y) {
return { sx: ORIGIN_X + x * UNIT, sy: ORIGIN_Y - y * UNIT };
}
// The function under study.
function fxy(x, y) {
const denom = x * x + y * y;
if (denom < 1e-12) return 0;
return (x * y + y * y * y) / denom;
}
// ─── Shared helpers ───────────────────────────────────────────────────────
function GridMaskedSvg({ maskId, cx = '38%', 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 (
{children}
);
}
function PlaneAxes() {
const left = toSvg(-2.6, 0), right = toSvg(2.6, 0);
const bot = toSvg(0, -2), top = toSvg(0, 2);
return (
xy
);
}
// Coloured isolines based on the value of f. Faint hint of the function's
// path-dependent texture without committing to a full surface plot.
function LevelHints() {
// Sample a grid of dots, colour by f value (clamped to [0, 0.5]).
const dots = [];
const N = 32;
for (let i = 0; i < N; i++) {
for (let j = 0; j < N; j++) {
const x = -2.2 + (i + 0.5) * (4.4 / N);
const y = -1.6 + (j + 0.5) * (3.2 / N);
if (Math.hypot(x, y) < 0.18) continue;
const v = fxy(x, y);
const tNorm = clamp((v - (-0.2)) / (0.6 - (-0.2)), 0, 1);
// Map tNorm to a chalk colour intensity.
const c = toSvg(x, y);
// Two-tone hint: positive values toward amber, negative toward rose.
let col;
let alpha = 0.32;
if (v > 0.02) { col = 'var(--amber-400)'; alpha = 0.10 + Math.min(0.36, v); }
else if (v < -0.02) { col = 'var(--rose-400)'; alpha = 0.10 + Math.min(0.36, -v); }
else { col = 'var(--chalk-300)'; alpha = 0.18; }
dots.push(
);
}
}
return {dots};
}
// ─── Scene ────────────────────────────────────────────────────────────────
function Scene() {
return (
);
}
// ─── Beat 1: Manimo intro ─────────────────────────────────────────────────
function ManimoBubbleIntro() {
return (
Every direction has a vote.
);
}
// ─── Beat 2: Introduce f ──────────────────────────────────────────────────
function IntroFBeat() {
return (
<>
{/* Highlight the origin — the suspicious point. */}
(0, 0)the function
f (x, y) = xy + y³x² + y²
The denominator vanishes at the origin.
Does f have a limit there?
);
}
// A path of moving samples toward the origin.
function PathSamples({ pathFn, color, count = 7, revealAt = 0.4, localTime }) {
// pathFn(s) returns {x, y} where s ranges over (1, 0]; s=0 means at origin.
const samples = [];
for (let i = 0; i < count; i++) {
const s = 1 - i / (count - 0.5);
const { x, y } = pathFn(s);
samples.push({ x, y, s });
}
return (
{samples.map((p, i) => {
const appear = revealAt + i * 0.35;
if (localTime < appear) return null;
const c = toSvg(p.x, p.y);
const fade = clamp((localTime - appear) / 0.35, 0, 1);
return (
);
})}
);
}
// ─── Beat 3: Path along the x-axis ────────────────────────────────────────
function PathXAxisBeat() {
const { localTime } = useSprite();
return (
<>
{/* Arrow along x-axis toward origin */}
{/* Manual arrowhead */}
{(() => {
const a = toSvg(0.15, 0);
const b = toSvg(0.35, 0);
const dx = a.sx - b.sx, dy = 0;
const len = Math.hypot(dx, dy);
const ux = dx / len, uy = dy / len;
const baseX = a.sx - ux * 14;
const baseY = a.sy + 24 - uy * 14;
const perpX = -uy, perpY = ux;
const lx = baseX + perpX * 7, ly = baseY + perpY * 7;
const rx = baseX - perpX * 7, ry = baseY - perpY * 7;
return (
);
})()}
y = 0
{/* Sample dots marching in */}
({ x: 2.0 * s + 0.08, y: 0 })}
color="var(--violet-400)"
revealAt={1.2}
localTime={localTime}
/>
path 1 — along the x-axis
Set y = 0, then send x → 0.
f (x, 0) = 0x² = 0
limit along path 1 = 0
);
}
// ─── Beat 4: Path along y = x ─────────────────────────────────────────────
function PathDiagonalBeat() {
const { localTime } = useSprite();
return (
<>
{/* Faded path 1 result, just dots */}
({ x: 2.0 * s + 0.08, y: 0 })}
color="var(--violet-400)"
revealAt={0.0}
localTime={localTime + 10} // pretend they're all already there, faded
/>
{/* Diagonal arrow along y = x toward origin */}
{(() => {
const a = toSvg(0.15, 0.15);
const b = toSvg(0.35, 0.35);
const dx = a.sx - b.sx, dy = a.sy - b.sy;
const len = Math.hypot(dx, dy);
const ux = dx / len, uy = dy / len;
const baseX = a.sx - ux * 14;
const baseY = a.sy - uy * 14;
const perpX = -uy, perpY = ux;
const lx = baseX + perpX * 7, ly = baseY + perpY * 7;
const rx = baseX - perpX * 7, ry = baseY - perpY * 7;
return (
);
})()}
y = x ({ x: 1.6 * s + 0.08, y: 1.6 * s + 0.08 })}
color="var(--amber-400)"
revealAt={1.2}
localTime={localTime}
/>
path 2 — along y = x
Set y = x, then send x → 0.
f (x, x) = x² + x³2x²
→
12
limit along path 2 = 1/2
0 ≠ 1/2 — the two paths disagree.
);
}
// ─── Beat 5: Hero outro ───────────────────────────────────────────────────
function HeroOutro() {
return (
two paths, two values
The limit does not exist.
Every direction must agree, or there is no limit at all.
path 1 → 0 · path 2 → 1/2