@gtanczyk/diorama 0.0.0-stage → 0.1.0

package/app/src/play/glow.ts

@@ -0,0 +1,187 @@
+// The painted lights of a place (layout.lights) come alive: a window's glow breathes, a lantern or a fire
+// flickers, a town's far lights twinkle, a lighthouse lamp turns its beam round. Read by the light's name, so
+// any new world gets it with no extra step and no model call.
+import { z } from 'zod';
+import { hashSeed } from './weather.ts';
+
+export type GlowKind = 'beam' | 'flame' | 'window' | 'twinkle' | 'lamp';
+
+export const Glow = z.object({ key: z.string(), x: z.number(), y: z.number(), colour: z.string(), kind: z.enum(['beam', 'flame', 'window', 'twinkle', 'lamp']) });
+export type Glow = z.infer<typeof Glow>;
+
+// First match wins, the most telling words first: a lighthouse's windows are windows, not its beam, and a far lamp
+// post is a lamp, not a town's twinkle.
+const KINDS: Array<[GlowKind, RegExp]> = [
+  ['beam', /\b(beam|beacon|searchlight)\b/],
+  ['window', /\b(windows?|porthole|shopfront|doorway|glass)\b/],
+  ['beam', /\blighthouse\b/],
+  ['flame', /\b(fire|flame|candles?|torch|campfire|hearth|oven|brazier|lantern|embers?)\b/],
+  ['lamp', /\b(lamps?|lamppost|streetlamp|streetlight)\b/],
+  ['twinkle', /\b(town|city|village|distant|far|stars?|lights)\b/],
+];
+
+/** What kind of light a layout light is, by the words of its key ("hut-window", "lighthouse-lamp"). */
+export function glowKind(key: string): GlowKind {
+  const words = key.toLowerCase().replace(/[-_]+/g, ' ');
+  return KINDS.find(([, re]) => re.test(words))?.[0] ?? 'lamp';
+}
+
+export function glowsOf(lights: Array<{ key: string; x: number; y: number; colour: string }>): Glow[] {
+  return lights.map((l) => ({ ...l, kind: glowKind(l.key) }));
+}
+
+/**
+ * How bright a glow is at time t, 0..1 around its rest of ~0.5: slow breathing for a window, a quick restless
+ * flicker for a flame, short sparkles for far lights. Each light has its own phase, so a row of windows never
+ * pulses together.
+ */
+export function glowLevel(g: Glow, t: number): number {
+  const s = (hashSeed(g.key) % 1000) / 1000 * Math.PI * 2;
+  switch (g.kind) {
+    case 'flame': return 0.5 + 0.22 * Math.sin(t * 7.3 + s) + 0.14 * Math.sin(t * 12.9 + 2 * s) + 0.1 * Math.sin(t * 2.3 + s);
+    case 'window': return 0.5 + 0.18 * Math.sin(t * 0.7 + s) + 0.08 * Math.sin(t * 2.9 + 3 * s) + (Math.sin(t * 0.21 + s) > 0.97 ? -0.25 : 0);
+    case 'twinkle': return 0.5 + 0.3 * Math.sin(t * 3.7 + s) * Math.sin(t * 1.3 + 2 * s);
+    case 'beam': return 0.5 + 0.15 * Math.sin(t * 1.1 + s);
+    // A lamp breathes slowly and visibly, with a faint quick shiver in its paper.
+    default: return 0.5 + 0.26 * Math.sin(t * 1.9 + s) + 0.07 * Math.sin(t * 6.3 + 2 * s) + 0.04 * Math.sin(t * 17 + s);
+  }
+}
+
+/** A turning beam: its angle at time t (one turn per BEAM_TURN s, from the light's own phase). */
+export const BEAM_TURN = 3.6;
+export function beamAngle(g: Glow, t: number): number {
+  return ((hashSeed(g.key) % 360) * Math.PI) / 180 + (t / BEAM_TURN) * Math.PI * 2;
+}
+
+/**
+ * The light paper a lighthouse lamp was painted with: golden rays bursting round it, or a tissue-paper beam
+ * reaching out of it. Bright warm paint joined to the ring round the lamp (not the lamp itself, which stays
+ * painted), leaving out other lights' own halos. The runtime lifts it off the painting as a card and turns it,
+ * so the painted light moves instead of a second beam being laid over a frozen one. Pixels only.
+ *
+ * `px` is RGBA at full frame size. The result's alpha is per pixel of `box` ([x0, y0, x1, y1), row-major).
+ */
+export type BeamPaper = { box: [number, number, number, number]; alpha: Float32Array; hole: Uint8Array; burst: boolean; share: number };
+export function beamPaper(px: Uint8ClampedArray | Uint8Array, W: number, H: number, lamp: { x: number; y: number }, others: Array<{ x: number; y: number }> = []): BeamPaper | undefined {
+  const k = new Float32Array(W * H);
+  for (let i = 0; i < W * H; i++) {
+    const [r, g, b] = [px[i * 4], px[i * 4 + 1], px[i * 4 + 2]];
+    const luma = 0.3 * r + 0.59 * g + 0.11 * b;
+    k[i] = Math.max(0, Math.min(1, (luma - 150) / 40)) * Math.max(0, Math.min(1, (r - b - 30) / 50));
+  }
+  const near = (x: number, y: number) => Math.hypot(x - lamp.x, y - lamp.y);
+  const away = (x: number, y: number) => near(x, y) > LAMP_KEPT && !others.some((o) => Math.hypot(x - o.x, y - o.y) < 90);
+  // Flood from the ring round the lamp through paper that is clearly lit (k over a quarter).
+  const inside = new Uint8Array(W * H);
+  const stack: number[] = [];
+  const [cx, cy] = [Math.round(lamp.x), Math.round(lamp.y)];
+  for (let y = Math.max(0, cy - SEED_RING); y < Math.min(H, cy + SEED_RING); y++) for (let x = Math.max(0, cx - SEED_RING); x < Math.min(W, cx + SEED_RING); x++) {
+    const i = y * W + x;
+    if (k[i] > 0.25 && near(x, y) < SEED_RING && away(x, y)) { inside[i] = 1; stack.push(i); }
+  }
+  while (stack.length) {
+    const i = stack.pop()!;
+    const x = i % W, y = (i - x) / W;
+    for (let dy = -1; dy <= 1; dy++) for (let dx = -1; dx <= 1; dx++) {
+      const u = x + dx, v = y + dy;
+      if (u < 0 || v < 0 || u >= W || v >= H) continue;
+      const j = v * W + u;
+      if (!inside[j] && k[j] > 0.25 && away(u, v)) { inside[j] = 1; stack.push(j); }
+    }
+  }
+  // Its soft rim too: the faint paper two pixels round what was found; and the hole it leaves wider still, taking
+  // the paper's darker cut edge and its shadow.
+  let [x0, y0, x1, y1, n] = [W, H, 0, 0, 0];
+  const bins = new Float32Array(24);
+  for (let y = 0; y < H; y++) for (let x = 0; x < W; x++) {
+    if (!inside[y * W + x]) continue;
+    n++;
+    [x0, y0, x1, y1] = [Math.min(x0, x), Math.min(y0, y), Math.max(x1, x + 1), Math.max(y1, y + 1)];
+    bins[Math.floor(((Math.atan2(y - lamp.y, x - lamp.x) + Math.PI) / (2 * Math.PI)) * 24) % 24]++;
+  }
+  if (n < MIN_PAPER) return undefined;
+  [x0, y0, x1, y1] = [Math.max(0, x0 - RIM), Math.max(0, y0 - RIM), Math.min(W, x1 + RIM), Math.min(H, y1 + RIM)];
+  const bw = x1 - x0;
+  const alpha = new Float32Array(bw * (y1 - y0));
+  const hole = new Uint8Array(bw * (y1 - y0));
+  // Distance to the paper (in pixels, by rows then columns: a square reach is near enough).
+  const rows = new Uint8Array(bw * (y1 - y0)).fill(255);
+  for (let y = y0; y < y1; y++) for (let x = x0; x < x1; x++) {
+    let d = 255;
+    for (let dx = -RIM; dx <= RIM; dx++) if (x + dx >= 0 && x + dx < W && inside[y * W + x + dx]) d = Math.min(d, Math.abs(dx));
+    rows[(y - y0) * bw + x - x0] = d;
+  }
+  for (let y = y0; y < y1; y++) for (let x = x0; x < x1; x++) {
+    let d = 255;
+    for (let dy = -RIM; dy <= RIM; dy++) if (y + dy >= y0 && y + dy < y1) d = Math.min(d, Math.max(Math.abs(dy), rows[(y + dy - y0) * bw + x - x0]));
+    if (d > RIM || !away(x, y)) continue;
+    const i = (y - y0) * bw + x - x0;
+    hole[i] = 1;
+    if (d <= 2) alpha[i] = Math.min(1, k[y * W + x] * 1.4);
+  }
+  // A burst spreads all round the lamp; a beam reaches out one way.
+  const burst = [...bins].filter((b) => b > n * 0.015).length >= 12;
+  return { box: [x0, y0, x1, y1], alpha, hole, burst, share: n / (W * H) };
+}
+/** The hole the paper leaves reaches this far past it (px). */
+const RIM = 4;
+/** The lamp itself (this far round its point) stays painted. */
+const LAMP_KEPT = 22;
+/** Light paper is looked for from this far round the lamp. */
+const SEED_RING = 130;
+/** Fewer lit pixels than this joined to the lamp is no painted light paper. */
+const MIN_PAPER = 1500;
+
+/** A painted beam sends a wave of light out along itself this often (s). */
+export const BEAM_PULSE = 3;
+
+/**
+ * How a lighthouse's light paper stands at time t. A burst of rays is lifted off and turns a little to and fro,
+ * breathing. A painted beam stays where it was painted (lifted, the long hole under it would show the painting
+ * smeared) and pulses instead: a wave of light leaves the lamp with a flare and runs out along the beam to its end
+ * (`wave`, 0 at the lamp .. 1 at the far end, beyond it gone).
+ */
+export function paperPose(g: Glow, burst: boolean, t: number): { turn: number; scale: number; alpha: number; flare: number; wave: number } {
+  const s = (hashSeed(g.key) % 1000) / 1000 * Math.PI * 2;
+  if (burst) {
+    const breathe = Math.sin(t * 1.3 + s);
+    return { turn: 0.12 * Math.sin(t * 0.42 + s), scale: 1 + 0.035 * breathe, alpha: 0.85 + 0.15 * breathe, flare: 0.2 * (1 + breathe), wave: -1 };
+  }
+  const wave = (((t + (s / (Math.PI * 2)) * BEAM_PULSE) % BEAM_PULSE) / BEAM_PULSE) * 1.4;
+  return { turn: 0, scale: 1, alpha: 1, flare: Math.max(0, 1 - wave * 4) ** 2, wave };
+}
+
+/**
+ * The paint under lifted light paper, filled from round it: each pixel of the hole takes the paint met turning
+ * round the lamp to either side of the paper, at the same distance from it. Rays and beams come out of the lamp,
+ * so this crosses them the short way and carries the clouds' and waves' own texture in, where a blur would leave
+ * a soft smear. RGBA for `paper.box`, opaque only in the hole.
+ */
+export function fillUnder(px: Uint8ClampedArray | Uint8Array, W: number, lamp: { x: number; y: number }, paper: Pick<BeamPaper, 'box' | 'hole'>): Uint8ClampedArray {
+  const [x0, y0, x1, y1] = paper.box;
+  const bw = x1 - x0;
+  const H = px.length / 4 / W;
+  const out = new Uint8ClampedArray(bw * (y1 - y0) * 4);
+  const open = (x: number, y: number) => x >= 0 && y >= 0 && x < W && y < H && !(x >= x0 && y >= y0 && x < x1 && y < y1 && paper.hole[(y - y0) * bw + x - x0]);
+  for (let y = y0; y < y1; y++) for (let x = x0; x < x1; x++) {
+    if (!paper.hole[(y - y0) * bw + x - x0]) continue;
+    const r = Math.max(1, Math.hypot(x - lamp.x, y - lamp.y));
+    const a0 = Math.atan2(y - lamp.y, x - lamp.x);
+    const sides: Array<[number, number]> = [];
+    for (const dir of [1, -1]) {
+      for (let s = 1; s <= Math.min(600, r * 0.6); s++) {
+        const a = a0 + (dir * s) / r;
+        const [u, v] = [Math.round(lamp.x + r * Math.cos(a)), Math.round(lamp.y + r * Math.sin(a))];
+        if (u < 0 || v < 0 || u >= W || v >= H) break;
+        if (open(u, v)) { sides.push([(v * W + u) * 4, s]); break; }
+      }
+    }
+    const o = ((y - y0) * bw + x - x0) * 4;
+    if (!sides.length) { out.set([px[(y * W + x) * 4], px[(y * W + x) * 4 + 1], px[(y * W + x) * 4 + 2], 255], o); continue; }
+    // Nearer side counts more, so the two meet smoothly in the middle.
+    let [r0, g0, b0, wt] = [0, 0, 0, 0];
+    for (const [i, s] of sides) { const k = 1 / s; r0 += px[i] * k; g0 += px[i + 1] * k; b0 += px[i + 2] * k; wt += k; }
+    out.set([r0 / wt, g0 / wt, b0 / wt, 255], o);
+  }
+  return out;
+}

