@logomarks/core 0.1.11 → 0.2.0

package/src/forms/flow.js

@@ -0,0 +1,80 @@
+/**
+ * Flow grids: discs on a small square grid where one path of neighbouring discs is joined by capsule bridges into a
+ * single smooth stroke (a letter, a wave, a loop), every join filleted, while the other discs stay single dots.
+ *
+ * The grid's pitch is 2r + g, so a free disc sits exactly the gap g from any path disc beside it. A path is a string of
+ * cells, "a0 b0 b1 …" (column letter a–d, row digit 0–3, y down), each cell an orthogonal neighbour of the one before; a
+ * trailing "~" closes it into a loop. A tube (`neck` 1) is drawn with the kit: a pill per bridge, each turn's inner
+ * corner filleted by closing just that turn's two pills, so a fillet never reaches across to a cell it isn't joined to.
+ * A bead string (`neck` under 1) is a distance field: each bridge melted into its two discs by a smooth minimum, the
+ * bridges then joined sharply, so two path discs side by side but unbridged keep their gap. The smooth minimum bulges
+ * where two of its fields run level, so it suits waisted bridges only.
+ * From the Logomarks tools (flowparts.mjs, batch 236, "Modular · Flow").
+ */
+import { circle, pill, U, soften } from '../geometry/index.js';
+import { sdCircle, sdCapsule, smin, fmin, shapeOf } from '../sdf/index.js';
+
+/**
+ * A flow path parsed into cells: "a0 b0 b1" → [[0, 0], [1, 0], [1, 1]]; a trailing "~" marks a closed loop.
+ *
+ * @param {string} s The path.
+ * @returns {{ path: [number, number][], closed: boolean }} Its cells (column, row) and whether it closes.
+ */
+export const cells = (s) => {
+	const t = s.trim().split(/\s+/), closed = t[t.length - 1] === '~';
+	return { path: (closed ? t.slice(0, -1) : t).map((c) => [c.charCodeAt(0) - 97, +c.slice(1)]), closed };
+};
+
+/**
+ * A flow grid's geometry: its pitch and each cell's centre, for an n × m grid of discs of radius r and gap g centred on
+ * (cx, cy).
+ *
+ * @param {number} n Columns.
+ * @param {number} m Rows.
+ * @param {number} r The discs' radius.
+ * @param {number} g The gap.
+ * @param {number} [cx=256] The grid's centre.
+ * @param {number} [cy=256] The grid's centre.
+ * @returns {{ p: number, at: (cell: readonly number[]) => [number, number] }} The pitch and a cell's centre.
+ */
+export const grid = (n, m, r, g, cx = 256, cy = 256) => {
+	const p = 2 * r + g, x0 = cx - ((n - 1) * p) / 2, y0 = cy - ((m - 1) * p) / 2;
+	return { p, at: ([i, j]) => [x0 + i * p, y0 + j * p] };
+};
+
+/**
+ * A flow grid as shapes: the path, the free discs, both together, and the narrowest gap between them (so a fillet that
+ * bulges into the gap is caught).
+ *
+ * @param {{ n: number, m?: number, r: number, g: number, path: string, neck?: number, k?: number, fillet?: number, skip?: string }} o
+ *   The grid (n × m, m = n), the discs' radius r and the gap g; the path (cells()); `neck` the bridges' width as a share
+ *   of the disc (1, a tube; under 1 a bead string melted with blend k, 0.6 r); `fillet` the tube's inner-corner radius
+ *   (0.6 r); `skip` cells left empty (no free disc either).
+ * @returns {{ path: import('../geometry/types.js').Shape, free: import('../geometry/types.js').Shape, shape: import('../geometry/types.js').Shape, clearance: number }}
+ *   The path, the free discs, both, and the narrowest gap from the path to a free disc.
+ * @throws {Error} When a step of the path isn't to a neighbouring cell.
+ */
+export function flowShape({ n, m = n, r, g, path, neck = 1, k = r * 0.6, fillet = r * 0.6, skip = '' }) {
+	const G = grid(n, m, r, g), { path: P, closed } = cells(path), key = ([i, j]) => `${i},${j}`, on = new Set(P.map(key));
+	const off = new Set(skip.trim() ? cells(skip).path.map(key) : []);
+	P.forEach((c, i) => { if (i && Math.abs(c[0] - P[i - 1][0]) + Math.abs(c[1] - P[i - 1][1]) !== 1) throw new Error(`flow: ${key(P[i - 1])} → ${key(c)} is not a neighbour step`); });
+	const B = P.slice(1).map((c, i) => [P[i], c]); if (closed) B.push([P[P.length - 1], P[0]]);
+	let pathS;
+	if (neck >= 1) {
+		const pills = B.map(([a, b]) => pill(G.at(a), G.at(b), 2 * r));
+		// a turn: two bridges meeting at a cell at a right angle; close just those two so the fillet stays in that corner
+		const turns = B.map((b, i) => [b, B[(i + 1) % B.length], i]).filter(([a, b, i]) => (closed || i < B.length - 1) && a[1] === b[0]
+			&& (a[1][0] - a[0][0]) * (b[1][0] - b[0][0]) + (a[1][1] - a[0][1]) * (b[1][1] - b[0][1]) === 0);
+		pathS = U(...pills, ...P.map((c) => circle(...G.at(c), r)), ...turns.map(([, , i]) => soften(U(pills[i], pills[(i + 1) % pills.length]), fillet, 0)));
+	} else pathS = shapeOf(fmin(...B.map(([a, b]) => smin(k, sdCircle(...G.at(a), r), sdCircle(...G.at(b), r), sdCapsule(G.at(a), G.at(b), 2 * r * neck)))));
+	const freeC = []; for (let j = 0; j < m; j++) for (let i = 0; i < n; i++) if (!on.has(key([i, j])) && !off.has(key([i, j]))) freeC.push(G.at([i, j]));
+	const free = freeC.length ? U(...freeC.map((c) => circle(...c, r))) : [];
+	// the narrowest gap: from each free disc's centre to the path's outline, less the radius
+	const seg = ([ax, ay], [bx, by], [x, y]) => {
+		const dx = bx - ax, dy = by - ay, t = Math.max(0, Math.min(1, ((x - ax) * dx + (y - ay) * dy) / (dx * dx + dy * dy || 1e-9)));
+		return Math.hypot(x - ax - t * dx, y - ay - t * dy);
+	};
+	let clearance = Infinity;
+	for (const c of freeC) for (const pg of pathS) for (const ring of pg) for (let i = 1; i < ring.length; i++) clearance = Math.min(clearance, seg(ring[i - 1], ring[i], c) - r);
+	return { path: pathS, free, shape: freeC.length ? U(pathS, free) : pathS, clearance };
+}

