@originkit/avatars 0.0.0-stage → 0.2.0

package/dist/glyphs/index.js

@@ -0,0 +1,197 @@
+/**
+ * Glyphs: a solid silhouette with two eyes, on a rounded tile. Smooth shapes are curves
+ * between tips around the centre, and pixel shapes are rows of cells. The art is markup
+ * rather than colours, so a tap can move the silhouette and leave the eyes.
+ */
+import { BLACK, inkOn, WHITE } from "../colors.js";
+import { bandAt } from "../controls.js";
+import { calmed } from "../possibilities.js";
+import { createTraits } from "../traits.js";
+import { CALMING } from "./calming.js";
+export const TILES = [
+    "#ff2626", "#ffe45e", "#2bd467", "#2f87f2", "#b35cf6", "#ff8a1f",
+    "#ff5aa5", "#14c8bd", "#6a5cff", "#9be22d", "#f5efe0",
+];
+/** The tiles behind a bright ink. */
+export const NIGHTS = ["#2a0f55", "#0d2a5e", "#4f1030", "#083f37", "#23252f"];
+/** Most glyphs are black or a bright ink, with the other dark inks as the rare ones. */
+export const FILLS = [
+    { color: BLACK, weight: 6 },
+    { color: "#1c1b4b", weight: 0.5 },
+    { color: "#3d1f0f", weight: 0.5 },
+    { color: "#0f3d2e", weight: 0.5 },
+    { color: WHITE, weight: 0.5 },
+    ...["#ffd23d", "#ff5a5f", "#ff5ad6", "#38f0c8", "#36b6ff", "#b6ff3d"].map((color) => ({ color, weight: 1, bright: true })),
+];
+export const EFFECTS = ["spin", "pop", "drop", "hop"];
+const CELL = 5;
+/** How far the silhouette's tips are rounded off. Pixel shapes stay square. */
+const SOFTEN = 4;
+const round2 = (value) => Math.round(value * 100) / 100;
+function polar(degrees, radius) {
+    const radians = (degrees * Math.PI) / 180;
+    return `${round2(50 + radius * Math.cos(radians))} ${round2(50 + radius * Math.sin(radians))}`;
+}
+/** Curves from tip to tip around the centre, each bending towards `waist` on the way. */
+function radial(tips, radius, waist, rotation = -90) {
+    const step = 360 / tips;
+    const curves = Array.from({ length: tips }, (_, i) => {
+        const next = (i + 1) % tips;
+        return `Q${polar(rotation + (i + 0.5) * step, waist)} ${polar(rotation + next * step, radius(next))}`;
+    });
+    return `M${polar(rotation, radius(0))}${curves.join("")}Z`;
+}
+/** True circular lobes between points on a ring, which is what makes a cloud a cloud. */
+function lobes(count, ring, radius) {
+    const step = 360 / count;
+    const arcs = Array.from({ length: count }, (_, i) => {
+        const r = round2(radius(i));
+        return `A${r} ${r} 0 1 1 ${polar(-90 + (i + 1) * step, ring)}`;
+    });
+    return `M${polar(-90, ring)}${arcs.join("")}Z`;
+}
+/** Rows of cells around the centre, from each row's half width. */
+function stepped(rows) {
+    const top = 50 - (rows.length * CELL) / 2;
+    return rows
+        .map((half, i) => `M${50 - half * CELL} ${top + i * CELL}h${half * 2 * CELL}v${CELL}h${-half * 2 * CELL}z`)
+        .join("");
+}
+export const SHAPES = [
+    {
+        name: "Sparkle",
+        pixel: false,
+        effect: "pop",
+        count: { key: "sparkle.n", label: "Points", min: 4, max: 6 },
+        draw: (t, count) => radial(count, () => 33, t.num("waist", 8, 13)),
+    },
+    {
+        name: "Wedge",
+        pixel: false,
+        effect: "drop",
+        eyeY: -8,
+        draw: (t) => radial(3, () => 31, t.num("waist", 12, 16), 90),
+    },
+    {
+        name: "Star",
+        pixel: false,
+        effect: "pop",
+        draw: (t) => radial(5, () => 31, t.num("waist", 12, 17)),
+    },
+    {
+        name: "Burst",
+        pixel: false,
+        effect: "spin",
+        count: { key: "burst.n", label: "Spikes", min: 12, max: 17 },
+        draw: (t, count) => radial(count, (i) => 31 + t.jitter(`burst.r${i}`, 3), t.num("waist", 17, 21)),
+    },
+    {
+        name: "Flower",
+        pixel: false,
+        effect: "spin",
+        count: { key: "flower.n", label: "Petals", min: 5, max: 7 },
+        draw: (t, count) => radial(count, () => 17, t.num("waist", 38, 45)),
+    },
+    {
+        name: "Cloud",
+        pixel: false,
+        effect: "drop",
+        count: { key: "cloud.n", label: "Lobes", min: 5, max: 6 },
+        draw: (t, count) => lobes(count, 13, (i) => 11.5 + t.num(`cloud.r${i}`, 0, 2.5) + t.num("waist", 0, 1)),
+    },
+    {
+        name: "Diamond",
+        pixel: true,
+        effect: "hop",
+        draw: (t) => {
+            const reach = t.int("waist", 5, 6);
+            return stepped(Array.from({ length: reach * 2 + 1 }, (_, i) => reach + 1 - Math.abs(i - reach)));
+        },
+    },
+    {
+        name: "Chip",
+        pixel: true,
+        effect: "hop",
+        draw: (t) => {
+            const half = t.int("waist", 6, 7);
+            return stepped([half - 2, half - 1, half - 1, half, half, half - 1, half - 1, half - 2]);
+        },
+    },
+    {
+        name: "Cross",
+        pixel: true,
+        effect: "hop",
+        draw: (t) => {
+            const arm = t.int("waist", 2, 3);
+            const reach = arm + 4;
+            return stepped(Array.from({ length: reach * 2 }, (_, i) => {
+                const fromEnd = Math.min(i, reach * 2 - 1 - i);
+                return fromEnd < 3 ? arm : fromEnd === 3 ? reach - 1 : reach;
+            }));
+        },
+    },
+];
+export const EYE_KINDS = ["Oval", "Square", "Pill"];
+export const shapeOf = (t) => t.pick("shape", SHAPES);
+/** What the name, or the panel, has filled the glyph with. */
+export function fillOf(t) {
+    const paint = FILLS[bandAt(FILLS, t("fill"))];
+    const picked = t.color("fill");
+    return { bright: !picked && !!paint.bright, color: picked ?? paint.color };
+}
+/** The tiles that suit the fill, so a name can never end up black on black. */
+export const tilesFor = (bright) => (bright ? NIGHTS : TILES);
+/** Follows the rest of the glyph: pixel shapes get square eyes, and bright inks pills. */
+export function eyeKindOf(t, shape) {
+    const forced = t.forced("eyes.kind");
+    if (forced !== undefined)
+        return EYE_KINDS[Math.floor(forced * EYE_KINDS.length)];
+    return shape.pixel ? "Square" : fillOf(t).bright ? "Pill" : "Oval";
+}
+function drawEyes(t, shape, paint) {
+    const kind = eyeKindOf(t, shape);
+    const scale = t.num("eye.size", 0.85, 1.25);
+    const gap = t.num("eye.gap", 5.5, 8.5);
+    const y = 50 + (shape.eyeY ?? 0);
+    const [width, height] = (kind === "Pill" ? [6.5, 13] : [4, 7]).map((v) => round2(v * scale));
+    return [-gap, gap]
+        .map((offset) => {
+        const x = round2(50 + offset);
+        if (kind === "Oval")
+            return `<ellipse cx="${x}" cy="${y}" rx="${round2(3.3 * scale)}" ry="${round2(4.8 * scale)}" fill="${paint}"/>`;
+        const corner = kind === "Pill" ? ` rx="${width / 2}"` : "";
+        return `<rect x="${round2(x - width / 2)}" y="${round2(y - height / 2)}" width="${width}" height="${height}"${corner} fill="${paint}"/>`;
+    })
+        .join("");
+}
+export const TILE_SHAPE = `<rect x="5" y="5" width="90" height="90" rx="20"/>`;
+/** Frames the tile exactly, so it sits the same size as the other flat avatars. */
+export const VIEW_BOX = "5 5 90 90";
+export function createGlyph(name, overrides) {
+    const t = calmed(createTraits(name, overrides), CALMING);
+    const shape = shapeOf(t);
+    const { bright, color: paint } = fillOf(t);
+    const tile = t.color("tile") ?? t.pick("tile", tilesFor(bright));
+    const count = shape.count ? t.int(shape.count.key, shape.count.min, shape.count.max) : 0;
+    const size = round2(t.num("body.size", 0.92, 1.08));
+    const tilt = round2(t.jitter("tilt", 12));
+    // Pixel shapes stay on the grid: turned or scaled, their steps would stop being cells.
+    const finish = shape.pixel
+        ? `shape-rendering="crispEdges"`
+        : `transform="translate(50 50) rotate(${tilt}) scale(${size}) translate(-50 -50)" stroke="${paint}" stroke-width="${SOFTEN}" stroke-linejoin="round"`;
+    return {
+        tile,
+        body: `<path d="${shape.draw(t, count)}" fill="${paint}" ${finish}/>`,
+        // On a bright ink the eyes are the tile showing through, as if cut out of the silhouette.
+        eyes: drawEyes(t, shape, bright ? tile : inkOn(paint)),
+        pixel: shape.pixel,
+        effect: shape.effect,
+        blinkDelay: t.num("blink", 0, 4),
+    };
+}
+/** The glyph at rest, for thumbnails. */
+export const glyphSvg = (name, overrides) => {
+    const glyph = createGlyph(name, overrides);
+    const tile = TILE_SHAPE.replace("/>", ` fill="${glyph.tile}"/>`);
+    return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="${VIEW_BOX}">${tile}${glyph.body}${glyph.eyes}</svg>`;
+};

package/dist/grins/calming.d.ts

@@ -0,0 +1,8 @@
+/**
+ * What Possibilities calms on a grin. Low keeps eight of the plainer eyes and mouths, one for
+ * each variant, and draws the eyes' size, gap and height and the mouth's size and height towards
+ * their middle. Indices are into `PAIRS` and `MOUTHS`, plainest first.
+ */
+import type { Calming } from "../possibilities.ts";
+export declare const CALMING: Calming;
+export declare const NOTES: [string, string, string];

package/dist/grins/calming.js

@@ -0,0 +1,21 @@
+/**
+ * What Possibilities calms on a grin. Low keeps eight of the plainer eyes and mouths, one for
+ * each variant, and draws the eyes' size, gap and height and the mouth's size and height towards
+ * their middle. Indices are into `PAIRS` and `MOUTHS`, plainest first.
+ */
+export const CALMING = {
+    features: /^eye\.(size|gap|y)$|^mouth\.(size|y)$|^(left|right)\.(x|y)$/,
+    lists: {
+        // Round, Wink, Round & block, Block & round, Bubbles, Goggles, Lids, Other wink, then Round &
+        // lid, Blocks, Big & small and Googly.
+        eyes: [12, 8, [0, 4, 2, 5, 3, 1, 6, 9, 10, 8, 7, 11]],
+        // Grin, Gap, Front gap, Middle gap, Back left, Back right, Wide, Small, then Two gaps, Snaggle,
+        // and the chipped ones.
+        mouth: [12, 8, [0, 1, 4, 3, 2, 5, 6, 8, 7, 9, 10, 11]],
+    },
+};
+export const NOTES = [
+    "round and matching eyes over a full grin, a tooth missing now and then.",
+    "more eyes and gaps, and the eyes and grin a little bigger or smaller.",
+    "every pair of eyes, googly ones too, and every gap, at any size.",
+];

package/dist/grins/controls.d.ts

@@ -0,0 +1,2 @@
+import { type ControlBuilder } from "../controls.ts";
+export declare const controls: ControlBuilder;

package/dist/grins/controls.js

@@ -0,0 +1,33 @@
+import { choice, palette, slider } from "../controls.js";
+import { narrowed, possibilitiesSlider } from "../possibilities.js";
+import { CALMING, NOTES } from "./calming.js";
+import { COLOURS, grinTraits, MOUTHS, PAIRS, roundnessOf } from "./index.js";
+export const controls = (name, overrides) => {
+    const t = grinTraits(name, overrides);
+    const list = (control) => narrowed(control, t, CALMING);
+    return [
+        {
+            title: "Face",
+            controls: [
+                list(choice(t, "eyes", "Eyes", "list", PAIRS.map(({ name: label }) => ({ label })))),
+                list(choice(t, "mouth", "Grin", "list", MOUTHS.map(({ name: label }) => ({ label })))),
+                possibilitiesSlider(t, NOTES),
+                // A tile until moved, and the reference's circle at the far end.
+                {
+                    type: "slider",
+                    id: "roundness",
+                    label: "Roundness",
+                    value: roundnessOf(t),
+                    display: `${Math.round(roundnessOf(t) * 100)}%`,
+                    range: [0, 100],
+                    ends: ["Tile", "Circle"],
+                },
+                slider(t, "eye.size", "Eye size", 0, 100, "%"),
+                slider(t, "eye.gap", "Eye gap", 0, 100, "%"),
+                slider(t, "mouth.size", "Grin size", 0, 100, "%"),
+                choice(t, "teeth", "Teeth", "list", ["4", "5", "6"].map((label) => ({ label }))),
+            ],
+        },
+        { title: "Colour", controls: [palette(t, "body", "Colour", COLOURS)] },
+    ];
+};

package/dist/grins/index.d.ts

@@ -0,0 +1,81 @@
+/**
+ * Grins: a bold round button of a face, after the reference. White eyes with black dot pupils
+ * that each look their own way, some of them one joined shape, and a big white grin split into
+ * teeth by thin lines of the face's colour, now and then with a tooth or a corner missing in
+ * black. It's a rounded tile until Roundness takes it towards the reference's full circle.
+ *
+ * Everything is drawn from numbers in the 100×100 frame, so the live avatar can move its
+ * pupils, blink and chomp, and the thumbnail is the very same picture at rest.
+ */
+import { type Overrides, type Traits } from "../traits.ts";
+/** The reference's colours first, then more as bold. Neighbours are unlike. */
+export declare const COLOURS: string[];
+/** How the pupils sit in an eye, as shares of its reach: their own look before the pointer's. */
+type Look = [number, number];
+type Eye = {
+    kind: "round";
+    size: number;
+    look: Look;
+} | {
+    kind: "block";
+    look: Look;
+} | {
+    kind: "lid";
+    look: Look;
+} | {
+    kind: "wink";
+};
+type Pair = {
+    name: string;
+    left: Eye;
+    right: Eye;
+}
+/** One white shape for both eyes: flat along the top with a round lobe for each, or two bubbles run together. */
+ | {
+    name: string;
+    joined: "goggles" | "bubbles";
+    look: Look;
+};
+/** The reference's six first, mismatched pairs mirrored as it has them. Neighbours are unlike. */
+export declare const PAIRS: Pair[];
+type Tooth = "second" | "middle" | "fourth";
+/** A mouth: its size as shares of the usual, and which teeth or corner are missing, if any. */
+interface Mouth {
+    name: string;
+    width: number;
+    height: number;
+    /** Missing teeth, each gone entirely: the second from the left, the middle one, or the second from the right. */
+    gaps: Tooth[];
+    /** The tooth at the back at that end gone entirely, from its line out to the corner of the mouth. */
+    corner?: -1 | 1;
+    /** Teeth broken partway, their lower part gone below a rough, jagged break. */
+    chips?: Tooth[];
+}
+/** The reference's gaps first. Neighbours are unlike. */
+export declare const MOUTHS: Mouth[];
+export declare const grinTraits: (name: string, overrides?: Overrides) => Traits;
+export declare const pairOf: (t: Traits) => Pair;
+export declare const mouthOf: (t: Traits) => Mouth;
+export declare function coloursOf(t: Traits): {
+    body: string;
+};
+/** How round the button is, from a tile at 0, which it is until set, to the reference's circle at 1. */
+export declare const roundnessOf: (t: Traits) => number;
+export interface Grin {
+    body: string;
+    /** Its corners' radius. */
+    corner: number;
+    eyes: string[];
+    mouth: string;
+    blink: {
+        period: number;
+        delay: number;
+    };
+}
+/** `id` keeps each grin's clips its own where many share a page. */
+export declare function createGrin(name: string, overrides: Overrides | undefined, id?: string): Grin;
+/** The button, flat, from a rounded tile to a circle. */
+export declare const buttonMarkup: (body: string, corner: number) => string;
+/** The grin at rest, for thumbnails. */
+export declare function grinSvg(name: string, overrides?: Overrides): string;
+export {};

package/dist/grins/index.js

@@ -0,0 +1,240 @@
+/**
+ * Grins: a bold round button of a face, after the reference. White eyes with black dot pupils
+ * that each look their own way, some of them one joined shape, and a big white grin split into
+ * teeth by thin lines of the face's colour, now and then with a tooth or a corner missing in
+ * black. It's a rounded tile until Roundness takes it towards the reference's full circle.
+ *
+ * Everything is drawn from numbers in the 100×100 frame, so the live avatar can move its
+ * pupils, blink and chomp, and the thumbnail is the very same picture at rest.
+ */
+import { calmed } from "../possibilities.js";
+import { createTraits } from "../traits.js";
+import { CALMING } from "./calming.js";
+const r2 = (value) => Math.round(value * 100) / 100;
+/** The reference's colours first, then more as bold. Neighbours are unlike. */
+export const COLOURS = ["#8a49bd", "#f76b4f", "#425fe6", "#f76cc0", "#f7cf2a", "#5ccd73", "#20b8c9", "#ff9a2e", "#e94158", "#7b5cf0"];
+const INK = "#111114";
+const WHITE = "#ffffff";
+const round = (size = 1, look = [0, 0]) => ({ kind: "round", size, look });
+/** The reference's six first, mismatched pairs mirrored as it has them. Neighbours are unlike. */
+export const PAIRS = [
+    { name: "Round", left: round(1, [0.1, 0]), right: round(1, [-0.1, 0]) },
+    { name: "Goggles", joined: "goggles", look: [0, -1] },
+    { name: "Round & block", left: round(1.05, [-0.6, 0.35]), right: { kind: "block", look: [-0.55, -0.1] } },
+    { name: "Bubbles", joined: "bubbles", look: [0, -0.7] },
+    { name: "Wink", left: round(1, [0, 0]), right: { kind: "wink" } },
+    { name: "Block & round", left: { kind: "block", look: [0.35, 0.2] }, right: round(1.05, [0.55, -0.4]) },
+    { name: "Lids", left: { kind: "lid", look: [0, -1] }, right: { kind: "lid", look: [0, -1] } },
+    { name: "Big & small", left: round(1.2, [0.4, 0.2]), right: round(0.72, [-0.3, -0.3]) },
+    { name: "Blocks", left: { kind: "block", look: [0.5, 0] }, right: { kind: "block", look: [0.5, 0] } },
+    { name: "Other wink", left: { kind: "wink" }, right: round(1, [-0.2, 0.2]) },
+    { name: "Round & lid", left: round(1, [0.3, -0.3]), right: { kind: "lid", look: [-0.3, -1] } },
+    { name: "Googly", left: round(1.05, [-0.7, -0.5]), right: round(1.05, [0.7, 0.55]) },
+];
+/** The reference's gaps first. Neighbours are unlike. */
+export const MOUTHS = [
+    { name: "Grin", width: 1, height: 1, gaps: [] },
+    { name: "Gap", width: 1, height: 1, gaps: ["fourth"] },
+    { name: "Back left", width: 1, height: 1.04, gaps: [], corner: -1 },
+    { name: "Middle gap", width: 0.96, height: 1.05, gaps: ["middle"] },
+    { name: "Front gap", width: 1, height: 1, gaps: ["second"] },
+    { name: "Back right", width: 1.04, height: 1, gaps: [], corner: 1 },
+    { name: "Wide", width: 1.16, height: 0.9, gaps: [] },
+    { name: "Two gaps", width: 1.04, height: 1.04, gaps: ["second", "fourth"] },
+    { name: "Small", width: 0.78, height: 0.86, gaps: ["middle"] },
+    { name: "Snaggle", width: 1, height: 1.06, gaps: ["second"], corner: 1 },
+    { name: "Chipped", width: 1, height: 1.02, gaps: [], chips: ["second"] },
+    { name: "Chipped back", width: 1.02, height: 1, gaps: [], chips: ["fourth"], corner: -1 },
+];
+export const grinTraits = (name, overrides) => calmed(createTraits(name, overrides), CALMING);
+export const pairOf = (t) => t.pick("eyes", PAIRS);
+export const mouthOf = (t) => t.pick("mouth", MOUTHS);
+export function coloursOf(t) {
+    const body = t.color("body") ?? t.pick("body", COLOURS);
+    return { body };
+}
+/** How round the button is, from a tile at 0, which it is until set, to the reference's circle at 1. */
+export const roundnessOf = (t) => t.forced("roundness") ?? 0;
+/** The eye radius, the gap between their middles, and their height. */
+const EYE = { r: 10.6, gap: 11.5, y: 33 };
+/** One eye at `cx`, `cy`, with its pupil looking `look` of the way across it, and `skew` more from the name. */
+function eye(spec, cx, cy, r, skew) {
+    const pupil = (look, reachX, reachY, size = r * 0.34) => ({
+        cx: r2(cx + (look[0] + skew[0]) * reachX),
+        cy: r2(cy + (look[1] + skew[1]) * reachY),
+        r: r2(size),
+        reach: r2(Math.min(reachX, reachY) * 0.5),
+    });
+    switch (spec.kind) {
+        case "round": {
+            const s = r * spec.size;
+            return { white: `<circle cx="${r2(cx)}" cy="${r2(cy)}" r="${r2(s)}"/>`, pupils: [pupil(spec.look, s * 0.5, s * 0.5, Math.max(2.8, s * 0.4))], cx, cy };
+        }
+        case "block": {
+            const [w, h] = [r * 2.3, r * 1.36];
+            return {
+                white: `<rect x="${r2(cx - w / 2)}" y="${r2(cy - h / 2)}" width="${r2(w)}" height="${r2(h)}" rx="0.6"/>`,
+                pupils: [pupil(spec.look, w * 0.34, h * 0.2, r * 0.4)],
+                cx,
+                cy,
+            };
+        }
+        case "lid": {
+            // Cut flat across the top, as a lid half down, the pupil peeking from under it.
+            const top = cy - r * 0.32;
+            const side = Math.sqrt(r * r - (r * 0.32) ** 2);
+            return {
+                white: `<path d="M${r2(cx - side)} ${r2(top)}H${r2(cx + side)}A${r2(r)} ${r2(r)} 0 0 1 ${r2(cx - side)} ${r2(top)}Z"/>`,
+                pupils: [pupil(spec.look, r * 0.4, r * 0.3, r * 0.4)],
+                cx,
+                cy,
+            };
+        }
+        case "wink":
+            // A thin white flick, as the reference's wink, its end curling down in one smooth flow.
+            return {
+                white: `<path d="M${r2(cx - r * 0.8)} ${r2(cy + r * 0.25)}C${r2(cx - r * 0.45)} ${r2(cy - r * 0.38)} ${r2(cx + r * 0.42)} ${r2(cy - r * 0.5)} ${r2(cx + r * 0.86)} ${r2(cy + r * 0.22)}" fill="none" stroke="${WHITE}" stroke-width="${r2(r * 0.2)}" stroke-linecap="round" stroke-linejoin="round"/>`,
+                pupils: [],
+                cx,
+                cy,
+            };
+    }
+}
+/** The pair: each eye drawn, or one joined white for both, with each pupil clipped to its white. */
+function pairMarkup(id, pair, t) {
+    const r = EYE.r * t.num("eye.size", 0.9, 1.12);
+    const gap = EYE.gap * t.num("eye.gap", 0.95, 1.12);
+    const y = EYE.y + t.jitter("eye.y", 2.5);
+    const skew = (key) => [t.jitter(`${key}.x`, 0.25), t.jitter(`${key}.y`, 0.2)];
+    const blinks = [];
+    if ("joined" in pair) {
+        const look = [pair.look[0] + skew("left")[0], pair.look[1] + skew("left")[1]];
+        if (pair.joined === "goggles") {
+            // Flat across the top, a round lobe under each pupil, the pupils peeking down from its edge.
+            const top = y - r * 0.55;
+            const lobe = gap * 0.98;
+            const white = `<path d="M${r2(50 - gap - lobe)} ${r2(top)}H${r2(50 + gap + lobe)}V${r2(top + r * 0.25)}A${r2(lobe)} ${r2(lobe * 0.95)} 0 0 1 50 ${r2(top + r * 0.25)}A${r2(lobe)} ${r2(lobe * 0.95)} 0 0 1 ${r2(50 - gap - lobe)} ${r2(top + r * 0.25)}Z"/>`;
+            const pupils = [-1, 1].map((side) => ({ cx: r2(50 + side * gap + look[0] * 2.4), cy: r2(top + Math.max(0, look[1] + 1) * 3), r: r2(r * 0.36), reach: 1.4 }));
+            blinks.push({ white, pupils, cx: 50, cy: y });
+        }
+        else {
+            // Two bubbles run together into one white.
+            const white = [-1, 1].map((side) => `<circle cx="${r2(50 + side * gap * 0.78)}" cy="${r2(y)}" r="${r2(r)}"/>`).join("");
+            const pupils = [-1, 1].map((side) => ({ cx: r2(50 + side * gap * 0.78 + look[0] * 4), cy: r2(y + look[1] * r * 0.52), r: r2(r * 0.34), reach: 2.6 }));
+            blinks.push({ white, pupils, cx: 50, cy: y });
+        }
+    }
+    else {
+        blinks.push(eye(pair.left, 50 - gap, y, r, skew("left")), eye(pair.right, 50 + gap, y, r, skew("right")));
+    }
+    return blinks.map((drawn, i) => {
+        const clip = `${id}-eye${i}`;
+        const stroke = drawn.white.includes("stroke=");
+        const pupils = drawn.pupils
+            .map((p) => `<circle class="pupil" style="--reach:${p.reach}" cx="${p.cx}" cy="${p.cy}" r="${p.r}" fill="${INK}"/>`)
+            .join("");
+        return (`<g class="eye" data-eye="${i}">` +
+            (stroke ? drawn.white : `<clipPath id="${clip}">${drawn.white}</clipPath><g fill="${WHITE}">${drawn.white}</g><g clip-path="url(#${clip})">${pupils}</g>`) +
+            `</g>`);
+    });
+}
+/**
+ * The grin, as the reference's: a white crescent whose top dips gently to the middle between two
+ * round lobes, split into teeth by thin lines of the face's colour that fan out from a point
+ * above it. A missing tooth is everything between two of those lines, clipped to the outline, so
+ * it follows the mouth's curve exactly, and a missing back tooth is its whole end lobe.
+ */
+function mouthMarkup(id, mouth, t, lineColour) {
+    const w = 28 * mouth.width * t.num("mouth.size", 0.92, 1.08);
+    const h = 27 * mouth.height * t.num("mouth.size", 0.92, 1.08);
+    const top = 50 + t.jitter("mouth.y", 2);
+    const n = t.int("teeth", 4, 6);
+    const clip = `${id}-mouth`;
+    const lobe = w * 0.28;
+    const dip = h * 0.27;
+    // The dip leaves each lobe level, as the lobe's own top does, so they meet without a point.
+    const half = w - lobe;
+    const shape = `M${r2(50 - half)} ${r2(top)}C${r2(50 - half * 0.55)} ${r2(top)} ${r2(50 - half * 0.45)} ${r2(top + dip)} 50 ${r2(top + dip)}` +
+        `C${r2(50 + half * 0.45)} ${r2(top + dip)} ${r2(50 + half * 0.55)} ${r2(top)} ${r2(50 + half)} ${r2(top)}` +
+        `A${r2(lobe)} ${r2(lobe)} 0 0 1 ${r2(50 + w)} ${r2(top + lobe)}` +
+        `A${r2(w)} ${r2(h - lobe)} 0 0 1 ${r2(50 - w)} ${r2(top + lobe)}` +
+        `A${r2(lobe)} ${r2(lobe)} 0 0 1 ${r2(50 - w + lobe)} ${r2(top)}Z`;
+    const outline = `<path d="${shape}"/>`;
+    // Every line runs from a point well above the mouth, so the outer teeth lean out the most.
+    const focus = top - h * 2.2;
+    const [above, below] = [top - 4, top + h + 4];
+    const through = (x, y) => [50 + ((x - 50) * (y - focus)) / (top - focus), y];
+    const at = (i) => 50 - w + (2 * w * i) / n;
+    // At either end the edge is well outside the mouth, so a missing back tooth is its whole lobe.
+    const edge = (i) => (i <= 0 ? 50 - w - 12 : i >= n ? 50 + w + 12 : at(i));
+    const side = (i, f) => {
+        const [x1, y1] = through(edge(i), above);
+        const [x2, y2] = through(edge(i), below);
+        return [x1 + (x2 - x1) * f, y1 + (y2 - y1) * f];
+    };
+    const lines = Array.from({ length: n - 1 }, (_, i) => {
+        const [[x1, y1], [x2, y2]] = [side(i + 1, 0), side(i + 1, 1)];
+        return `<path d="M${r2(x1)} ${r2(y1)}L${r2(x2)} ${r2(y2)}" stroke="${lineColour}" stroke-width="0.95"/>`;
+    }).join("");
+    const tooth = (i) => {
+        const [a, b, c, d] = [side(i, 0), side(i + 1, 0), side(i + 1, 1), side(i, 1)];
+        return `<path d="M${r2(a[0])} ${r2(a[1])}L${r2(b[0])} ${r2(b[1])}L${r2(c[0])} ${r2(c[1])}L${r2(d[0])} ${r2(d[1])}Z" fill="${INK}"/>`;
+    };
+    const bottom = below;
+    // Broken partway: the lower part gone, below a softly uneven break across the tooth, its
+    // bumps low and rounded, as worn rather than shattered.
+    const chip = (i) => {
+        const [from, to] = [side(i, 0.5), side(i + 1, 0.6)];
+        const points = Array.from({ length: 9 }, (_, k) => {
+            const f = k / 8;
+            const lift = k === 0 || k === 8 ? 0 : (k % 2 ? -1 : 1) * h * 0.024 * (0.6 + t(`chip.${i}.${k}`) * 0.8);
+            return [from[0] + (to[0] - from[0]) * f, from[1] + (to[1] - from[1]) * f + lift];
+        });
+        // Curves through the midpoints between bumps, so the edge rolls rather than spikes.
+        const edgeLine = points
+            .slice(1, -1)
+            .map(([x, y], k) => {
+            const [nx, ny] = points[k + 2];
+            return `Q${r2(x)} ${r2(y)} ${r2((x + nx) / 2)} ${r2((y + ny) / 2)}`;
+        })
+            .join("");
+        const [low, high] = [side(i, 1), side(i + 1, 1)];
+        return `<path d="M${r2(from[0])} ${r2(from[1])}${edgeLine}L${r2(to[0])} ${r2(to[1])}L${r2(high[0])} ${r2(high[1] + 2)}L${r2(low[0])} ${r2(low[1] + 2)}Z" fill="${INK}"/>`;
+    };
+    // With only four teeth, the second and the second from the right would be side by side, so
+    // with both gone the gaps are kept apart, the second and the last.
+    const both = [...mouth.gaps, ...(mouth.chips ?? [])].includes("second") && n < 5;
+    const index = { second: 1, middle: Math.floor((n - 1) / 2), fourth: both ? n - 1 : n - 2 };
+    const gaps = mouth.gaps.map((gap) => tooth(index[gap])).join("") + (mouth.chips ?? []).map((gap) => chip(index[gap])).join("");
+    // A missing back tooth: its whole end lobe, out from the line beside it.
+    const back = (end) => tooth(end < 0 ? 0 : n - 1);
+    const corner = mouth.corner ? back(mouth.corner) : "";
+    return (`<clipPath id="${clip}">${outline}</clipPath>` +
+        `<g fill="${WHITE}">${outline}</g>` +
+        // The lines over the gaps, so each gap ends under the line beside it and never past it.
+        `<g clip-path="url(#${clip})">${gaps}${corner}${lines}</g>` +
+        // A hair of the face's colour round the edge, so neither the white beneath a gap nor a
+        // line's cut end shows as a fringe there, and the lines run on into the face unbroken.
+        `<path d="${shape}" fill="none" stroke="${lineColour}" stroke-width="0.5"/>`);
+}
+/** `id` keeps each grin's clips its own where many share a page. */
+export function createGrin(name, overrides, id = "grin") {
+    const t = grinTraits(name, overrides);
+    const { body } = coloursOf(t);
+    return {
+        body,
+        // The other sections' tile corner, a little over a fifth of the side, up to half of it.
+        corner: r2(96 * (0.2222 + (0.5 - 0.2222) * roundnessOf(t))),
+        eyes: pairMarkup(id, pairOf(t), t),
+        // The lines between the teeth are the face showing through, so they are its colour.
+        mouth: mouthMarkup(id, mouthOf(t), t, body),
+        blink: { period: r2(t.num("blink.period", 3.2, 5.6)), delay: r2(t.num("blink.delay", 0, 3)) },
+    };
+}
+/** The button, flat, from a rounded tile to a circle. */
+export const buttonMarkup = (body, corner) => `<rect x="2" y="2" width="96" height="96" rx="${corner}" fill="${body}"/>`;
+/** The grin at rest, for thumbnails. */
+export function grinSvg(name, overrides) {
+    const g = createGrin(name, overrides);
+    return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">${buttonMarkup(g.body, g.corner)}${g.eyes.join("")}${g.mouth}</svg>`;
+}