package/app/src/play/lipsync.ts

@@ -0,0 +1,69 @@
+// Lip-sync is timed against the playing audio, independent of the simulation clock.
+export type Mouth = 'X' | 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G' | 'H';
+export type MouthCue = { start: number; end: number; value: Mouth };
+export type LipSync = { cues: MouthCue[]; envelope?: number[]; step?: number };
+export type Box = [number, number, number, number]; // x, y, width, height within a sprite cell
+export type FacePose = { mouth: Box; eyes: Box[]; lips?: Box; suggestedLips?: Box; lipConfidence?: number; sourceOpen?: boolean; atlas?: string };
+export type Articulation = { mouth: Mouth; previous: Mouth; mix: number; energy: number };
+export type FaceState = Articulation & { blink: number; brow: number; jaw: number; round: number };
+export type FaceDefinition = {
+  image: string;
+  /** Source rectangles for X, A..H; the generated heads need individual registration. */
+  mouths: Record<Mouth, Box>;
+  sheets: Record<string, Array<FacePose | null>>;
+  atlases?: Record<string, Record<Mouth, Box>>;
+  /** Neutral lip corners in each atlas patch, normalized to that patch. */
+  anchors?: Record<string, Box>;
+  frames?: Record<string, Record<Mouth, Box>>;
+  imagePose?: FacePose;
+  rigPose?: FacePose;
+  rigHash?: string;
+  imageHash?: string;
+  seed?: number;
+  sourceVersions?: Record<string, string>;
+  sheetHashes?: Record<string, string>;
+};
+
+export const MOUTHS: Mouth[] = ['X', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'];
+
+/** Gaps, missing sound and completion use the relaxed mouth. Crossfade over the first 35 ms. */
+export function mouthAt(sync: LipSync | undefined, seconds: number | undefined): { mouth: Mouth; previous: Mouth; mix: number; energy: number } {
+  const rest = { mouth: 'X' as Mouth, previous: 'X' as Mouth, mix: 1, energy: 0 };
+  if (!sync || seconds === undefined || seconds < 0 || !Number.isFinite(seconds)) return rest;
+  let low = 0, high = sync.cues.length;
+  while (low < high) {
+    const mid = (low + high) >>> 1;
+    if (sync.cues[mid].start <= seconds) low = mid + 1;
+    else high = mid;
+  }
+  const index = low - 1, cue = sync.cues[index];
+  if (!cue || seconds >= cue.end) return rest;
+  const before = sync.cues[index - 1];
+  const previous = before && Math.abs(before.end - cue.start) < 0.002 ? before.value : 'X';
+  const mix = Math.min(1, (seconds - cue.start) / Math.min(0.035, (cue.end - cue.start) / 2));
+  const energy = sync.envelope?.[Math.floor(seconds / (sync.step ?? 0.04))] ?? 0;
+  return { mouth: cue.value, previous, mix, energy };
+}
+
+/** Two short eyelid movements with a variable interval, including while listening. */
+export function blinkAt(seconds: number): number {
+  const cycle = seconds % 5.3;
+  const blink = (at: number) => Math.max(0, 1 - Math.abs(cycle - at) / 0.095);
+  return Math.max(blink(1.8), blink(5.0) * 0.85);
+}
+
+export const mouthOpening: Record<Mouth, number> = { X: 0, A: 0, B: 0.12, C: 0.5, D: 0.9, E: 0.55, F: 0.28, G: 0.05, H: 0.4 };
+export const mouthRoundness = (mouth: Mouth) => mouth === 'E' || mouth === 'F' ? 1 : 0;
+
+/** One performance state, consumed by the painted and native 3D renderers. */
+export function faceAt(articulation: Articulation, seconds: number, seed = 0): FaceState {
+  return { ...articulation, blink: blinkAt(seconds + seed), brow: Math.max(0, Math.min(1, articulation.energy)) * 0.35,
+    jaw: mouthOpening[articulation.previous] * (1 - articulation.mix) + mouthOpening[articulation.mouth] * articulation.mix,
+    round: mouthRoundness(articulation.previous) * (1 - articulation.mix) + mouthRoundness(articulation.mouth) * articulation.mix };
+}
+
+/** Rigged paintings keep their face on the torso as it rises and falls. */
+export function offsetFace(pose: FacePose, dx: number, dy: number): FacePose {
+  const offset = ([x, y, w, h]: Box): Box => [x + dx, y + dy, w, h];
+  return { ...pose, mouth: offset(pose.mouth), eyes: pose.eyes.map(offset), ...(pose.lips ? { lips: offset(pose.lips) } : {}), ...(pose.suggestedLips ? {suggestedLips:offset(pose.suggestedLips)} : {}) };
+}

package/app/src/play/living.ts

@@ -0,0 +1,83 @@
+// living: how the painted sea, waterfalls, animals and clouds move, as plain numbers for the page (app/web/living.ts)
+// to draw with. Pure, so it is tested without a canvas.
+
+/** How stormy a place is, 0 calm .. 1 a gale: from the weather's fall and wind. A calm place still swells a little. */
+export function stormOf(w?: { fall: string; strength: number; wind: number }): number {
+  if (!w) return 0;
+  const wet = w.fall === 'none' ? 0 : Math.max(0, (w.strength - 0.3) / 0.6);
+  return Math.min(1, 0.55 * wet + 0.6 * Math.abs(w.wind));
+}
+
+/**
+ * The swell of still water (the sea, a lake) at a point of its box: u is the row's place down the water (0 far,
+ * 1 near). Waves roll toward the viewer (their phase runs down the rows, wider apart near, as in perspective) and
+ * slant a little across; near rows heave more. Returns where to read the texture from, relative to the point,
+ * and how high on a crest it is (-1 trough .. 1 crest).
+ */
+export function swellAt(x: number, u: number, t: number, storm: number): { dx: number; dy: number; crest: number } {
+  const wave = 5.5 * Math.log(1 + 6 * u) - 1.5 * t * (1 + 0.5 * storm) + x * 0.006 + 0.8 * Math.sin(x * 0.0021 + t * 0.23);
+  const crest = Math.sin(wave);
+  const big = 0.7 + 1.3 * storm;
+  const dy = crest * (0.6 + 7.5 * u) * big;
+  const dx = (Math.sin(t * 0.9 + u * 40 + x * 0.003) * (1.2 + 5 * u) + Math.sin(t * 0.37 + u * 11) * (1 + 3 * u)) * (0.8 + 0.8 * storm);
+  return { dx, dy, crest };
+}
+
+/**
+ * Points along the water's edge where it meets land, rock or a hull (not the horizon above it, not the frame's
+ * edge), every `step` px: where foam churns. `alpha` is the water's soft mask, w x h, 0..255.
+ */
+export function shorePoints(alpha: Uint8Array | Uint8ClampedArray, w: number, h: number, step = 10, stride = 1): Array<{ x: number; y: number; nx: number; ny: number }> {
+  const at = (x: number, y: number) => (x < 0 || y < 0 || x >= w || y >= h ? -1 : alpha[(y * w + x) * stride + (stride - 1)]);
+  const out: Array<{ x: number; y: number; nx: number; ny: number }> = [];
+  const R = 8;
+  for (let y = R; y < h - R; y += 3) {
+    for (let x = R; x < w - R; x += 3) {
+      if (at(x, y) < 160) continue;
+      // The dry side: the neighbour R px away that is not water.
+      let [nx, ny] = [0, 0];
+      for (const [dx, dy] of [[1, 0], [-1, 0], [0, 1], [0, -1]]) if (at(x + dx * R, y + dy * R) >= 0 && at(x + dx * R, y + dy * R) < 40) [nx, ny] = [nx + dx, ny + dy];
+      if (!nx && !ny) continue;
+      // Land only above it, in the far third: that is the horizon or a far bank, no surf there.
+      if (ny < 0 && !nx && y < h * 0.35) continue;
+      if (out.some((p) => Math.abs(p.x - x) < step && Math.abs(p.y - y) < step)) continue;
+      const len = Math.hypot(nx, ny);
+      out.push({ x, y, nx: nx / len, ny: ny / len });
+    }
+  }
+  return out;
+}
+
+/** A painted animal's swim (or flight) at time t: its offset, which way it faces now (scaleX, through 0 as it turns), its tilt, and a leap. */
+export type Swim = { dx: number; dy: number; scaleX: number; rot: number; leap: number; sinceLeap: number };
+
+/**
+ * Swims back and forth about where it was painted, turning (a paper card flipping) at each end, bobbing, and now
+ * and then (in the water) leaping out in an arc: `leap` is 0 in the water, 0..1 through the leap. `facing`: the way
+ * it was painted (1 right). `k`: which animal, for its own phase. `width`: its size in px, for how far it goes.
+ */
+export function swimAt(t: number, k: number, facing: 1 | -1, width: number, medium: 'water' | 'air'): Swim {
+  const reach = Math.max(14, Math.min(70, width * (medium === 'air' ? 1.2 : 0.55)));
+  const w = (medium === 'air' ? 0.32 : 0.22) + 0.05 * ((k * 7) % 5) / 5;
+  const ph = t * w + k * 2.3;
+  const dx = reach * Math.sin(ph);
+  const v = Math.cos(ph);
+  const scaleX = facing * Math.max(-1, Math.min(1, 3 * v));
+  const dy = (medium === 'air' ? 9 : 2.5) * Math.sin(t * 1.3 + k * 1.7);
+  let rot = 0.05 * Math.sin(t * 2.1 + k);
+  // A leap every 11..17 s, 1.1 s long, at its own time.
+  let [leap, sinceLeap] = [0, Infinity];
+  if (medium === 'water') {
+    const period = 11 + ((k * 5) % 7);
+    const at = (t + k * 3.7) % period;
+    sinceLeap = at;
+    if (at < 1.1) {
+      leap = at / 1.1;
+      rot += Math.sign(v || 1) * (leap - 0.5) * 0.9;
+    }
+  }
+  return { dx, dy, scaleX, rot, leap, sinceLeap };
+}
+
+/** How high a leap carries, px, at 0..1 through it. */
+export const leapHeight = (leap: number, height: number) => Math.sin(Math.PI * leap) * Math.max(30, height * 1.6);

package/app/src/play/outline-path.ts

@@ -0,0 +1,130 @@
+// The hover outline as smooth closed lines along the edge of a cut-out's alpha: marching squares, then Chaikin.
+export type Loop = Array<[number, number]>;
+
+/**
+ * The closed contours of where `alpha` (w x h, one byte per pixel) is at least `threshold`, in pixel units (pixel
+ * centres at +0.5). Specks smaller than `minArea` px and holes smaller than `minHole` px are dropped, so a cut-out's
+ * speckled inside (rain, a halo of light) gives one clean line round it; the rest are smoothed by `smooth` rounds of
+ * corner cutting. Outer loops run clockwise on screen (positive area), holes the other way.
+ */
+export function outlineLoops(alpha: ArrayLike<number>, w: number, h: number, { threshold = 128, minArea = 60, minHole = 60, smooth = 3 }: { threshold?: number; minArea?: number; minHole?: number; smooth?: number } = {}): Loop[] {
+  const at = (x: number, y: number) => (x < 0 || y < 0 || x >= w || y >= h ? 0 : alpha[y * w + x]);
+  const inside = (x: number, y: number) => at(x, y) >= threshold;
+  // Where the edge crosses between two pixel centres, by their values.
+  const cross = (a: number, b: number) => {
+    const t = (threshold - a) / (b - a || 1);
+    return Math.max(0.05, Math.min(0.95, t));
+  };
+  // Segments between edge points keyed by "x,y" of the point; each cell of 2x2 pixel centres gives 0-2 of them.
+  // Points sit on cell sides: H (between (x,y) and (x+1,y)) or V (between (x,y) and (x,y+1)).
+  const next = new Map<string, string>();
+  const pos = new Map<string, [number, number]>();
+  const point = (kind: 'h' | 'v', x: number, y: number): string => {
+    const key = `${kind}${x},${y}`;
+    if (!pos.has(key)) {
+      pos.set(key, kind === 'h' ? [x + 0.5 + cross(at(x, y), at(x + 1, y)), y + 0.5] : [x + 0.5, y + 0.5 + cross(at(x, y), at(x, y + 1))]);
+    }
+    return key;
+  };
+  // Oriented so the inside is always on the same side: loops chain head to tail.
+  const link = (a: string, b: string) => next.set(a, b);
+  for (let y = -1; y < h; y++) {
+    for (let x = -1; x < w; x++) {
+      const tl = inside(x, y), tr = inside(x + 1, y), br = inside(x + 1, y + 1), bl = inside(x, y + 1);
+      const c = (tl ? 8 : 0) | (tr ? 4 : 0) | (br ? 2 : 0) | (bl ? 1 : 0);
+      if (c === 0 || c === 15) continue;
+      const top = () => point('h', x, y), right = () => point('v', x + 1, y), bottom = () => point('h', x, y + 1), left = () => point('v', x, y);
+      switch (c) {
+        case 1: link(left(), bottom()); break;
+        case 2: link(bottom(), right()); break;
+        case 3: link(left(), right()); break;
+        case 4: link(right(), top()); break;
+        case 5: link(left(), top()); link(right(), bottom()); break;
+        case 6: link(bottom(), top()); break;
+        case 7: link(left(), top()); break;
+        case 8: link(top(), left()); break;
+        case 9: link(top(), bottom()); break;
+        case 10: link(top(), right()); link(bottom(), left()); break;
+        case 11: link(top(), right()); break;
+        case 12: link(right(), left()); break;
+        case 13: link(right(), bottom()); break;
+        case 14: link(bottom(), left()); break;
+      }
+    }
+  }
+  const loops: Loop[] = [];
+  const seen = new Set<string>();
+  for (const start of next.keys()) {
+    if (seen.has(start)) continue;
+    const loop: Loop = [];
+    let k: string | undefined = start;
+    while (k && !seen.has(k)) {
+      seen.add(k);
+      loop.push(pos.get(k)!);
+      k = next.get(k);
+    }
+    const a = loop.length >= 3 ? area(loop) : 0;
+    if (a >= minArea || -a >= minHole) loops.push(chaikin(loop, smooth));
+  }
+  return loops;
+}
+
+/** Signed area (shoelace). */
+export function area(loop: Loop): number {
+  let s = 0;
+  for (let i = 0; i < loop.length; i++) {
+    const [x0, y0] = loop[i];
+    const [x1, y1] = loop[(i + 1) % loop.length];
+    s += x0 * y1 - x1 * y0;
+  }
+  return s / 2;
+}
+
+/** Corner cutting on a closed loop: each round keeps 1/4 and 3/4 along every side. */
+export function chaikin(loop: Loop, rounds: number): Loop {
+  let pts = loop;
+  for (let r = 0; r < rounds; r++) {
+    const out: Loop = [];
+    for (let i = 0; i < pts.length; i++) {
+      const [x0, y0] = pts[i];
+      const [x1, y1] = pts[(i + 1) % pts.length];
+      out.push([0.75 * x0 + 0.25 * x1, 0.75 * y0 + 0.25 * y1], [0.25 * x0 + 0.75 * x1, 0.25 * y0 + 0.75 * y1]);
+    }
+    pts = out;
+  }
+  return pts;
+}
+
+/**
+ * The alpha of a cut-out made ready for its outline: a box blur of radius `r` (twice, near a gaussian) rounds the
+ * jagged steps of a mask and swallows hairline gaps, so the line follows the shape and not its pixels.
+ */
+export function softAlpha(alpha: ArrayLike<number>, w: number, h: number, r = 2): Uint8Array {
+  let a = Float32Array.from(alpha as ArrayLike<number>);
+  for (let pass = 0; pass < 2; pass++) {
+    const tmp = new Float32Array(w * h);
+    for (let y = 0; y < h; y++) {
+      let s = 0;
+      for (let x = -r; x <= r; x++) s += x >= 0 && x < w ? a[y * w + x] : 0;
+      for (let x = 0; x < w; x++) {
+        tmp[y * w + x] = s / (2 * r + 1);
+        const add = x + r + 1, sub = x - r;
+        if (add < w) s += a[y * w + add];
+        if (sub >= 0) s -= a[y * w + sub];
+      }
+    }
+    const out = new Float32Array(w * h);
+    for (let x = 0; x < w; x++) {
+      let s = 0;
+      for (let y = -r; y <= r; y++) s += y >= 0 && y < h ? tmp[y * w + x] : 0;
+      for (let y = 0; y < h; y++) {
+        out[y * w + x] = s / (2 * r + 1);
+        const add = y + r + 1, sub = y - r;
+        if (add < h) s += tmp[add * w + x];
+        if (sub >= 0) s -= tmp[sub * w + x];
+      }
+    }
+    a = out;
+  }
+  return Uint8Array.from(a, (v) => Math.round(v));
+}