@originkit/avatars 0.0.0-stage → 0.1.0

package/dist/blobs/index.js

@@ -0,0 +1,107 @@
+import { createTraits } from "../traits.js";
+import { containerOf, inContainer } from "../container.js";
+import { createPalette } from "./color.js";
+import { circle, round2, superellipse } from "./paths.js";
+import { calmed, shapeFor } from "./variance.js";
+import { drawBody } from "./shapes.js";
+/** Sizes and places both eyes, scaling them down until they fit the face. */
+function layoutEyes(t, body, face) {
+    const baseWidth = t.num("eye.rx", 0.075, 0.105) * body.rx;
+    const ratio = t.num("eye.ratio", 1.9, 3.2);
+    const scale = t.num("eye.scale", 0.78, 1.24);
+    const stretch = t.num("eye.stretch", 0.85, 1.18);
+    const clearance = t.num("eye.gap", 0.1, 0.24) * body.rx;
+    const widest = baseWidth * Math.max(1, scale);
+    const tallest = baseWidth * ratio * Math.max(1, scale * stretch);
+    const baseGap = widest + body.rx * 0.03 + clearance;
+    const gazeX = t.jitter("gaze.x", 0.09) * face.rx;
+    const gazeY = t.num("gaze.y", -0.2, 0.08) * face.ry;
+    const offsetY = t.jitter("eye.dy", 0.04) * face.ry;
+    const reach = Math.hypot(widest, tallest);
+    const needed = Math.hypot((Math.abs(gazeX) + baseGap + reach) / face.rx, (Math.abs(gazeY) + Math.abs(offsetY) + reach) / face.ry);
+    const fit = needed > 0.9 ? 0.9 / needed : 1;
+    const width = baseWidth * fit;
+    const height = width * ratio;
+    const gap = baseGap * fit;
+    // Leaning is limited by the room between the eyes, so they can never touch.
+    const room = Math.max(0, Math.min(1, clearance / tallest));
+    const maxLean = Math.min(12, (Math.asin(room) * 180) / Math.PI);
+    const lean = t.num("eye.lean", -1, 1) * maxLean;
+    const secondLean = Math.max(-12, Math.min(12, lean + t.jitter("eye.lean2", 3.5)));
+    const cx = face.cx + gazeX * fit;
+    const cy = face.cy + gazeY * fit;
+    const n = t.num("eye.n", 3.5, 6);
+    return [
+        { cx: cx - gap, cy, rx: width, ry: height, n, rot: lean },
+        {
+            cx: cx + gap,
+            cy: cy + offsetY * fit,
+            rx: width * scale,
+            ry: height * scale * stretch,
+            n,
+            rot: secondLean,
+        },
+    ];
+}
+function describe(name, overrides) {
+    const t = calmed(createTraits(name, overrides));
+    const { head, eye } = createPalette(t.num("hue", 0, 360), t("tone"), t.color("hue"));
+    const shape = shapeFor(t);
+    const radius = t.num("body.r", 31, 38) * shape.core;
+    const body = {
+        cx: 50 + t.jitter("body.x", 1.5),
+        cy: 50 + t.jitter("body.y", 1.5),
+        rx: radius,
+        ry: radius * t.num("body.ratio", 0.92, 1.08),
+        n: t.num("body.n", 1.9, 2.5),
+        rot: 0,
+        radii: Array.from({ length: t.int("body.pts", 6, 8) }, (_, i) => 1 + t.jitter(`body.r${i}`, 0.16)),
+    };
+    shape.body?.(t, body);
+    const face = shape.face?.(body) ?? body;
+    const decoration = { circles: [], paths: [] };
+    shape.decorate?.(t, body, decoration);
+    const [left, right] = layoutEyes(t, body, face);
+    return {
+        head,
+        eye,
+        circles: decoration.circles,
+        bodyPaths: [...decoration.paths, drawBody(shape, body)],
+        eyes: [left, right],
+        container: containerOf(t),
+    };
+}
+export function blobParts(name, overrides) {
+    const { head, eye, circles, bodyPaths, eyes, container } = describe(name, overrides);
+    const [left, right] = eyes;
+    return {
+        // The eyes are painted on the skin, so the visor colours are never seen.
+        colors: { body: head, accent: head, visor: head, light: eye },
+        head: [...circles.map(({ cx, cy, r }) => circle(cx, cy, r)), ...bodyPaths],
+        accents: [],
+        visor: [],
+        visorShapes: [],
+        eyes: eyes.map(superellipse),
+        eyeShapes: eyes.map((e) => ({ kind: "superellipse", ...e })),
+        lights: [],
+        lightShapes: [],
+        chrome: [],
+        chromeShapes: [],
+        studs: [],
+        studShapes: [],
+        speckle: 0,
+        eyeY: (left.cy + right.cy) / 2,
+        painted: true,
+        container,
+    };
+}
+/** Renders the blob for a name as SVG markup. The same name always gives the same blob. */
+export function generateBlob(name, overrides) {
+    const { head, eye, circles: circleList, bodyPaths, eyes: eyeList, container } = describe(name, overrides);
+    const circles = circleList
+        .map(({ cx, cy, r }) => `<circle cx="${round2(cx)}" cy="${round2(cy)}" r="${round2(r)}"/>`)
+        .join("");
+    const paths = bodyPaths.map((d) => `<path d="${d}"/>`).join("");
+    const eyes = eyeList.map((e) => `<path d="${superellipse(e)}"/>`).join("");
+    return inContainer(`<g fill="${head}">${circles}${paths}</g><g fill="${eye}">${eyes}</g>`, container, "blob-card");
+}