package/src/forms/folds.d.ts

@@ -0,0 +1,18 @@
+import type { Point, Polygon, Shape, Geom } from '../geometry/types.js';
+
+/** A seam g wide along a polyline, round ends (two points: a pill). */
+export function seamLine(g: number, pts: readonly Point[]): Geom;
+/** A shape split into facets by seams g wide. */
+export function crease(shape: Geom, g: number, ...seams: Point[][]): Shape;
+/** A smooth seam through control points (Catmull-Rom, n points a span). */
+export function curve(pts: readonly Point[], n?: number): Point[];
+/** A quadratic Bézier from a to b pulled towards c, n + 1 points. */
+export function foldQuad(a: readonly number[], c: readonly number[], b: readonly number[], n?: number): Point[];
+/** A strap: a pill w wide from a to b. */
+export function strap(a: Point, b: Point, w: number): Polygon;
+/** A flat strip w wide from a to b, its ends cut on the lines y = y0 and y = y1 if given. */
+export function strip(a: readonly number[], b: readonly number[], w: number, o?: { y0?: number; y1?: number }): Polygon;
+/** A hand-cut edge: every ring wobbled along its normal by a smooth seeded wave of amplitude amp. */
+export function wobble(shape: Geom, amp: number, rnd?: () => number, o?: { step?: number; waves?: number }): Shape;
+/** Scissor-cut edges: every ring as straight snips about `step` long, ends nudged by up to `jit`. */
+export function snip(shape: Geom, step?: number, jit?: number, rnd?: () => number, corner?: number): Shape;

package/src/forms/folds.js

