@logomarks/core 0.1.9 → 0.2.0

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;

package/src/forms/hooks.js

@@ -0,0 +1,204 @@
+/**
+ * Bold hooks: capsules whose round end runs on into a curl that wraps a neighbour's round end, the gap exact all round,
+ * and their Track build (the same layout drawn as two tracks). Angles are degrees, 0 right, 90 down. From the Logomarks
+ * tools (hookparts.mjs, batch 214, "Bold · Hooks", and its editions in batch 220).
+ */
+import { I, U, circle, fillet, pill, poly, rad, soften, stroke, tracks } from '../geometry/index.js';
+
+/** @typedef {import('../geometry/types.js').Point} Point */
+/** @typedef {import('../geometry/types.js').Shape} Shape */
+/** @typedef {import('../geometry/types.js').Geom} Geom */
+
+/**
+ * A hook: the end of a piece it grows from, the neighbour's cap centre it wraps, and how far it sweeps.
+ *
+ * @typedef {object} Hook
+ * @property {0 | 1} [end] The end it grows from: 0 the first point, 1 (the default) the last.
+ * @property {readonly number[]} c The neighbour's cap centre.
+ * @property {number} [rn] The neighbour's cap radius (HOOK_W / 2).
+ * @property {number} [sw] The sweep, degrees; or give `e`.
+ * @property {number} [e] The angle the curl should end at (the neighbour's end direction), when `sw` isn't given.
+ * @property {number} [past] Degrees past `e`.
+ * @property {number} [t0] The curl's width at its root (the piece's width).
+ * @property {number} [t1] Its width at the tip (0.44 of the piece's width).
+ */
+
+/** The capsule's width. */
+export const HOOK_W = 150;
+
+/**
+ * The point d from p at angle a.
+ *
+ * @param {readonly number[]} p The point.
+ * @param {number} a The angle, degrees.
+ * @param {number} d The distance.
+ * @returns {Point} The point reached.
+ */
+export const hookAt = (p, a, d) => [p[0] + d * Math.cos(rad(a)), p[1] + d * Math.sin(rad(a))];
+
+/**
+ * The angle from p to q, degrees.
+ *
+ * @param {readonly number[]} p From.
+ * @param {readonly number[]} q To.
+ * @returns {number} The angle.
+ */
+const ang = (p, q) => (Math.atan2(q[1] - p[1], q[0] - p[0]) * 180) / Math.PI;
+
+/**
+ * The distance from p to q.
+ *
+ * @param {readonly number[]} p From.
+ * @param {readonly number[]} q To.
+ * @returns {number} The distance.
+ */
+const dist = (p, q) => Math.hypot(q[0] - p[0], q[1] - p[1]);
+
+/**
+ * Where a piece's cap centre sits to hook the neighbour cap at c: at angle a from c, the two caps and the gap apart.
+ *
+ * @param {readonly number[]} c The neighbour's cap centre.
+ * @param {number} a The angle from it, degrees.
+ * @param {number} g The gap.
+ * @param {number} [r=HOOK_W / 2] This cap's radius.
+ * @param {number} [rn=HOOK_W / 2] The neighbour's.
+ * @returns {Point} The cap centre.
+ */
+export const kiss = (c, a, g, r = HOOK_W / 2, rn = HOOK_W / 2) => hookAt(c, a, r + rn + g);
+
+/**
+ * The curl: a band whose inner edge is radius ri about c, from angle a0 sweeping sw degrees, tapering t0 → t1, with a
+ * round tip.
+ *
+ * @param {readonly number[]} c The centre.
+ * @param {number} ri The inner radius.
+ * @param {number} a0 The start angle, degrees.
+ * @param {number} sw The sweep, degrees.
+ * @param {number} t0 The width at the start.
+ * @param {number} t1 The width at the tip.
+ * @param {number} [n=120] Steps along it.
+ * @returns {Shape} The curl.
+ */
+export const curl = (c, ri, a0, sw, t0, t1, n = 120) => {
+	const inner = [], outer = [];
+	for (let i = 0; i <= n; i++) { const f = i / n, a = a0 + sw * f, t = t1 + (t0 - t1) * (1 - f) ** 2; inner.push(hookAt(c, a, ri)); outer.push(hookAt(c, a, ri + t)); }
+	return U(poly([...inner, ...outer.reverse()]), circle(...hookAt(c, a0 + sw, ri + t1 / 2), t1 / 2, 120));
+};
+
+/**
+ * A piece: a capsule w wide along `pts` (corners filleted by `bend`), with hooks. Each hook names the end it grows from,
+ * the neighbour's cap centre and the sweep; it logs when the end isn't a kiss from the neighbour. The root of each curl is
+ * filleted (`soft`) where it leaves the round end, and only there, so a same-piece gap under 2·soft (a bowl's tip near its
+ * stem) doesn't close up; `whole` fillets every inner corner of a piece with no such gap.
+ *
+ * @param {readonly Point[]} pts The capsule's centreline.
+ * @param {readonly Hook[]} [hooks=[]] Its hooks.
+ * @param {{ w?: number, bend?: number, g?: number, soft?: number, whole?: boolean }} [o] Width (HOOK_W), corner fillet
+ *   (90), gap (22), root fillet (40), and whether to fillet every inner corner.
+ * @returns {Shape} The piece.
+ */
+export const piece = (pts, hooks = [], { w = HOOK_W, bend = 90, g = 22, soft = 40, whole = false } = {}) => {
+	const body = pts.length === 2 ? pill(pts[0], pts[1], w) : stroke(bend ? fillet(pts, bend) : pts, w, { roundCaps: true, chunk: 8 });
+	const curls = hooks.map(({ end = 1, c, rn = HOOK_W / 2, sw, e, past = 0, t0 = w, t1 = 0.44 * w }) => {
+		const q = end ? pts.at(-1) : pts[0];
+		const d = dist(c, q), want = w / 2 + rn + g; if (Math.abs(d - want) > 0.5) console.log(`  hook off by ${(d - want).toFixed(1)}`);
+		const a0 = ang(c, q); if (sw == null) { const dd = ((e - a0 + 540) % 360) - 180; sw = dd + Math.sign(dd) * past; }
+		return curl(c, rn + g, a0, sw, t0, t1);
+	});
+	const roots = hooks.map(({ end = 1 }) => circle(...(end ? pts.at(-1) : pts[0]), 0.9 * w, 160));
+	if (soft && whole) return soften(U(body, ...curls), soft, 0);
+	return soft && roots.length ? U(body, ...curls, I(soften(U(body, ...curls), soft, 0), ...(roots.length > 1 ? [U(...roots)] : roots))) : U(body, ...curls);
+};
+
+/**
+ * The Track band's width for the gap g: 74 at 22, so the Track build lands on the house Track rules once fitted. Pass it
+ * as `r` and `rn` to kiss() for a Track layout.
+ *
+ * @param {number} g The gap.
+ * @returns {number} The band width.
+ */
+export const TB = (g) => (74 * g) / 22;
+
+/**
+ * The Track build of a piece: its centreline run on round each hook's neighbour (at the kiss distance, so the curl's inner
+ * track clears the neighbour's tracks by g), drawn as two tracks 26 wide at pitch 48, both scaled with g.
+ *
+ * @param {readonly Point[]} pts The centreline.
+ * @param {readonly Hook[]} [hooks=[]] Its hooks (`end`, `c`, `sw` or `e` and `past`).
+ * @param {{ g?: number, bend?: number }} [o] The gap (22) and the corner fillet (60).
+ * @returns {Shape} The two tracks.
+ */
+export const trackPiece = (pts, hooks = [], { g = 22, bend = 60 } = {}) => {
+	let path = pts.slice();
+	for (const { end = 1, c, sw: sw0, e, past = 0 } of hooks) {
+		if (!end) path = path.slice().reverse(); const q = path.at(-1), a0 = ang(c, q);
+		let sw = sw0; if (sw == null) { const dd = ((e - a0 + 540) % 360) - 180; sw = dd + Math.sign(dd) * past; }
+		path = [...path, ...arc(c, dist(c, q), a0, a0 + sw, Math.max(8, Math.ceil(Math.abs(sw) / 4))).slice(1)];
+	}
+	return tracks(bend ? fillet(path, bend) : path, { n: 2, pitch: (48 * g) / 22, w: (26 * g) / 22 });
+};
+
+/**
+ * Points along an arc about c, radius r, from a0 to a1 degrees.
+ *
+ * @param {readonly number[]} c The centre.
+ * @param {number} r The radius.
+ * @param {number} a0 The start angle.
+ * @param {number} a1 The end angle.
+ * @param {number} [n=60] Steps.
+ * @returns {Point[]} n + 1 points.
+ */
+export const arc = (c, r, a0, a1, n = 60) => [...Array(n + 1)].map((_, i) => hookAt(c, a0 + ((a1 - a0) * i) / n, r));
+
+/**
+ * A neighbour's end, for a hook: its cap centre and the way the end faces.
+ *
+ * @param {readonly Point[]} pts The neighbour's centreline.
+ * @param {0 | 1} [end=1] Which end.
+ * @returns {{ c: Point, e: number }} The cap centre and the angle the end faces.
+ */
+export const endOf = (pts, end = 1) => (end ? { c: pts.at(-1), e: ang(pts.at(-2), pts.at(-1)) } : { c: pts[0], e: ang(pts[1], pts[0]) });
+
+/**
+ * Every point of every ring of a shape.
+ *
+ * @param {Shape} s The shape.
+ * @returns {Point[]} The points.
+ */
+export const pts0 = (s) => s.flatMap((pg) => pg.flatMap((r) => r));
+
+/**
+ * The least distance between two shapes' outline points.
+ *
+ * @param {Shape} a One shape.
+ * @param {Shape} b The other.
+ * @returns {number} The distance.
+ */
+const near = (a, b) => { let m = 1e9; const pa = pts0(a), pb = pts0(b); for (const p of pa) for (const q of pb) { const d = (p[0] - q[0]) ** 2 + (p[1] - q[1]) ** 2; if (d < m) m = d; } return Math.sqrt(m); };
+
+/** join()'s check: set `on` to have it log any two pieces closer than the gap. */
+export const hookCheck = { on: false };
+
+/**
+ * The pieces as one shape; with hookCheck.on, it logs any two that come closer than the gap.
+ *
+ * @param {number} g The gap.
+ * @param {...Shape} ps The pieces.
+ * @returns {Shape} Their union.
+ */
+export const join = (g, ...ps) => {
+	if (hookCheck.on) for (let i = 0; i < ps.length; i++) for (let j = i + 1; j < ps.length; j++) { const d = near(ps[i], ps[j]); if (d < g - 0.6) console.log(`  pieces ${i},${j} only ${d.toFixed(1)} apart (g ${g.toFixed(1)})`); }
+	return U(...ps);
+};
+
+/**
+ * For the Track build: a straight run must enter the curl on its tangent (a corner there kinks the outer track), so the
+ * piece's end sits a quarter turn round from where the bold build puts it: c + (TB(g) + g) along d ± 90°.
+ *
+ * @param {readonly number[]} c The neighbour's cap centre.
+ * @param {number} d The run's direction, degrees.
+ * @param {number} side Which side: 1 or −1.
+ * @param {number} g The gap.
+ * @returns {Point} The piece's end.
+ */
+export const tq = (c, d, side, g) => hookAt(c, d + side * 90, TB(g) + g);