@logomarks/core 0.1.11 → 0.2.0

package/src/forms/shatter.js

@@ -0,0 +1,341 @@
+/**
+ * Shatter: a solid form whose one side breaks into a few angular shards that drift off, smaller as they go, every part a
+ * house gap from the next. The shards are irregular triangles from a seeded strip (so seed Math.random per mark), not a
+ * grid of squares. A mark is made by `breakOff()`:
+ *
+ * 1. `shardStrip(inner, outer, o)`: the zone that breaks off is a band between two rails, the inner one (the crack, or a
+ *    ring's inside) and the outer one (the form's own outline), each a function of s in 0…1 (`rail()`, `bandRails()`).
+ *    Nodes go down both rails in turn, seeded and stepping down in size, and every three in a row make a triangle: a strip
+ *    of shards that tiles the band, the outer side of each still on the form's outline, so the eye completes the form.
+ * 2. `cutBack()`: the body is the form less the band, cut back half a gap along the crack by a mitred band (its edge stays
+ *    sharp); every shard is inset half a gap (`inset()`), so the strip starts as a mosaic with every part a gap apart.
+ * 3. `drift(body, shards, o)`: each shard is turned, shrunk about its centre and moved by its place along the strip
+ *    (`spread()`: out from a point inside the form), nearest the body first, and pushed on along its move until it is a
+ *    gap clear of the body and of every shard before it. A mark keeps no shard under 28 across once fitted.
+ *
+ * From the Logomarks tools (shatterparts.mjs, batch 231, "Bold · Shatter", and batch 241).
+ */
+import { U, D, I, poly, mapPts, bar, soften, mitreBand as mitred, mitreOffset as mitreOff } from '../geometry/index.js';
+
+/** @typedef {import('../geometry/types.js').Point} Point */
+/** @typedef {import('../geometry/types.js').Ring} Ring */
+/** @typedef {import('../geometry/types.js').Polygon} Polygon */
+/** @typedef {import('../geometry/types.js').Shape} Shape */
+/** @typedef {import('../geometry/types.js').Geom} Geom */
+/** @typedef {(s: number) => Point} Rail */
+
+/**
+ * A shard of a strip.
+ *
+ * @typedef {object} Shard
+ * @property {Ring} r Its ring.
+ * @property {number} s Its place along the strip, 0…1.
+ * @property {'inner' | 'outer'} base The rail its long side lies on.
+ * @property {Point} [c] Its centre (drift() adds it).
+ */
+
+/**
+ * A shard's move in drift().
+ *
+ * @typedef {object} ShardMove
+ * @property {number} [k] Its shrink about its centre (1: none).
+ * @property {number} [deg] Its turn, degrees.
+ * @property {readonly number[]} [d] Its move [dx, dy].
+ */
+
+/* ---------- measures ---------- */
+
+/**
+ * The pieces of a shape as single polygons ([outer, ...holes]).
+ *
+ * @param {Geom} s The shape.
+ * @returns {Shape} The polygons.
+ */
+const polys = (s) => (s.length && typeof s[0][0][0] === 'number' ? [s] : s);
+
+/**
+ * The area of a ring.
+ *
+ * @param {readonly Point[]} r The ring.
+ * @returns {number} Its area.
+ */
+const area = (r) => Math.abs(r.reduce((s, p, i) => { const q = r[(i + 1) % r.length]; return s + p[0] * q[1] - q[0] * p[1]; }, 0) / 2);
+
+/**
+ * The centre of mass of a ring.
+ *
+ * @param {readonly Point[]} r The ring.
+ * @returns {Point} Its centroid.
+ */
+const centroid = (r) => {
+	let a = 0, x = 0, y = 0;
+	r.forEach((p, i) => { const q = r[(i + 1) % r.length], c = p[0] * q[1] - q[0] * p[1]; a += c; x += (p[0] + q[0]) * c; y += (p[1] + q[1]) * c; });
+	return [x / (3 * a), y / (3 * a)];
+};
+
+/**
+ * A ring's width across its narrowest: over the edges every vertex lies behind (its hull edges), the least of each edge's
+ * greatest reach. A triangle's shortest altitude.
+ *
+ * @param {readonly Point[]} r The ring.
+ * @returns {number} The width.
+ */
+const minWidth = (r) => {
+	let best = Infinity;
+	r.forEach((p, i) => {
+		const q = r[(i + 1) % r.length], L = Math.hypot(q[0] - p[0], q[1] - p[1]); if (L < 1e-6) return;
+		let lo = 0, hi = 0; for (const v of r) { const d = ((q[0] - p[0]) * (v[1] - p[1]) - (q[1] - p[1]) * (v[0] - p[0])) / L; lo = Math.min(lo, d); hi = Math.max(hi, d); }
+		if (lo > -0.5 || hi < 0.5) best = Math.min(best, Math.max(-lo, hi));
+	});
+	return best;
+};
+
+/**
+ * The distance from the point p to the segment ab.
+ *
+ * @param {readonly number[]} p The point.
+ * @param {readonly number[]} a The segment's start.
+ * @param {readonly number[]} b Its end.
+ * @returns {number} The distance.
+ */
+const segDist = (p, a, b) => {
+	const dx = b[0] - a[0], dy = b[1] - a[1], L2 = dx * dx + dy * dy, t = L2 ? Math.max(0, Math.min(1, ((p[0] - a[0]) * dx + (p[1] - a[1]) * dy) / L2)) : 0;
+	return Math.hypot(p[0] - a[0] - t * dx, p[1] - a[1] - t * dy);
+};
+
+/**
+ * The gap between two shapes: 0 when they touch or overlap, else the least vertex-to-edge distance either way.
+ *
+ * @param {Geom} a One shape.
+ * @param {Geom} b The other.
+ * @returns {number} The gap.
+ */
+const gapBetween = (a, b) => {
+	if (I(a, b).length) return 0; let best = Infinity;
+	const rings = (s) => polys(s).flat();
+	for (const ra of rings(a)) for (const rb of rings(b)) for (const [P, Q] of [[ra, rb], [rb, ra]]) for (const p of P) for (let i = 0; i < Q.length; i++) best = Math.min(best, segDist(p, Q[i], Q[(i + 1) % Q.length]));
+	return best;
+};
+
+/* ---------- rails ---------- */
+
+/**
+ * The point t of the way from a to b.
+ *
+ * @param {readonly number[]} a From.
+ * @param {readonly number[]} b To.
+ * @param {number} t How far.
+ * @returns {Point} The point.
+ */
+const lerp = (a, b, t) => [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t];
+
+/**
+ * A rail along a polyline, by arc length: s in 0…1 to a point.
+ *
+ * @param {readonly Point[]} pts The polyline.
+ * @returns {Rail} The rail.
+ */
+export const rail = (pts) => {
+	const L = pts.slice(1).map((p, i) => Math.hypot(p[0] - pts[i][0], p[1] - pts[i][1])), tot = L.reduce((a, b) => a + b, 0);
+	return (s) => { let d = Math.max(0, Math.min(1, s)) * tot; for (let i = 0; i < L.length; i++) { if (d <= L[i] || i === L.length - 1) return lerp(pts[i], pts[i + 1], Math.min(1, d / L[i])); d -= L[i]; } };
+};
+
+/**
+ * The run of a closed outline from the vertex nearest p, forward, to the vertex nearest q.
+ *
+ * @param {readonly Point[]} ring The outline.
+ * @param {readonly number[]} p Where the run starts.
+ * @param {readonly number[]} q Where it ends.
+ * @returns {Point[]} The run.
+ */
+export const outlineRun = (ring, p, q) => {
+	const near = (t) => ring.reduce((b, v, i) => (Math.hypot(v[0] - t[0], v[1] - t[1]) < Math.hypot(ring[b][0] - t[0], ring[b][1] - t[1]) ? i : b), 0);
+	const i = near(p), j = near(q), out = []; for (let k = i; ; k = (k + 1) % ring.length) { out.push(ring[k]); if (k === j) break; } return out;
+};
+
+/**
+ * The two rails of a band w wide along a centreline, offset by mitres.
+ *
+ * @param {readonly Point[]} pts The centreline.
+ * @param {number} w The band's width.
+ * @returns {[Rail, Rail]} The left rail (y down), then the right.
+ */
+export const bandRails = (pts, w) => [rail(mitreOff(pts, w / 2)), rail(mitreOff(pts, -w / 2))];
+
+/**
+ * The place s on a rail nearest a point (to 1/400).
+ *
+ * @param {Rail} f The rail.
+ * @param {readonly number[]} p The point.
+ * @returns {number} The place.
+ */
+const closest = (f, p) => { let best = 0, d = Infinity; for (let q = 0; q <= 400; q++) { const v = f(q / 400), e = Math.hypot(v[0] - p[0], v[1] - p[1]); if (e < d) { d = e; best = q / 400; } } return best; };
+
+/* ---------- the strip ---------- */
+
+/**
+ * The shards of a band between two rails. n + 2 nodes alternate down the rails (outer first, at s = 0), each step `ratio`
+ * times the last, so the shards get smaller down the strip, and each inner node is jittered by up to `jit` of its step;
+ * the last two sit at s = 1 on both rails. Every three nodes in a row make a triangle, its rail sides following the rails'
+ * curves (`arcN` points), so the strip tiles the band; a triangle with no area (where the rails meet) is dropped.
+ *
+ * @param {Rail} inner The inner rail.
+ * @param {Rail} outer The outer rail.
+ * @param {{ n?: number, ratio?: number, jit?: number, rng?: () => number, arcN?: number }} [o] Shards (6), the step
+ *   ratio (0.85), the jitter (0.3), the random source (Math.random) and the points along each rail side (80).
+ * @returns {Shard[]} The shards.
+ */
+export const shardStrip = (inner, outer, { n = 6, ratio = 0.85, jit = 0.3, rng = Math.random, arcN = 80 } = {}) => {
+	const steps = [...Array(n)].map((_, i) => ratio ** i), tot = steps.reduce((a, b) => a + b, 0), p = [0];
+	steps.forEach((d, i) => p.push(i === n - 1 ? 1 : p.at(-1) + d / tot)); p.push(1);
+	for (let j = 1; j < n; j++) p[j] += (rng() - 0.5) * 2 * jit * (steps[j - 1] / tot) * 0.5;
+	const ns = p.map((s, j) => ({ rail: j % 2 ? inner : outer, s }));
+	const run = (rail, s0, s1) => [...Array(arcN + 1)].map((_, q) => rail(s0 + ((s1 - s0) * q) / arcN));
+	return [...Array(n)].map((_, i) => { const [a, b, c] = ns.slice(i, i + 3); return { r: [...run(a.rail, a.s, c.s), b.rail(b.s)], s: (a.s + b.s + c.s) / 3, base: i % 2 ? 'inner' : 'outer' }; })
+		.filter((q) => area(q.r) > 1);
+};
+
+/**
+ * A shard shrunk in by half a gap all round, each straight side's band run on 3g past its corners so an acute tip leaves
+ * no needle (a rail's short arc steps are not run on: on a hollow arc that would groove the shard), then opened by 3
+ * (soften) to clear any hairline left where an arc meets a side.
+ *
+ * @param {readonly Point[]} r The shard's ring.
+ * @param {number} g The gap.
+ * @returns {Ring | undefined} The inset ring (its largest piece), or nothing if it vanishes.
+ */
+export const inset = (r, g) => polys(D(poly(r), ...r.flatMap((p, i) => {
+	const q = r[(i + 1) % r.length], L = Math.hypot(q[0] - p[0], q[1] - p[1]);
+	if (L < 1e-6) return []; const e = L > 30 ? (3 * g) / L : 0, u = [(q[0] - p[0]) * e, (q[1] - p[1]) * e];
+	return [bar([p[0] - u[0], p[1] - u[1]], [q[0] + u[0], q[1] + u[1]], g)];
+})))
+	.map((pg) => polys(soften([pg[0]], 0, 3))[0]?.[0]).filter(Boolean).sort((a, b) => area(b) - area(a))[0];
+
+/**
+ * The body: the form less the band between the rails, cut back by half a gap along the crack. The crack runs from the
+ * outer rail's start to the first inner node `i0`, down the inner rail, and back out to the outer rail's end (where the
+ * rails part there), run on 40 past both ends so it cuts cleanly through the outline; it is a mitred band g wide, so its
+ * edge stays sharp. Slivers of form under 400 in area are dropped.
+ *
+ * @param {Geom} shape The form.
+ * @param {Rail} inner The inner rail.
+ * @param {Rail} outer The outer rail.
+ * @param {readonly number[]} i0 The first inner node.
+ * @param {number} g The gap.
+ * @param {number} [k=60] Points along each rail run.
+ * @returns {Shape} The body.
+ */
+export const cutBack = (shape, inner, outer, i0, g, k = 60) => {
+	const at = (f, s0, s1) => [...Array(k + 1)].map((_, q) => f(s0 + ((s1 - s0) * q) / k));
+	const o1 = outer(1), in1 = inner(1); let crack = [outer(0), ...at(inner, closest(inner, i0), 1)];
+	if (Math.hypot(o1[0] - in1[0], o1[1] - in1[1]) > 1) crack.push(o1);
+	crack = crack.filter((p, i) => !i || Math.hypot(p[0] - crack[i - 1][0], p[1] - crack[i - 1][1]) > 0.5);
+	const on = (a, b) => { const L = Math.hypot(b[0] - a[0], b[1] - a[1]); return [b[0] + ((b[0] - a[0]) / L) * 40, b[1] + ((b[1] - a[1]) / L) * 40]; };
+	const zone = poly([...crack, ...at(outer, 1, 0)]);
+	// the zone's outer side is a chord of a curved outline, so drop the hairline slivers of form it leaves outside the crack
+	return polys(D(shape, zone, mitred([on(crack[1], crack[0]), ...crack, on(crack.at(-2), crack.at(-1))], g))).filter((pg) => area(pg[0]) > 400);
+};
+
+/* ---------- the drift ---------- */
+
+/**
+ * A shape shrunk by k about c, turned by deg and moved by (dx, dy).
+ *
+ * @param {Geom} s The shape.
+ * @param {readonly number[]} c The pivot.
+ * @param {number} k The shrink.
+ * @param {number} deg The turn, degrees.
+ * @param {readonly number[]} d The move.
+ * @returns {Geom} The shape, moved.
+ */
+const xf = (s, c, k, deg, [dx, dy]) => {
+	const a = (deg * Math.PI) / 180, co = Math.cos(a), si = Math.sin(a);
+	return mapPts(s, ([x, y]) => { const u = (x - c[0]) * k, v = (y - c[1]) * k; return [c[0] + u * co - v * si + dx, c[1] + u * si + v * co + dy]; });
+};
+
+/**
+ * Lets the shards drift off the body, nearest first. `move(p)` gives each shard (its ring p.r, its place p.s, its centre
+ * p.c) its shrink, turn and move. A shard is pushed on along its move in steps until it sits at least g clear of the body
+ * and of every shard already placed; a shard under `min` across is dropped, so the strip thins out at its end.
+ *
+ * @param {Geom} body The body.
+ * @param {readonly Shard[]} shards The inset shards.
+ * @param {{ move: (p: Shard & { c: Point }) => ShardMove, g: number, step?: number, min: number }} o The move, the gap,
+ *   the push step (4) and the least shard width.
+ * @returns {Geom[]} The placed shards.
+ */
+export const drift = (body, shards, { move, g, step = 4, min }) => {
+	const ranked = shards.map((p) => ({ ...p, c: centroid(p.r) })).sort((a, b) => a.s - b.s), placed = [];
+	ranked.forEach((p) => {
+		const { k = 1, deg = 0, d = [0, 0] } = move(p), L = Math.hypot(...d) || 1, u = [d[0] / L, d[1] / L];
+		let s, extra = 0; for (let t = 0; t < 80; t++) {
+			s = xf(poly(p.r), p.c, k, deg, [d[0] + u[0] * extra, d[1] + u[1] * extra]);
+			if (gapBetween(s, body) >= g && placed.every((q) => gapBetween(s, q) >= g)) break; extra += step;
+		}
+		if (minWidth(s[0]) >= min) placed.push(s);
+	});
+	return placed;
+};
+
+/**
+ * A drift that spreads the shards away from a point inside the form (an exploded view of the broken edge): each moves out
+ * by `grow` [start, growth along the strip] times its distance from `from`, shrunk by `shrink` × its place, and turned up
+ * to ± `turn`° (seeded through Math.random, more further on).
+ *
+ * @param {readonly number[]} from The point they spread from.
+ * @param {readonly number[]} grow [start, growth along the strip].
+ * @param {number} [shrink=0.35] The shrink at the strip's end.
+ * @param {number} [turn=8] The most turn, degrees.
+ * @returns {(p: Shard & { c: Point }) => ShardMove} The move, for drift().
+ */
+export const spread = (from, grow, shrink = 0.35, turn = 8) => (p) => {
+	const t = p.s, e = grow[0] + grow[1] * t;
+	return { k: 1 - shrink * t, deg: (Math.random() - 0.5) * 2 * turn * (0.3 + t), d: [(p.c[0] - from[0]) * e, (p.c[1] - from[1]) * e] };
+};
+
+/* ---------- the mark ---------- */
+
+/**
+ * A form breaking on one side: the band between `inner` and `outer` splits into a strip of n shards (only those based on
+ * the outer rail are kept, unless `all`), the body is cut back, the shards are inset and drift by `move`. `min` scales
+ * with the gap, so no shard is under 28 across once the mark is fitted. Seeded through Math.random.
+ *
+ * @param {Geom} shape The form.
+ * @param {Rail} inner The inner rail.
+ * @param {Rail} outer The outer rail.
+ * @param {{ n?: number, ratio?: number, jit?: number, all?: boolean, move: (p: Shard & { c: Point }) => ShardMove, g: number, min?: number }} o
+ *   Shards (6), the step ratio (0.8), the jitter (0.4), whether to keep every shard (true), the move, the gap and the least
+ *   shard width (28/22 of g).
+ * @returns {Shape} The broken form.
+ */
+export const breakOff = (shape, inner, outer, { n = 6, ratio = 0.8, jit = 0.4, all = true, move, g, min = (28 / 22) * g }) => {
+	const sh = shardStrip(inner, outer, { n, ratio, jit, rng: Math.random }), body = cutBack(shape, inner, outer, sh[0].r.at(-1), g);
+	const kept = (all ? sh : sh.filter((p) => p.base === 'outer')).map((p) => ({ ...p, r: inset(p.r, g) })).filter((p) => p.r && area(p.r) > 1);
+	return U(body, ...drift(body, kept, { move, g, min }));
+};
+
+/**
+ * The house recipe: breakOff() with 6 shards, each step 0.8 of the last, all kept, spread out from `from` (the canvas
+ * centre) by 0.05 + 0.5 × their place along the strip, shrunk up to 35%, turned up to ±8°; any of it overridden by `o`.
+ *
+ * @param {Geom} shape The form.
+ * @param {Rail} inner The inner rail.
+ * @param {Rail} outer The outer rail.
+ * @param {{ from?: readonly number[], grow?: readonly number[], shrink?: number, turn?: number, n?: number, ratio?: number, jit?: number, all?: boolean, min?: number }} [o]
+ *   Overrides.
+ * @returns {(g: number) => Shape} The build of the gap.
+ */
+export const houseBreak = (shape, inner, outer, o = {}) => (g) => {
+	const { from = [256, 256], grow = [0.05, 0.5], shrink = 0.35, turn = 8, ...rest } = o;
+	return breakOff(shape, inner, outer, { n: 6, ratio: 0.8, jit: 0.4, all: true, move: spread(from, grow, shrink, turn), ...rest, g });
+};
+
+/**
+ * The point k of the way from p to q.
+ *
+ * @param {readonly number[]} p From.
+ * @param {readonly number[]} q To.
+ * @param {number} k How far.
+ * @returns {Point} The point.
+ */
+export const lerpAt = (p, q, k) => [p[0] + (q[0] - p[0]) * k, p[1] + (q[1] - p[1]) * k];

