@logomarks/core 0.1.11 → 0.2.0

package/src/pixels/dither.js

@@ -0,0 +1,399 @@
+/**
+ * Dither tapers: a solid pixel core that breaks up along a ramp, its cells shrinking and dropping out the further they
+ * sit from the core, so a mark dissolves (or assembles) in one direction, or all round; and squares off the grid (a
+ * taper that steps down in size, a block splitting into 2, 3, 4 … squares a column, a file of squares that shrink and
+ * turn).
+ *
+ * Everything is drawn on a cell grid: cell (i, j) spans [i, i + 1] × [j, j + 1], its centre (i + 0.5, j + 0.5). A mark is
+ * a list of cells, each with a ramp value t: t ≤ 0 is solid (a full, touching pixel), 0 < t < 1 is the dither zone, t ≥ 1
+ * is gone. taper() turns t into a cell size (a few quantised levels) and a keep or drop (an ordered-dither threshold
+ * against t), and sprite() draws the result on the 512 canvas.
+ *
+ * The rule this enforces: the taper stops at a cell and a spacing that survive 32 px. After fitting, the smallest cell
+ * is MIN_CELL (16: one whole pixel at 32 px) and two dither cells sit at least MIN_GAP (22, the house gap) apart; a
+ * dither cell beside the solid core is pushed away from it so that gap holds there too, or it's centred. The largest
+ * dither cell is the pitch less the gap, so the pitch is at least 38 and a grid at most 11 cells along its longest side;
+ * levels() throws below that. A batch can raise the floor (`min`), turn the squares as they fade (`turn`) or draw the
+ * cells by hand (mapCells()). Free squares are [x, y, s, deg]: top-left, side and the turn about the centre; every gap
+ * is measured box to box, so a turned square only ever sits further off than the gap says. Lay those out at the final
+ * scale (448 across), so fitting changes nothing.
+ * From the Logomarks tools (ditherparts.mjs, batch 167; free squares batch 186).
+ */
+import { U, rect, rr, circle, rot } from '../geometry/index.js';
+import { insideShape as inside } from '../parts/index.js';
+
+/** The smallest dither cell once fitted (16: one whole pixel at 32 px). */
+export const MIN_CELL = 16;
+/** The smallest gap between dither cells once fitted (the house gap). */
+export const MIN_GAP = 22;
+/** The fitted span: the longest side of a mark. */
+export const SPAN = 448;
+
+/* ---------------------------------------------------------------- threshold masks ---------------------------------------------------------------- */
+
+/**
+ * The n × n Bayer (ordered-dither) matrix as thresholds in (0, 1).
+ *
+ * @param {number} n Its side, a power of two.
+ * @returns {number[][]} The thresholds, row by row.
+ */
+export const bayer = (n) => { let m = [[0]];
+	while (m.length < n) { const k = m.length; m = [...Array(2 * k)].map((_, r) => [...Array(2 * k)].map((_, c) => 4 * m[r % k][c % k] + [0, 2, 3, 1][2 * Math.floor(r / k) + Math.floor(c / k)])); }
+	return m.map((row) => row.map((v) => (v + 0.5) / (n * n))); };
+const B4 = bayer(4), B8 = bayer(8);
+
+/**
+ * Threshold masks, (i, j) → a value in (0, 1): a cell in the dither zone is kept while its threshold beats the ramp.
+ * `bayer4` and `bayer8` are ordered dither (regular, so a half-dissolved band is a lattice: at 50% a checkerboard, so
+ * keep the density low there or use r2); `r2` is the R2 low-discrepancy sequence (Roberts 2018), a deterministic
+ * blue-noise-like mask with no lattice.
+ */
+export const MASKS = {
+	bayer4: (i, j) => B4[((j % 4) + 4) % 4][((i % 4) + 4) % 4],
+	bayer8: (i, j) => B8[((j % 8) + 8) % 8][((i % 8) + 8) % 8],
+	r2: (i, j) => { const v = 0.5 + i * 0.7548776662466927 + j * 0.5698402909980532; return v - Math.floor(v); },
+};
+
+/* ---------------------------------------------------------------- cells ---------------------------------------------------------------- */
+
+/** A shape as a polygon set (a primitive returns one polygon, a boolean a set). */
+const polys = (shape) => (typeof shape[0][0][0] === 'number' ? [shape] : shape);
+
+/**
+ * The cells a shape (drawn in grid units) covers by at least `min` of a k × k sample: its pixel rendering.
+ *
+ * @param {import('../geometry/types.js').Geom} shape The shape, in grid units.
+ * @param {{ min?: number, k?: number }} [o] The share of samples a cell needs (0.5) and the samples a side (4).
+ * @returns {[number, number][]} The cells.
+ */
+export const raster = (shape, { min = 0.5, k = 4 } = {}) => { shape = polys(shape); const xs = shape.flat(2).map((p) => p[0]), ys = shape.flat(2).map((p) => p[1]), out = [];
+	for (let j = Math.floor(Math.min(...ys)); j < Math.ceil(Math.max(...ys)); j++) for (let i = Math.floor(Math.min(...xs)); i < Math.ceil(Math.max(...xs)); i++) {
+		let n = 0; for (let a = 0; a < k; a++) for (let b = 0; b < k; b++) n += inside(shape, i + (a + 0.5) / k, j + (b + 0.5) / k);
+		if (n / (k * k) >= min) out.push([i, j]); }
+	return out; };
+
+/**
+ * Cells from rows of text, '#' or 'X' a cell (the format of PIX7 and the pixel animals), top-left at (i0, j0).
+ *
+ * @param {readonly string[]} rows The rows.
+ * @param {number} [i0=0] The first column.
+ * @param {number} [j0=0] The first row.
+ * @returns {[number, number][]} The cells.
+ */
+export const fromRows = (rows, i0 = 0, j0 = 0) => rows.flatMap((row, j) => [...row].flatMap((ch, i) => (ch === '#' || ch === 'X' ? [[i0 + i, j0 + j]] : [])));
+
+/**
+ * A w × h block of cells, its top-left at (i, j).
+ *
+ * @param {number} i Its first column.
+ * @param {number} j Its first row.
+ * @param {number} w Its width, in cells.
+ * @param {number} h Its height, in cells.
+ * @returns {[number, number][]} The cells.
+ */
+export const block = (i, j, w, h) => [...Array(w * h)].map((_, k) => [i + (k % w), j + Math.floor(k / w)]);
+
+/**
+ * The cells of a not in b.
+ *
+ * @param {readonly (readonly number[])[]} a The cells.
+ * @param {readonly (readonly number[])[]} b The cells taken away.
+ * @returns {number[][]} What's left.
+ */
+export const minus = (a, b) => { const k = new Set(b.map((c) => c.join())); return a.filter((c) => !k.has(c.join())); };
+
+/**
+ * A square frame n cells across with walls w thick, its top-left at (i, j).
+ *
+ * @param {number} i Its first column.
+ * @param {number} j Its first row.
+ * @param {number} n Its side, in cells.
+ * @param {number} w Its walls, in cells.
+ * @returns {number[][]} The cells.
+ */
+export const squareFrame = (i, j, n, w) => minus(block(i, j, n, n), block(i + w, j + w, n - 2 * w, n - 2 * w));
+
+/** Cells less their repeats. */
+const uniq = (cells) => [...new Map(cells.map((c) => [c.join(), c])).values()];
+
+/**
+ * A comet: the head's cells plus a trail behind them, `len` cells long against the direction `deg` (the way the head is
+ * moving: 0° right, 90° down), narrowing by `narrow` of its width by the end (0 a straight smear, 1 a point, negative a
+ * fan that spreads as it disperses). The ramp is 0 on the head's back edge (the head stays solid) and 1 just past the
+ * end of the trail, so a taper() over it fades the trail out. With `lanes` (for 0°, 90°, 180°, −90°) each row or column
+ * streams out behind its own last cell, so the trail is the shape smeared, not a block, and the ramp counts from that
+ * cell. `edge` (cells): only the rows whose last cell is within `edge` of the shape's back stream, from the back edge, so
+ * the trail echoes the back profile (a letter's stems and bars) without running into its counters.
+ *
+ * @param {readonly (readonly number[])[]} head The head's cells.
+ * @param {number} deg The direction it moves (degrees).
+ * @param {number} len The trail's length, in cells.
+ * @param {{ narrow?: number, lanes?: boolean, edge?: number | null }} [o] The narrowing (0.5), lanes (false), edge (null).
+ * @returns {{ cells: number[][], ramp: (x: number, y: number) => number }} The cells and the ramp over them.
+ */
+export const comet = (head, deg, len, { narrow = 0.5, lanes = false, edge = null } = {}) => {
+	const u = [Math.cos((deg * Math.PI) / 180), Math.sin((deg * Math.PI) / 180)], v = [-u[1], u[0]];
+	const ctr = head.map(([i, j]) => [i + 0.5, j + 0.5]), cx = ctr.reduce((a, c) => a + c[0], 0) / ctr.length, cy = ctr.reduce((a, c) => a + c[1], 0) / ctr.length;
+	const along = ([x, y]) => (x - cx) * u[0] + (y - cy) * u[1], across = ([x, y]) => (x - cx) * v[0] + (y - cy) * v[1], key = (c) => Math.round(across(c) * 4);
+	const lane = new Map(); for (const c of ctr) lane.set(key(c), Math.min(lane.get(key(c)) ?? 1e9, along(c)));
+	const back0 = Math.min(...ctr.map(along)), backOf = (c) => (lanes ? lane.get(key(c)) : back0);
+	const W = Math.max(...ctr.map((c) => Math.abs(across(c)))) + 0.5, out = [...head];
+	const is = head.map((c) => c[0]), js = head.map((c) => c[1]), R = Math.ceil(len + 2 + Math.abs(Math.min(0, narrow)) * W);
+	for (let j = Math.min(...js) - R; j <= Math.max(...js) + R; j++) for (let i = Math.min(...is) - R; i <= Math.max(...is) + R; i++) {
+		const c = [i + 0.5, j + 0.5], b = backOf(c); if (b === undefined) continue; const d = b - along(c); if (d <= 0 || d > len + 0.01) continue;
+		if (edge != null && !(lane.get(key(c)) - back0 <= edge + 1e-9)) continue;
+		if (Math.abs(across(c)) <= W * (1 - (narrow * d) / len) + 1e-9) out.push([i, j]); }
+	return { cells: uniq(out), ramp: (x, y) => { const b = backOf([x, y]) ?? back0; return (b - along([x, y])) / (len + 0.5); } };
+};
+
+/**
+ * The cells within `depth` steps (Chebyshev) of a shape's cells, the shape included: room for a halo to break into.
+ *
+ * @param {readonly (readonly number[])[]} cells The cells.
+ * @param {number} [depth=1] How far.
+ * @returns {number[][]} The grown cells.
+ */
+export const dilate = (cells, depth = 1) => uniq(cells.flatMap(([i, j]) => [...Array((2 * depth + 1) ** 2)].map((_, k) => [i + (k % (2 * depth + 1)) - depth, j + Math.floor(k / (2 * depth + 1)) - depth])));
+
+/**
+ * A shape's cells less every cell within `depth` steps of its outside: its solid heart.
+ *
+ * @param {readonly (readonly number[])[]} cells The cells.
+ * @param {number} [depth=1] How far.
+ * @returns {number[][]} The heart.
+ */
+export const erode = (cells, depth = 1) => { const set = new Set(cells.map((c) => c.join()));
+	return cells.filter(([i, j]) => [...Array((2 * depth + 1) ** 2)].every((_, k) => set.has(`${i + (k % (2 * depth + 1)) - depth},${j + Math.floor(k / (2 * depth + 1)) - depth}`))); };
+
+/* ---------------------------------------------------------------- ramps ---------------------------------------------------------------- */
+// A ramp maps a cell centre (x, y) in grid units to t: ≤ 0 solid, 1 gone (comet() returns its own).
+
+/** A value held to 0…1. */
+const clamp = (v) => Math.max(0, Math.min(1, v));
+
+/**
+ * A linear ramp: 0 at distance a along the direction `deg` (0° right, 90° down) from (cx, cy), 1 at distance b.
+ *
+ * @param {number} deg The direction (degrees).
+ * @param {number} a Where it starts (t = 0).
+ * @param {number} b Where it ends (t = 1).
+ * @param {number} [cx=0] The origin.
+ * @param {number} [cy=0] The origin.
+ * @returns {(x: number, y: number) => number} The ramp.
+ */
+export const linear = (deg, a, b, cx = 0, cy = 0) => { const u = [Math.cos((deg * Math.PI) / 180), Math.sin((deg * Math.PI) / 180)];
+	return (x, y) => ((x - cx) * u[0] + (y - cy) * u[1] - a) / (b - a); };
+
+/**
+ * A ramp that is solid (−1) on the `solid` cells and `ramp` everywhere else: a shape kept whole beside its own dust.
+ *
+ * @param {readonly (readonly number[])[]} solid The cells kept solid.
+ * @param {(x: number, y: number) => number} ramp The ramp elsewhere.
+ * @returns {(x: number, y: number) => number} The ramp.
+ */
+export const solidOn = (solid, ramp) => { const k = new Set(solid.map((c) => c.join())); return (x, y) => (k.has(`${Math.floor(x)},${Math.floor(y)}`) ? -1 : ramp(x, y)); };
+
+/**
+ * A ramp by steps from a set of core cells (Chebyshev distance on the grid): 0 on the core, 1 at `depth` steps out.
+ *
+ * @param {readonly (readonly number[])[]} core The core's cells.
+ * @param {number} depth The steps to t = 1.
+ * @returns {(x: number, y: number) => number} The ramp.
+ */
+export const steps = (core, depth) => { const set = core.map(([i, j]) => [i + 0.5, j + 0.5]);
+	return (x, y) => Math.min(...set.map(([a, b]) => Math.max(Math.abs(x - a), Math.abs(y - b)))) / depth; };
+
+/* ---------------------------------------------------------------- taper ---------------------------------------------------------------- */
+
+/**
+ * The dither zone's cell sizes (fractions of the pitch p), largest first: from a cell that leaves the house gap to its
+ * neighbours (1 − MIN_GAP/p) down to min/p, in n steps (n = 1: the largest only).
+ *
+ * @param {number} p The pitch.
+ * @param {number} n The steps.
+ * @param {number} [min=MIN_CELL] The smallest cell once fitted.
+ * @returns {number[]} The sizes.
+ * @throws {Error} When the pitch is under min + 22 (no room for one dither cell).
+ */
+export const levels = (p, n, min = MIN_CELL) => { const a = 1 - MIN_GAP / p, b = min / p; if (a < b - 1e-9) throw new Error(`pitch ${p.toFixed(1)} < ${min + MIN_GAP}: no room for a dither cell`);
+	return n <= 1 || a - b < 1e-9 ? [a] : [...Array(n)].map((_, k) => a + ((b - a) * k) / (n - 1)); };
+
+/**
+ * The pitch a set of cells gets once its longest side is fitted to 448 (an upper bound on the cells it spans).
+ *
+ * @param {readonly (readonly number[])[]} cells The cells.
+ * @returns {number} The pitch.
+ */
+export const pitchOf = (cells) => { const is = cells.map((c) => c[0]), js = cells.map((c) => c[1]);
+	return SPAN / Math.max(Math.max(...is) - Math.min(...is) + 1, Math.max(...js) - Math.min(...js) + 1); };
+
+/**
+ * Tapers a list of cells by a ramp. `n` is how many shrinking sizes the dither zone steps through; `size: false` keeps
+ * every dither cell at the largest size (a pure density taper); `density` is how much of the zone the mask drops (0
+ * none, a pure size taper; 1 everything by t = 1), `mask` a MASKS name or (i, j) → threshold, `gamma` bends the drop-out
+ * (above 1 keeps more near the core); `min` is the smallest dither cell once fitted; `turn` the angle the last of the n
+ * steps is turned to, each step its share, so the squares tip over as they fade (sprite() keeps a turned square inside
+ * its upright box, so check its side, size / (|cos| + |sin|), against the floor).
+ *
+ * @param {readonly (readonly number[])[]} cells The candidate cells (the core and its trail or halo).
+ * @param {{ ramp: (x: number, y: number) => number, n?: number, size?: boolean, density?: number, mask?: string | ((i: number, j: number) => number), gamma?: number, min?: number, turn?: number }} o
+ *   The ramp and the taper's settings (n 3, size true, density 0.75, mask 'bayer4', gamma 1, min MIN_CELL, turn 0).
+ * @returns {number[][]} [i, j, f] per kept cell (with `turn`, [i, j, f, deg]), f its size as a share of the pitch (1 a
+ *   full, touching pixel).
+ */
+export const taper = (cells, { ramp, n = 3, size = true, density = 0.75, mask = 'bayer4', gamma = 1, min = MIN_CELL, turn = 0 } = {}) => {
+	const lv = levels(pitchOf(cells), n, min), m = typeof mask === 'function' ? mask : MASKS[mask], out = [];
+	for (const [i, j] of uniq(cells)) { const t = ramp(i + 0.5, j + 0.5);
+		if (t <= 0) { out.push([i, j, 1]); continue; } if (t >= 1) continue;
+		if (density && m(i, j) < density * clamp(t) ** gamma) continue;
+		const k = Math.min(n - 1, Math.floor(t * n)), f = size ? lv[Math.min(lv.length - 1, k)] : lv[0];
+		out.push(turn ? [i, j, f, (turn * (k + 1)) / n] : [i, j, f]); }
+	return out; };
+
+/**
+ * Cells drawn by hand as rows of text: '#' a full cell, '1' … '9' a dither cell at that size (1 the largest, the pitch
+ * less 22; n the smallest, min once fitted), anything else empty unless `legend` names it ({ ch: [size, deg] }: a
+ * dither cell at that size turned by deg; keep a turned square's side at min or more). For a small grid whose dither is
+ * designed cell by cell rather than thresholded.
+ *
+ * @param {readonly string[]} rows The rows.
+ * @param {{ n?: number, min?: number, legend?: Record<string, number[]>, i0?: number, j0?: number }} [o] The sizes (3),
+ *   the floor (MIN_CELL), the legend and the top-left cell.
+ * @returns {number[][]} Cells for sprite(): [i, j, f] or [i, j, f, deg].
+ * @throws {Error} For a size past n.
+ */
+export const mapCells = (rows, { n = 3, min = MIN_CELL, legend = {}, i0 = 0, j0 = 0 } = {}) => {
+	const all = rows.flatMap((row, j) => [...row].flatMap((ch, i) => (ch === '#' || /[1-9]/.test(ch) || legend[ch] ? [[i0 + i, j0 + j, ch]] : [])));
+	const lv = levels(pitchOf(all), n, min);
+	return all.map(([i, j, ch]) => { if (ch === '#') return [i, j, 1];
+		const [k, deg = 0] = legend[ch] || [+ch]; if (k > lv.length) throw new Error(`size ${ch} past n = ${n}`);
+		return deg ? [i, j, lv[k - 1], deg] : [i, j, lv[k - 1]]; }); };
+
+/**
+ * Full cells touching only at a corner (a hairline join at any size): each 2 × 2 checker's top-left.
+ *
+ * @param {readonly (readonly number[])[]} cells Tapered cells ([i, j, f…]).
+ * @returns {number[][]} The checkers' top-left cells.
+ */
+export const corners = (cells) => { const full = new Set(cells.filter((c) => c[2] === 1).map((c) => `${c[0]},${c[1]}`)), has = (i, j) => full.has(`${i},${j}`), hits = [];
+	for (const k of full) { const [i, j] = k.split(',').map(Number);
+		if (has(i + 1, j + 1) && !has(i + 1, j) && !has(i, j + 1)) hits.push([i, j]); if (has(i - 1, j + 1) && !has(i - 1, j) && !has(i, j + 1)) hits.push([i - 1, j]); }
+	return hits; };
+
+/**
+ * Draws tapered cells on the 512 canvas, the grid scaled so the longest side of all the cells' boxes is 448, centred.
+ * Full cells fuse into one solid (overlapping by 0.01, as the kit's pixels() does). A dither cell sits against the far
+ * side of its grid cell, away from any full cell beside it (or, with none, towards `push`), so the gap behind it is what
+ * it lost: the house 22 behind the largest dither size. Then every gap is checked: a dither cell nearer than MIN_GAP to
+ * the solid or to another dither cell is centred on that axis, and dropped if that isn't enough. `round` draws the
+ * dither cells as dots and rounds the core's exposed outer corners (radius r of the pitch). A cell's fourth value turns
+ * its square by that many degrees, kept inside the same box, so every gap still holds.
+ *
+ * @param {readonly (readonly number[])[]} cells Tapered cells ([i, j, f] or [i, j, f, deg]).
+ * @param {{ round?: boolean, r?: number, push?: number[], allowCorners?: boolean }} [o] Round dots (false), the corner
+ *   radius (0.5 of the pitch), the push with no solid beside ([0, 0]), and whether corner-only contacts are allowed.
+ * @returns {import('../geometry/types.js').Shape} The mark.
+ * @throws {Error} On full cells that touch only at a corner (unless allowed).
+ */
+export const sprite = (cells, { round = false, r = 0.5, push = [0, 0], allowCorners = false } = {}) => {
+	const hits = corners(cells); if (hits.length && !allowCorners) throw new Error(`full cells touch only at a corner at ${hits.map((h) => h.join(',')).join(' ')}`);
+	const p = pitchOf(cells), is = cells.map((c) => c[0]), js = cells.map((c) => c[1]);
+	const x0 = 256 - (p * (Math.max(...is) + 1 + Math.min(...is))) / 2, y0 = 256 - (p * (Math.max(...js) + 1 + Math.min(...js))) / 2;
+	const full = new Set(cells.filter((c) => c[2] === 1).map((c) => `${c[0]},${c[1]}`)), has = (i, j) => full.has(`${i},${j}`), e = 0.01, sgn = (v) => Math.sign(v);
+	// dither cells as boxes [x0, y0, x1, y1], pushed away from the solid beside them
+	const N8 = [[-1, -1], [0, -1], [1, -1], [-1, 0], [1, 0], [-1, 1], [0, 1], [1, 1]];
+	const dots = cells.filter((c) => c[2] < 1).map(([i, j, f, deg = 0]) => { const v = N8.reduce((a, [di, dj]) => (has(i + di, j + dj) ? [a[0] + di, a[1] + dj] : a), [0, 0]);
+		const d = v[0] || v[1] ? [-sgn(v[0]), -sgn(v[1])] : push; return { i, j, s: f * p, d: [...d], deg }; });
+	const boxOf = (q) => { const cx = x0 + (q.i + 0.5) * p + (q.d[0] * (p - q.s)) / 2, cy = y0 + (q.j + 0.5) * p + (q.d[1] * (p - q.s)) / 2; return [cx - q.s / 2, cy - q.s / 2, cx + q.s / 2, cy + q.s / 2]; };
+	const gap = (a, b) => Math.hypot(Math.max(0, a[0] - b[2], b[0] - a[2]), Math.max(0, a[1] - b[3], b[1] - a[3]));
+	const cellBox = (i, j) => [x0 + i * p, y0 + j * p, x0 + (i + 1) * p, y0 + (j + 1) * p], tol = 1e-6;
+	const solidGap = (q) => Math.min(Infinity, ...N8.filter(([di, dj]) => has(q.i + di, q.j + dj)).map(([di, dj]) => gap(boxOf(q), cellBox(q.i + di, q.j + dj))));
+	let live = dots.filter((q) => { if (solidGap(q) >= MIN_GAP - tol) return true; q.d = [0, 0]; return solidGap(q) >= MIN_GAP - tol; });
+	for (let pass = 0; pass < 3; pass++) for (const a of live) for (const b of live) { if (a === b || Math.abs(a.i - b.i) > 1 || Math.abs(a.j - b.j) > 1 || gap(boxOf(a), boxOf(b)) >= MIN_GAP - tol) continue;
+		for (const q of [a, b]) for (const k of [0, 1]) if (q.d[k] && (k ? q.j !== (q === a ? b.j : a.j) : q.i !== (q === a ? b.i : a.i))) { const was = q.d[k]; q.d[k] = 0; if (solidGap(q) < MIN_GAP - tol) q.d[k] = was; } }
+	live = live.filter((a, n) => !live.some((b, m) => m < n && Math.abs(a.i - b.i) <= 1 && Math.abs(a.j - b.j) <= 1 && gap(boxOf(a), boxOf(b)) < MIN_GAP - tol));
+	return U(...cells.filter((c) => c[2] === 1).map(([i, j]) => { const x = x0 + i * p, y = y0 + j * p;
+		if (!round) return rect(x - e, y - e, p + 2 * e, p + 2 * e);
+		const k = (a, b) => (!has(i + a, j) && !has(i, j + b) && !has(i + a, j + b) ? r * p : 0); // round a corner only where it's exposed
+		return rr(x - e, y - e, p + 2 * e, p + 2 * e, [k(-1, -1), k(1, -1), k(1, 1), k(-1, 1)]); }),
+	...live.map((q) => { const [ax, ay, bx, by] = boxOf(q), cx = (ax + bx) / 2, cy = (ay + by) / 2;
+		if (round) return circle(cx, cy, q.s / 2, 64); if (!q.deg) return rect(ax, ay, q.s, q.s);
+		const a = (q.deg * Math.PI) / 180, w = q.s / (Math.abs(Math.cos(a)) + Math.abs(Math.sin(a))); // a turned square inside the upright box
+		return rot(rect(cx - w / 2, cy - w / 2, w, w), q.deg, cx, cy); })); };
+
+/* ---------------------------------------------------------------- free squares ---------------------------------------------------------------- */
+
+/**
+ * The upright box of a square of side s turned by deg.
+ *
+ * @param {number} s The side.
+ * @param {number} [deg=0] The turn (degrees).
+ * @returns {number} The box's side.
+ */
+export const turnBox = (s, deg = 0) => s * (Math.abs(Math.cos((deg * Math.PI) / 180)) + Math.abs(Math.sin((deg * Math.PI) / 180)));
+
+/**
+ * The side of a square turned by deg whose upright box is b across (turnBox's inverse).
+ *
+ * @param {number} b The box's side.
+ * @param {number} [deg=0] The turn (degrees).
+ * @returns {number} The square's side.
+ */
+export const turnedSide = (b, deg = 0) => b / turnBox(1, deg);
+
+/**
+ * Squares as one shape, each turned about its own centre.
+ *
+ * @param {readonly (readonly number[])[]} list The squares, [x, y, s, deg].
+ * @returns {import('../geometry/types.js').Shape} The squares.
+ */
+export const squares = (list) => U(...list.map(([x, y, s, deg = 0]) => (deg ? rot(rect(x, y, s, s), deg, x + s / 2, y + s / 2) : rect(x, y, s, s))));
+
+/**
+ * The bounding box of a square list (turned squares by their upright boxes).
+ *
+ * @param {readonly (readonly number[])[]} list The squares, [x, y, s, deg].
+ * @returns {import('../geometry/types.js').Box} [x0, y0, x1, y1].
+ */
+export const extent = (list) => { const bs = list.map(([x, y, s, deg = 0]) => { const b = turnBox(s, deg) / 2, cx = x + s / 2, cy = y + s / 2; return [cx - b, cy - b, cx + b, cy + b]; });
+	return [Math.min(...bs.map((b) => b[0])), Math.min(...bs.map((b) => b[1])), Math.max(...bs.map((b) => b[2])), Math.max(...bs.map((b) => b[3]))]; };
+
+/**
+ * A square list moved so its box is centred on the 512 canvas.
+ *
+ * @param {readonly (readonly number[])[]} list The squares, [x, y, s, deg].
+ * @returns {number[][]} The squares, moved.
+ */
+export const centred = (list) => { const [x0, y0, x1, y1] = extent(list), dx = 256 - (x0 + x1) / 2, dy = 256 - (y0 + y1) / 2; return list.map(([x, y, s, deg = 0]) => [x + dx, y + dy, s, deg]); };
+
+/**
+ * A resolution run: columns left to right, column k a stack of counts[k] squares the same height H (1 one solid block,
+ * 2 two squares, 3 three…), the gap between columns and between the squares of a column; H is solved so the run is
+ * `span` wide ([1, 2, 3, 4] at 448: H 203.6, the smallest side 34.4).
+ *
+ * @param {readonly number[]} counts Each column's squares.
+ * @param {{ span?: number, gap?: number }} [o] The run's width (SPAN) and the gap (MIN_GAP).
+ * @returns {{ list: number[][], H: number, side: number }} The squares (top-left at 0, 0), the height and the smallest
+ *   side.
+ */
+export const resRun = (counts, { span = SPAN, gap = MIN_GAP } = {}) => {
+	// width = Σ (H − (n − 1) gap) / n + gap (columns − 1) = span, linear in H
+	const a = counts.reduce((t, n) => t + 1 / n, 0), b = counts.reduce((t, n) => t - ((n - 1) * gap) / n, 0) + gap * (counts.length - 1), H = (span - b) / a;
+	let x = 0; const list = [];
+	for (const n of counts) { const s = (H - (n - 1) * gap) / n; for (let k = 0; k < n; k++) list.push([x, k * (s + gap), s]); x += s + gap; }
+	return { list, H, side: Math.min(...list.map((q) => q[2])) }; };
+
+/**
+ * A single file of squares along x, each [side, deg], MIN_GAP between their upright boxes, each set on the file's
+ * 'top', 'bottom' or 'centre' line. With `span` the sides are relative, scaled so the file is that long (the gaps stay).
+ * The first box's top-left is at (0, 0).
+ *
+ * @param {readonly (readonly number[])[]} items The squares, [side, deg].
+ * @param {{ gap?: number, align?: 'top' | 'bottom' | 'centre', span?: number }} [o] The gap (MIN_GAP), the line
+ *   (centre) and the length (0: as drawn).
+ * @returns {number[][]} The squares, [x, y, s, deg].
+ */
+export const file = (items, { gap = MIN_GAP, align = 'centre', span = 0 } = {}) => {
+	if (span) { const k = (span - gap * (items.length - 1)) / items.reduce((t, [s, deg = 0]) => t + turnBox(s, deg), 0); items = items.map(([s, deg = 0]) => [s * k, deg]); }
+	const Hb = Math.max(...items.map(([s, deg = 0]) => turnBox(s, deg)));
+	let x = 0; return items.map(([s, deg = 0]) => { const b = turnBox(s, deg), by = align === 'top' ? 0 : align === 'bottom' ? Hb - b : (Hb - b) / 2, q = [x + (b - s) / 2, by + (b - s) / 2, s, deg]; x += b + gap; return q; }); };

