@originkit/avatars 0.0.0-stage → 0.2.0

package/dist/gummies/art.js

@@ -0,0 +1,168 @@
+/**
+ * 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 { BLACK, mix, WHITE } from "../colors.js";
+export const GLOWS = [
+    { label: "Mint", glow: "#3fe07a", accent: "#9df25c" },
+    { label: "Sky", glow: "#4f8dff", accent: "#62e6ff" },
+    { label: "Orchid", glow: "#a56bff", accent: "#ff7ee8" },
+    { label: "Lagoon", glow: "#2fd6d0", accent: "#7fb4ff" },
+    { label: "Peach", glow: "#ff9a5c", accent: "#ffd65c" },
+    { label: "Rose", glow: "#ff6fa8", accent: "#ffb36b" },
+    { label: "Lemon", glow: "#f2d33f", accent: "#8ff05c" },
+    { label: "Iris", glow: "#6a63ff", accent: "#e07bff" },
+    { label: "Coral", glow: "#ff6a6a", accent: "#ff9ee0" },
+];
+/** The first is the bun in the reference. Neighbours are as unlike as they can be. */
+export const BODIES = [
+    { name: "Bun", rx: 38, ry: 31, power: 2.5, taper: 0.1, foot: 0.86 },
+    { name: "Tall", rx: 27, ry: 39, power: 2.2, taper: 0.14, foot: 0.92 },
+    { name: "Ghost", rx: 30, ry: 36, power: 3, taper: 0.06, foot: 0.96, hem: [3.5, 0.075] },
+    { name: "Mochi", rx: 44, ry: 23, power: 2.3, taper: 0.06, foot: 0.8 },
+    { name: "Pear", rx: 31, ry: 37, power: 2.1, taper: 0.42, foot: 0.9 },
+    { name: "Puff", rx: 35, ry: 32, power: 2, taper: 0.04, foot: 0.94, bumps: [7, 0.07] },
+    { name: "Cube", rx: 33, ry: 31, power: 4.2, taper: 0.03, foot: 1, lean: 8 },
+    { name: "Bell", rx: 33, ry: 35, power: 2.7, taper: 0.34, foot: 0.8 },
+    { name: "Bean", rx: 39, ry: 26, power: 2.3, taper: 0.1, foot: 0.9, bumps: [2, 0.13], lean: 16 },
+    { name: "Drop", rx: 29, ry: 36, power: 1.7, taper: 0.5, foot: 1 },
+];
+export const TOPPERS = [
+    { name: "Crown", neck: 15, d: "M-17 12Q-12 6 -12 -2L-11 -8Q-10 -10 -8 -8L-3 -3L2 -9Q3 -10 4 -9L9 -3L12 -8Q13 -9 13 -7L13 -2Q13 6 18 12Z" },
+    { name: "Horn", neck: 10, d: "M-13 12Q-5 6 -3.5 -3Q-2 -14 -1 -18Q0 -20 1 -18Q2 -14 3.5 -3Q5 6 13 12Z" },
+    { name: "Ears", neck: 25, d: "M-27 16Q-21 2 -20 -6Q-19 -10 -16 -10Q-9 -6 -6 2Q-4 8 1 12H-1Q4 8 6 2Q9 -6 16 -10Q19 -10 20 -6Q21 2 27 16Z" },
+    { name: "Sprout", neck: 8, d: "M-9 12Q-2 7 -1.3 0V-5Q-11 -5 -12 -14Q-3 -15 0 -7Q3 -15 12 -14Q11 -5 1.3 -5V0Q2 7 9 12Z" },
+    { name: "Antenna", neck: 8, d: "M-9 12Q-2 7 -1.4 0V-11H1.4V0Q2 7 9 12ZM-5.4 -14.5a5.4 5.4 0 1 1 10.8 0a5.4 5.4 0 1 1 -10.8 0Z" },
+    { name: "Flame", neck: 12, d: "M-15 12Q-7 7 -7 0Q-8 -5 -4 -8Q-4 -13 1 -18Q1 -11 6 -8Q9 -4 8 0Q8 7 15 12Z" },
+    { name: "Horns", neck: 19, d: "M-21 14Q-15 6 -14 -4Q-14 -11 -13 -14Q-8 -9 -7 -2Q-5 8 1 12H-1Q5 8 7 -2Q8 -9 13 -14Q14 -11 14 -4Q15 6 21 14Z" },
+    { name: "Bow", neck: 15, d: "M0 2Q-7 -10 -15 -8Q-17 -1 -15 6Q-7 7 0 2Q7 7 15 6Q17 -1 15 -8Q7 -10 0 2Z" },
+    { name: "Bare", neck: 0, d: "" },
+];
+const OUTLINE_POINTS = 360;
+/** Where the body's middle sits, low enough to leave room for a topper. */
+const CENTRE_Y = 55;
+const round2 = (value) => Math.round(value * 100) / 100;
+const signedPower = (value, power) => Math.sign(value) * Math.abs(value) ** power;
+export const bodyOf = (t) => t.pick("body", BODIES);
+export const topperOf = (t) => t.pick("topper", TOPPERS);
+/** The colours in use, each of which can be changed by hand. */
+export function coloursOf(t) {
+    const picked = t.color("glow");
+    const pair = t.pick("glow", GLOWS);
+    const glow = picked ?? pair.glow;
+    return {
+        glow,
+        accent: t.color("accent") ?? (picked ? mix(picked, WHITE, 0.35) : pair.accent),
+        ink: t.color("ink") ?? mix(glow, BLACK, 0.2),
+    };
+}
+function drawOutline(t, body) {
+    const size = t.num("body.size", 0.92, 1.06);
+    const rx = body.rx * size;
+    const ry = body.ry * size;
+    const start = t.num("wave", 0, 2 * Math.PI);
+    const lean = (t.jitter("lean", body.lean ?? 0) * Math.PI) / 180;
+    const points = Array.from({ length: OUTLINE_POINTS }, (_, i) => {
+        const angle = (i * 2 * Math.PI) / OUTLINE_POINTS;
+        const spread = 1 + (body.bumps ? body.bumps[1] * Math.cos(body.bumps[0] * angle + start) : 0);
+        let x = rx * signedPower(Math.cos(angle), 2 / body.power) * spread;
+        let y = ry * signedPower(Math.sin(angle), 2 / body.power) * spread;
+        x *= 1 + (body.taper * y) / ry;
+        if (y > 0)
+            y *= body.foot;
+        if (body.hem && y > 0)
+            y += ry * body.hem[1] * Math.cos((body.hem[0] * 2 * Math.PI * x) / (rx * 2)) * (y / ry);
+        return [x * Math.cos(lean) - y * Math.sin(lean), x * Math.sin(lean) + y * Math.cos(lean) + CENTRE_Y];
+    });
+    const ys = points.map(([, y]) => y);
+    const top = Math.min(...ys);
+    const bottom = Math.max(...ys);
+    const peak = points[ys.indexOf(top)];
+    return {
+        d: `M${points.map(([x, y]) => `${round2(50 + x)} ${round2(y)}`).join("L")}Z`,
+        rx,
+        ry: (bottom - top) / 2,
+        middle: (top + bottom) / 2,
+        top,
+        peakX: 50 + peak[0],
+    };
+}
+function drawDefs(outline, glow, accent) {
+    const { d, ry, middle } = outline;
+    const top = round2(middle - ry);
+    const bottom = round2(middle + ry);
+    // One size for all of these, as a shape this flat would clip a blur sized to itself.
+    const blur = (id, amount) => `<filter id="${id}" filterUnits="userSpaceOnUse" x="-30" y="-30" width="160" height="160"><feGaussianBlur stdDeviation="${amount}"/></filter>`;
+    return (`<defs>` +
+        `<path id="jelly-shape" d="${d}"/>` +
+        `<mask id="jelly-inside" maskUnits="userSpaceOnUse" x="-30" y="-30" width="160" height="160"><use href="#jelly-shape" fill="#fff"/></mask>` +
+        `<linearGradient id="jelly-frost" gradientUnits="userSpaceOnUse" x1="50" y1="${top}" x2="50" y2="${bottom}">` +
+        `<stop offset="0" stop-color="${mix(glow, WHITE, 0.9)}"/><stop offset="1" stop-color="${mix(glow, WHITE, 0.72)}"/></linearGradient>` +
+        `<linearGradient id="jelly-sheen" gradientUnits="userSpaceOnUse" x1="50" y1="${top}" x2="50" y2="${round2(middle + ry * 0.1)}">` +
+        `<stop offset="0" stop-color="#fff" stop-opacity="0.85"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></linearGradient>` +
+        // Pearl: white where it meets the body, then shifting through the jelly's own colours.
+        `<linearGradient id="jelly-pearl" x1="0.5" y1="1" x2="0.5" y2="0">` +
+        `<stop offset="0.3" stop-color="#ffffff"/><stop offset="0.52" stop-color="${mix(accent, WHITE, 0.55)}"/>` +
+        `<stop offset="0.76" stop-color="${mix(glow, WHITE, 0.42)}"/><stop offset="1" stop-color="${mix(mix(glow, "#ff8ee0", 0.5), WHITE, 0.5)}"/></linearGradient>` +
+        blur("jelly-wide", 8.5) +
+        blur("jelly-mid", 4.6) +
+        blur("jelly-rim", 2.4) +
+        blur("jelly-edge", 0.5) +
+        `</defs>`);
+}
+/** A soft pool of light, drawn as a shape and blurred, which blends far better than stops. */
+const pool = (cy, wide, tall, fill, blur, opacity = 1) => `<ellipse cx="50" cy="${round2(cy)}" rx="${round2(wide)}" ry="${round2(tall)}" fill="${fill}" opacity="${opacity}" filter="url(#${blur})"/>`;
+/** Where everything goes: the outline, the face's place, size and tilt, and the topper's. */
+export function layoutOf(t) {
+    const body = bodyOf(t);
+    const topper = topperOf(t);
+    const outline = drawOutline(t, body);
+    return {
+        body,
+        topper,
+        outline,
+        face: {
+            x: round2(50 + t.jitter("face.x", outline.rx * 0.2)),
+            y: round2(outline.middle + t.num("face.y", -0.42, -0.08) * outline.ry),
+            size: round2(t.num("face.size", 0.8, 1.1) * Math.min(1, outline.rx / 30)),
+            tilt: round2(t.jitter("face.tilt", 9)),
+        },
+        /** The topper's base, on the top of the body, and its scale. */
+        crown: { x: round2(outline.peakX), y: round2(outline.top), scale: round2(t.num("topper.size", 0.85, 1.1)) },
+    };
+}
+/** The jelly's art, upright and without its face, which the gummy draws itself. */
+export function jellyArt(t) {
+    const { topper, outline, crown: at } = layoutOf(t);
+    const { glow, accent } = coloursOf(t);
+    const crown = (paint) => topper.d
+        ? `<path d="${topper.d}" transform="translate(${at.x} ${at.y}) scale(${at.scale})" ` +
+            `fill="${paint}" stroke="${paint}" stroke-width="1.2" stroke-linejoin="round"/>`
+        : "";
+    // Masked to the jelly and its topper, so the melt can't spill out as a halo on the canvas.
+    const join = topper.d
+        ? `<mask id="jelly-whole" maskUnits="userSpaceOnUse" x="-30" y="-30" width="160" height="160"><use href="#jelly-shape" fill="#fff"/>${crown("#fff")}</mask>` +
+            `<g mask="url(#jelly-whole)"><ellipse cx="${round2(outline.peakX)}" cy="${round2(outline.top + 2)}" rx="${topper.neck}" ry="3.6" fill="#fff" filter="url(#jelly-rim)"/></g>`
+        : "";
+    const { rx, ry, middle } = outline;
+    const size = t.num("pool", 0.86, 1.08);
+    const light = pool(middle - ry * 0.5, rx * 0.8, ry * 0.42, accent, "jelly-wide", 0.22) +
+        pool(middle + ry * 0.2, rx * 0.8 * size, ry * 0.5 * size, glow, "jelly-wide") +
+        pool(middle + ry * 0.24, rx * 0.5 * size, ry * 0.22 * size, glow, "jelly-mid", 0.7) +
+        pool(middle + ry * 0.64, rx * 0.56, ry * 0.12, accent, "jelly-mid", 0.75) +
+        pool(middle + ry * 0.98, rx * 0.4, ry * 0.15, "#fff", "jelly-mid");
+    return (drawDefs(outline, glow, accent) +
+        crown("url(#jelly-pearl)") +
+        `<use href="#jelly-shape" fill="url(#jelly-frost)"/>` +
+        `<g mask="url(#jelly-inside)">` +
+        light +
+        `<use href="#jelly-shape" fill="url(#jelly-sheen)"/>` +
+        `<use href="#jelly-shape" fill="none" stroke="#fff" stroke-width="5.5" stroke-opacity="0.85" filter="url(#jelly-rim)"/>` +
+        `<use href="#jelly-shape" fill="none" stroke="#fff" stroke-width="1.4" stroke-opacity="0.7" filter="url(#jelly-edge)"/>` +
+        `</g>` +
+        join);
+}
+/** The attributes every line of a face shares. Colour comes through `color`. */
+export const FACE_LINE = `fill="none" stroke-width="2.7" stroke-linecap="round" stroke-linejoin="round"`;