package/src/forms/slats.d.ts

@@ -0,0 +1,35 @@
+import type { Shape } from '../geometry/types.js';
+
+/** One slab of a slat row: its turn (the sine, −1 to 1) and, optionally, its own width, height and centre shift. */
+export interface Slat {
+	tau: number;
+	W?: number;
+	H?: number;
+	dy?: number;
+}
+/** A slat row's drawing: full width and height, perspective, gap, narrowest slab, centre and alignment. */
+export interface SlatRowOptions {
+	W: number;
+	H: number;
+	k: number;
+	g: number;
+	wMin: number;
+	cx?: number;
+	cy?: number;
+	align?: 'centre' | 'base' | 'top';
+}
+/** A slab as its two edges, left then right: [x, top, bottom] each. */
+export type SlatEdges = [number, number, number][];
+
+/** The projected width of a slab of full width W turned by τ, never under wMin. */
+export function turnWidth(W: number, tau: number, wMin: number): number;
+/** A row of turning slabs side by side, every gap exactly g, centred on cx. */
+export function slatRow(slabs: readonly Slat[], o: SlatRowOptions): SlatEdges[];
+/** A slat row's slabs as one shape. */
+export function quads(row: readonly (readonly (readonly number[])[])[]): Shape;
+/** A slat row stood on its side as one shape ((x, y) becomes (y, x)). */
+export function quadsT(row: readonly (readonly (readonly number[])[])[]): Shape;
+/** n turns easing from a to b (sine ease). */
+export function ease(n: number, a: number, b: number): number[];
+/** n turns spaced evenly from a to b. */
+export function lerpN(n: number, a: number, b: number): number[];

