@originkit/avatars 0.0.0-stage → 0.1.0

package/dist/critters/index.js

@@ -0,0 +1,307 @@
+/**
+ * Critters: original creatures in the style of close-up flat face tiles. The face fills the
+ * tile and runs off its edges, in one bold body colour with a darker tone for lids, brows and
+ * creases and a lighter one for patches, muzzles and jaws. Eyes are big whites with an iris
+ * and a glint, or glossy beads, under lids that set the mood. Each type is a creature of its
+ * own, as the animals are, and every type can feel every feeling.
+ *
+ * Every part is drawn from numbers in the 100×100 frame, so the live avatar can move its lids,
+ * pupils and brows, and the thumbnail is the very same picture at rest.
+ */
+import { BLACK, contrast, mix, WHITE } from "../colors.js";
+import { calmed } from "../possibilities.js";
+import { createTraits } from "../traits.js";
+import { CALMING } from "./calming.js";
+const r2 = (value) => Math.round(value * 100) / 100;
+/** Bold flat body colours. Neighbours are unlike. */
+export const COLOURS = ["#4fcfd6", "#e2483d", "#8fd94a", "#f0b821", "#7a6cf0", "#ff8a3d", "#e8569a", "#4f8ff0", "#3fbf8a", "#c06bdb"];
+/** Rich iris colours, as the references' are, rather than a dull tint of the body's. */
+export const IRISES = ["#1f5f6b", "#5b3a1f", "#2f6b2a", "#3b2a6e", "#7a2e22", "#1d3f7a", "#2a2a33", "#6b4a12"];
+/** Neighbours are as unlike as they can be. */
+export const FEELINGS = [
+    { name: "Happy", lid: 0.14, tilt: 0, lift: 2, browTilt: -6, pupil: 1, look: [0, 0], mouth: "smile" },
+    { name: "Grumpy", lid: 0.44, tilt: 14, lift: -1, browTilt: 18, pupil: 1, look: [0, 0.1], mouth: "flat" },
+    { name: "Surprised", lid: 0, tilt: 0, lift: 7, browTilt: -4, pupil: 0.72, look: [0, 0], mouth: "o" },
+    { name: "Sleepy", lid: 0.56, tilt: -4, lift: -2, browTilt: 0, pupil: 1, look: [0, 0.3], mouth: "smile" },
+    { name: "Grin", lid: 0.06, tilt: 0, lift: 4, browTilt: -8, pupil: 1, look: [0.2, -0.2], mouth: "grin" },
+    { name: "Sad", lid: 0.24, tilt: -16, lift: 1, browTilt: -18, pupil: 1.05, look: [0, 0.35], mouth: "frown" },
+    { name: "Smug", lid: 0.4, tilt: -10, lift: 0, browTilt: -4, pupil: 0.95, look: [0.4, 0], mouth: "smirk" },
+    { name: "Joy", lid: 0, tilt: 0, lift: 5, browTilt: -8, pupil: 1, look: [0, 0], mouth: "laugh", closed: true },
+    { name: "Angry", lid: 0.34, tilt: 24, lift: -2, browTilt: 26, pupil: 0.85, look: [0, 0], mouth: "grit" },
+    { name: "Bored", lid: 0.52, tilt: 0, lift: -1, browTilt: 2, pupil: 0.9, look: [-0.4, 0], mouth: "flat" },
+];
+/** The creatures, each its own build. Neighbours are as unlike as they can be. */
+export const KINDS = [
+    { name: "Monster", eyes: "white", r: 13, y: 33, gap: 18, patch: 1.28, brows: "arcs", feature: "nose", mouthY: 73, mouthW: 33, toothy: true },
+    { name: "Duck", eyes: "bead", r: 9.5, y: 39, gap: 22, brows: "none", feature: "bill", mouthY: 70, mouthW: 26, toothy: false },
+    { name: "Cyclops", eyes: "white", single: true, r: 21, y: 33, gap: 0, patch: 1.15, brows: "arcs", feature: "none", mouthY: 75, mouthW: 33, toothy: true },
+    { name: "Bear", eyes: "white", r: 7.6, y: 30, gap: 13.5, brows: "pads", feature: "bear", mouthY: 80, mouthW: 15, toothy: false },
+    { name: "Imp", eyes: "bead", r: 10.5, y: 35, gap: 19.5, patch: 1.55, brows: "none", feature: "nose", mouthY: 73, mouthW: 34, toothy: true },
+    { name: "Chick", eyes: "white", r: 13, y: 38, gap: 19, brows: "none", feature: "beak", mouthY: 60, mouthW: 10, toothy: false },
+    { name: "Grump", eyes: "white", r: 10, y: 30, gap: 18, brows: "wedges", feature: "jaw", mouthY: 72, mouthW: 16, toothy: false },
+];
+export const critterTraits = (name, overrides) => calmed(createTraits(name, overrides), CALMING);
+/** The name a variant was made from, and how many steps on it is. */
+function named(name) {
+    const variant = /^(.*)#(\d+)$/.exec(name);
+    return { from: variant ? variant[1] : name, step: variant ? Number(variant[2]) - 1 : 0 };
+}
+/**
+ * Its creature. Variants step on through them from the name's own, as the animals' are each a
+ * different animal, keeping to those Possibilities offers. Set by hand, it's that one.
+ */
+export function kindOf(name, overrides) {
+    const { from, step } = named(name);
+    const t = createTraits(from, overrides);
+    const own = Math.min(KINDS.length - 1, Math.floor(t("kind") * KINDS.length));
+    if (t.forced("kind") !== undefined)
+        return KINDS[own];
+    return KINDS[(own + step) % KINDS.length];
+}
+export const feelingOf = (t) => t.pick("feeling", FEELINGS);
+export const EYE_STYLES = ["white", "bead"];
+export const BROWS = ["arcs", "pads", "wedges", "none"];
+/** How big a patch is round each eye when one is switched on for a creature with none of its own. */
+const PATCH = 1.3;
+/** How often a name is spotted or blushes, in percent. */
+export const SPOTS_PERCENT = 25;
+export const BLUSH_PERCENT = 30;
+/**
+ * Its creature as drawn: its own build, with its eyes, brows and patches as picked by hand if
+ * they are. Unpicked, every creature keeps its own, as each is built to.
+ */
+export function styledOf(name, overrides) {
+    const t = critterTraits(name, overrides);
+    const kind = kindOf(name, overrides);
+    const picked = (key, list) => {
+        const set = t.forced(key);
+        return set === undefined ? undefined : list[Math.min(list.length - 1, Math.floor(set * list.length))];
+    };
+    const patch = t.forced("patch");
+    return {
+        ...kind,
+        eyes: picked("eye.style", EYE_STYLES) ?? kind.eyes,
+        brows: picked("brows", BROWS) ?? kind.brows,
+        patch: patch === undefined ? kind.patch : patch < 0.5 ? (kind.patch ?? PATCH) : undefined,
+    };
+}
+/** Its colours: the body, and the tones every part is drawn in, all from the body's. */
+export function coloursOf(t) {
+    const body = t.color("body") ?? t.pick("body", COLOURS);
+    return {
+        body,
+        lid: mix(body, BLACK, 0.1),
+        shade: mix(body, BLACK, 0.16),
+        dark: mix(body, "#120d1c", 0.78),
+        light: mix(body, WHITE, 0.32),
+        iris: t.color("iris") ?? t.pick("iris", IRISES),
+        cream: mix("#f4ead6", body, 0.12),
+        plate: mix(body, "#ffd76a", 0.62),
+        // Whichever stands out most from the body, so a red chick's comb or an orange duck's bill still shows.
+        comb: standout(body, ["#e2392f", "#ffd23f", "#ff8a3d"]),
+        beak: standout(body, ["#ff9d2e", "#ffd84a", "#3f6fd8"]),
+        bill: standout(body, ["#ff7a2f", "#e8452b", "#ffb02e"]),
+    };
+}
+const standout = (body, choices) => choices.reduce((best, choice) => (contrast(choice, body) > contrast(best, body) ? choice : best));
+/** An eye, its lid set by `--lid` as a share of the rect it scales, so the live lid can blink. */
+function eyeMarkup(id, k, f, c, cx, cy, r, side) {
+    if (f.closed) {
+        // Shut in happiness: in the iris's colour for white eyes, and the bead's for beads.
+        const lash = k.eyes === "bead" ? mix(c.iris, "#0b0b12", 0.62) : c.iris;
+        return `<path class="closed" d="M${r2(cx - r * 0.82)} ${r2(cy + r * 0.25)}Q${r2(cx)} ${r2(cy - r * 0.75)} ${r2(cx + r * 0.82)} ${r2(cy + r * 0.25)}" fill="none" stroke="${lash}" stroke-width="${r2(Math.max(1.8, r * 0.26))}" stroke-linecap="round"/>`;
+    }
+    const bead = k.eyes === "bead";
+    const [rx, ry] = bead ? [r * 0.86, r] : [r, r];
+    const clip = `${id}-eye${side}`;
+    const reach = r * (bead ? 0.12 : 0.32);
+    const [lx, ly] = [cx + f.look[0] * reach * 1.6, cy + f.look[1] * reach * 1.6];
+    // The lid's rect runs from above the eye to below it; scaling it from its top drops its edge.
+    const top = cy - ry * 1.3;
+    const height = ry * 2.6;
+    const scale = (0.3 + 2 * f.lid) / 2.6;
+    const ink = "#0b0b12";
+    // A bead is glossy black, with a big glint and a small one. A white eye has an iris with a
+    // darker ring, a pupil, and the same two glints, as in the references.
+    const beadColour = mix(c.iris, ink, 0.62);
+    const pupil = bead
+        ? `<ellipse cx="${r2(lx + rx * 0.3)}" cy="${r2(ly - ry * 0.36)}" rx="${r2(r * 0.26)}" ry="${r2(r * 0.22)}" fill="#ffffff"/>` +
+            `<circle cx="${r2(lx - rx * 0.3)}" cy="${r2(ly + ry * 0.38)}" r="${r2(r * 0.1)}" fill="#ffffff"/>`
+        : `<circle cx="${r2(lx)}" cy="${r2(ly)}" r="${r2(r * 0.58 * f.pupil)}" fill="${c.iris}" stroke="${mix(c.iris, ink, 0.45)}" stroke-width="${r2(r * 0.07)}"/>` +
+            `<circle cx="${r2(lx)}" cy="${r2(ly)}" r="${r2(r * 0.3 * f.pupil)}" fill="${ink}"/>` +
+            `<circle cx="${r2(lx + r * 0.22)}" cy="${r2(ly - r * 0.24)}" r="${r2(r * 0.17 * f.pupil)}" fill="#ffffff"/>` +
+            `<circle cx="${r2(lx - r * 0.2)}" cy="${r2(ly + r * 0.22)}" r="${r2(r * 0.07 * f.pupil)}" fill="#ffffff"/>`;
+    // Three layers make the lid, each scaled from the same top: a grey shadow it casts on the
+    // white, its dark edge, and the lid itself in the body's colour.
+    const layer = (fill, stretch) => `<rect class="lid" x="${r2(cx - rx * 1.4)}" y="${r2(top)}" width="${r2(rx * 2.8)}" height="${r2(height * stretch)}" fill="${fill}" style="--lid:${r2(scale)}" transform="translate(0 ${r2(top)}) scale(1 ${r2(scale)}) translate(0 ${r2(-top)})"/>`;
+    const lid = (bead ? "" : layer("#cfd6de", 1.09)) + layer(c.dark, 1.03) + layer(c.body, 1);
+    return (`<clipPath id="${clip}"><ellipse cx="${r2(cx)}" cy="${r2(cy)}" rx="${r2(rx)}" ry="${r2(ry)}"/></clipPath>` +
+        `<ellipse cx="${r2(cx)}" cy="${r2(cy)}" rx="${r2(rx)}" ry="${r2(ry)}" fill="${bead ? beadColour : "#ffffff"}"/>` +
+        `<g clip-path="url(#${clip})">` +
+        `<g class="pupil" style="--reach:${r2(reach)}">${pupil}</g>` +
+        `<g transform="rotate(${r2(side * f.tilt)} ${r2(cx)} ${r2(cy)})"><g class="lids">${lid}</g></g></g>` +
+        // A crisp rim, so the eye sits in the face rather than on it.
+        `<ellipse cx="${r2(cx)}" cy="${r2(cy)}" rx="${r2(rx)}" ry="${r2(ry)}" fill="none" stroke="${c.shade}" stroke-width="${r2(Math.max(0.9, r * 0.08))}"/>`);
+}
+function browMarkup(k, f, c, cx, cy, r, side) {
+    if (k.brows === "none")
+        return "";
+    const y = cy - r * (k.brows === "pads" ? 1.75 : 1.42) - f.lift * 0.7;
+    const turn = `rotate(${r2(side * f.browTilt)} ${r2(cx)} ${r2(y)})`;
+    if (k.brows === "pads") {
+        return `<ellipse cx="${r2(cx)}" cy="${r2(y)}" rx="${r2(r * 1.2)}" ry="${r2(r * 0.62)}" fill="${c.dark}" transform="${turn}"/>`;
+    }
+    if (k.brows === "wedges") {
+        // Heavy, meeting over the nose in a V when cross.
+        return `<path d="M${r2(cx - side * r * 1.5)} ${r2(y - r * 0.2)}L${r2(cx + side * r * 1.25)} ${r2(y + r * 0.2)}L${r2(cx + side * r * 1.2)} ${r2(y + r * 0.75)}L${r2(cx - side * r * 1.45)} ${r2(y + r * 0.45)}Z" fill="${c.shade}" stroke="${c.shade}" stroke-width="1.6" stroke-linejoin="round" transform="${turn}"/>`;
+    }
+    // Thick in the middle and thin at its ends, as the references' brows are.
+    const thick = Math.max(2.4, r * 0.3);
+    return (`<path d="M${r2(cx - r * 1.02)} ${r2(y + r * 0.22)}Q${r2(cx)} ${r2(y - r * 0.42 - thick)} ${r2(cx + r * 1.02)} ${r2(y + r * 0.22)}` +
+        `Q${r2(cx)} ${r2(y - r * 0.42 + thick * 0.4)} ${r2(cx - r * 1.02)} ${r2(y + r * 0.22)}Z" fill="${c.dark}" stroke="${c.dark}" stroke-width="0.9" stroke-linejoin="round" transform="${turn}"/>`);
+}
+const TONGUE = "#f2849f";
+const GUMS = "#d8577a";
+/** Where a tooth meets the lip, a little shade, as the references' teeth have. */
+const TOOTH_SHADE = "#d9dee6";
+/** A mouth at `y`, `w` either side of the middle. Its inside is clipped to itself, teeth and tongue too. */
+function mouthMarkup(id, mouth, c, y, w, teeth) {
+    const ink = `fill="none" stroke="${c.dark}" stroke-width="2.6" stroke-linecap="round"`;
+    const clip = `${id}-mouth`;
+    // The soft crease of the chin under an open mouth.
+    const chinUnder = (at) => `<path d="M${r2(50 - w * 0.4)} ${r2(at)}Q50 ${r2(at + 2)} ${r2(50 + w * 0.4)} ${r2(at)}" fill="none" stroke="${c.shade}" stroke-width="1.6" stroke-linecap="round"/>`;
+    const inside = (shape, fill) => `<clipPath id="${clip}">${shape}</clipPath>${shape.replace("/>", ` fill="${c.dark}"/>`)}<g clip-path="url(#${clip})">${fill}</g>`;
+    const row = (count, from, to, base, tip) => Array.from({ length: count }, (_, i) => {
+        const a = from + ((to - from) * i) / count;
+        const b = from + ((to - from) * (i + 1)) / count;
+        return `<path d="M${r2(a)} ${r2(base)}L${r2((a + b) / 2)} ${r2(tip)}L${r2(b)} ${r2(base)}Z" fill="#ffffff" stroke="#ffffff" stroke-width="0.8" stroke-linejoin="round"/>`;
+    }).join("");
+    switch (mouth) {
+        case "smile":
+            return `<path d="M${r2(50 - w * 0.62)} ${r2(y - 1)}Q50 ${r2(y + w * 0.34)} ${r2(50 + w * 0.62)} ${r2(y - 1)}" ${ink}/>`;
+        case "flat":
+            return `<path d="M${r2(50 - w * 0.5)} ${r2(y + 1)}Q50 ${r2(y + 1.6)} ${r2(50 + w * 0.5)} ${r2(y + 0.4)}" ${ink}/>`;
+        case "frown":
+            return `<path d="M${r2(50 - w * 0.5)} ${r2(y + 4)}Q50 ${r2(y - w * 0.22)} ${r2(50 + w * 0.5)} ${r2(y + 4)}" ${ink}/>`;
+        case "smirk":
+            return `<path d="M${r2(50 - w * 0.45)} ${r2(y + 1.5)}Q${r2(50 + w * 0.15)} ${r2(y + 5)} ${r2(50 + w * 0.6)} ${r2(y - 3.5)}" ${ink}/>`;
+        case "o":
+            return inside(`<ellipse cx="50" cy="${r2(y + 2)}" rx="${r2(Math.max(3.4, w * 0.18))}" ry="${r2(Math.max(4.4, w * 0.22))}"/>`, `<ellipse cx="50" cy="${r2(y + 2 + w * 0.2)}" rx="${r2(w * 0.16)}" ry="${r2(w * 0.1)}" fill="${TONGUE}"/>`);
+        case "grin": {
+            // A wide crescent, a row of teeth from its top edge and a few from its foot.
+            const h = w * 0.62;
+            const shape = `<path d="M${r2(50 - w)} ${r2(y - 2)}Q50 ${r2(y + 3)} ${r2(50 + w)} ${r2(y - 2)}Q50 ${r2(y + h * 2)} ${r2(50 - w)} ${r2(y - 2)}Z"/>`;
+            // A soft crease under it, the chin, as the toothy grins in the references have.
+            const chin = `<path d="M${r2(50 - w * 0.55)} ${r2(y + h * 1.35)}Q50 ${r2(y + h * 1.55)} ${r2(50 + w * 0.55)} ${r2(y + h * 1.35)}" fill="none" stroke="${c.shade}" stroke-width="1.8" stroke-linecap="round"/>`;
+            // The gums at the back of the lower teeth, the teeth, and a grey shade where the upper teeth meet the lip.
+            const gums = `<ellipse cx="50" cy="${r2(y + h * 1.25)}" rx="${r2(w * 0.62)}" ry="${r2(h * 0.42)}" fill="${GUMS}"/>`;
+            const lip = `<path d="M${r2(50 - w)} ${r2(y - 2)}Q50 ${r2(y + 3)} ${r2(50 + w)} ${r2(y - 2)}" fill="none" stroke="${TOOTH_SHADE}" stroke-width="2.6"/>`;
+            return chin + inside(shape, gums + row(teeth, 50 - w * 0.92, 50 + w * 0.92, y - 2.5, y + h * 0.36) + lip + row(Math.max(2, teeth - 2), 50 - w * 0.5, 50 + w * 0.5, y + h * 1.12, y + h * 0.86));
+        }
+        case "laugh": {
+            const h = w * 0.55;
+            const shape = `<path d="M${r2(50 - w * 0.85)} ${r2(y - 2)}Q50 ${r2(y - 4)} ${r2(50 + w * 0.85)} ${r2(y - 2)}Q50 ${r2(y + h * 2.2)} ${r2(50 - w * 0.85)} ${r2(y - 2)}Z"/>`;
+            // The upper teeth with their grey shade, and a tongue with its middle line.
+            const tongue = `<ellipse cx="50" cy="${r2(y + h * 1.12)}" rx="${r2(w * 0.5)}" ry="${r2(h * 0.48)}" fill="${TONGUE}"/><path d="M50 ${r2(y + h * 0.78)}V${r2(y + h * 1.2)}" stroke="${mix(TONGUE, BLACK, 0.18)}" stroke-width="1.2" stroke-linecap="round"/>`;
+            return chinUnder(y + h * 1.6) + inside(shape, `<rect x="${r2(50 - w)}" y="${r2(y - 6)}" width="${r2(w * 2)}" height="6.4" fill="#ffffff"/><rect x="${r2(50 - w)}" y="${r2(y - 6)}" width="${r2(w * 2)}" height="3.4" fill="${TOOTH_SHADE}"/>${tongue}`);
+        }
+        case "grit": {
+            const shape = `<rect x="${r2(50 - w * 0.72)}" y="${r2(y - 4.5)}" width="${r2(w * 1.44)}" height="9" rx="4.5"/>`;
+            const gaps = Array.from({ length: 5 }, (_, i) => `<path d="M${r2(50 - w * 0.72 + ((i + 1) * w * 1.44) / 6)} ${r2(y - 4)}V${r2(y + 4)}" stroke="${c.dark}" stroke-width="1.1"/>`).join("");
+            return chinUnder(y + 9) + inside(shape, `<rect x="${r2(50 - w * 0.72)}" y="${r2(y - 3.2)}" width="${r2(w * 1.44)}" height="6.4" fill="#ffffff"/><rect x="${r2(50 - w * 0.72)}" y="${r2(y - 3.2)}" width="${r2(w * 1.44)}" height="1.6" fill="${TOOTH_SHADE}"/>${gaps}`);
+        }
+    }
+}
+/** The bill, beak, muzzle, nose or jaw each creature has, drawn under or over the mouth. */
+function featureMarkup(k, f, c, t, mouthY) {
+    const open = f.mouth === "grin" || f.mouth === "laugh" || f.mouth === "o";
+    switch (k.feature) {
+        case "nose": {
+            const [w, h, y] = k.name === "Imp" ? [12, 8.5, 50] : [9, 6, 52];
+            const s = t.num("nose.size", 0.85, 1.2);
+            return `<ellipse cx="50" cy="${y}" rx="${r2(w * s)}" ry="${r2(h * s)}" fill="${c.dark}"/><ellipse cx="${r2(50 + w * 0.15 * s)}" cy="${r2(y - h * 0.42 * s)}" rx="${r2(w * 0.4 * s)}" ry="${r2(h * 0.22 * s)}" fill="${mix(c.dark, WHITE, 0.32)}"/>`;
+        }
+        case "bear":
+            // A cream muzzle low in the face, and a big nose on top of it.
+            return (`<ellipse cx="50" cy="83" rx="40" ry="31" fill="${c.cream}"/>` +
+                `<ellipse cx="50" cy="60" rx="${r2(t.num("nose.size", 11, 14))}" ry="9" fill="${c.dark}"/>` +
+                `<ellipse cx="53" cy="56" rx="5" ry="2.2" fill="${mix(c.dark, WHITE, 0.34)}"/>`);
+        case "bill": {
+            // A broad bill, opening to show its dark inside when the mouth would.
+            const drop = open ? 7 : 0;
+            const curve = f.mouth === "frown" ? -5 : f.mouth === "flat" || f.mouth === "grit" ? 0 : 5;
+            return (`<path d="M24 ${66 + drop * 0.3}Q34 ${84 + drop} 56 ${86 + drop}Q80 ${86 + drop} 86 ${70 + drop * 0.4}Q88 ${64} 78 ${64}Z" fill="${mix(c.bill, BLACK, 0.22)}"/>` +
+                (open ? `<path d="M30 68Q50 ${80 + drop} 80 68Z" fill="${c.dark}"/>` : "") +
+                `<path d="M22 62Q24 54 40 55Q62 50 82 58Q92 62 86 68Q72 ${74 - curve * 0.4} 50 ${74 + curve * 0.2}Q30 ${76 + curve * 0.4} 24 70Q20 66 22 62Z" fill="${c.bill}" stroke="${mix(c.bill, BLACK, 0.3)}" stroke-width="1.4" stroke-linejoin="round"/>` +
+                `<path d="M36 59Q50 55 64 57" fill="none" stroke="${mix(c.bill, WHITE, 0.45)}" stroke-width="2.6" stroke-linecap="round"/>`);
+        }
+        case "beak": {
+            const open = f.mouth === "grin" || f.mouth === "laugh" || f.mouth === "o" ? 3 : 0;
+            return (
+            // A comb at the top, a little beak and the wattle hanging under it.
+            `<path d="M6 -6Q20 2 18 14Q28 4 36 10Q40 0 34 -8Z" fill="${c.comb}"/>` +
+                `<path d="M8 -4Q20 4 18 12" fill="none" stroke="${mix(c.comb, BLACK, 0.2)}" stroke-width="2" stroke-linecap="round"/>` +
+                `<path d="M49 ${66 + open}Q44 ${72 + open} 46 ${78 + open}Q50 ${82 + open} 54 ${78 + open}Q56 ${72 + open} 51 ${66 + open}Z" fill="${c.comb}"/>` +
+                (open ? `<path d="M42 ${mouthY + 1}Q50 ${mouthY + 7} 58 ${mouthY + 1}Z" fill="${c.dark}"/>` : "") +
+                `<path d="M40 ${mouthY - 2}Q50 ${mouthY - 10} 60 ${mouthY - 2}Q50 ${mouthY + 4 + open} 40 ${mouthY - 2}Z" fill="${c.beak}"/>`);
+        }
+        case "jaw":
+            // A broad plate for a jaw, lighter than the face, with the chin's crease.
+            return (`<path d="M14 54L50 60L86 54L88 104L12 104Z" fill="${c.plate}"/>` +
+                `<path d="M14 54L50 60L86 54" fill="none" stroke="${mix(c.plate, BLACK, 0.12)}" stroke-width="1.2"/>` +
+                `<path d="M24 66Q22 72 26 78M76 66Q78 72 74 78" fill="none" stroke="${mix(c.plate, BLACK, 0.12)}" stroke-width="1.4" stroke-linecap="round"/>`);
+        default:
+            return "";
+    }
+}
+/** Freckled spots across the cheeks and brow, and a blush under each eye, for those that have them. */
+function marks(t, c, eyes, y, r) {
+    const spots = t("spots") * 100 < SPOTS_PERCENT
+        ? [[-34, 60, 2.2], [-29, 66, 1.6], [-38, 67, 1.4], [34, 60, 2.2], [29, 66, 1.6], [38, 67, 1.4], [-8, 10, 1.8], [6, 7, 1.4], [14, 12, 1.2]]
+            .map(([x, sy, size]) => `<circle cx="${r2(50 + x)}" cy="${r2(sy)}" r="${r2(size)}" fill="${c.shade}"/>`)
+            .join("")
+        : "";
+    const blush = t("blush") * 100 < BLUSH_PERCENT
+        ? eyes.map((x) => `<ellipse cx="${r2(x + (x < 50 ? -r * 0.35 : x > 50 ? r * 0.35 : 0))}" cy="${r2(y + r * 1.45)}" rx="${r2(Math.max(4, r * 0.55))}" ry="${r2(Math.max(2.2, r * 0.28))}" fill="${mix(c.body, "#ff6f91", 0.55)}"/>`).join("")
+        : "";
+    return spots + blush;
+}
+/** `id` keeps each critter's clips its own where many share a page. */
+export function createCritter(name, overrides, id = "critter") {
+    const t = critterTraits(name, overrides);
+    const k = styledOf(name, overrides);
+    const f = feelingOf(t);
+    const c = coloursOf(t);
+    const size = t.num("eye.size", 0.88, 1.14);
+    const r = k.r * size;
+    const gap = k.gap * t.num("eye.gap", 0.92, 1.1);
+    const y = k.y + t.jitter("eye.y", 2.5);
+    const sides = k.single ? [0] : [-1, 1];
+    const at = (side) => [50 + side * gap, y];
+    const mouthW = k.mouthW * t.num("mouth.size", 0.85, 1.15);
+    const teeth = t.int("teeth", 4, 7);
+    const front = k.feature === "bill" || k.feature === "beak";
+    const mouth = front ? "" : mouthMarkup(id, f.mouth === "smile" && k.toothy && t("toothy") < 0.6 ? "grin" : f.mouth, c, k.mouthY + t.jitter("mouth.y", 2), mouthW, teeth);
+    const patches = k.patch
+        ? sides.map((side) => `<ellipse cx="${r2(at(side)[0])}" cy="${r2(y)}" rx="${r2(r * k.patch)}" ry="${r2(r * k.patch * 0.92)}" fill="${c.light}"/>`).join("")
+        : "";
+    const eye = (side) => eyeMarkup(id, k, f, c, at(side)[0], y, r, side || 1);
+    return {
+        kind: k.name,
+        feeling: f.name,
+        body: c.body,
+        back: patches + marks(t, c, sides.map((side) => at(side)[0]), y, r) + (front ? "" : featureMarkup(k, f, c, t, k.mouthY)),
+        eyes: { left: eye(sides[0]), right: sides.length > 1 ? eye(sides[1]) : "" },
+        brows: sides.map((side) => browMarkup(k, f, c, at(side)[0], y, r, side || 1)).join(""),
+        mouth,
+        front: front ? featureMarkup(k, f, c, t, k.mouthY) : "",
+        blink: { period: r2(t.num("blink.period", 3.4, 6)), delay: r2(t.num("blink.delay", 0, 3)) },
+    };
+}
+export const CORNER = 22.22;
+/** The critter at rest, for thumbnails. */
+export function critterSvg(name, overrides) {
+    const k = createCritter(name, overrides);
+    return (`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><clipPath id="critter-tile"><rect width="100" height="100" rx="${CORNER}"/></clipPath></defs>` +
+        `<g clip-path="url(#critter-tile)"><rect width="100" height="100" fill="${k.body}"/>${k.back}${k.eyes.left}${k.eyes.right}${k.brows}${k.mouth}${k.front}</g></svg>`);
+}