package/dist/gummies/calming.d.ts

@@ -0,0 +1,8 @@
+/**
+ * What Possibilities calms on a gummy: its bodies and toppers, its twelve faces, and the
+ * frost along with its proportions. Low keeps eight of each, one for each variant. Body and
+ * topper indices are into the lists in `art.ts`, face indices into `FACES`, plainest first.
+ */
+import type { Calming } from "../possibilities.ts";
+export declare const CALMING: Calming;
+export declare const NOTES: [string, string, string];

package/dist/gummies/calming.js

@@ -0,0 +1,21 @@
+/**
+ * What Possibilities calms on a gummy: its bodies and toppers, its twelve faces, and the
+ * frost along with its proportions. Low keeps eight of each, one for each variant. Body and
+ * topper indices are into the lists in `art.ts`, face indices into `FACES`, plainest first.
+ */
+export const CALMING = {
+    features: /^(face|body|topper)\.(x|y|size|tilt)$|^(lean|pool|angle|frost)$/,
+    lists: {
+        // Bun, Mochi, Tall, Pear, Bell, Cube, Ghost, Puff, then the leaning Bean and Drop.
+        body: [10, 8, [0, 3, 1, 4, 7, 6, 2, 5, 8, 9]],
+        // Bare, Sprout, Bow, Ears, Crown, Antenna, Horn, Flame, then Horns.
+        topper: [9, 8, [8, 3, 7, 2, 0, 4, 1, 5, 6]],
+        // Happy, Sleepy, Cat, Shy, Wink, Smug, Grin, Wow, then Kiss, Pout, Deadpan and Dizzy.
+        face: [12, 8, [2, 4, 5, 11, 0, 8, 7, 3, 10, 9, 1, 6]],
+    },
+};
+export const NOTES = [
+    "rounded buns and bells with gentle faces, the frost and glow in their middle range.",
+    "more lean, and the face moves about more.",
+    "every body, face and topper, up to dizzy faces and horns, at any frost and glow.",
+];