package/src/forms/slats.js

@@ -0,0 +1,78 @@
+/**
+ * Turning slats: a row of flat slabs, each seen turning on its own axis, so the row reads as one panel opening, a page
+ * turning or a fan. A slab turned by τ (the sine of its turn, −1 to 1) shows a projected width of W·cos and keeps its
+ * edges upright; its near edge grows and its far edge shrinks by the perspective k (half-heights H/2 · (1 ± k·τ)), so
+ * its top and bottom edges slope towards the far side; τ > 0 turns the right edge away. The gaps are upright strips, so
+ * they stay exactly g, and no slab comes out narrower than wMin (an edge-on slab is a sliver, never a hairline).
+ * From the Logomarks tools (slatparts.mjs, batch 236, "Bold · Slats").
+ */
+import { poly, U } from '../geometry/index.js';
+
+/**
+ * The projected width of a slab of full width W turned by τ, never under wMin.
+ *
+ * @param {number} W The slab's full width.
+ * @param {number} tau The sine of its turn (−1 to 1).
+ * @param {number} wMin The narrowest it may show.
+ * @returns {number} Its projected width.
+ */
+export const turnWidth = (W, tau, wMin) => Math.max(wMin, W * Math.sqrt(Math.max(0, 1 - tau * tau)));
+
+/**
+ * A row of turning slabs, side by side with the gap g between every two, the row centred on x = cx. Each slab may carry
+ * its own full width W, height H and centre shift dy (a bowed row, or slabs shrinking along it); `align` stands every
+ * slab on one floor line ('base') or hangs it from one ('top').
+ *
+ * @param {readonly { tau: number, W?: number, H?: number, dy?: number }[]} slabs Each slab's turn, full width, full
+ *   height and centre shift.
+ * @param {{ W: number, H: number, k: number, g: number, wMin: number, cx?: number, cy?: number, align?: 'centre' | 'base' | 'top' }} o
+ *   The slabs' full width and height, the perspective k, the gap g, the narrowest slab wMin, the row's centre
+ *   (cx, cy; 256, 256) and how the slabs line up (centre).
+ * @returns {[number, number, number][][]} Each slab as its two edges [[x, top, bottom], [x, top, bottom]], left then right.
+ */
+export function slatRow(slabs, { W, H, k, g, wMin, cx = 256, cy = 256, align = 'centre' }) {
+	const ws = slabs.map((s) => turnWidth(s.W ?? W, s.tau, wMin)), total = ws.reduce((a, b) => a + b, 0) + g * (slabs.length - 1);
+	let x = cx - total / 2;
+	return slabs.map((s, i) => {
+		const h = s.H ?? H, c = cy + (s.dy ?? 0), hl = (h / 2) * (1 + k * s.tau), hr = (h / 2) * (1 - k * s.tau);
+		const edge = (xx, hh) => (align === 'base' ? [xx, c + h / 2 - 2 * hh, c + h / 2] : align === 'top' ? [xx, c - h / 2, c - h / 2 + 2 * hh] : [xx, c - hh, c + hh]);
+		const out = [edge(x, hl), edge(x + ws[i], hr)]; x += ws[i] + g; return out;
+	});
+}
+
+/**
+ * A slat row's slabs as one shape.
+ *
+ * @param {readonly (readonly (readonly number[])[])[]} row The row (slatRow()).
+ * @returns {import('../geometry/types.js').Shape} The slabs.
+ */
+export const quads = (row) => U(...row.map(([[x0, t0, b0], [x1, t1, b1]]) => poly([[x0, t0], [x1, t1], [x1, b1], [x0, b0]])));
+
+/**
+ * A slat row stood on its side as one shape: every point (x, y) becomes (y, x), so upright slabs turning on a vertical
+ * axis become flat ones turning on a horizontal axis.
+ *
+ * @param {readonly (readonly (readonly number[])[])[]} row The row (slatRow()).
+ * @returns {import('../geometry/types.js').Shape} The slabs.
+ */
+export const quadsT = (row) => U(...row.map(([[x0, t0, b0], [x1, t1, b1]]) => poly([[t0, x0], [t1, x1], [b1, x1], [b0, x0]])));
+
+/**
+ * n turns easing from a to b (a sine ease, so the turn speeds up through the middle).
+ *
+ * @param {number} n How many.
+ * @param {number} a The first.
+ * @param {number} b The last.
+ * @returns {number[]} The turns.
+ */
+export const ease = (n, a, b) => [...Array(n)].map((_, i) => a + ((b - a) * (1 - Math.cos((Math.PI * i) / (n - 1)))) / 2);
+
+/**
+ * n turns spaced evenly from a to b.
+ *
+ * @param {number} n How many.
+ * @param {number} a The first.
+ * @param {number} b The last.
+ * @returns {number[]} The turns.
+ */
+export const lerpN = (n, a, b) => [...Array(n)].map((_, i) => a + ((b - a) * i) / (n - 1));