package/dist/doodles/calming.d.ts

@@ -0,0 +1,7 @@
+/**
+ * What Possibilities calms on a doodle. Low keeps to the eight mildest emotions, one for
+ * each variant, with steadier lines. Indices are into `MOODS`, mildest first.
+ */
+import type { Calming } from "../possibilities.ts";
+export declare const CALMING: Calming;
+export declare const NOTES: [string, string, string];

package/dist/doodles/calming.js

@@ -0,0 +1,18 @@
+/**
+ * What Possibilities calms on a doodle. Low keeps to the eight mildest emotions, one for
+ * each variant, with steadier lines. Indices are into `MOODS`, mildest first.
+ */
+export const CALMING = {
+    features: /^(eye|face|mouth)\.|^(wobble|tilt|weight)$/,
+    lists: {
+        // Cute, Happy, Sleepy, Unimpressed, Shocked, Smug, Skeptical, Grumpy, then the livelier ones,
+        // from Neutral and Wink up to Starstruck, Hypnotised and Dizzy.
+        mood: [24, 8, [1, 5, 7, 3, 6, 8, 2, 0, 19, 12, 15, 16, 22, 4, 14, 18, 9, 23, 21, 17, 10, 13, 20, 11]],
+    },
+    rarer: ["cheeks", "nose"],
+};
+export const NOTES = [
+    "mild emotions like cute, happy and sleepy, drawn with a steady hand.",
+    "adds winks, laughs, mischief and tears, cheeks and noses, with looser lines.",
+    "every emotion, up to starstruck, hypnotised and dizzy, at its wobbliest.",
+];