package/dist/blobs/paths.d.ts

@@ -0,0 +1,33 @@
+/** SVG path builders. Coordinates are in the 100×100 viewBox. */
+export interface Superellipse {
+    cx: number;
+    cy: number;
+    rx: number;
+    ry: number;
+    /** Squareness: 2 is an ellipse, higher tends towards a rectangle. */
+    n: number;
+    /** Clockwise degrees, baked into the points so the SVG needs no transform. */
+    rot: number;
+}
+export interface Polygon {
+    cx: number;
+    cy: number;
+    rx: number;
+    ry: number;
+    sides: number;
+    /** Corner rounding, from 0 (sharp) to 1 (all curve). */
+    round: number;
+    rot: number;
+}
+export declare const round2: (v: number) => number;
+/** |x/a|^n + |y/b|^n = 1, with one cubic Bézier per quadrant. */
+export declare function superellipse({ cx, cy, rx, ry, n, rot }: Superellipse): string;
+export declare function circle(cx: number, cy: number, r: number): string;
+/** A lumpy closed curve: a Catmull-Rom spline through radii around a circle. */
+export declare function spline(cx: number, cy: number, rx: number, ry: number, radii: number[], rot: number): string;
+/** A regular polygon with rounded corners and a vertex at the top. */
+export declare function polygon({ cx, cy, rx, ry, sides, round, rot }: Polygon): string;
+/** The straight run between a capsule's two end circles. */
+export declare function box(cx: number, cy: number, rx: number, ry: number): string;
+/** A droplet's point: two tangents from an apex above the body ellipse. */
+export declare function taper(cx: number, cy: number, rx: number, ry: number, tip: number): string;

package/dist/blobs/paths.js

