ehm

workshop/steps/12-overlap/README.md

@@ -0,0 +1,108 @@
+# Step 12 — The overlap trap (when the sweep has no answer)
+
+You found this one yourself, in the capstone: start a box **inside** another
+collider, press a key, and the position turns into `NaN`. That's not a typo in
+your code from steps 01–10 — the kernel is *correct* and still does this. It's a
+**blind spot in the whole approach**, and every real engine has to patch it.
+
+> This is a genuine hole in the finished kernel, shared by the capstone's
+> `game.js`. It is a *third* thing, separate from the two bugs you're hunting in
+> `engine/system/physics.ts` — no spoilers here.
+
+## Why the sweep can't see it
+
+Everything since step 05 answers one question: *"when, during this frame, will I
+**enter** the box?"* The whole ladder quietly assumes the answer lies in the
+future — that you start the frame **outside**.
+
+Start inside, and "when will I enter?" has no sane answer. The math doesn't
+refuse — it cheerfully reports that you entered *in the past*. Remember step 05:
+what sign does `entry` have when `p` is already between `min` and `max`? Every
+function above `sweepInterval` trusts that number without checking it.
+
+## The autopsy (do this before reading on)
+
+The `NaN` isn't born where you see it — it's the end of a chain, and each link
+is one line you wrote. Reproduce it in a scratch file and trace it:
+
+```ts
+import { moveAndSlide, sweptAABB } from "./given.ts";
+
+const box = { x: 10, y: 10, w: 2, h: 2 };
+const wall = { x: 0, y: 0, w: 32, h: 32 };
+console.log(sweptAABB(box, { x: 5, y: 0 }, wall));
+console.log(moveAndSlide(box, { x: 5, y: 0 }, [wall]));
+```
+
+Work through these **in order, predicting each answer before checking** (add
+`console.log`s inside your step-10 loop — it's your code, instrument it):
+
+1. What `time` does `sweptAABB` report? Now flip the velocity so the box moves
+   *away* from the wall — why do you *still* get a hit? (This is why you can't
+   even walk out of a wall you're stuck in.)
+2. Follow that `time` into the `else` branch of `moveAndSlide`. Three lines use
+   it. Which line is saved by the `Math.max(0, …)`? What happens to `vel` when
+   you `slide` against that normal? And what does `timeLeft = timeLeft * (1 - time)`
+   do when `time` is negative — shrink, or *grow*?
+3. Next iteration: `vel` is now `(0, 0)` but the loop keeps going. What does
+   `sweepInterval` return for `v = 0` while inside the interval (look at the
+   first branch — you wrote it in step 05)? So what is `entry` now, and what
+   does `timeLeft` become after multiplying by `(1 - entry)`?
+4. Last link. In JavaScript, what is `0 * Infinity`? That's `scale(vel, timeLeft)`
+   on iteration three. And once one `NaN` exists, every comparison against it is
+   `false` — so which branch of the loop does the poisoned move fall into, and
+   what does `pos = add(pos, move)` do then?
+
+Four links: **overlap → a hit in the past → dead velocity + growing time debt →
+`0 × ∞`**. When you can retell that chain from memory, you own it.
+
+## The fix: measure the overlap, push out
+
+The sweep is *continuous* detection — it prevents overlap but can't recover from
+it. So real engines pair it with a *discrete* partner: if you're already inside,
+don't ask "when do I enter?" — ask **"how deep am I, and what's the shortest way
+out?"**, then teleport that far and *only then* sweep.
+
+That shortest-way-out is the **penetration vector** (the famous *minimum
+translation vector*). For two overlapping AABBs there are exactly four escapes —
+push `a` left, right, up, or down until the boxes just separate:
+
+```
+outLeft  = (a.x + a.w) - b.x        // slide a left this far -> separated
+outRight = (b.x + b.w) - a.x        // slide a right this far -> separated
+outUp    = (a.y + a.h) - b.y
+outDown  = (b.y + b.h) - a.y
+```
+
+Two things to convince yourself of (don't skip — the tests check both):
+
+- The boxes strictly overlap **iff all four distances are positive**. (What is
+  `outLeft` when `a` sits fully to the right of `b`? When they merely touch?)
+- The answer is the **smallest** of the four, as a vector, with the sign that
+  moves `a` *away*. Smallest, because depenetration is a teleport the player can
+  see — one pixel of pop beats being flung across the room. Note this handles
+  `a` fully *swallowed* by `b` too, where "the overlap of the intervals" would
+  lie to you — one of the tests is exactly that case.
+
+## Task
+
+Two functions in `overlap.ts`:
+
+1. `penetrationVector(a, b)` — the smallest single-axis push that separates the
+   boxes, or `null` if they don't strictly overlap.
+2. `safeMoveAndSlide(box, v, walls)` — check every wall; if the box is inside
+   one, apply the push **plus an `EPSILON` of slack in the push direction**
+   (same idea as the backoff in the loop: land *flush* on the wall and next
+   frame's sweep starts half-trapped again). Then run the given `moveAndSlide`
+   from the safe position.
+
+```sh
+bun test workshop/steps/12-overlap
+```
+
+## Make the capstone unbreakable (optional)
+
+Port both functions into `11-capstone/game.js`, swap the `moveAndSlide` call for
+`safeMoveAndSlide`, and set the player's spawn inside the pillar. It should pop
+out and play on like nothing happened. Then the question you actually care
+about: does your *real* engine survive the same experiment?

workshop/steps/12-overlap/given.ts

@@ -0,0 +1,113 @@
+// The whole kernel you've built, steps 01-10, finished. Reuse it.
+export type Vec = { x: number; y: number };
+export type AABB = { x: number; y: number; w: number; h: number };
+export type Span = { entry: number; exit: number };
+export type Hit = { time: number; normal: Vec };
+
+/** A hair of slack so we stop just short of a wall instead of inside it. */
+export const EPSILON = 1e-4;
+
+export const vec = (x: number, y: number): Vec => ({ x, y });
+export const add = (a: Vec, b: Vec): Vec => ({ x: a.x + b.x, y: a.y + b.y });
+export const sub = (a: Vec, b: Vec): Vec => ({ x: a.x - b.x, y: a.y - b.y });
+export const scale = (a: Vec, s: number): Vec => ({ x: a.x * s, y: a.y * s });
+export const dot = (a: Vec, b: Vec): number => a.x * b.x + a.y * b.y;
+
+/** Step 04, finished. Strict overlap — merely touching edges is false. */
+export function aabbOverlap(a: AABB, b: AABB): boolean {
+	return (
+		a.x < b.x + b.w && b.x < a.x + a.w && a.y < b.y + b.h && b.y < a.y + a.h
+	);
+}
+
+export function sweepInterval(
+	p: number,
+	v: number,
+	min: number,
+	max: number,
+): Span | null {
+	if (v === 0) {
+		return min <= p && p <= max ? { entry: -Infinity, exit: Infinity } : null;
+	}
+	let t1 = (min - p) / v;
+	let t2 = (max - p) / v;
+	if (t1 > t2) {
+		[t1, t2] = [t2, t1];
+	}
+	return { entry: t1, exit: t2 };
+}
+
+export function rayVsAABB(p: Vec, v: Vec, box: AABB): Hit | null {
+	const spanX = sweepInterval(p.x, v.x, box.x, box.x + box.w);
+	const spanY = sweepInterval(p.y, v.y, box.y, box.y + box.h);
+	if (spanX === null || spanY === null) {
+		return null;
+	}
+	const entry = Math.max(spanX.entry, spanY.entry);
+	const exit = Math.min(spanX.exit, spanY.exit);
+	if (entry > exit || entry >= 1 || exit <= 0) {
+		return null;
+	}
+	const normal =
+		spanX.entry > spanY.entry
+			? { x: v.x > 0 ? -1 : 1, y: 0 }
+			: { x: 0, y: v.y > 0 ? -1 : 1 };
+	return { time: entry, normal };
+}
+
+export function sweptAABB(a: AABB, v: Vec, b: AABB): Hit | null {
+	const inflated: AABB = {
+		x: b.x - a.w,
+		y: b.y - a.h,
+		w: b.w + a.w,
+		h: b.h + a.h,
+	};
+	return rayVsAABB({ x: a.x, y: a.y }, v, inflated);
+}
+
+export function slide(v: Vec, normal: Vec): Vec {
+	return sub(v, scale(normal, dot(v, normal)));
+}
+
+/** Step 10, finished — your loop, exactly as you wrote it. */
+export function moveAndSlide(box: AABB, v: Vec, walls: AABB[]): Vec {
+	let pos: Vec = { x: box.x, y: box.y };
+	let vel: Vec = { x: v.x, y: v.y };
+
+	let timeLeft = 1;
+	let i = 0;
+	while (i++ < 4 && timeLeft > 0) {
+		const move = scale(vel, timeLeft);
+		let nearest: Hit = {
+			normal: { x: 0, y: 0 },
+			time: 2,
+		};
+
+		for (const wall of walls) {
+			const hit = sweptAABB(
+				{
+					x: pos.x,
+					y: pos.y,
+					w: box.w,
+					h: box.h,
+				},
+				move,
+				wall,
+			);
+			if (hit !== null) {
+				nearest = hit.time < nearest.time ? hit : nearest;
+			}
+		}
+
+		if (nearest.time === 2) {
+			pos = add(pos, move);
+			break;
+		} else {
+			pos = add(pos, scale(move, Math.max(0, nearest.time - EPSILON)));
+			vel = slide(vel, nearest.normal);
+			timeLeft = timeLeft * (1 - nearest.time);
+		}
+	}
+
+	return pos;
+}

workshop/steps/12-overlap/overlap.test.ts

@@ -0,0 +1,102 @@
+import { expect, test } from "bun:test";
+import { type AABB, aabbOverlap, vec } from "./given.ts";
+import { penetrationVector, safeMoveAndSlide } from "./overlap.ts";
+
+// --- penetrationVector -------------------------------------------------------
+
+test("separated boxes -> null", () => {
+	const a: AABB = { x: 0, y: 0, w: 2, h: 2 };
+	const b: AABB = { x: 5, y: 5, w: 2, h: 2 };
+	expect(penetrationVector(a, b)).toBeNull();
+});
+
+test("touching edges (no strict overlap) -> null", () => {
+	const a: AABB = { x: 0, y: 0, w: 2, h: 2 };
+	const b: AABB = { x: 2, y: 0, w: 2, h: 2 };
+	expect(penetrationVector(a, b)).toBeNull();
+});
+
+test("shallow on x, deep on y -> pushes left (the short way out)", () => {
+	// a pokes 1 unit into b's left side; getting out via y would cost 6
+	const a: AABB = { x: 0, y: 0, w: 4, h: 4 };
+	const b: AABB = { x: 3, y: -2, w: 4, h: 8 };
+	expect(penetrationVector(a, b)).toEqual(vec(-1, 0));
+});
+
+test("mirrored -> pushes right", () => {
+	const a: AABB = { x: 4, y: 0, w: 4, h: 4 };
+	const b: AABB = { x: 1, y: -2, w: 4, h: 8 };
+	expect(penetrationVector(a, b)).toEqual(vec(1, 0));
+});
+
+test("shallow on y -> pushes up", () => {
+	const a: AABB = { x: 0, y: 0, w: 4, h: 4 };
+	const b: AABB = { x: -2, y: 3, w: 8, h: 4 };
+	expect(penetrationVector(a, b)).toEqual(vec(0, -1));
+});
+
+test("fully contained -> still gets out (all the way past the nearest edge)", () => {
+	// a is swallowed by b: the push must clear the whole distance to an edge,
+	// not just the 2-unit "overlap" of the intervals
+	const a: AABB = { x: 10, y: 10, w: 2, h: 2 };
+	const b: AABB = { x: 0, y: 0, w: 32, h: 32 };
+	const p = penetrationVector(a, b);
+	expect(p).not.toBeNull();
+	if (p !== null) {
+		const moved: AABB = { ...a, x: a.x + p.x, y: a.y + p.y };
+		expect(aabbOverlap(moved, b)).toBe(false);
+	}
+});
+
+// --- safeMoveAndSlide --------------------------------------------------------
+
+const player: AABB = { x: 0, y: 0, w: 2, h: 2 };
+
+test("no overlap at start -> behaves exactly like moveAndSlide", () => {
+	// step 10's diagonal test: x blocked at 3, y keeps going
+	const walls: AABB[] = [{ x: 5, y: -10, w: 2, h: 40 }];
+	const p = safeMoveAndSlide(player, vec(10, 10), walls);
+	expect(p.x).toBeCloseTo(3);
+	expect(p.y).toBeCloseTo(10);
+});
+
+test("starting inside a wall -> position stays a number", () => {
+	const inside: AABB = { x: 10, y: 10, w: 2, h: 2 };
+	const wall: AABB = { x: 0, y: 0, w: 32, h: 32 };
+	const p = safeMoveAndSlide(inside, vec(5, 0), [wall]);
+	expect(Number.isFinite(p.x)).toBe(true);
+	expect(Number.isFinite(p.y)).toBe(true);
+});
+
+test("starting inside a wall -> ends free of it", () => {
+	const inside: AABB = { x: 10, y: 10, w: 2, h: 2 };
+	const wall: AABB = { x: 0, y: 0, w: 32, h: 32 };
+	const p = safeMoveAndSlide(inside, vec(5, 0), [wall]);
+	expect(aabbOverlap({ ...inside, x: p.x, y: p.y }, wall)).toBe(false);
+});
+
+test("overlapping and walking AWAY -> actually gets away", () => {
+	// pokes 1 into the wall's left side; pushed out to x≈8, then walks -5
+	const stuck: AABB = { x: 9, y: 0, w: 2, h: 2 };
+	const wall: AABB = { x: 10, y: -5, w: 4, h: 10 };
+	const p = safeMoveAndSlide(stuck, vec(-5, 0), [wall]);
+	expect(p.x).toBeCloseTo(3);
+	expect(p.y).toBeCloseTo(0);
+});
+
+test("overlapping and pushing IN -> freed, then held at the wall", () => {
+	// pushed out to x≈8 first; the sweep then stops the rightward move there
+	const stuck: AABB = { x: 9, y: 0, w: 2, h: 2 };
+	const wall: AABB = { x: 10, y: -5, w: 4, h: 10 };
+	const p = safeMoveAndSlide(stuck, vec(5, 0), [wall]);
+	expect(p.x).toBeCloseTo(8);
+	expect(p.y).toBeCloseTo(0);
+});
+
+test("overlapping and pushing IN (rtl) -> freed, then held at the wall", () => {
+	const stuck: AABB = { x: 9, y: 0, w: 2, h: 2 };
+	const wall: AABB = { x: 10, y: -5, w: 4, h: 10 };
+	const p = safeMoveAndSlide(stuck, vec(-5, 0), [wall]);
+	expect(p.x).toBeCloseTo(3);
+	expect(p.y).toBeCloseTo(0);
+});

workshop/steps/12-overlap/overlap.ts

@@ -0,0 +1,47 @@
+import { type AABB, EPSILON, moveAndSlide, type Vec } from "./given.ts";
+
+/**
+ * How to push `a` OUT of `b`, by the smallest possible single-axis move.
+ *
+ * Returns the push as a vector to ADD to a's position, or null if the boxes
+ * don't strictly overlap (merely touching edges is not overlapping).
+ *
+ * There are four ways out (left, right, up, down) — measure all four
+ * distances and return the shortest one. See the README.
+ */
+export function penetrationVector(a: AABB, b: AABB): Vec | null {
+	const outLeft = a.x + a.w - b.x;
+	const outRight = b.x + b.w - a.x;
+	const outUp = a.y + a.h - b.y;
+	const outDown = b.y + b.h - a.y;
+
+	const minX = Math.min(outLeft, outRight);
+	const minY = Math.min(outUp, outDown);
+
+	if (minX > 0 && minY > 0) {
+		return minX > minY
+			? { x: 0, y: outDown > outUp ? -minY : minY }
+			: { x: outLeft > outRight ? minX : -minX, y: 0 };
+	}
+
+	return null;
+}
+
+/**
+ * moveAndSlide, but immune to the overlap trap: first push `box` out of any
+ * wall it is already inside (plus an EPSILON of slack, same idea as the
+ * backoff in the loop), THEN run the normal sweep loop from the safe spot.
+ *
+ * Everything you need is penetrationVector above and given.ts.
+ */
+export function safeMoveAndSlide(box: AABB, v: Vec, walls: AABB[]): Vec {
+	for (const wall of walls) {
+		const pv = penetrationVector(box, wall);
+		if (pv) {
+			box.x += pv.x > 0 ? pv.x + EPSILON : pv.x - EPSILON;
+			box.y += pv.y > 0 ? pv.y + EPSILON : pv.y - EPSILON;
+		}
+	}
+
+	return moveAndSlide(box, v, walls);
+}