package/src/forms/swash.d.ts

@@ -0,0 +1,23 @@
+import type { Point, Shape, Geom } from '../geometry/types.js';
+
+/** A swash's width and balls: swell()'s w0, w1, peak and pow, the balls' radii r0 and r1, or a width profile. */
+export interface SwashOptions {
+	w0?: number;
+	w1?: number;
+	peak?: number;
+	pow?: number;
+	r0?: number;
+	r1?: number;
+	width?: (t: number) => number;
+}
+
+/** The swash width profile: w0 at both ends swelling to w1 at `peak`. */
+export function swell(o?: { w0?: number; w1?: number; peak?: number; pow?: number }): (t: number) => number;
+/** A swash along a polyline, ball terminals r0 and r1. */
+export function swashAlong(p: readonly Point[], o?: SwashOptions): Shape;
+/** A swash along a turtle path (walk()). */
+export function swash(at: Point, deg: number, steps: readonly (['L', number] | ['A', number, number])[], o?: SwashOptions): Shape;
+/** A shape mirrored top to bottom across the canvas centre. */
+export function flipY(g: Geom): Geom;
+/** A quarter set into the top right and mirrored into four, each axis parted by g or joined. */
+export function swashQuad(q: Geom, g: number, o?: { x?: 'gap' | 'join'; y?: 'gap' | 'join'; join?: number }): Shape;