@@ -0,0 +1,102 @@
+/** SVG path builders. Coordinates are in the 100×100 viewBox. */
+export const round2 = (v) => Math.round(v * 100) / 100;
+const fmt = (v) => {
+    const rounded = round2(v);
+    return Object.is(rounded, -0) ? "0" : String(rounded);
+};
+/** Wraps an index, so closed outlines can read past either end. */
+const wrap = (items, i) => items[((i % items.length) + items.length) % items.length];
+/** |x/a|^n + |y/b|^n = 1, with one cubic Bézier per quadrant. */
+export function superellipse({ cx, cy, rx, ry, n, rot }) {
+    // Above n≈5.55 the handle passes the radius and the shape would bulge outwards.
+    const k = Math.min(1, (8 * 2 ** (-1 / n) - 4) / 3);
+    const ax = rx * k;
+    const ay = ry * k;
+    const points = [
+        [rx, 0],
+        [rx, ay], [ax, ry], [0, ry],
+        [-ax, ry], [-rx, ay], [-rx, 0],
+        [-rx, -ay], [-ax, -ry], [0, -ry],
+        [ax, -ry], [rx, -ay], [rx, 0],
+    ];
+    const angle = (rot * Math.PI) / 180;
+    const cos = Math.cos(angle);
+    const sin = Math.sin(angle);
+    const at = (i) => {
+        const [x, y] = points[i];
+        return `${fmt(cx + x * cos - y * sin)} ${fmt(cy + x * sin + y * cos)}`;
+    };
+    let d = `M${at(0)}`;
+    for (let i = 1; i < 13; i += 3)
+        d += `C${at(i)} ${at(i + 1)} ${at(i + 2)}`;
+    return `${d}Z`;
+}
+export function circle(cx, cy, r) {
+    const left = `${fmt(cx - r)} ${fmt(cy)}`;
+    const right = `${fmt(cx + r)} ${fmt(cy)}`;
+    return `M${left}A${fmt(r)} ${fmt(r)} 0 1 0 ${right}A${fmt(r)} ${fmt(r)} 0 1 0 ${left}Z`;
+}
+/** A lumpy closed curve: a Catmull-Rom spline through radii around a circle. */
+export function spline(cx, cy, rx, ry, radii, rot) {
+    const start = (rot * Math.PI) / 180;
+    const points = radii.map((radius, i) => {
+        const angle = start + (2 * Math.PI * i) / radii.length;
+        return [cx + rx * radius * Math.cos(angle), cy + ry * radius * Math.sin(angle)];
+    });
+    const [firstX, firstY] = points[0];
+    let d = `M${fmt(firstX)} ${fmt(firstY)}`;
+    for (let i = 0; i < points.length; i++) {
+        const [x0, y0] = wrap(points, i - 1);
+        const [x1, y1] = wrap(points, i);
+        const [x2, y2] = wrap(points, i + 1);
+        const [x3, y3] = wrap(points, i + 2);
+        d +=
+            `C${fmt(x1 + (x2 - x0) / 6)} ${fmt(y1 + (y2 - y0) / 6)}` +
+                ` ${fmt(x2 - (x3 - x1) / 6)} ${fmt(y2 - (y3 - y1) / 6)}` +
+                ` ${fmt(x2)} ${fmt(y2)}`;
+    }
+    return `${d}Z`;
+}
+/** A regular polygon with rounded corners and a vertex at the top. */
+export function polygon({ cx, cy, rx, ry, sides, round, rot }) {
+    // Halved because every edge is cut from both ends.
+    const k = round > 0 ? (round < 1 ? round / 2 : 0.5) : 0;
+    const start = (rot * Math.PI) / 180 - Math.PI / 2;
+    const vertices = Array.from({ length: sides }, (_, i) => {
+        const angle = start + (2 * Math.PI * i) / sides;
+        return [cx + rx * Math.cos(angle), cy + ry * Math.sin(angle)];
+    });
+    /** The point on the edge from vertex `i` to vertex `j` where the corner starts. */
+    const cut = (i, j) => {
+        const [x0, y0] = wrap(vertices, i);
+        const [x1, y1] = wrap(vertices, j);
+        return `${fmt(x0 + (x1 - x0) * k)} ${fmt(y0 + (y1 - y0) * k)}`;
+    };
+    let d = `M${cut(0, -1)}`;
+    for (let i = 0; i < sides; i++) {
+        const [x, y] = wrap(vertices, i);
+        d += `Q${fmt(x)} ${fmt(y)} ${cut(i, i + 1)}`;
+        if (k < 0.5)
+            d += `L${cut(i + 1, i)}`;
+    }
+    return `${d}Z`;
+}
+/** The straight run between a capsule's two end circles. */
+export function box(cx, cy, rx, ry) {
+    const left = fmt(cx - rx);
+    const right = fmt(cx + rx);
+    return `M${left} ${fmt(cy - ry)}H${right}V${fmt(cy + ry)}H${left}Z`;
+}
+/** A droplet's point: two tangents from an apex above the body ellipse. */
+export function taper(cx, cy, rx, ry, tip) {
+    const height = Math.max(1.05, tip);
+    const tangentX = rx * Math.sqrt(1 - 1 / (height * height));
+    const tangentY = cy - ry / height;
+    const apex = cy - height * ry;
+    const easeX = tangentX * 0.14;
+    const easeY = tangentY + 0.86 * (apex - tangentY);
+    return (`M${fmt(cx - tangentX)} ${fmt(tangentY)}` +
+        `L${fmt(cx - easeX)} ${fmt(easeY)}` +
+        `Q${fmt(cx)} ${fmt(apex)} ${fmt(cx + easeX)} ${fmt(easeY)}` +
+        `L${fmt(cx + tangentX)} ${fmt(tangentY)}Z`);
+}