@@ -0,0 +1,147 @@
+/**
+ * Fold seams, straps and hand-cut edges, the parts the Crease, Strap and Snip marks share. A seam is half the house gap
+ * (11 once fitted, against the 22 gap): a fold or an overlap drawn as a hairline that shows at large sizes and fades at
+ * 32 px, where the mark must read as its silhouette alone. Every build takes the seam width g (exact() with a target of
+ * 11 keeps it 11 once fitted), so a part that is truly separate stands 2g clear. Laying parts one over another, each
+ * cut free by the seam, is the parts' chain().
+ * From the Logomarks tools (foldparts.mjs, batch 170).
+ */
+import { U, D, poly, pill, stroke, dedupe } from '../geometry/index.js';
+import { spline } from '../parts/index.js';
+
+/**
+ * A seam along a polyline: g wide with round ends, so seams that meet at a node leave the facets' corners sharp.
+ *
+ * @param {number} g The seam's width.
+ * @param {readonly import('../geometry/types.js').Point[]} pts The seam's line (two points: a straight seam).
+ * @returns {import('../geometry/types.js').Geom} The seam.
+ */
+export const seamLine = (g, pts) => (pts.length === 2 ? pill(pts[0], pts[1], g) : stroke(dedupe(pts), g, { roundCaps: true, chunk: 8 }));
+
+/**
+ * A shape split into facets by seams. Run a seam that ends on the outline a little past it, and end inner seams exactly
+ * on a node where they meet another.
+ *
+ * @param {import('../geometry/types.js').Geom} shape The shape.
+ * @param {number} g The seam's width.
+ * @param {...import('../geometry/types.js').Point[]} seams Each seam's points (two for a straight seam, more for a curve).
+ * @returns {import('../geometry/types.js').Shape} The facets.
+ */
+export const crease = (shape, g, ...seams) => D(shape, ...seams.map((s) => seamLine(g, s)));
+
+/**
+ * A smooth seam through control points (Catmull-Rom, the ends held).
+ *
+ * @param {readonly import('../geometry/types.js').Point[]} pts The control points.
+ * @param {number} [n=24] Points a span.
+ * @returns {import('../geometry/types.js').Point[]} The seam's line.
+ */
+export const curve = (pts, n = 24) => spline(pts, n);
+
+/**
+ * A quadratic Bézier from a to b pulled towards c, as n + 1 points.
+ *
+ * @param {readonly number[]} a The start.
+ * @param {readonly number[]} c The control point.
+ * @param {readonly number[]} b The end.
+ * @param {number} [n=48] Steps.
+ * @returns {import('../geometry/types.js').Point[]} The curve.
+ */
+export const foldQuad = (a, c, b, n = 48) => [...Array(n + 1)].map((_, i) => {
+	const t = i / n, u = 1 - t;
+	return [u * u * a[0] + 2 * u * t * c[0] + t * t * b[0], u * u * a[1] + 2 * u * t * c[1] + t * t * b[1]];
+});
+
+/**
+ * A strap: a pill stroke w wide from a to b (strap letters lay one strap over another with the parts' chain()).
+ *
+ * @param {import('../geometry/types.js').Point} a One end.
+ * @param {import('../geometry/types.js').Point} b The other.
+ * @param {number} w The width.
+ * @returns {import('../geometry/types.js').Polygon} The strap.
+ */
+export const strap = (a, b, w) => pill(a, b, w);
+
+/**
+ * A flat strip w wide from a to b, each end cut on a horizontal line (y0 at a, y1 at b) if given, else square.
+ *
+ * @param {readonly number[]} a One end.
+ * @param {readonly number[]} b The other.
+ * @param {number} w The width.
+ * @param {{ y0?: number, y1?: number }} [o] The heights the ends are cut on.
+ * @returns {import('../geometry/types.js').Polygon} The strip.
+ */
+export const strip = (a, b, w, { y0, y1 } = {}) => {
+	const dx = b[0] - a[0], dy = b[1] - a[1], L = Math.hypot(dx, dy), n = [-dy / L * w / 2, dx / L * w / 2];
+	const ends = (p, y, sgn) => {
+		if (y == null) return [[p[0] + n[0], p[1] + n[1]], [p[0] - n[0], p[1] - n[1]]];
+		// slide each edge along the strip's direction until it meets y
+		return [n, [-n[0], -n[1]]].map((o) => { const q = [p[0] + o[0], p[1] + o[1]], t = (y - q[1]) / dy; return [q[0] + dx * t, y]; });
+	};
+	const [a1, a2] = ends(a, y0), [b1, b2] = ends(b, y1); return poly([a1, b1, b2, a2]);
+};
+
+/**
+ * A hand-cut edge: every ring of a shape resampled every `step` and pushed along its normal by a smooth, seeded wobble
+ * of amplitude `amp` (three sine waves round the ring with random phases from `rnd`, about `waves` bumps per 1000 units
+ * of outline), so the cut reads as scissors on paper, not as noise. The same seed gives the same edge.
+ *
+ * @param {import('../geometry/types.js').Geom} shape The shape.
+ * @param {number} amp The wobble's amplitude.
+ * @param {() => number} [rnd=Math.random] The random source (seeded, for a repeatable edge).
+ * @param {{ step?: number, waves?: number }} [o] The resampling step (3) and the bumps per 1000 units (9).
+ * @returns {import('../geometry/types.js').Shape} The shape with its edges wobbled.
+ */
+export const wobble = (shape, amp, rnd = Math.random, { step = 3, waves = 9 } = {}) => {
+	const polys = shape.length && typeof shape[0][0][0] === 'number' ? [shape] : shape;
+	const ph = [rnd(), rnd(), rnd()].map((v) => v * 2 * Math.PI);
+	const ringW = (ring) => {
+		const r = dedupe(ring.slice(0, -1).concat(ring.at(-1)[0] === ring[0][0] && ring.at(-1)[1] === ring[0][1] ? [] : [ring.at(-1)]));
+		const dense = []; r.forEach((p, i) => {
+			const q = r[(i + 1) % r.length], m = Math.max(1, Math.ceil(Math.hypot(q[0] - p[0], q[1] - p[1]) / step));
+			for (let j = 0; j < m; j++) dense.push([p[0] + ((q[0] - p[0]) * j) / m, p[1] + ((q[1] - p[1]) * j) / m]);
+		});
+		const n = dense.length, S = [0]; for (let i = 1; i < n; i++) S.push(S[i - 1] + Math.hypot(dense[i][0] - dense[i - 1][0], dense[i][1] - dense[i - 1][1]));
+		const L = S[n - 1] + Math.hypot(dense[0][0] - dense[n - 1][0], dense[0][1] - dense[n - 1][1]), k = Math.max(3, Math.round((waves * L) / 1000));
+		return dense.map((p, i) => {
+			const a = dense[(i - 1 + n) % n], b = dense[(i + 1) % n], dx = b[0] - a[0], dy = b[1] - a[1], l = Math.hypot(dx, dy) || 1, t = (2 * Math.PI * S[i]) / L;
+			const w = amp * (0.6 * Math.sin(k * t + ph[0]) + 0.3 * Math.sin((2 * k + 1) * t + ph[1]) + 0.2 * Math.sin((3 * k + 2) * t + ph[2]));
+			return [p[0] - (dy / l) * w, p[1] + (dx / l) * w];
+		});
+	};
+	return U(...polys.map((pg) => D(poly(ringW(pg[0])), ...pg.slice(1).map((h) => poly(ringW(h))))));
+};
+
+/**
+ * Scissor-cut edges: every ring of a shape redrawn as straight snips about `step` long (corners sharper than `corner`°
+ * kept where they are), each snip's end nudged along the normal by up to `jit` from the seeded `rnd`, so curves turn
+ * into short straight cuts and straight edges kink slightly, as paper cut by hand.
+ *
+ * @param {import('../geometry/types.js').Geom} shape The shape.
+ * @param {number} [step=34] The snips' length.
+ * @param {number} [jit=3] The most a snip's end moves.
+ * @param {() => number} [rnd=Math.random] The random source (seeded, for a repeatable edge).
+ * @param {number} [corner=140] Corners sharper than this (degrees) stay put.
+ * @returns {import('../geometry/types.js').Shape} The shape, snipped.
+ */
+export const snip = (shape, step = 34, jit = 3, rnd = Math.random, corner = 140) => {
+	const polys = shape.length && typeof shape[0][0][0] === 'number' ? [shape] : shape;
+	const ringS = (ring) => {
+		const r = dedupe(ring.at(-1)[0] === ring[0][0] && ring.at(-1)[1] === ring[0][1] ? ring.slice(0, -1) : ring), n = r.length;
+		const ang = (i) => {
+			const a = r[(i - 1 + n) % n], p = r[i], b = r[(i + 1) % n], u = [a[0] - p[0], a[1] - p[1]], v = [b[0] - p[0], b[1] - p[1]];
+			return (Math.acos(Math.max(-1, Math.min(1, (u[0] * v[0] + u[1] * v[1]) / (Math.hypot(...u) * Math.hypot(...v) || 1)))) * 180) / Math.PI;
+		};
+		const out = []; let acc = 0;
+		for (let i = 0; i < n; i++) {
+			const p = r[i], q = r[(i + 1) % n], sharp = ang(i) < corner;
+			if (sharp || acc >= step || i === 0) {
+				const a = r[(i - 1 + n) % n], dx = q[0] - a[0], dy = q[1] - a[1], l = Math.hypot(dx, dy) || 1, j = sharp ? 0 : (rnd() * 2 - 1) * jit;
+				out.push([p[0] - (dy / l) * j, p[1] + (dx / l) * j]); acc = 0;
+			}
+			acc += Math.hypot(q[0] - p[0], q[1] - p[1]);
+		}
+		return out;
+	};
+	return U(...polys.map((pg) => D(poly(ringS(pg[0])), ...pg.slice(1).map((h) => poly(ringS(h))))));
+};