package/src/pixels/emote.d.ts

@@ -0,0 +1,6 @@
+import type { Shape } from '../geometry/types.js';
+
+/** The emote glyphs on a 9-row grid, '#' a cell. */
+export const EMOTE_GLYPHS: Record<string, string[]>;
+/** An emoticon typed left to right, each glyph at pitch 2g, the glyphs parted by exactly g. */
+export function emote(text: string | readonly string[], g: number, G?: Readonly<Record<string, readonly string[]>>): Shape;

package/src/pixels/emote.js

@@ -0,0 +1,76 @@
+/**
+ * Club emotes: a typed emoticon read left to right, each glyph a chunky pixel sprite (the kit's pixels()) at pitch 2g,
+ * the glyphs parted by exactly the gap g.
+ * From the Logomarks tools (emoteparts.mjs, batches 259 and 315; their glyph tables merged, the keys both drew the same).
+ */
+import { U, move, bbox, pixels } from '../geometry/index.js';
+
+/**
+ * The emote glyphs on a 9-row grid, '#' a cell: eyes in rows 1–6, mouths the full height, strokes mostly two cells
+ * wide. Keys of more than one character name a variant (m3 the big mouth 3; BO the big O; gt the mouth >; >e and <e
+ * squinting eyes; nose, ball, stare and head parts of particular faces).
+ */
+export const EMOTE_GLYPHS = {
+	// ---- batch 259
+	';': ['..', '..', '##', '##', '..', '##', '##', '#.', '..'],
+	':': ['..', '..', '##', '##', '..', '##', '##', '..', '..'],
+	8: ['...', '...', '###', '#.#', '###', '#.#', '###', '...', '...'],
+	')': ['##..', '.##.', '..##', '..##', '..##', '..##', '..##', '.##.', '##..'],
+	D: ['####..', '######', '##..##', '##..##', '##..##', '##..##', '##..##', '######', '####..'],
+	P: ['######', '######', '##..##', '##..##', '######', '######', '##....', '##....', '##....'],
+	'<': ['.....', '.....', '...##', '..##.', '.##..', '##...', '.##..', '..##.', '...##'],
+	3: ['.....', '.....', '####.', '...##', '...##', '.###.', '...##', '...##', '####.'],
+	'=': ['....', '....', '....', '####', '....', '####', '....', '....', '....'],
+	']': ['####', '####', '..##', '..##', '..##', '..##', '..##', '####', '####'],
+	m3: ['#####', '#####', '...##', '...##', '.####', '...##', '...##', '#####', '#####'],
+	x: ['......', '......', '##..##', '.####.', '..##..', '.####.', '##..##', '......', '......'],
+	'^': ['......', '......', '..##..', '.####.', '##..##', '......', '......', '......', '......'],
+	_: ['....', '....', '....', '....', '....', '....', '....', '####', '####'],
+	'-': ['....', '....', '....', '####', '####', '....', '....', '....', '....'],
+	o: ['....', '....', '....', '####', '#..#', '#..#', '####', '....', '....'],
+	BO: ['......', '.####.', '######', '##..##', '##..##', '##..##', '######', '.####.', '......'],
+	'>': ['...', '##.', '.##', '##.', '...', '...', '...', '...', '...'],
+	'|': ['..', '##', '##', '##', '##', '##', '##', '##', '..'],
+	S: ['......', '.####.', '##..##', '##....', '.####.', '....##', '##..##', '.####.', '......'],
+	v: ['......', '......', '##..##', '##..##', '.####.', '.####.', '..##..', '..##..', '......'],
+	T: ['......', '######', '######', '..##..', '..##..', '..##..', '..##..', '......', '......'],
+	c: ['.....', '.....', '.####', '#####', '##...', '##...', '#####', '.####', '.....'],
+	gt: ['##...', '.##..', '..##.', '...##', '...##', '...##', '..##.', '.##..', '##...'],
+	u: ['......', '......', '......', '##..##', '##..##', '##..##', '##..##', '######', '.####.'],
+	w: ['........', '........', '........', '##....##', '##....##', '##.##.##', '##.##.##', '########', '.##..##.'],
+	'>e': ['.....', '.....', '##...', '.##..', '..##.', '.##..', '##...', '.....', '.....'],
+	'<e': ['.....', '.....', '...##', '..##.', '.##..', '..##.', '...##', '.....', '.....'],
+	// ---- batch 315
+	/** The nose caret of :^), at the eyes' middle. */
+	nose: ['......', '......', '......', '..##..', '.####.', '##..##', '......', '......', '......'],
+	/** The clown's round nose, a solid disc six cells across (four cells across read as a plus). */
+	ball: ['......', '......', '.####.', '######', '######', '######', '######', '.####.', '......'],
+	/** A square spiral, the dizzy eye of @_@ (one-cell strokes and spaces). */
+	'@': ['.......', '#######', '......#', '#####.#', '#...#.#', '#.###.#', '#.....#', '#######', '.......'],
+	/** The dollar: the S of batch 259 (one-cell bars, or it reads 5) with the stem's ticks above and below. */
+	$: ['..##..', '.####.', '##..##', '##....', '.####.', '....##', '##..##', '.####.', '..##..'],
+	/** The look of disapproval's eye (ಠ): a ring round a dot, with the tick on its crown. */
+	stare: ['##....', '######', '#....#', '#.##.#', '#.##.#', '#....#', '######', '......', '......'],
+	9: ['.####.', '##..##', '##..##', '.#####', '....##', '....##', '.####.', '......', '......'],
+	/** The arms of \o/, stepped two rows a cell. */
+	'\\': ['##...', '##...', '.##..', '.##..', '..##.', '..##.', '...##', '.....', '.....'],
+	'/': ['...##', '...##', '..##.', '..##.', '.##..', '.##..', '##...', '.....', '.....'],
+	/** The head of \o/, a ring between the raised hands. */
+	head: ['....', '....', '....', '####', '#..#', '#..#', '####', '....', '....'],
+	/** The dot mouth of >.>. */
+	'.': ['..', '..', '..', '..', '..', '##', '##', '..', '..'],
+	'~': ['........', '........', '........', '.###....', '#####..#', '#..#####', '....###.', '........', '........'],
+	'[': ['####', '####', '##..', '##..', '##..', '##..', '##..', '####', '####'],
+};
+
+/**
+ * An emoticon typed left to right: each glyph at pitch 2g, the glyphs parted by exactly the gap g.
+ *
+ * @param {string | readonly string[]} text The glyphs: a string, or a list of EMOTE_GLYPHS keys for the multi-letter ones.
+ * @param {number} g The gap.
+ * @param {Readonly<Record<string, readonly string[]>>} [G=EMOTE_GLYPHS] The glyph table.
+ * @returns {import('../geometry/types.js').Shape} The emote as one shape.
+ */
+export const emote = (text, g, G = EMOTE_GLYPHS) => { const p = 2 * g; let x = 0; const out = [];
+	for (const ch of (Array.isArray(text) ? text : [...text])) { const s = pixels(G[ch], p, 0, 0), [x0, , x1] = bbox(U(s)); out.push(move(s, x - x0, 0)); x += x1 - x0 + g; }
+	return U(...out); };