package/dist/blobs/shapes.d.ts

@@ -0,0 +1,46 @@
+/**
+ * The silhouettes. Each one describes how it changes the shared body, where the
+ * eyes may sit, what it adds around the body, and how its outline is drawn.
+ */
+import type { Traits } from "../traits.ts";
+export interface Ellipse {
+    cx: number;
+    cy: number;
+    rx: number;
+    ry: number;
+}
+export interface Body extends Ellipse {
+    n: number;
+    rot: number;
+    radii: number[];
+    /** Polygon shapes only. */
+    sides?: number;
+    round?: number;
+}
+export interface Circle {
+    cx: number;
+    cy: number;
+    r: number;
+}
+/** Outlines drawn behind the body and merged with it by sharing its fill. */
+export interface Decoration {
+    circles: Circle[];
+    paths: string[];
+}
+export interface Shape {
+    name: string;
+    /** How much of the frame the body takes. */
+    core: number;
+    /** Adjusts the body before anything is measured against it. */
+    body?(t: Traits, body: Body): void;
+    /** The region the eyes must fit inside. Defaults to the body. */
+    face?(body: Body): Ellipse;
+    decorate?(t: Traits, body: Body, out: Decoration): void;
+    /** Draws the outline. Defaults to a superellipse. */
+    path?(body: Body): string;
+}
+/** `[shape, upper edge]`, so everyday shapes are common and loud ones are finds. */
+export declare const BANDS: [Shape, number][];
+export declare const PLAIN: Shape[];
+export declare const pickShape: (value: number) => Shape;
+export declare const drawBody: (shape: Shape, body: Body) => string;

package/dist/blobs/shapes.js