package/src/forms/geo.d.ts

@@ -0,0 +1,46 @@
+import type { Geom, Point, Polygon, Shape } from '../geometry/types.js';
+
+/** The base square's side (420). */
+export const GEO_SQ: number;
+/** The base square's left edge. */
+export const GEO_X0: number;
+/** The base square's right edge. */
+export const GEO_X1: number;
+/** The base square, side s, centred. */
+export function sq(s?: number): Polygon;
+/** The unit vector from a to b, and the distance. */
+export function dirOf(a: readonly number[], b: readonly number[]): [Point, number];
+/** A needle gap from a (width w0) to b (width w1), run on past b by ext at the same taper. */
+export function needle(a: readonly number[], b: readonly number[], w0: number, w1: number, ext?: number): Polygon;
+/** A straight band of width w along a → b, square ends. */
+export function band(a: readonly number[], b: readonly number[], w: number): Polygon;
+/** The half plane on one side (s = ±1) of an open polyline that runs right across a shape. */
+export function side(L: readonly Point[], s: number): Polygon;
+/** A front strand laid over a closed band near p: the band cut free round it by g within R of p. */
+export function crossOver(all: Geom, front: Geom, p: readonly number[], R: number, g: number): Shape;
+/** A disc with at least 180 points. */
+export function geoDisc(cx: number, cy: number, r: number): Polygon;
+/** A knob: a disc with one slot at deg, split right across (full) or a pointer from the centre. */
+export function knob(cx: number, cy: number, r: number, deg: number, w: number, full?: boolean): Shape;
+/** Knobs on a grid of tokens ('|', '-', '\\', '/', 'pN', '.'), discs of radius r on a pitch of 2r + g. */
+export function knobs(rows: readonly (readonly string[])[], g: number, w: number, r: number): Shape;
+/** The disc radius that makes n discs and n − 1 gaps span 448. */
+export function rFor(n: number, g: number): number;
+/** A roof tile: a square with a half disc on its far side, the cap pointing at deg. */
+export function roofTile(cx: number, cy: number, a: number, deg?: number): Shape;
+/** Tiles laid back to front, each over the ones before and cut free by g. */
+export function layered(list: readonly Geom[], g: number): Geom;
+/** A triangle's three corners, circumradius R about (cx, cy). */
+export function triPts(cx: number, cy: number, R: number, deg?: number): Point[];
+/** The half of a disc on the side sideDeg points to. */
+export function halfDisc(cx: number, cy: number, r: number, sideDeg: number): Shape;
+/** The split disc's radius (224). */
+export const R7: number;
+/** The disc parted along L by g, each half's rim moved by sa / sb. */
+export function splitDisc(L: readonly Point[], g: number, sa: readonly number[], sb: readonly number[]): Shape;
+/** A roof tile's side in scales() (150). */
+export const SA: number;
+/** Roof tiles on a turned lattice, laid back to front; tiles in `up` face back up. */
+export function scales(cells: readonly Point[], g: number, o?: { a?: number; pi?: number; pj?: number; deg?: number; up?: readonly Point[] }): Shape;
+/** The nine points of a 3 × 3 lattice. */
+export const grid3: Point[];