package/dist/gummies/art.d.ts

@@ -0,0 +1,77 @@
+/**
+ * The gummies' bodies, toppers and colours, and their still picture: a frosted, translucent
+ * bun lit from inside, with a pearly topper. A pale body holds a soft pool of colour, a
+ * brighter band below it, and a white foot, under a frosty rim that follows the outline
+ * whatever the shape. The 3D gummy is inflated from the same outline.
+ */
+import type { Traits } from "../traits.ts";
+export declare const GLOWS: {
+    label: string;
+    glow: string;
+    accent: string;
+}[];
+interface Body {
+    name: string;
+    /** Half its width and height, before the size is applied. */
+    rx: number;
+    ry: number;
+    /** 2 is an oval, and higher is squarer. */
+    power: number;
+    /** How much wider it gets towards the foot. */
+    taper: number;
+    /** How far the underside is pressed flat, where 1 leaves it round. */
+    foot: number;
+    /** A wavy hem along the bottom, and bumps all round, as `[count, depth]`. */
+    hem?: [number, number];
+    bumps?: [number, number];
+    /** How far it leans over, in degrees. */
+    lean?: number;
+}
+/** The first is the bun in the reference. Neighbours are as unlike as they can be. */
+export declare const BODIES: Body[];
+interface Topper {
+    name: string;
+    /** Drawn around its base, which sits on top of the body, with its foot tucked behind. */
+    d: string;
+    /** How wide it meets the body, which is where the join is melted away. */
+    neck: number;
+}
+export declare const TOPPERS: Topper[];
+export declare const bodyOf: (t: Traits) => Body;
+export declare const topperOf: (t: Traits) => Topper;
+/** The colours in use, each of which can be changed by hand. */
+export declare function coloursOf(t: Traits): {
+    glow: string;
+    accent: string;
+    ink: string;
+};
+/** Where everything goes: the outline, the face's place, size and tilt, and the topper's. */
+export declare function layoutOf(t: Traits): {
+    body: Body;
+    topper: Topper;
+    outline: {
+        d: string;
+        rx: number;
+        ry: number;
+        middle: number;
+        top: number;
+        peakX: number;
+    };
+    face: {
+        x: number;
+        y: number;
+        size: number;
+        tilt: number;
+    };
+    /** The topper's base, on the top of the body, and its scale. */
+    crown: {
+        x: number;
+        y: number;
+        scale: number;
+    };
+};
+/** The jelly's art, upright and without its face, which the gummy draws itself. */
+export declare function jellyArt(t: Traits): string;
+/** The attributes every line of a face shares. Colour comes through `color`. */
+export declare const FACE_LINE = "fill=\"none\" stroke-width=\"2.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"";
+export {};