@@ -0,0 +1,186 @@
+/**
+ * The silhouettes. Each one describes how it changes the shared body, where the
+ * eyes may sit, what it adds around the body, and how its outline is drawn.
+ */
+import { box, polygon, spline, superellipse, taper } from "./paths.js";
+const polygonPath = (b) => polygon({ ...b, sides: b.sides, round: b.round });
+const splinePath = (b) => spline(b.cx, b.cy, b.rx, b.ry, b.radii, b.rot);
+const shrunk = (k) => (b) => ({ cx: b.cx, cy: b.cy, rx: b.rx * k, ry: b.ry * k });
+const splineFace = (b) => shrunk(Math.min(...b.radii) * 0.95)(b);
+const round = { name: "Round", core: 1 };
+const organic = { name: "Organic", core: 0.98, path: splinePath, face: splineFace };
+const boxy = {
+    name: "Boxy",
+    core: 0.86,
+    body: (t, b) => {
+        b.n = t.num("body.n", 3.4, 6);
+        b.rot = t.num("body.rot", -20, 20);
+    },
+};
+const capsule = {
+    name: "Capsule",
+    core: 1.02,
+    body: (t, b) => {
+        b.ry *= t.num("capsule.squat", 0.55, 0.68);
+    },
+    face: shrunk(0.94),
+    decorate: (_t, b, out) => {
+        for (const side of [-1, 1]) {
+            out.circles.push({ cx: b.cx + side * (b.rx - b.ry), cy: b.cy, r: b.ry });
+        }
+    },
+    path: (b) => box(b.cx, b.cy, b.rx - b.ry, b.ry),
+};
+const nub = {
+    name: "Nub",
+    core: 0.88,
+    decorate: (t, b, out) => {
+        const count = t.int("nub.n", 1, 2);
+        for (let i = 0; i < count; i++) {
+            const angle = t.num(`nub.a${i}`, 0, 2 * Math.PI);
+            out.circles.push({
+                cx: b.cx + Math.cos(angle) * b.rx * 0.88,
+                cy: b.cy + Math.sin(angle) * b.rx * 0.88,
+                r: b.rx * t.num(`nub.r${i}`, 0.24, 0.4),
+            });
+        }
+    },
+};
+const cloud = {
+    name: "Cloud",
+    core: 0.78,
+    face: splineFace,
+    path: splinePath,
+    decorate: (t, b, out) => {
+        const count = t.int("cloud.n", 4, 6);
+        for (let i = 0; i < count; i++) {
+            const angle = Math.PI + (Math.PI * (i + 0.5)) / count;
+            out.circles.push({
+                cx: b.cx + Math.cos(angle) * b.rx * 0.8,
+                cy: b.cy + Math.sin(angle) * b.rx * 0.5,
+                r: b.rx * t.num(`cloud.r${i}`, 0.44, 0.62),
+            });
+        }
+    },
+};
+const droplet = {
+    name: "Droplet",
+    core: 0.78,
+    // Moved down so the head and point together sit centred in the frame.
+    body: (_t, b) => {
+        b.cy += 0.22 * b.ry;
+        b.n = 2;
+    },
+    face: (b) => ({ cx: b.cx, cy: b.cy + b.ry * 0.05, rx: b.rx * 0.88, ry: b.ry * 0.88 }),
+    decorate: (t, b, out) => {
+        out.paths.push(taper(b.cx, b.cy, b.rx, b.ry, t.num("droplet.tip", 1.4, 1.65)));
+    },
+};
+const hexagon = {
+    name: "Hexagon",
+    core: 1.05,
+    path: polygonPath,
+    face: shrunk(0.84),
+    body: (t, b) => {
+        b.sides = 6;
+        b.rot = t.num("body.rot", -12, 12);
+        b.round = t.num("poly.round", 0.24, 0.5);
+    },
+};
+const sun = {
+    name: "Sun",
+    core: 0.7,
+    decorate: (t, b, out) => {
+        const count = t.int("sun.n", 6, 9);
+        const distance = b.rx * t.num("sun.dist", 1, 1.08);
+        const radius = b.rx * t.num("sun.r", 0.2, 0.26);
+        const offset = t.num("sun.rot", 0, 2 * Math.PI);
+        for (let i = 0; i < count; i++) {
+            const angle = offset + (2 * Math.PI * i) / count;
+            out.circles.push({
+                cx: b.cx + Math.cos(angle) * distance,
+                cy: b.cy + Math.sin(angle) * distance,
+                r: radius,
+            });
+        }
+    },
+};
+const triangle = {
+    name: "Triangle",
+    core: 1.15,
+    path: polygonPath,
+    body: (t, b) => {
+        b.sides = 3;
+        b.rot = t.num("body.rot", -5, 5);
+        b.round = t.num("poly.round", 0.24, 0.5);
+    },
+    face: (b) => ({ cx: b.cx, cy: b.cy + b.ry * 0.1, rx: b.rx * 0.54, ry: b.ry * 0.36 }),
+};
+/** `[shape, upper edge]`, so everyday shapes are common and loud ones are finds. */
+export const BANDS = [
+    [round, 0.22],
+    [organic, 0.48],
+    [boxy, 0.6],
+    [capsule, 0.7],
+    [nub, 0.79],
+    [cloud, 0.86],
+    [droplet, 0.915],
+    [hexagon, 0.95],
+    [sun, 0.98],
+    [triangle, 1],
+];
+/**
+ * Plain shapes, kept out of `BANDS` so that no name's blob changes. They are offered once
+ * Possibilities is set, so even its lowest level has eight shapes to tell variants apart.
+ */
+const r2 = (value) => Math.round(value * 100) / 100;
+export const PLAIN = [
+    {
+        name: "Oval",
+        core: 0.95,
+        body: (_t, b) => {
+            b.rx *= 0.8;
+            b.ry *= 1.12;
+            b.n = 2;
+        },
+    },
+    {
+        name: "Pill",
+        core: 0.98,
+        body: (t, b) => {
+            b.rx *= 0.62;
+            b.n = t.num("pill.n", 2.6, 3.2);
+        },
+        face: shrunk(0.9),
+    },
+    {
+        name: "Spindle",
+        core: 1.04,
+        body: (t, b) => {
+            b.ry *= t.num("spindle.squat", 0.5, 0.62);
+        },
+        face: shrunk(0.66),
+        // A lens: two curves that meet at a point at either end.
+        path: ({ cx, cy, rx, ry }) => `M${r2(cx - rx)} ${r2(cy)}Q${r2(cx)} ${r2(cy - ry * 2)} ${r2(cx + rx)} ${r2(cy)}Q${r2(cx)} ${r2(cy + ry * 2)} ${r2(cx - rx)} ${r2(cy)}Z`,
+    },
+    {
+        name: "Diamond",
+        core: 0.84,
+        body: (t, b) => {
+            b.n = t.num("diamond.n", 2.6, 3.4);
+            b.rot = 45;
+        },
+        face: shrunk(0.74),
+    },
+    {
+        name: "Wide",
+        core: 1.04,
+        body: (_t, b) => {
+            b.ry *= 0.66;
+            b.n = 2.2;
+        },
+        face: shrunk(0.9),
+    },
+];
+export const pickShape = (value) => (BANDS.find(([, edge]) => value < edge) ?? BANDS[BANDS.length - 1])[0];
+export const drawBody = (shape, body) => shape.path ? shape.path(body) : superellipse(body);