package/dist/doodles/controls.d.ts

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

package/dist/doodles/controls.js

@@ -0,0 +1,50 @@
+import { choice, clearingColor, fixedPalette, optional, palette, slider, toggle, } from "../controls.js";
+import { calmed, narrowed, possibilitiesSlider } from "../possibilities.js";
+import { colorKey, createTraits } from "../traits.js";
+import { CALMING, NOTES } from "./calming.js";
+import { CHEEK_ODDS, CHEEKS, coloursOf, COLOURWAYS, INKS, MOODS, NOSE_ODDS, NOSES, PARTS, TILES } from "./index.js";
+const labelled = (labels) => labels.map((label) => ({ label }));
+export const controls = (name, overrides) => {
+    const t = calmed(createTraits(name, overrides), CALMING);
+    const list = (control) => narrowed(control, t, CALMING);
+    const { parts } = coloursOf(t);
+    return [
+        {
+            title: "Face",
+            controls: [
+                list(choice(t, "mood", "Emotion", "list", MOODS.map(({ name: label }) => ({ label })))),
+                possibilitiesSlider(t, NOTES),
+                optional(t, "cheeks", CHEEK_ODDS, "cheeks.kind", "Cheeks", "list", labelled(CHEEKS)),
+                optional(t, "nose", NOSE_ODDS, "nose.kind", "Nose", "list", labelled(NOSES)),
+                slider(t, "eye.size", "Eye size", 0, 100, "%"),
+                slider(t, "eye.gap", "Eye gap", 0, 100, "%"),
+                slider(t, "mouth.size", "Mouth size", 0, 100, "%"),
+                slider(t, "face.y", "Face height", -100, 100, "%"),
+                slider(t, "face.x", "Face across", -100, 100, "%"),
+                slider(t, "tilt", "Tilt", -7, 7, "°"),
+            ],
+        },
+        {
+            title: "Lines",
+            controls: [slider(t, "wobble", "Hand-drawn", 0, 100, "%"), slider(t, "weight", "Line weight", 0, 100, "%")],
+        },
+        {
+            title: "Colour",
+            controls: [
+                palette(t, "tile", "Colour", TILES),
+                { ...toggle(t, "colourful", 50, "Colourful"), selected: parts ? "on" : "off" },
+                ...(parts
+                    ? [
+                        // A new colourway starts from its own colours, not the ones set by hand for the last.
+                        PARTS.reduce(clearingColor, choice(t, "colourway", "Colourway", "swatches", COLOURWAYS.map(({ label, colors }) => ({
+                            label,
+                            color: `conic-gradient(${colors.map((color, i) => `${color} 0 ${(i + 1) * 25}%`).join(", ")})`,
+                        })))),
+                        // In Ink's place, as it is the ink: one for each part.
+                        { type: "colors", id: "ink", label: "Inks", colors: PARTS.map((part) => ({ id: colorKey(part), color: parts[part] })) },
+                    ]
+                    : [fixedPalette(t, "ink", "Ink", INKS)]),
+            ],
+        },
+    ];
+};