package/src/forms/geo.js

@@ -0,0 +1,233 @@
+/**
+ * Bold geometric parts: needle gaps that taper to nothing, knobs and dials, roof-tile scales laid back to front, half
+ * discs and a disc split along a line with each half's rim moved. Every part is on the 512 canvas, centred on C. From the
+ * Logomarks tools (geoparts.mjs, batch 212, "Bold · Geometric", and its editions in batch 220).
+ */
+import { C, D, I, U, circle, grown, over, polar, poly, rect, rot, stroke } from '../geometry/index.js';
+
+/** @typedef {import('../geometry/types.js').Point} Point */
+/** @typedef {import('../geometry/types.js').Polygon} Polygon */
+/** @typedef {import('../geometry/types.js').Shape} Shape */
+/** @typedef {import('../geometry/types.js').Geom} Geom */
+
+/** The base square's side. */
+export const GEO_SQ = 420;
+
+/** The base square's left edge. */
+export const GEO_X0 = C - GEO_SQ / 2;
+
+/** The base square's right edge. */
+export const GEO_X1 = C + GEO_SQ / 2;
+
+/**
+ * The base square, side s, centred on the canvas.
+ *
+ * @param {number} [s=GEO_SQ] Its side.
+ * @returns {Polygon} The square.
+ */
+export const sq = (s = GEO_SQ) => rect(C - s / 2, C - s / 2, s, s);
+
+/**
+ * The unit vector from a to b, and the distance between them.
+ *
+ * @param {readonly number[]} a From.
+ * @param {readonly number[]} b To.
+ * @returns {[Point, number]} The direction and the length.
+ */
+export const dirOf = (a, b) => { const L = Math.hypot(b[0] - a[0], b[1] - a[1]); return [[(b[0] - a[0]) / L, (b[1] - a[1]) / L], L]; };
+
+/**
+ * A needle gap from a (width w0) to b (width w1), run on past b by `ext` at the same taper, and back past a by 2, so a
+ * zero-width tip still parts the corner cleanly.
+ *
+ * @param {readonly number[]} a The start.
+ * @param {readonly number[]} b Where the taper is measured to.
+ * @param {number} w0 The width at a.
+ * @param {number} w1 The width at b.
+ * @param {number} [ext=300] How far it runs on past b.
+ * @returns {Polygon} The gap, to cut.
+ */
+export const needle = (a, b, w0, w1, ext = 300) => {
+	const [[ux, uy], L] = dirOf(a, b), n = [-uy, ux], w2 = w0 + ((w1 - w0) * (L + ext)) / L;
+	const s = [a[0] - ux * 2, a[1] - uy * 2], e = [a[0] + ux * (L + ext), a[1] + uy * (L + ext)];
+	return poly([[s[0] + (n[0] * w0) / 2, s[1] + (n[1] * w0) / 2], [e[0] + (n[0] * w2) / 2, e[1] + (n[1] * w2) / 2], [e[0] - (n[0] * w2) / 2, e[1] - (n[1] * w2) / 2], [s[0] - (n[0] * w0) / 2, s[1] - (n[1] * w0) / 2]]);
+};
+
+/**
+ * A straight band of width w along a → b, its ends square (make it long enough to clip).
+ *
+ * @param {readonly number[]} a The start.
+ * @param {readonly number[]} b The end.
+ * @param {number} w The width.
+ * @returns {Polygon} The band.
+ */
+export const band = (a, b, w) => {
+	const [[ux, uy]] = dirOf(a, b), n = [(-uy * w) / 2, (ux * w) / 2];
+	return poly([[a[0] + n[0], a[1] + n[1]], [b[0] + n[0], b[1] + n[1]], [b[0] - n[0], b[1] - n[1]], [a[0] - n[0], a[1] - n[1]]]);
+};
+
+/**
+ * The half plane on one side of an open polyline that runs right across a shape: the polyline closed by two points 3000
+ * out along the normal of its first-to-last chord.
+ *
+ * @param {readonly Point[]} L The polyline.
+ * @param {number} s Which side: 1 or −1.
+ * @returns {Polygon} The half plane.
+ */
+export const side = (L, s) => {
+	const a = L[0], b = L.at(-1), [[dx, dy]] = dirOf(a, b), n = [-dy * s * 3000, dx * s * 3000];
+	return poly([...L, [b[0] + n[0], b[1] + n[1]], [a[0] + n[0], a[1] + n[1]]]);
+};
+
+/**
+ * A front strand laid over a closed band where they cross near p: the band is cut free round `front` by g, only inside
+ * the radius R of p.
+ *
+ * @param {Geom} all The band (and anything else under the strand).
+ * @param {Geom} front The strand in front.
+ * @param {readonly number[]} p The crossing.
+ * @param {number} R How far round the crossing the cut reaches.
+ * @param {number} g The gap.
+ * @returns {Shape} The crossing drawn.
+ */
+export const crossOver = (all, front, p, R, g) => U(D(all, I(grown(front, g), circle(...p, R, 120))), front);
+
+/**
+ * A disc, with at least 180 points (two a unit of diameter).
+ *
+ * @param {number} cx The centre.
+ * @param {number} cy The centre.
+ * @param {number} r The radius.
+ * @returns {Polygon} The disc.
+ */
+export const geoDisc = (cx, cy, r) => circle(cx, cy, r, Math.max(180, Math.round(r * 2)));
+
+/**
+ * A knob: a disc of radius r with one slot of width w at `deg` (screen degrees, 0 right, 90 down). `full` splits it along
+ * the whole diameter; otherwise the slot runs from the centre out through the rim (a pointer).
+ *
+ * @param {number} cx The centre.
+ * @param {number} cy The centre.
+ * @param {number} r The radius.
+ * @param {number} deg The slot's angle.
+ * @param {number} w The slot's width.
+ * @param {boolean} [full=true] Split right across, or a pointer.
+ * @returns {Shape} The knob.
+ */
+export const knob = (cx, cy, r, deg, w, full = true) => {
+	const p = polar(r + 30, deg, cx, cy), q = full ? polar(r + 30, deg + 180, cx, cy) : [cx, cy];
+	const slot = full ? band(q, p, w) : U(band(q, p, w), circle(cx, cy, w / 2, 48));
+	return D(geoDisc(cx, cy, r), slot);
+};
+
+/**
+ * Knobs on a grid, centred on the canvas: rows of tokens, each a slot angle (`|` 90, `-` 0, `\` 45, `/` −45, `pN` a
+ * pointer at N degrees, `.` no disc), discs of radius r on a pitch of 2r + g.
+ *
+ * @param {readonly (readonly string[])[]} rows The tokens, row by row.
+ * @param {number} g The gap between discs.
+ * @param {number} w The slot width.
+ * @param {number} r The disc radius.
+ * @returns {Shape} The knobs.
+ */
+export const knobs = (rows, g, w, r) => {
+	const n = Math.max(...rows.map((x) => x.length)), m = rows.length, p = 2 * r + g, out = [];
+	const ang = { '|': 90, '-': 0, '\\': 45, '/': -45 };
+	rows.forEach((row, j) => row.forEach((t, i) => {
+		if (t === '.') return; const cx = C + (i - (n - 1) / 2) * p, cy = C + (j - (m - 1) / 2) * p;
+		out.push(t[0] === 'p' ? knob(cx, cy, r, +t.slice(1), w, false) : knob(cx, cy, r, ang[t], w, true));
+	}));
+	return U(...out);
+};
+
+/**
+ * The disc radius that makes n discs and n − 1 gaps span 448.
+ *
+ * @param {number} n Discs across.
+ * @param {number} g The gap.
+ * @returns {number} The radius.
+ */
+export const rFor = (n, g) => (448 - (n - 1) * g) / n / 2;
+
+/**
+ * A roof tile: a square of side a with a half disc on its far side, the cap pointing at `deg`, centred on the square.
+ *
+ * @param {number} cx The square's centre.
+ * @param {number} cy The square's centre.
+ * @param {number} a Its side.
+ * @param {number} [deg=90] Where the cap points (90: down).
+ * @returns {Shape} The tile.
+ */
+export const roofTile = (cx, cy, a, deg = 90) => rot(U(rect(cx - a / 2, cy - a / 2, a, a), geoDisc(cx, cy + a / 2, a / 2)), deg - 90, cx, cy);
+
+/**
+ * Tiles laid back to front, each over the ones before it and cut free of them by g.
+ *
+ * @param {readonly Geom[]} list The tiles, back first.
+ * @param {number} g The gap.
+ * @returns {Geom} The stack.
+ */
+export const layered = (list, g) => list.reduce((acc, t) => (acc.length ? over(acc, t, g) : t), []);
+
+/**
+ * A triangle's corner points (apex up by default), circumradius R, centred on (cx, cy).
+ *
+ * @param {number} cx The centre.
+ * @param {number} cy The centre.
+ * @param {number} R The circumradius.
+ * @param {number} [deg=-90] The first corner's angle.
+ * @returns {Point[]} The three corners.
+ */
+export const triPts = (cx, cy, R, deg = -90) => [0, 1, 2].map((k) => polar(R, deg + k * 120, cx, cy));
+
+/**
+ * Half a disc: the half on the side `sideDeg` points to.
+ *
+ * @param {number} cx The centre.
+ * @param {number} cy The centre.
+ * @param {number} r The radius.
+ * @param {number} sideDeg The direction of the half kept (90: the lower half).
+ * @returns {Shape} The half disc.
+ */
+export const halfDisc = (cx, cy, r, sideDeg) => I(geoDisc(cx, cy, r), rot(rect(cx - r - 2, cy, 2 * r + 4, r + 2), sideDeg - 90, cx, cy));
+
+/** The split disc's radius. */
+export const R7 = 224;
+
+/**
+ * The disc (radius R7, centred) parted along the polyline L by g, each half's rim moved by sa / sb: the cut stays put, so
+ * the gap stays g.
+ *
+ * @param {readonly Point[]} L The cut.
+ * @param {number} g The gap.
+ * @param {readonly number[]} sa How far the rim on the left side moves.
+ * @param {readonly number[]} sb How far the rim on the right side moves.
+ * @returns {Shape} The two halves.
+ */
+export const splitDisc = (L, g, sa, sb) => {
+	const z = stroke(L, g, { chunk: 4 }), d = (o) => geoDisc(C + o[0], C + o[1], R7);
+	return U(D(I(d(sa), side(L, 1)), z), D(I(d(sb), side(L, -1)), z));
+};
+
+/** A roof tile's side in scales(). */
+export const SA = 150;
+
+/**
+ * Roof tiles at lattice points (i, j), pitch pi·a across and pj·a down (under 1, so each cap lies over the tile below and
+ * the tile beside), caps pointing down, the lattice turned by deg and laid back to front, the far rows first. A tile
+ * listed in `up` faces back up and is laid last, its cap over the tile above it.
+ *
+ * @param {readonly Point[]} cells The lattice points.
+ * @param {number} g The gap.
+ * @param {{ a?: number, pi?: number, pj?: number, deg?: number, up?: readonly Point[] }} [o] The tile side (150), the
+ *   pitches (0.75), the turn (45) and the tiles that face up.
+ * @returns {Shape} The scales.
+ */
+export const scales = (cells, g, { a = 150, pi = 0.75, pj = 0.75, deg = 45, up = [] } = {}) => {
+	const isUp = ([i, j]) => up.some(([ui, uj]) => ui === i && uj === j);
+	const list = cells.slice().sort((p, q) => isUp(p) - isUp(q) || q[1] - p[1] || q[0] - p[0]);
+	return rot(layered(list.map((c) => roofTile(C + c[0] * a * pi, C + c[1] * a * pj, a, isUp(c) ? -90 : 90)), g), deg);
+};
+
+/** The nine points of a 3 × 3 lattice, row by row. */
+export const grid3 = [0, 1, 2].flatMap((j) => [0, 1, 2].map((i) => [i, j]));