package/dist/blobs/variance.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Possibilities for Blobs. The shared calming evens out proportions. Shapes need more, as
+ * the plain ones sit outside `BANDS`: every level offers at least eight, so the eight
+ * variants never repeat one. Left alone, a blob is exactly as it always was.
+ */
+import type { Traits } from "../traits.ts";
+import { type Shape } from "./shapes.ts";
+/** A shape picked by hand, as a position along `EVERY_SHAPE`. */
+export declare const SHAPE_PICK = "shape.pick";
+/** From the plainest to the wildest. The first eight are the lowest level. */
+export declare const EVERY_SHAPE: Shape[];
+/** The shapes on offer: those at the level set, or the usual ones. */
+export declare function shapesOffered(t: Traits): Shape[];
+/** The blob's shape: one picked by hand, else one of those on offer. */
+export declare function shapeFor(t: Traits): Shape;
+/** The setting that picks `shape` by hand. */
+export declare const pickOf: (shape: Shape) => {
+    "shape.pick": number;
+};
+/** Proportions and features: a low blob has even eyes and a regular outline. */
+export declare const calmed: (t: Traits) => Traits;
+export declare const NOTES: [string, string, string];

package/dist/blobs/variance.js

@@ -0,0 +1,42 @@
+/**
+ * Possibilities for Blobs. The shared calming evens out proportions. Shapes need more, as
+ * the plain ones sit outside `BANDS`: every level offers at least eight, so the eight
+ * variants never repeat one. Left alone, a blob is exactly as it always was.
+ */
+import { calmed as calmedBy, varianceSet } from "../possibilities.js";
+import { BANDS, pickShape, PLAIN } from "./shapes.js";
+/** A shape picked by hand, as a position along `EVERY_SHAPE`. */
+export const SHAPE_PICK = "shape.pick";
+const byName = (name) => [...BANDS.map(([shape]) => shape), ...PLAIN].find((shape) => shape.name === name);
+/** From the plainest to the wildest. The first eight are the lowest level. */
+export const EVERY_SHAPE = [
+    "Round", "Boxy", "Capsule", "Oval", "Pill", "Spindle", "Diamond", "Wide",
+    "Droplet", "Hexagon", "Organic", "Triangle", "Nub", "Cloud", "Sun",
+].map(byName);
+const FEWEST = 8;
+/** The shapes on offer: those at the level set, or the usual ones. */
+export function shapesOffered(t) {
+    const variance = varianceSet(t);
+    if (variance === undefined)
+        return BANDS.map(([shape]) => shape);
+    return EVERY_SHAPE.slice(0, FEWEST + Math.floor(variance * (EVERY_SHAPE.length - FEWEST + 1)));
+}
+/** The blob's shape: one picked by hand, else one of those on offer. */
+export function shapeFor(t) {
+    const picked = t.forced(SHAPE_PICK);
+    if (picked !== undefined)
+        return EVERY_SHAPE[Math.floor(picked * EVERY_SHAPE.length)];
+    if (varianceSet(t) === undefined)
+        return pickShape(t("shape"));
+    const offered = shapesOffered(t);
+    return offered[Math.floor(t("shape") * offered.length)];
+}
+/** The setting that picks `shape` by hand. */
+export const pickOf = (shape) => ({ [SHAPE_PICK]: (EVERY_SHAPE.indexOf(shape) + 0.5) / EVERY_SHAPE.length });
+/** Proportions and features: a low blob has even eyes and a regular outline. */
+export const calmed = (t) => calmedBy(t, { features: /^(body|eye|gaze|capsule|nub|cloud|droplet|poly|sun)\./ });
+export const NOTES = [
+    "calm, simple shapes like circles, ovals, pills and rounded squares, with even eyes.",
+    "a wider mix, adding drops, hexagons and soft lumps.",
+    "anything goes, from lumpy clouds to triangles and rays.",
+];