package/dist/doodles/index.d.ts

@@ -0,0 +1,66 @@
+/**
+ * Doodles: a face drawn in a few strokes on plain paper. Bold blob eyes and a tiny mouth
+ * carry the whole emotion. Every line wobbles a little, as if drawn by hand, and no two
+ * names wobble the same way.
+ */
+import { type Overrides, type Traits } from "../traits.ts";
+/** Paper. White is the reference, and the rest are only just tinted, to stay minimal. */
+export declare const TILES: string[];
+export declare const INKS: string[];
+interface Mood {
+    name: string;
+    eyes: [string, string];
+    mouth: string;
+    /** Brows over either eye, as how far they tilt, if it has them. */
+    brows?: [number | null, number | null];
+}
+/** Every emotion. The first five are the ones in the reference. */
+export declare const MOODS: Mood[];
+export declare const moodOf: (t: Traits) => Mood;
+/** Extras on some faces, each drawn in the same few strokes. One face in this many hundred has them. */
+export declare const CHEEK_ODDS = 35;
+export declare const CHEEKS: string[];
+export declare const NOSE_ODDS = 30;
+export declare const NOSES: string[];
+/**
+ * Colourful faces draw each eye and the mouth in a different colour of one colourway, as in
+ * the reference. Each name takes three of the four, in its own order. Neighbours are unlike,
+ * as each variant steps to the next.
+ */
+export declare const COLOURWAYS: {
+    label: string;
+    colors: string[];
+}[];
+/** Each with a colour of its own, which can be picked by hand. Cheeks and nose follow the mouth. */
+export declare const PARTS: string[];
+/** The colours in use, each of which can be changed by hand. `parts` only on a colourful face. */
+export declare function coloursOf(t: Traits): {
+    tile: string;
+    ink: string;
+    parts?: undefined;
+} | {
+    tile: string;
+    ink: string;
+    parts: {
+        [k: string]: string;
+    };
+};
+export interface Doodle {
+    tile: string;
+    ink: string;
+    /** Where the face sits, its tilt, and how heavy its lines are. */
+    face: string;
+    weight: number;
+    eyes: string;
+    mouth: string;
+    /** Cheeks and nose, which stay still while the eyes blink. */
+    marks: string;
+    mood: string;
+    blinkDelay: number;
+}
+export declare function createDoodle(name: string, overrides?: Overrides): Doodle;
+/** How every line and blob of a face is painted. Colour comes through `currentColor`. */
+export declare const INK_STYLE: (weight: number) => string;
+/** The doodle at rest, for thumbnails. */
+export declare const doodleSvg: (name: string, overrides?: Overrides) => string;
+export {};