package/src/forms/hooks.d.ts

@@ -0,0 +1,40 @@
+import type { Point, Shape } from '../geometry/types.js';
+
+/** A hook: the end it grows from, the neighbour's cap centre it wraps, and its sweep (or end angle e and past). */
+export interface Hook {
+	end?: 0 | 1;
+	c: readonly number[];
+	rn?: number;
+	sw?: number;
+	e?: number;
+	past?: number;
+	t0?: number;
+	t1?: number;
+}
+
+/** The capsule's width (150). */
+export const HOOK_W: number;
+/** The point d from p at angle a (degrees). */
+export function hookAt(p: readonly number[], a: number, d: number): Point;
+/** Where a cap centre sits to hook the neighbour cap at c, at angle a. */
+export function kiss(c: readonly number[], a: number, g: number, r?: number, rn?: number): Point;
+/** A curl: a band of inner radius ri about c, from a0 sweeping sw, tapering t0 → t1, round tip. */
+export function curl(c: readonly number[], ri: number, a0: number, sw: number, t0: number, t1: number, n?: number): Shape;
+/** A capsule along pts with hooks, its curl roots filleted. */
+export function piece(pts: readonly Point[], hooks?: readonly Hook[], o?: { w?: number; bend?: number; g?: number; soft?: number; whole?: boolean }): Shape;
+/** The Track band's width for the gap g (74 at 22). */
+export function TB(g: number): number;
+/** A piece's Track build: its centreline run round each hook, as two tracks. */
+export function trackPiece(pts: readonly Point[], hooks?: readonly Hook[], o?: { g?: number; bend?: number }): Shape;
+/** Points along an arc about c, radius r, from a0 to a1 degrees. */
+export function arc(c: readonly number[], r: number, a0: number, a1: number, n?: number): Point[];
+/** A neighbour's end: its cap centre and the angle it faces. */
+export function endOf(pts: readonly Point[], end?: 0 | 1): { c: Point; e: number };
+/** Every point of every ring of a shape. */
+export function pts0(s: Shape): Point[];
+/** join()'s check switch: with `on`, it logs pieces closer than the gap. */
+export const hookCheck: { on: boolean };
+/** The pieces as one shape, checked when hookCheck.on. */
+export function join(g: number, ...ps: Shape[]): Shape;
+/** A Track piece's end: c + (TB(g) + g) along d ± 90°. */
+export function tq(c: readonly number[], d: number, side: number, g: number): Point;