package/dist/gummies/controls.d.ts

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

package/dist/gummies/controls.js

@@ -0,0 +1,53 @@
+import { containerControls } from "../container.js";
+import { choice, palette, slider } from "../controls.js";
+import { topperOf } from "./art.js";
+import { narrowed, possibilitiesSlider } from "../possibilities.js";
+import { colorKey } from "../traits.js";
+import { CALMING, NOTES } from "./calming.js";
+import { BODIES, coloursOf, FACES, GLOWS, gummyTraits, TOPPERS } from "./index.js";
+const named = (list) => list.map(({ name: label }) => ({ label }));
+export const controls = (name, overrides) => {
+    const t = gummyTraits(name, overrides);
+    const list = (control) => narrowed(control, t, CALMING);
+    const { accent, ink } = coloursOf(t);
+    return [
+        {
+            title: "Face",
+            controls: [
+                list(choice(t, "face", "Face", "list", named(FACES))),
+                slider(t, "face.size", "Face size", 0, 100, "%"),
+                slider(t, "face.y", "Face height", 0, 100, "%"),
+                slider(t, "face.x", "Face across", -100, 100, "%"),
+                slider(t, "face.tilt", "Face tilt", -9, 9, "°"),
+            ],
+        },
+        {
+            title: "Shape",
+            controls: [
+                possibilitiesSlider(t, NOTES),
+                list(choice(t, "body", "Body", "list", named(BODIES))),
+                list(choice(t, "topper", "Topper", "list", named(TOPPERS))),
+                slider(t, "body.size", "Body size", 0, 100, "%"),
+                ...(topperOf(t).d ? [slider(t, "topper.size", "Topper size", 0, 100, "%")] : []),
+            ],
+        },
+        {
+            title: "Colour",
+            controls: [
+                palette(t, "glow", "Colour", GLOWS.map(({ glow }) => glow)),
+                {
+                    type: "colors",
+                    id: "gummy.colors",
+                    label: "Topper, face",
+                    colors: [
+                        { id: colorKey("accent"), color: accent },
+                        { id: colorKey("ink"), color: ink },
+                    ],
+                },
+                slider(t, "pool", "Glow", 0, 100, "%"),
+                slider(t, "frost", "Frost", 0, 100, "%"),
+            ],
+        },
+        { title: "Container", controls: containerControls(t) },
+    ];
+};