package/src/pixels/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Pixel marks: dither tapers (a solid pixel core breaking up along a ramp, every cell and gap held to what survives
+ * 32 px), free squares laid out by size, and typed emotes of chunky pixel glyphs.
+ */
+export type { Cells, Ramp, Mask, TaperOptions } from './dither.js';
+export * from './dither.js';
+export * from './emote.js';

package/src/pixels/index.js

@@ -0,0 +1,8 @@
+/**
+ * @module @logomarks/core/pixels
+ *
+ * Pixel marks: dither tapers (a solid pixel core breaking up along a ramp, every cell and gap held to what survives
+ * 32 px), free squares laid out by size, and typed emotes of chunky pixel glyphs.
+ */
+export * from './dither.js';
+export * from './emote.js';

package/src/sdf/index.d.ts

@@ -54,3 +54,5 @@ export function flink(a: Field, b: Field, g: number, aOver: (x: number, y: numbe
 
 /** A field's zero contour traced into a kit shape (marching squares, step h = 1, over −64…576). */
 export function shapeOf(f: Field, area?: { h?: number; x0?: number; y0?: number; x1?: number; y1?: number }): Shape;
+
+export { pinch, ballArm, node, blob, stadium } from './y2k.js';

package/src/sdf/index.js

@@ -5,8 +5,10 @@
  * (a smooth minimum) instead of meeting at a crease. A field is (x, y) → distance, negative inside, on the 512 canvas.
  * Build fields, combine them (smin, smax, ssub, fmin, fmax, fsub), cut the house gap (gapCut, fover, flink), then
  * shapeOf() traces the result into a kit shape for the usual booleans and fit.
+ * The Y2K parts (pinch, ballArm, node, blob, stadium) are built from them.
  */
 export { sdCircle, segT, sdCapsule, sdPath, arcPts, sdBox, sdEllipse, sdRing, sdPoly } from './fields.js';
 export { shell, turn, offset, smin2, smin, smax, ssub, fmin, fmax, fsub } from './ops.js';
 export { gapCut, fover, flink } from './gap.js';
 export { shapeOf } from './trace.js';
+export { pinch, ballArm, node, blob, stadium } from './y2k.js';

package/src/sdf/y2k.d.ts

@@ -0,0 +1,12 @@
+import type { Field, Pt } from './index.js';
+
+/** A bar from a to b, w wide at its ends, waisted n times to `waist` wide (a cosine profile). */
+export function pinch(a: Pt, b: Pt, w: number, waist: number, n?: number): Field;
+/** An arm from the hub c at deg: a stem ending in a ball of radius r, melted with blend k. */
+export function ballArm(c: Pt, deg: number, len: number, stem: number, r: number, k?: number): Field;
+/** n ball-ended arms from (cx, cy) melted into a hub. */
+export function node(cx: number, cy: number, n: number, len: number, stem: number, r: number, o?: { deg0?: number; hub?: number; k?: number; kArm?: number }): Field;
+/** A smooth blob: discs [cx, cy, r] melted with blend k. */
+export function blob(discs: readonly (readonly number[])[], k?: number): Field;
+/** A stadium (a pill) centred on (cx, cy), w × h. */
+export function stadium(cx: number, cy: number, w: number, h: number): Field;

package/src/sdf/y2k.js

@@ -0,0 +1,80 @@
+/**
+ * The Y2K family's parts as fields: a bar waisted along its length, an arm ending in a ball, a node of ball-ended arms
+ * melted into a hub, a smooth blob of discs and a stadium frame. Combine and trace them like any other field.
+ * From the Logomarks tools (y2kparts.mjs, batch 232, "Bold · Y2K").
+ */
+import { sdCircle, segT, sdCapsule } from './fields.js';
+import { smin } from './ops.js';
+
+/**
+ * A bar from a to b, w wide at its ends, waisted n times along its length to `waist` wide (n = 1 an hourglass bar, 2
+ * two beads' necks…; a waist wider than w swells instead). The waist follows a cosine, so the outline has no corners;
+ * the ends are round.
+ *
+ * @param {readonly number[]} a One end.
+ * @param {readonly number[]} b The other.
+ * @param {number} w The width at the ends.
+ * @param {number} waist The width at each waist.
+ * @param {number} [n=1] Waists along it.
+ * @returns {import('./index.js').Field} The bar.
+ */
+export const pinch = (a, b, w, waist, n = 1) => (x, y) => {
+	const [d, t] = segT(a, b, x, y);
+	return d - (w - ((w - waist) * (1 - Math.cos(2 * Math.PI * n * t))) / 2) / 2;
+};
+
+/**
+ * An arm from the hub c at `deg`, `len` to the ball's centre: a stem `stem` wide ending in a ball of radius r, melted
+ * with blend k.
+ *
+ * @param {readonly number[]} c The hub.
+ * @param {number} deg The arm's direction (degrees, y down).
+ * @param {number} len Hub to ball centre.
+ * @param {number} stem The stem's width.
+ * @param {number} r The ball's radius.
+ * @param {number} [k=30] The blend.
+ * @returns {import('./index.js').Field} The arm.
+ */
+export const ballArm = (c, deg, len, stem, r, k = 30) => {
+	const a = (deg * Math.PI) / 180, e = [c[0] + len * Math.cos(a), c[1] + len * Math.sin(a)];
+	return smin(k, sdCapsule(c, e, stem), sdCircle(e[0], e[1], r));
+};
+
+/**
+ * A node: n ball-ended arms from (cx, cy), the first at deg0, melted into a hub of radius `hub` (0: none).
+ *
+ * @param {number} cx The hub's centre.
+ * @param {number} cy The hub's centre.
+ * @param {number} n Arms.
+ * @param {number} len Hub to ball centre.
+ * @param {number} stem The stems' width.
+ * @param {number} r The balls' radius.
+ * @param {{ deg0?: number, hub?: number, k?: number, kArm?: number }} [o] The first arm's direction (−90), the hub's
+ *   radius (0), the hub's blend (40) and each arm's (30).
+ * @returns {import('./index.js').Field} The node.
+ */
+export const node = (cx, cy, n, len, stem, r, { deg0 = -90, hub = 0, k = 40, kArm = 30 } = {}) =>
+	smin(k, ...(hub ? [sdCircle(cx, cy, hub)] : []), ...[...Array(n)].map((_, i) => ballArm([cx, cy], deg0 + (i * 360) / n, len, stem, r, kArm)));
+
+/**
+ * A smooth blob: discs [cx, cy, r] melted with blend k.
+ *
+ * @param {readonly (readonly number[])[]} discs The discs.
+ * @param {number} [k=90] The blend.
+ * @returns {import('./index.js').Field} The blob.
+ */
+export const blob = (discs, k = 90) => smin(k, ...discs.map(([cx, cy, r]) => sdCircle(cx, cy, r)));
+
+/**
+ * A stadium (a pill) centred on (cx, cy), w × h, as a field.
+ *
+ * @param {number} cx The centre.
+ * @param {number} cy The centre.
+ * @param {number} w The width.
+ * @param {number} h The height.
+ * @returns {import('./index.js').Field} The stadium.
+ */
+export const stadium = (cx, cy, w, h) => {
+	const r = Math.min(w, h) / 2;
+	return w >= h ? sdCapsule([cx - w / 2 + r, cy], [cx + w / 2 - r, cy], h) : sdCapsule([cx, cy - h / 2 + r], [cx, cy + h / 2 - r], w);
+};

package/src/util/vec.d.ts

@@ -0,0 +1,14 @@
+import type { Point, Point3, Polygon } from '../geometry/types.js';
+
+/** a − b, in 2D. */
+export function sub(a: readonly number[], b: readonly number[]): Point;
+/** a + b, in 2D. */
+export function add(a: readonly number[], b: readonly number[]): Point;
+/** a scaled by k, in 2D. */
+export function mul(a: readonly number[], k: number): Point;
+/** The cross product of two 3D vectors. */
+export function cross3(a: readonly number[], b: readonly number[]): Point3;
+/** A ring's signed area by the shoelace sum, added point by point. */
+export function shoelace(r: readonly (readonly number[])[]): number;
+/** A rectangle from its corners (x0, y0) and (x1, y1). */
+export function box(x0: number, y0: number, x1: number, y1: number): Polygon;