// Directional Derivative: A Tilted Slice — Manimo lesson scene.
// Chapter 5 / week 12 of mat2b. The directional derivative is the slope
// of the curve you get when you cut the surface with a vertical plane
// through the chosen direction. Algebraically it's the dot product of
// the gradient with the unit direction.
//
// Beats (placeholder timings — re-wired by `npm run audio`):
// 0– 4.5 Manimo enters
// 4.5–14 Setup — contour map + two partial-derivative arrows
// 14–23 Pick a unit direction u; trace the slice along u
// 23–32 Reveal the formula D_u f = grad f dot u
// 32–end Hero outro
//
// Colour discipline:
// chalk-300 reference contour lines + faint background marks
// chalk-200 axes, angle arc
// violet-400 f_x partial-derivative arrow
// teal-400 f_y partial-derivative arrow
// amber-400 current direction u (the object being acted on)
// rose-400 gradient vector (a derived quantity, perpendicular to contours)
// amber-300 takeaway / closing-line accent
const SCENE_DURATION = 48;
const NARRATION = [
"How fast does a hill climb if you walk it not east, not north, but at an angle? That's the directional derivative.",
"Here is a surface, z equals f of x comma y. At any point we already know two slopes — the partial derivatives — one along the x axis, one along the y axis.",
"Now pick any unit direction u. Walk a tiny step from the point in direction u. The slope of the surface along that step is the directional derivative.",
"The shortcut: take the gradient of f at the point, then dot it with u. The directional derivative of f in direction u equals the gradient of f dotted with u.",
"So every direction has its own slope, and the gradient is the one direction where that slope is largest.",
];
const NARRATION_AUDIO = 'audio/directional-derivative/scene.mp3';
// ─── Coordinate system ────────────────────────────────────────────────────
// Math origin sits left of centre to leave the right side for the panel.
const ORIGIN_X = 460;
const ORIGIN_Y = 380;
const UNIT = 70;
const X_MIN = -3.4, X_MAX = 3.4;
const Y_MIN = -2.6, Y_MAX = 2.6;
// Sample surface: f(x, y) = 0.35 (x^2 + 0.7 y^2) - 0.4 x y + 0.1 x — a tilted
// bowl, so contours are tilted ellipses and the gradient is not axis-aligned.
function f(x, y) {
return 0.35 * (x * x + 0.7 * y * y) - 0.4 * x * y + 0.1 * x;
}
function fx(x, y) {
return 0.70 * x - 0.4 * y + 0.1;
}
function fy(x, y) {
return 0.49 * y - 0.4 * x;
}
// Sample point at (1.4, 0.6) — clearly off-axis, gradient points up-right.
const PX = 1.4;
const PY = 0.6;
// Unit direction u — pick something not aligned with either axis or gradient
// so the geometry reads (angle of about 18 degrees above horizontal).
const U_ANG = 18 * Math.PI / 180;
const UX = Math.cos(U_ANG);
const UY = Math.sin(U_ANG);
function toSvg(x, y) {
return { sx: ORIGIN_X + x * UNIT, sy: ORIGIN_Y - y * UNIT };
}
function GridMaskedSvg({ maskId, children }) {
const gradId = `${maskId}-grad`;
return (
);
}
function Axes({ opacity = 1 }) {
const left = toSvg(X_MIN, 0), right = toSvg(X_MAX, 0);
const bottom = toSvg(0, Y_MIN), top = toSvg(0, Y_MAX);
return (
);
}
// Build contour lines for the surface by marching squares on a regular grid.
// Returns a list of svg path d-strings, one per contour level.
function contourPaths(levels) {
const NX = 80, NY = 64;
const dx = (X_MAX - X_MIN) / NX;
const dy = (Y_MAX - Y_MIN) / NY;
// Pre-compute f on a grid.
const grid = new Array(NX + 1);
for (let i = 0; i <= NX; i++) {
grid[i] = new Array(NY + 1);
const x = X_MIN + i * dx;
for (let j = 0; j <= NY; j++) {
const y = Y_MIN + j * dy;
grid[i][j] = f(x, y);
}
}
const out = [];
for (const c of levels) {
const segments = [];
for (let i = 0; i < NX; i++) {
for (let j = 0; j < NY; j++) {
const x0 = X_MIN + i * dx, y0 = Y_MIN + j * dy;
const x1 = x0 + dx, y1 = y0 + dy;
const a = grid[i][j], b = grid[i + 1][j],
cc = grid[i + 1][j + 1], d = grid[i][j + 1];
// For each of the 4 edges, find crossings with level c.
const pts = [];
const lerp = (va, vb, xa, ya, xb, yb) => {
const t = (c - va) / (vb - va);
return [xa + t * (xb - xa), ya + t * (yb - ya)];
};
if ((a - c) * (b - c) < 0) pts.push(lerp(a, b, x0, y0, x1, y0));
if ((b - c) * (cc - c) < 0) pts.push(lerp(b, cc, x1, y0, x1, y1));
if ((cc - c) * (d - c) < 0) pts.push(lerp(cc, d, x1, y1, x0, y1));
if ((d - c) * (a - c) < 0) pts.push(lerp(d, a, x0, y1, x0, y0));
if (pts.length >= 2) {
const p0 = toSvg(pts[0][0], pts[0][1]);
const p1 = toSvg(pts[1][0], pts[1][1]);
segments.push(`M ${p0.sx.toFixed(1)} ${p0.sy.toFixed(1)} L ${p1.sx.toFixed(1)} ${p1.sy.toFixed(1)}`);
}
}
}
out.push(segments.join(' '));
}
return out;
}
const CONTOUR_LEVELS = [0.1, 0.3, 0.6, 1.0, 1.5, 2.1, 2.8];
function Contours({ opacity = 0.55, color = 'var(--chalk-300)' }) {
const paths = contourPaths(CONTOUR_LEVELS);
return (
{paths.map((d, i) => (
))}
);
}
// Reusable arrow primitive (vector from a base point with a tip and label).
function Arrow({
bx, by, tx, ty, color, label = null, labelDX = 0, labelDY = 0,
strokeWidth = 3.6, headLen = 13, headHalf = 7, glow = 0,
}) {
const o = toSvg(bx, by);
const tip = toSvg(tx, ty);
const dx = tip.sx - o.sx, dy = tip.sy - o.sy;
const len = Math.hypot(dx, dy);
if (len < 0.5) return null;
const ux = dx / len, uy = dy / len;
const baseX = tip.sx - ux * headLen;
const baseY = tip.sy - uy * headLen;
const perpX = -uy, perpY = ux;
const lx = baseX + perpX * headHalf, ly = baseY + perpY * headHalf;
const rx = baseX - perpX * headHalf, ry = baseY - perpY * headHalf;
return (
{glow > 0 && (
)}
{label != null && (
{label}
)}
);
}
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}
);
}
// ─── Scene ────────────────────────────────────────────────────────────────
function Scene() {
return (
);
}
// ─── Beat 1: Manimo intro ─────────────────────────────────────────────────
function ManimoBubbleIntro() {
return (
A tilted slope.
);
}
// ─── Beat 2: Surface + partials ───────────────────────────────────────────
function SurfaceBeat() {
// Arrow lengths scaled so partials are clearly distinct from a unit vector.
const fxAtP = fx(PX, PY);
const fyAtP = fy(PX, PY);
const xArrowEndX = PX + 0.9; // along +x
const xArrowEndY = PY;
const yArrowEndX = PX;
const yArrowEndY = PY + 0.9; // along +y
return (
<>
{/* The marked point P. */}
P
{/* f_x partial in +x direction. */}
{/* f_y partial in +y direction. */}
partial derivatives
Two slopes we already know.
fx walks east.
fy walks north.
What about every other direction?
);
}
// ─── Beat 3: Pick a direction u, draw the slice ───────────────────────────
function DirectionBeat() {
const { localTime } = useSprite();
// Slice line through P along u, drawn from t = -2 to t = +2 (math units).
const sliceLen = 2.0;
const aX = PX - UX * sliceLen, aY = PY - UY * sliceLen;
const bX = PX + UX * sliceLen, bY = PY + UY * sliceLen;
const a = toSvg(aX, aY), b = toSvg(bX, bY);
// Trace the slice line in over ~1.6 s starting at delay 2.0.
const traceT = clamp((localTime - 2.0) / 1.6, 0, 1);
return (
<>
{/* Faded partials from the previous beat. */}
{/* Point P. */}
{/* Slice trace — dashed amber line along u, animated. */}
{traceT > 0 && (() => {
// Interpolate from P outward in both directions.
const aT = {
sx: toSvg(PX, PY).sx + (a.sx - toSvg(PX, PY).sx) * traceT,
sy: toSvg(PX, PY).sy + (a.sy - toSvg(PX, PY).sy) * traceT,
};
const bT = {
sx: toSvg(PX, PY).sx + (b.sx - toSvg(PX, PY).sx) * traceT,
sy: toSvg(PX, PY).sy + (b.sy - toSvg(PX, PY).sy) * traceT,
};
return (
);
})()}
{/* Unit direction u. */}
a slice along u
Cut the surface along u.
The slope of that cut curve at P is
Du f.
‖u‖ = 1
);
}
// ─── Beat 4: Reveal the formula ───────────────────────────────────────────
function FormulaBeat() {
const { localTime } = useSprite();
const fxAtP = fx(PX, PY);
const fyAtP = fy(PX, PY);
// Scale gradient so it draws clearly but not too long.
const gLen = Math.hypot(fxAtP, fyAtP);
const gScale = 1.1 / Math.max(gLen, 0.001);
const gX = PX + fxAtP * gScale;
const gY = PY + fyAtP * gScale;
// Tiny angle arc between grad f and u.
const arcR = 38;
const angU = U_ANG;
const angG = Math.atan2(fyAtP, fxAtP);
const startAng = Math.min(angU, angG);
const endAng = Math.max(angU, angG);
const arcCenter = toSvg(PX, PY);
const arcStart = {
x: arcCenter.sx + arcR * Math.cos(startAng),
y: arcCenter.sy - arcR * Math.sin(startAng),
};
const arcEnd = {
x: arcCenter.sx + arcR * Math.cos(endAng),
y: arcCenter.sy - arcR * Math.sin(endAng),
};
const arcSweep = (endAng - startAng) > Math.PI ? 1 : 0;
return (
<>
{/* Slice line stays. */}
{(() => {
const sliceLen = 2.0;
const a = toSvg(PX - UX * sliceLen, PY - UY * sliceLen);
const b = toSvg(PX + UX * sliceLen, PY + UY * sliceLen);
return (
);
})()}
{/* Point P. */}
{/* Unit direction u, faded. */}
{/* Gradient arrow. */}
{/* Angle arc. */}
θ
the shortcutDu f
=
∇f
·
u
Project the gradient onto the direction.
= ‖∇f‖ cos θ
);
}
// ─── Beat 5: Hero outro ───────────────────────────────────────────────────
function HeroOutro() {
return (
the takeaway
One gradient, every direction.
Du f = ∇f · u — the slope along u.
steepest ascent → u = ∇f / ‖∇f‖