package/dist/gummies/index.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Gummies: the frosted buns, toppers and colours in `art.ts`, inflated into 3D. The body is a frosted
+ * shell over a glowing core, the topper a pearly piece set on top, and the face is inked on.
+ *
+ * The face is kept as strokes and dots, so the 3D stage can draw it from exact shapes that
+ * blink and follow the pointer, and the still picture draws the very same strokes.
+ */
+import { type Overrides, type Traits } from "../traits.ts";
+import type { AvatarParts } from "../types.ts";
+/** The name's traits, calmed to the Possibilities set, as the panel reads them too. */
+export declare const gummyTraits: (name: string, overrides?: Overrides) => Traits;
+export { BODIES, GLOWS, TOPPERS } from "./art.ts";
+/** A dot, a line in M, L, Q and Z, or an oval ring, in the face's own units. */
+type Mark = ["dot", number, number, number] | ["line", string] | ["ring", number, number, number, number];
+interface Face {
+    name: string;
+    /** What blinks. */
+    eyes: Mark[];
+    /** What stays put through a blink: the mouth, and any brows. */
+    mouth: Mark[];
+}
+/** Drawn around the middle of the face. Neighbours are as unlike as they can be. */
+export declare const FACES: Face[];
+export declare const faceOf: (t: Traits) => Face;
+/** How milky the shell is, from the colour it's tinted with towards white. */
+export declare const frostOf: (t: Traits) => number;
+/** The art's colours, with a deeper ink, as in 3D the face can sit over the glow. */
+export declare function coloursOf(t: Traits): {
+    glow: string;
+    accent: string;
+    ink: string;
+};
+/** A topper's path, moved to its base and scaled. Its paths use M, L, Q, H, V, Z and relative arcs. */
+export declare function placePath(d: string, x: number, y: number, scale: number): string;
+export declare function gummyParts(name: string, overrides?: Overrides): AvatarParts;
+/** The gummy at rest, for thumbnails and where 3D can't run: the jelly's art with this face. */
+export declare function gummySvg(name: string, overrides?: Overrides): string;