package/src/forms/swash.js

@@ -0,0 +1,74 @@
+/**
+ * Swashes: a calligraphic stroke along a turtle path or any polyline, thick in its bowl and thin at both ends, finished
+ * with ball terminals (walked as a turtle path, its curls turn smoothly); and the mirror layout that sets a quarter
+ * into four, each axis either joined or parted by exactly the gap. Drawn about the origin, y down.
+ * From the Logomarks tools (swashparts.mjs, batch 256).
+ */
+import { C, U, circle, walk, mapPts, flipX, move, bbox } from '../geometry/index.js';
+import { dense, taper } from '../parts/index.js';
+
+/**
+ * The swash's width profile: w0 at both ends swelling to w1 at `peak` (0 to 1 along it); `pow` sharpens the swell.
+ *
+ * @param {{ w0?: number, w1?: number, peak?: number, pow?: number }} [o] The end width (20), the widest (60), where it
+ *   is widest (0.55) and the swell's power (1.4).
+ * @returns {(t: number) => number} The width at t (0 to 1 along the swash).
+ */
+export const swell = ({ w0 = 20, w1 = 60, peak = 0.55, pow = 1.4 } = {}) => {
+	const e = Math.log(0.5) / Math.log(peak);
+	return (t) => w0 + (w1 - w0) * Math.sin(Math.PI * t ** e) ** pow;
+};
+
+/**
+ * A swash along any polyline (dense, open): its width `width(t)` (t from 0 to 1 along it; swell(o) unless given), a ball
+ * of radius r0 on its start and r1 on its end (0: none).
+ *
+ * @param {readonly import('../geometry/types.js').Point[]} p The polyline.
+ * @param {{ w0?: number, w1?: number, peak?: number, r0?: number, r1?: number, pow?: number, width?: (t: number) => number }} [o]
+ *   swell()'s options, the balls' radii (26, 28) and a width profile in its place.
+ * @returns {import('../geometry/types.js').Shape} The swash.
+ */
+export const swashAlong = (p, o = {}) => {
+	const { r0 = 26, r1 = 28, width = swell(o) } = o;
+	const parts = [taper(p, width)];
+	if (r0) parts.push(circle(...p[0], r0)); if (r1) parts.push(circle(...p.at(-1), r1));
+	return U(...parts);
+};
+
+/**
+ * A swash along a turtle path (the kit's walk(): from `at`, heading `deg`, through exact-radius turns), w0 wide at both
+ * ends swelling to w1 at `peak`, a ball of radius r0 on its start and r1 on its end (0: none); `width(t)` replaces the
+ * swell.
+ *
+ * @param {import('../geometry/types.js').Point} at The start.
+ * @param {number} deg The heading at the start (degrees, y down).
+ * @param {readonly (['L', number] | ['A', number, number])[]} steps The walk: runs and turns.
+ * @param {{ w0?: number, w1?: number, peak?: number, r0?: number, r1?: number, pow?: number, width?: (t: number) => number }} [o]
+ *   swashAlong()'s options.
+ * @returns {import('../geometry/types.js').Shape} The swash.
+ */
+export const swash = (at, deg, steps, o = {}) => swashAlong(dense(walk(at, deg, steps), 2, false), o);
+
+/**
+ * A shape mirrored top to bottom across the canvas centre.
+ *
+ * @param {import('../geometry/types.js').Geom} g The shape.
+ * @returns {import('../geometry/types.js').Geom} Its mirror.
+ */
+export const flipY = (g) => mapPts(g, ([x, y]) => [x, 2 * C - y]);
+
+/**
+ * A quarter (drawn anywhere) set into the top right of the canvas and mirrored into four. Each axis is either parted by
+ * exactly g (the copies' nearest points are their points nearest the axis, so the gap is twice that distance) or joined
+ * (the copies overlap by `join`).
+ *
+ * @param {import('../geometry/types.js').Geom} q The quarter.
+ * @param {number} g The gap.
+ * @param {{ x?: 'gap' | 'join', y?: 'gap' | 'join', join?: number }} [o] What each axis does (gap) and the overlap (6).
+ * @returns {import('../geometry/types.js').Shape} The four quarters.
+ */
+export const swashQuad = (q, g, { x = 'gap', y = 'gap', join = 6 } = {}) => {
+	const [x0, , , y1] = bbox(U(q));
+	const m = move(q, (x === 'gap' ? C + g / 2 : C - join) - x0, (y === 'gap' ? C - g / 2 : C + join) - y1);
+	const half = U(m, flipX(m)); return U(half, flipY(half));
+};