package/dist/bots/attachments.d.ts

@@ -0,0 +1,24 @@
+/**
+ * What is bolted onto the head. These are drawn in the accent colour and inflated
+ * separately from the head, so in 3D they read as parts rather than as lumps.
+ *
+ * `headroom` and `sideroom` are measured from this head, so nothing leaves the frame.
+ */
+import type { Head } from "./heads.ts";
+import type { Traits } from "../traits.ts";
+/** Where the ear discs sit, or nothing if this bot has none. */
+export declare function earDiscs(t: Traits, head: Head): {
+    x: number;
+    y: number;
+    r: number;
+}[];
+/** In the order the generator picks from. Antenna is listed there twice, so it counts double. */
+export declare const TOP_OPTIONS: ({
+    label: string;
+    weight: number;
+} | {
+    weight?: undefined;
+    label: string;
+})[];
+export declare const SIDE_NAMES: string[];
+export declare const buildAttachments: (t: Traits, head: Head) => string[];

package/dist/bots/attachments.js

@@ -0,0 +1,119 @@
+/**
+ * What is bolted onto the head. These are drawn in the accent colour and inflated
+ * separately from the head, so in 3D they read as parts rather than as lumps.
+ *
+ * `headroom` and `sideroom` are measured from this head, so nothing leaves the frame.
+ */
+import { circle, rod, roundedPolygon, superellipse } from "./paths.js";
+const MARGIN = 5;
+const headroom = (head) => head.cy - head.ry - MARGIN;
+const sideroom = (head) => head.cx - head.rx - MARGIN;
+const clear = () => [];
+function antenna(t, head) {
+    const ball = t.num("top.ball", 4.2, 5.8);
+    const length = Math.min(t.num("top.length", 12, 20), headroom(head) - ball);
+    const lean = t.jitter("top.lean", 6);
+    const top = head.cy - head.ry;
+    const [x, y] = [head.cx + lean, top - length];
+    return [rod(head.cx, top + 4, x, y, 1.9), circle(x, y, ball)];
+}
+function twinAntennas(t, head) {
+    const ball = t.num("top.ball", 3.2, 4.2);
+    const length = Math.min(t.num("top.length", 11, 17), headroom(head) - ball);
+    const spread = t.num("top.spread", 8, 13);
+    const top = head.cy - head.ry;
+    return [-1, 1].flatMap((side) => {
+        const [x, y] = [head.cx + side * (spread + 5), top - length];
+        return [rod(head.cx + side * spread * 0.6, top + 4, x, y, 1.7), circle(x, y, ball)];
+    });
+}
+function bolt(t, head) {
+    const r = t.num("top.bolt", 5.5, 7.5);
+    const top = head.cy - head.ry;
+    return [
+        superellipse({ cx: head.cx, cy: top - 3, rx: r * 1.5, ry: r * 0.9, n: 4 }),
+        superellipse({ cx: head.cx, cy: top + 2, rx: r * 0.8, ry: r, n: 3 }),
+    ];
+}
+function crest(t, head) {
+    const top = head.cy - head.ry;
+    const bumps = t.int("top.bumps", 3, 4);
+    return Array.from({ length: bumps }, (_, i) => {
+        const offset = (i - (bumps - 1) / 2) * 8.5;
+        const r = 6.4 - Math.abs(offset) * 0.12;
+        return circle(head.cx + offset, top - Math.min(4.6, headroom(head) - r) + Math.abs(offset) * 0.18, r);
+    });
+}
+function catEars(t, head) {
+    const top = head.cy - head.ry;
+    const height = Math.min(t.num("top.ear", 13, 18), headroom(head));
+    const spread = head.rx * t.num("top.spread", 0.46, 0.6);
+    return [-1, 1].map((side) => roundedPolygon([
+        [head.cx + side * (spread - 10), top + 6],
+        [head.cx + side * (spread + 2), top - height],
+        [head.cx + side * (spread + 12), top + 6],
+    ], 0.42));
+}
+function propeller(t, head) {
+    const top = head.cy - head.ry;
+    const lift = Math.min(t.num("top.length", 7, 11), headroom(head) - 3);
+    const span = t.num("top.span", 13, 18);
+    const y = top - lift;
+    return [
+        rod(head.cx, top + 4, head.cx, y, 1.9),
+        superellipse({ cx: head.cx - span / 2 - 1, cy: y, rx: span / 2 + 1, ry: 3, n: 2.2 }),
+        superellipse({ cx: head.cx + span / 2 + 1, cy: y, rx: span / 2 + 1, ry: 3, n: 2.2 }),
+        circle(head.cx, y, 3.4),
+    ];
+}
+/** Where the ear discs sit, or nothing if this bot has none. */
+export function earDiscs(t, head) {
+    if (Math.floor(t("side") * SIDES.length) !== 0)
+        return [];
+    const r = Math.min(t.num("side.r", 7, 10), sideroom(head) / 2 + 3);
+    const y = head.cy + t.num("side.y", -5, 3);
+    return [-1, 1].map((side) => ({ x: head.cx + side * (head.rx + r * 0.2), y, r }));
+}
+const discs = (t, head) => earDiscs(t, head).map(({ x, y, r }) => circle(x, y, r));
+function earBolts(t, head) {
+    const ball = t.num("side.ball", 3.6, 4.8);
+    const reach = Math.min(t.num("side.reach", 7, 11), sideroom(head) - ball);
+    const y = head.cy + t.num("side.y", -6, 2);
+    return [-1, 1].flatMap((side) => {
+        const x = head.cx + side * (head.rx + reach);
+        return [rod(head.cx + side * (head.rx - 4), y, x, y, 1.8), circle(x, y, ball)];
+    });
+}
+function headphones(t, head) {
+    const rx = Math.min(t.num("side.cup", 6, 7.5), sideroom(head) / 2 + 2);
+    const ry = Math.min(head.ry * 0.6, t.num("side.tall", 13, 16));
+    return [-1, 1].map((side) => superellipse({ cx: head.cx + side * (head.rx + rx * 0.3), cy: head.cy, rx, ry, n: 3.4 }));
+}
+function fins(t, head) {
+    const reach = Math.min(t.num("side.reach", 8, 12), sideroom(head));
+    const y = head.cy + t.num("side.y", -6, 4);
+    return [-1, 1].map((side) => {
+        const root = head.cx + side * (head.rx - 5);
+        return roundedPolygon([
+            [root, y - 11],
+            [head.cx + side * (head.rx + reach), y + 2],
+            [root, y + 11],
+        ], 0.5);
+    });
+}
+const SIDES = [discs, earBolts, headphones, fins, clear];
+/** In the order the generator picks from. Antenna is listed there twice, so it counts double. */
+export const TOP_OPTIONS = [
+    { label: "Antenna", weight: 2 },
+    { label: "Twin antennas" },
+    { label: "Bolt" },
+    { label: "Crest" },
+    { label: "Cat ears" },
+    { label: "Propeller" },
+    { label: "None" },
+];
+export const SIDE_NAMES = ["Discs", "Bolts", "Headphones", "Fins", "None"];
+export const buildAttachments = (t, head) => [
+    ...t.pick("top", [antenna, antenna, twinAntennas, bolt, crest, catEars, propeller, clear])(t, head),
+    ...t.pick("side", SIDES)(t, head),
+];