package/dist/gummies/index.js

@@ -0,0 +1,283 @@
+/**
+ * Gummies: the frosted buns, toppers and colours in `art.ts`, inflated into 3D. The body is a frosted
+ * shell over a glowing core, the topper a pearly piece set on top, and the face is inked on.
+ *
+ * The face is kept as strokes and dots, so the 3D stage can draw it from exact shapes that
+ * blink and follow the pointer, and the still picture draws the very same strokes.
+ */
+import { BLACK, mix, WHITE } from "../colors.js";
+import { containerOf, inContainer } from "../container.js";
+import { coloursOf as jellyColoursOf, FACE_LINE, jellyArt, layoutOf } from "./art.js";
+import { calmed } from "../possibilities.js";
+import { createTraits } from "../traits.js";
+import { CALMING } from "./calming.js";
+/** The name's traits, calmed to the Possibilities set, as the panel reads them too. */
+export const gummyTraits = (name, overrides) => calmed(createTraits(name, overrides), CALMING);
+export { BODIES, GLOWS, TOPPERS } from "./art.js";
+const dot = (x, y, r = 2.7) => ["dot", x, y, r];
+const line = (d) => ["line", d];
+/** Drawn around the middle of the face. Neighbours are as unlike as they can be. */
+export const FACES = [
+    { name: "Wink", eyes: [dot(-9, -4), line("M12 -8L6 -4L12 0")], mouth: [line("M-11 7Q0 13 11 6"), line("M4 9.5Q5 16 10 14.5Q14 12 11 6")] },
+    { name: "Deadpan", eyes: [line("M-16 -2L-5 -5"), line("M5 -5L16 -3")], mouth: [line("M0 3L5 11.5L-5 11.5Z")] },
+    { name: "Happy", eyes: [line("M-13 0Q-9 -7 -5 0"), line("M5 0Q9 -7 13 0")], mouth: [line("M-5 6Q0 12 5 6")] },
+    { name: "Wow", eyes: [dot(-9, -3, 3), dot(9, -3, 3)], mouth: [["ring", 0, 8, 3.4, 4.4]] },
+    { name: "Sleepy", eyes: [line("M-13 -4Q-9 1 -5 -4"), line("M5 -4Q9 1 13 -4")], mouth: [dot(0, 7, 2)] },
+    { name: "Cat", eyes: [dot(-10, -3), dot(10, -3)], mouth: [line("M-7 5Q-3.5 10 0 5Q3.5 10 7 5")] },
+    { name: "Dizzy", eyes: [line("M-13 -6L-7 0"), line("M-7 -6L-13 0"), line("M7 -6L13 0"), line("M13 -6L7 0")], mouth: [line("M-5 8L5 8")] },
+    { name: "Grin", eyes: [dot(-9, -4), dot(9, -4)], mouth: [line("M-8 4Q0 5 8 4Q6 13 0 13Q-6 13 -8 4Z")] },
+    { name: "Smug", eyes: [line("M-14 -3Q-9 -1 -4 -3"), line("M4 -3Q9 -1 14 -3")], mouth: [line("M-6 7Q2 10.5 8 4")] },
+    { name: "Pout", eyes: [dot(-9, -2), dot(9, -2)], mouth: [line("M-14 -8L-5 -6"), line("M5 -6L14 -8"), line("M-4 10Q0 6 4 10")] },
+    { name: "Kiss", eyes: [line("M-13 -4Q-9 1 -5 -4"), dot(9, -3)], mouth: [line("M-1 3.5Q4.5 5 0.5 7.5Q4.5 10 -1 11.5")] },
+    { name: "Shy", eyes: [dot(-8, -2, 2), dot(8, -2, 2)], mouth: [line("M-2.5 7Q0 9 2.5 7")] },
+];
+export const faceOf = (t) => t.pick("face", FACES);
+/** How milky the shell is, from the colour it's tinted with towards white. */
+export const frostOf = (t) => t.num("frost", 0.74, 0.94);
+/** The glow's size, which the art calls its pool. */
+const poolOf = (t) => t.num("pool", 0.86, 1.08);
+/** The art's colours, with a deeper ink, as in 3D the face can sit over the glow. */
+export function coloursOf(t) {
+    const colours = jellyColoursOf(t);
+    return { ...colours, ink: t.color("ink") ?? mix(colours.glow, BLACK, 0.55) };
+}
+/** Half the width of every line, as the still picture draws it. */
+const LINE_RADIUS = 1.35;
+/** How long each straight piece of a curve is at most, in the face's units. */
+const PIECE = 2.5;
+const round2 = (value) => Math.round(value * 100) / 100;
+/** A line's path as the points along it, with its curves broken into short straight pieces. */
+function pointsOf(d) {
+    const tokens = d.match(/[MLQZ]|-?\d*\.?\d+/g);
+    const runs = [];
+    let run = [];
+    let i = 0;
+    const next = () => Number(tokens[i++]);
+    while (i < tokens.length) {
+        const command = tokens[i++];
+        const from = run[run.length - 1];
+        if (command === "M") {
+            run = [[next(), next()]];
+            runs.push(run);
+        }
+        else if (command === "L") {
+            run.push([next(), next()]);
+        }
+        else if (command === "Q") {
+            const [cx, cy, x, y] = [next(), next(), next(), next()];
+            const pieces = Math.max(2, Math.ceil((Math.hypot(cx - from[0], cy - from[1]) + Math.hypot(x - cx, y - cy)) / PIECE));
+            for (let s = 1; s <= pieces; s++) {
+                const u = s / pieces;
+                const a = (1 - u) ** 2;
+                const b = 2 * u * (1 - u);
+                const c = u * u;
+                run.push([a * from[0] + b * cx + c * x, a * from[1] + b * cy + c * y]);
+            }
+        }
+        else if (command === "Z") {
+            run.push(run[0]);
+        }
+    }
+    return runs;
+}
+const ringPoints = (cx, cy, rx, ry) => {
+    const pieces = Math.ceil((2 * Math.PI * Math.max(rx, ry)) / PIECE);
+    return Array.from({ length: pieces + 1 }, (_, i) => {
+        const angle = (i / pieces) * 2 * Math.PI;
+        return [cx + rx * Math.cos(angle), cy + ry * Math.sin(angle)];
+    });
+};
+/** From the face's units into the 100×100 frame, as `translate rotate scale` places it. */
+const placer = ({ x, y, size, tilt }) => {
+    const turn = (tilt * Math.PI) / 180;
+    const [c, s] = [Math.cos(turn), Math.sin(turn)];
+    return ([px, py]) => [x + size * (c * px - s * py), y + size * (s * px + c * py)];
+};
+/** A line's path as its pieces: straight ones as two points, curves as three. */
+function piecesOf(d) {
+    const tokens = d.match(/[MLQZ]|-?\d*\.?\d+/g);
+    const pieces = [];
+    let start = [0, 0];
+    let at = [0, 0];
+    let i = 0;
+    const next = () => Number(tokens[i++]);
+    while (i < tokens.length) {
+        const command = tokens[i++];
+        if (command === "M") {
+            at = start = [next(), next()];
+        }
+        else if (command === "L") {
+            const to = [next(), next()];
+            pieces.push([at, to]);
+            at = to;
+        }
+        else if (command === "Q") {
+            const control = [next(), next()];
+            const to = [next(), next()];
+            pieces.push([at, control, to]);
+            at = to;
+        }
+        else if (command === "Z") {
+            pieces.push([at, start]);
+            at = start;
+        }
+    }
+    return pieces;
+}
+/**
+ * A face's marks as the stage's shapes, each drawn exactly: a circle for a dot, a stroked
+ * oval for a ring, a rod for a straight piece and a curve for a curved one. Placing them
+ * moves, turns and scales, which keeps a curve a curve.
+ */
+function shapesOf(marks, place) {
+    const to = placer(place);
+    const r = round2(LINE_RADIUS * place.size);
+    const at = (point) => to(point).map(round2);
+    return marks.flatMap((mark) => {
+        if (mark[0] === "dot") {
+            const [cx, cy] = at([mark[1], mark[2]]);
+            return [{ kind: "circle", cx, cy, r: round2(mark[3] * place.size) }];
+        }
+        if (mark[0] === "ring") {
+            const [cx, cy] = at([mark[1], mark[2]]);
+            return [{ kind: "superellipse", cx, cy, rx: round2(mark[3] * place.size), ry: round2(mark[4] * place.size), n: 2, rot: place.tilt, stroke: r }];
+        }
+        return piecesOf(mark[1]).map((points) => {
+            const [[x1, y1], [x2, y2]] = [at(points[0]), at(points[points.length - 1])];
+            if (points.length === 2)
+                return { kind: "rod", x1, y1, x2, y2, r };
+            const [cx, cy] = at(points[1]);
+            return { kind: "curve", x1, y1, cx, cy, x2, y2, r };
+        });
+    });
+}
+/** Every point a face's marks reach, in the face's own units. */
+const reachOf = (marks) => marks.flatMap((mark) => {
+    if (mark[0] === "dot") {
+        const [, x, y, r] = mark;
+        return [[x - r, y], [x + r, y], [x, y - r], [x, y + r]];
+    }
+    if (mark[0] === "ring")
+        return ringPoints(mark[1], mark[2], mark[3], mark[4]);
+    return pointsOf(mark[1]).flat();
+});
+/** Room left round the face for its lines' width, as a share of its size. */
+const MARGIN = 1.18;
+const FIT_STEPS = 20;
+/** Whether a point is inside an outline given as `M x yLx y…Z`. */
+function insideOf(d) {
+    const outline = d.slice(1, -1).split("L").map((point) => point.split(" ").map(Number));
+    return (x, y) => {
+        let within = false;
+        for (let a = 0, b = outline.length - 1; a < outline.length; b = a++) {
+            const [xa, ya] = outline[a];
+            const [xb, yb] = outline[b];
+            if (ya > y !== yb > y && x < ((xb - xa) * (y - ya)) / (yb - ya) + xa)
+                within = !within;
+        }
+        return within;
+    };
+}
+/**
+ * The face where it was placed, if it fits on the body. Otherwise it shrinks and moves in
+ * towards the body's middle until it does, as in 3D anything off the body isn't drawn.
+ */
+function fitted(face, place, outline) {
+    const inside = insideOf(outline.d);
+    const reach = reachOf([...face.eyes, ...face.mouth]).map(([x, y]) => [x * MARGIN, y * MARGIN]);
+    let fit = place;
+    for (let step = 0; step < FIT_STEPS; step++) {
+        const to = placer(fit);
+        if (reach.every((point) => inside(...to(point))))
+            break;
+        fit = { ...fit, size: fit.size * 0.95, x: fit.x + (50 - fit.x) * 0.15, y: fit.y + (outline.middle - fit.y) * 0.15 };
+    }
+    return { x: round2(fit.x), y: round2(fit.y), size: round2(fit.size), tilt: fit.tilt };
+}
+/** The same marks as markup, for the still picture, inside the face's own transform. */
+const marksMarkup = (marks) => marks
+    .map((mark) => mark[0] === "dot"
+    ? `<circle cx="${mark[1]}" cy="${mark[2]}" r="${mark[3]}" fill="currentColor" stroke="none"/>`
+    : mark[0] === "ring"
+        ? `<ellipse cx="${mark[1]}" cy="${mark[2]}" rx="${mark[3]}" ry="${mark[4]}"/>`
+        : `<path d="${mark[1]}"/>`)
+    .join("");
+/** A topper's path, moved to its base and scaled. Its paths use M, L, Q, H, V, Z and relative arcs. */
+export function placePath(d, x, y, scale) {
+    const tokens = d.match(/[a-zA-Z]|-?\d*\.?\d+/g) ?? [];
+    const out = [];
+    let i = 0;
+    const next = () => Number(tokens[i++]);
+    const at = (value, offset) => round2(value * scale + offset);
+    while (i < tokens.length) {
+        const command = tokens[i++];
+        if (command === "Z" || command === "z") {
+            out.push("Z");
+        }
+        else if (command === "H") {
+            out.push(`H${at(next(), x)}`);
+        }
+        else if (command === "V") {
+            out.push(`V${at(next(), y)}`);
+        }
+        else if (command === "a") {
+            // Relative, so its end only scales. Its radii scale with it.
+            const [rx, ry, turn, large, sweep, dx, dy] = Array.from({ length: 7 }, next);
+            out.push(`a${round2(rx * scale)} ${round2(ry * scale)} ${turn} ${large} ${sweep} ${round2(dx * scale)} ${round2(dy * scale)}`);
+        }
+        else {
+            // M, L and Q: pairs of absolute points.
+            const pairs = command === "Q" ? 2 : 1;
+            const values = [];
+            for (let p = 0; p < pairs; p++)
+                values.push(at(next(), x), at(next(), y));
+            out.push(`${command}${values.join(" ")}`);
+        }
+    }
+    return out.join("");
+}
+export function gummyParts(name, overrides) {
+    const t = gummyTraits(name, overrides);
+    const { topper, outline, face: placed, crown } = layoutOf(t);
+    const face = faceOf(t);
+    const place = fitted(face, placed, outline);
+    const { glow, accent, ink } = coloursOf(t);
+    const eyeShapes = shapesOf(face.eyes, place);
+    const eyePoints = eyeShapes.flatMap((shape) => shape.kind === "rod" || shape.kind === "curve" ? [shape.y1, shape.y2] : "cy" in shape ? [shape.cy] : []);
+    return {
+        colors: { body: glow, accent, visor: glow, light: ink },
+        head: [outline.d],
+        accents: topper.d ? [placePath(topper.d, crown.x, crown.y, crown.scale)] : [],
+        visor: [],
+        visorShapes: [],
+        eyes: [],
+        eyeShapes,
+        lights: [],
+        lightShapes: shapesOf(face.mouth, place),
+        chrome: [],
+        chromeShapes: [],
+        studs: [],
+        studShapes: [],
+        speckle: 0,
+        eyeY: eyePoints.reduce((sum, y) => sum + y, 0) / eyePoints.length,
+        painted: true,
+        jelly: { frost: round2(frostOf(t)), pool: round2(poolOf(t)) },
+        container: containerOf(t),
+    };
+}
+/** The gummy at rest, for thumbnails and where 3D can't run: the jelly's art with this face. */
+export function gummySvg(name, overrides) {
+    const t = gummyTraits(name, overrides);
+    const { face: placed, outline } = layoutOf(t);
+    const face = faceOf(t);
+    const { glow, ink } = coloursOf(t);
+    const { x, y, size, tilt } = fitted(face, placed, outline);
+    // The art's frost runs from 0.9 to 0.72 white, top to foot. Here it follows Frost,
+    // and Frost's middle gives just those.
+    const frost = frostOf(t);
+    const shell = [0.06, -0.12].map((by) => mix(glow, WHITE, Math.min(1, frost + by)));
+    const art = jellyArt(t).replace(/(<linearGradient id="jelly-frost"[^>]*><stop offset="0" stop-color=")[^"]+("\/><stop offset="1" stop-color=")[^"]+/, `$1${shell[0]}$2${shell[1]}`) +
+        `<g transform="translate(${x} ${y}) rotate(${tilt}) scale(${size})" color="${ink}" stroke="${ink}" ${FACE_LINE}>` +
+        `${marksMarkup(face.eyes)}${marksMarkup(face.mouth)}</g>`;
+    return inContainer(art, containerOf(t), "gummy-card");
+}

package/dist/history.d.ts

@@ -0,0 +1,21 @@
+/** Undo and redo for one avatar's overrides. */
+import type { Patch } from "./controls.ts";
+import type { Overrides } from "./traits.ts";
+/** Changes to the same control this close together are one step, so a drag undoes as one. */
+export declare const GROUP_MS = 500;
+export interface History {
+    past: Overrides[];
+    present: Overrides;
+    future: Overrides[];
+    /** The control changed last, and when. */
+    group: string | null;
+    changedAt: number;
+}
+export declare const emptyHistory: History;
+export declare function patched(current: Overrides, patch: Patch): Overrides;
+/** `alone` makes it a step of its own, as a typed number or an arrow press is, rather than part of a drag. */
+export declare function change(history: History, patch: Patch, now: number, alone?: boolean): History;
+/** Back to the name's own avatar, as a step that can itself be undone. */
+export declare function clear(history: History): History;
+export declare function undo(history: History): History;
+export declare function redo(history: History): History;

package/dist/history.js

@@ -0,0 +1,48 @@
+/** Undo and redo for one avatar's overrides. */
+/** Changes to the same control this close together are one step, so a drag undoes as one. */
+export const GROUP_MS = 500;
+const MAX_STEPS = 100;
+export const emptyHistory = { past: [], present: {}, future: [], group: null, changedAt: 0 };
+export function patched(current, patch) {
+    const next = { ...current, ...patch };
+    for (const key of Object.keys(next))
+        if (next[key] === undefined)
+            delete next[key];
+    return next;
+}
+/** `alone` makes it a step of its own, as a typed number or an arrow press is, rather than part of a drag. */
+export function change(history, patch, now, alone = false) {
+    const group = Object.keys(patch).join();
+    const continues = !alone && group === history.group && now - history.changedAt < GROUP_MS;
+    return {
+        past: continues ? history.past : [...history.past, history.present].slice(-MAX_STEPS),
+        present: patched(history.present, patch),
+        future: [],
+        group,
+        changedAt: now,
+    };
+}
+/** Back to the name's own avatar, as a step that can itself be undone. */
+export function clear(history) {
+    if (Object.keys(history.present).length === 0)
+        return history;
+    return { past: [...history.past, history.present].slice(-MAX_STEPS), present: {}, future: [], group: null, changedAt: 0 };
+}
+export function undo(history) {
+    const previous = history.past[history.past.length - 1];
+    if (!previous)
+        return history;
+    return {
+        past: history.past.slice(0, -1),
+        present: previous,
+        future: [history.present, ...history.future],
+        group: null,
+        changedAt: 0,
+    };
+}
+export function redo(history) {
+    const [next, ...future] = history.future;
+    if (!next)
+        return history;
+    return { past: [...history.past, history.present], present: next, future, group: null, changedAt: 0 };
+}