package/src/forms/tech.d.ts

@@ -0,0 +1,40 @@
+import type { Geom, Point, Polygon, Shape } from '../geometry/types.js';
+
+export { box } from '../util/vec.js';
+
+/** A parallelogram: bottom edge from (x, yb) w long, top edge h higher shifted dx. */
+export function para(x: number, yb: number, w: number, h: number, dx: number): Polygon;
+/** Points of the circle through a, m and b, from a through m to b. */
+export function arc3(a: readonly number[], m: readonly number[], b: readonly number[], n?: number): Point[];
+/** A concave star of n tips at radius R, its sides pulled towards radius rc. */
+export function star(n: number, R: number, rc?: number, deg?: number, tips?: readonly number[]): Polygon;
+/** A gap g wide across a star's arm at deg, d from the centre. */
+export function armCut(deg: number, d: number, g: number): Polygon;
+/** A folded ribbon B wide along pts, drawn as outlines t wide. */
+export function ribbon(pts: readonly Point[], B: number, t: number): Shape;
+/** Equal discs on a lattice of pitch p, the gap g between neighbours. */
+export function beads(cells: readonly (readonly number[])[], g: number, p?: number): Shape;
+/** √3 / 2. */
+export const H3: number;
+/** A bar w wide leaning `lean`° through (x, ym), cut flat at y0 and y1. */
+export function slash(x: number, ym: number, w: number, lean: number, y0: number, y1: number): Polygon;
+/** The lens marks' disc (radius 224, centred). */
+export function DISC(): Polygon;
+/** A lens gap from p to q, w wide at its middle. */
+export function lensGap(p: readonly number[], q: readonly number[], w: number): Polygon;
+/** A chevron: apex P, arms along A and B, w wide inward. */
+export function techChevron(P: readonly number[], A: readonly number[], B: readonly number[], w: number, L?: number): Polygon;
+/** A slab from a to b, its b end cut to a 90° point (a Keyed letter's key). */
+export function pointed(a: readonly number[], b: readonly number[], w: number): Polygon;
+/** The notched slab less the key grown by g, plus the key. */
+export function keyed(notched: Geom, key: Geom, g: number): Shape;
+/** The Kerf tile: a 448 square, corners rounded 78. */
+export function TILE(): Polygon;
+/** The folded ribbon letters' width (124). */
+export const RB: number;
+/** Their outline width once fitted (24). */
+export const RT: number;
+/** A folded ribbon letter along pts, as a build of the gap. */
+export function rib(pts: readonly Point[]): (g: number) => Shape;
+/** The four-point star the sparkles break. */
+export function SPARK(): Polygon;