@originkit/avatars 0.0.0-stage → 0.2.0

package/dist/pixels/index.js

@@ -0,0 +1,174 @@
+/**
+ * Pixel people. Parts from `sprites.ts` are stacked on a 20×20 grid, then each
+ * layer becomes SVG rectangles so it can move on its own without leaving the grid.
+ */
+import { calmed } from "../possibilities.js";
+import { createTraits } from "../traits.js";
+import { CALMING } from "./calming.js";
+import { COLOR_TILE, isPaleHair, paints, pickLook, SANTA_RED } from "./palette.js";
+import { BEARDS, EARRING, EYE_SPACINGS, EYEBROWS, GLASSES, HAIRS, HATS, HEAD, MARKS, MOUTHS, NOSE, } from "./sprites.js";
+export const GRID = 20;
+/** Empty cells around the person, so tall hair never touches the tile's edge. */
+export const MARGIN = 2;
+/** The mouths a person can have, in the order they are picked from. */
+export const MOUTH_NAMES = ["line", "small", "smirk", "smile", "frown", "tiny"];
+const key = (x, y) => `${x},${y}`;
+function toCells({ top, rows }, paint, belowRow = -1, mirrored = false) {
+    const cells = new Map();
+    rows.forEach((row, line) => {
+        const y = top + line;
+        if (y <= belowRow)
+            return;
+        [...row].forEach((letter, x) => {
+            if (letter !== ".")
+                cells.set(key(mirrored ? GRID - 1 - x : x, y), paint[letter]);
+        });
+    });
+    return cells;
+}
+/** A row with ink at the given columns. */
+const inkAt = (...columns) => Array.from({ length: GRID }, (_, x) => (columns.includes(x) ? "x" : ".")).join("");
+/** Both eyes in each state. Built from their position, so any spacing can blink. */
+function eyeSprites([left, right], tall) {
+    const pair = inkAt(left, right);
+    return {
+        open: { top: tall ? 9 : 10, rows: tall ? [pair, pair] : [pair] },
+        wide: { top: tall ? 8 : 9, rows: tall ? [pair, pair, pair] : [pair, pair] },
+        shut: { top: 10, rows: [inkAt(left, left + 1, right, right + 1)] },
+    };
+}
+const merged = (...layers) => new Map(layers.flatMap((layer) => [...layer]));
+const NEIGHBOURS = [[1, 0], [-1, 0], [0, 1], [0, -1]];
+/** Paints a one-cell border around a shape, leaving the shape itself alone. */
+function outlineOf(shape, color) {
+    const outline = new Map();
+    for (const cell of shape.keys()) {
+        const [x, y] = cell.split(",").map(Number);
+        for (const [dx, dy] of NEIGHBOURS) {
+            const next = key(x + dx, y + dy);
+            if (!shape.has(next))
+                outline.set(next, color);
+        }
+    }
+    return outline;
+}
+/**
+ * Darkens where a shape meets another, so light hair stays readable against the
+ * face. Its outer edge is left alone, because the outline already draws that.
+ */
+function rimOf(shape, against, color) {
+    const rimmed = new Map(shape);
+    for (const cell of shape.keys()) {
+        const [x, y] = cell.split(",").map(Number);
+        const touches = NEIGHBOURS.some(([dx, dy]) => {
+            const next = key(x + dx, y + dy);
+            return !shape.has(next) && against.has(next);
+        });
+        if (touches)
+            rimmed.set(cell, color);
+    }
+    return rimmed;
+}
+/** Writes cells as rectangles, joining runs so a face stays a few hundred bytes. */
+function toRects(cells) {
+    let out = "";
+    for (let y = -MARGIN; y < GRID + MARGIN; y++) {
+        let x = -MARGIN;
+        while (x < GRID + MARGIN) {
+            const color = cells.get(key(x, y));
+            if (!color) {
+                x++;
+                continue;
+            }
+            let width = 1;
+            while (cells.get(key(x + width, y)) === color)
+                width++;
+            out += `<rect x="${x}" y="${y}" width="${width}" height="1" fill="${color}"/>`;
+            x += width;
+        }
+    }
+    return out;
+}
+const chance = (t, key, percent) => t(key) * 100 < percent;
+/** The traits are read first, so both themes of one name are the same person. */
+function pickTraits(t) {
+    const hair = t.pick("hair", HAIRS);
+    const wantsHat = hair.takesHat && chance(t, "hat", 38);
+    const hat = wantsHat ? t.pick("hat.kind", HATS) : null;
+    const facialHair = hair.name === "hijab" || !chance(t, "beard", 34) ? null : t.pick("beard.kind", Object.keys(BEARDS));
+    const glasses = chance(t, "glasses", 24) ? t.pick("glasses.kind", ["frames", "frames", "shades"]) : null;
+    const earring = !hair.wraps && chance(t, "earring", 16);
+    return {
+        hair,
+        hat,
+        facialHair,
+        glasses,
+        earring,
+        mouth: t.pick("mouth", MOUTH_NAMES),
+        mirrored: t("mirrored") < 0.5,
+        brows: chance(t, "brows", 55) ? t.pick("brows.kind", Object.keys(EYEBROWS)) : null,
+        mark: chance(t, "mark", 30) ? t.pick("mark.kind", Object.keys(MARKS)) : null,
+        // Lenses only frame small, centred eyes. Anything else reads as stripes.
+        eyeSpacing: glasses ? EYE_SPACINGS[0] : t.pick("eyes.spacing", EYE_SPACINGS),
+        tallEyes: !glasses && chance(t, "eyes.tall", 65),
+    };
+}
+/** A tile with the same corners as a peek, the person centred on it. Smooth, though the cells are crisp. */
+function tileOf(color) {
+    const span = GRID + MARGIN * 2;
+    return `<rect x="${-MARGIN}" y="${-MARGIN}" width="${span}" height="${span}" rx="5.33" fill="${color}" shape-rendering="auto"/>`;
+}
+export function createPixelFace(name, theme, overrides) {
+    const t = calmed(createTraits(name, overrides), CALMING);
+    const picked = pickLook(t);
+    const traits = pickTraits(t);
+    const { hair, hat, facialHair, glasses, earring, mirrored, brows, mark } = traits;
+    const retro = theme === "retro";
+    // A hijab is cloth, and a santa hat is only ever red.
+    const look = {
+        ...picked,
+        hair: hair.name === "hijab" ? picked.hat : picked.hair,
+        hat: hat?.name === "santa" ? SANTA_RED : picked.hat,
+    };
+    const paint = paints(theme, look);
+    const cellsOf = (sprite, belowRow = -1) => toCells(sprite, paint, belowRow, mirrored);
+    const { inks } = look;
+    const hairLine = hat ? hat.bottom : -1;
+    const headCells = cellsOf(HEAD);
+    const rim = (cells) => retro && isPaleHair(look.hair) ? rimOf(cells, headCells, inks.dark) : cells;
+    const back = hair.back ? rim(cellsOf(hair.back)) : new Map();
+    const front = rim(cellsOf(hair.front, hairLine));
+    const head = merged(headCells, earring ? cellsOf(EARRING) : new Map());
+    const hatCells = hat ? cellsOf(hat.sprite) : null;
+    const body = merged(back, head);
+    // Retro's outline goes around the person, and the hat has its own.
+    const outline = retro ? outlineOf(merged(body, front), inks.dark) : new Map();
+    const hatOutline = retro && hatCells ? outlineOf(hatCells, inks.dark) : new Map();
+    const rects = (sprite) => toRects(cellsOf(sprite));
+    const optional = (sprite) => (sprite ? cellsOf(sprite) : new Map());
+    const beard = optional(facialHair ? BEARDS[facialHair] : undefined);
+    const eyes = eyeSprites(traits.eyeSpacing, traits.tallEyes);
+    // Retro's two tones draw a nose as a dark smudge, so it goes without one.
+    const nose = retro ? new Map() : cellsOf(NOSE);
+    return {
+        tile: tileOf(retro ? inks.tile : COLOR_TILE),
+        headMask: toRects(headCells),
+        behind: toRects(merged(outline, body)),
+        face: toRects(merged(nose, optional(mark ? MARKS[mark] : undefined), beard, optional(brows ? EYEBROWS[brows] : undefined))),
+        front: toRects(front),
+        hat: hatCells ? toRects(merged(hatOutline, hatCells)) : null,
+        glasses: glasses ? rects(GLASSES[glasses]) : null,
+        eyes: { open: rects(eyes.open), wide: rects(eyes.wide), shut: rects(eyes.shut) },
+        mouths: { rest: rects(MOUTHS[traits.mouth]), hover: rects(MOUTHS.smile) },
+        eyesVisible: glasses !== "shades",
+        blinkDelay: t.num("blink", 0, 4),
+    };
+}
+/** The whole face at rest, for sheets and tests. */
+export const pixelSvg = (name, theme, overrides) => {
+    const f = createPixelFace(name, theme, overrides);
+    const span = GRID + MARGIN * 2;
+    return (`<svg xmlns="http://www.w3.org/2000/svg" viewBox="${-MARGIN} ${-MARGIN} ${span} ${span}" shape-rendering="crispEdges">` +
+        f.tile + f.behind + f.face + f.eyes.open + f.mouths.rest + f.front + (f.glasses ?? "") + (f.hat ?? "") +
+        `</svg>`);
+};

package/dist/pixels/palette.d.ts

@@ -0,0 +1,29 @@
+/** The paints for each theme. A theme maps every letter in `sprites.ts` to a colour. */
+import type { Traits } from "../traits.ts";
+export type Theme = "color" | "retro";
+export declare const SKINS: [string, string][];
+/** `[colour, highlight]`. */
+export declare const HAIR_COLORS: [string, string][];
+/** `[colour, shade]`. */
+export declare const HAT_COLORS: [string, string][];
+export declare const EARRINGS: string[];
+export declare const COLOR_TILE = "#f6f4ee";
+export declare const SANTA_RED: [string, string];
+export declare const RETRO: {
+    tile: string;
+    pale: string;
+    dark: string;
+};
+/** The screen colours Retro offers. The first is the Game Boy green it starts on. */
+export declare const SCREENS: string[];
+export interface Look {
+    skin: [string, string];
+    hair: [string, string];
+    hat: [string, string];
+    earring: string;
+    inks: typeof RETRO;
+}
+export declare const pickLook: (t: Traits) => Look;
+/** Whether Retro draws this hair light with an outline, rather than solid dark. */
+export declare const isPaleHair: ([color]: [string, string]) => boolean;
+export declare function paints(theme: Theme, { skin, hair, hat, earring, inks }: Look): Record<string, string>;

package/dist/pixels/palette.js

@@ -0,0 +1,107 @@
+/** The paints for each theme. A theme maps every letter in `sprites.ts` to a colour. */
+import { BLACK, mix, WHITE } from "../colors.js";
+export const SKINS = [
+    ["#fde3cf", "#eebf9f"],
+    ["#f5cda9", "#dfa97f"],
+    ["#eab98e", "#cf9468"],
+    ["#d9a273", "#b97f52"],
+    ["#c18a5e", "#9c6a42"],
+    ["#9b6a45", "#7b4f30"],
+    ["#74492e", "#5a3621"],
+    ["#4e3020", "#3a2316"],
+    ["#eda4ab", "#d67f8a"],
+];
+/** `[colour, highlight]`. */
+export const HAIR_COLORS = [
+    ["#17151a", "#35313b"],
+    ["#2f1e16", "#4e3424"],
+    ["#5e3a22", "#7e5433"],
+    ["#8a3f1f", "#b05f33"],
+    ["#d8ae62", "#ecca8d"],
+    ["#e8d9bb", "#f6edd9"],
+    ["#8e8f96", "#b1b2b8"],
+    ["#e588ad", "#f4afc9"],
+    ["#3f7fc2", "#68a4dd"],
+];
+/** `[colour, shade]`. */
+export const HAT_COLORS = [
+    ["#d0353a", "#a82329"],
+    ["#2e7ea8", "#1f5f82"],
+    ["#10525c", "#0b3a42"],
+    ["#e4b23f", "#c0902a"],
+    ["#3e8f5b", "#2d6c44"],
+    ["#6b4bb8", "#503693"],
+    ["#22242c", "#3a3d48"],
+];
+export const EARRINGS = ["#ffd84a", "#e23a78", "#35c4cf"];
+const INK = "#1b171b";
+const RED = "#c2353f";
+const FRAMES = "#1c1a22";
+const TINT = "#2f3140";
+export const COLOR_TILE = "#f6f4ee";
+export const SANTA_RED = HAT_COLORS[0];
+export const RETRO = {
+    tile: "#86bd72",
+    pale: "#def3c6",
+    dark: "#0f3a30",
+};
+/** The screen colours Retro offers. The first is the Game Boy green it starts on. */
+export const SCREENS = [RETRO.tile, "#e0a458", "#7fa8d9", "#e39ab5", "#b4b0a4"];
+/** A paint from the list, or one picked by hand with its second tone worked out. */
+function paintOf(t, key, colors, towards, amount) {
+    const picked = t.color(key);
+    return picked ? [picked, mix(picked, towards, amount)] : t.pick(key, colors);
+}
+/** Retro's two inks are shades of its screen, so any screen stays a two-tone handheld. */
+function inksOn(tile = RETRO.tile) {
+    return tile === RETRO.tile ? RETRO : { tile, pale: mix(tile, WHITE, 0.72), dark: mix(tile, BLACK, 0.74) };
+}
+export const pickLook = (t) => ({
+    skin: paintOf(t, "skin", SKINS, BLACK, 0.18),
+    hair: paintOf(t, "hair.color", HAIR_COLORS, WHITE, 0.2),
+    hat: paintOf(t, "hat.color", HAT_COLORS, BLACK, 0.2),
+    earring: t.pick("earring.color", EARRINGS),
+    inks: inksOn(t.color("screen")),
+});
+/** Whether Retro draws this hair light with an outline, rather than solid dark. */
+export const isPaleHair = ([color]) => parseInt(color.slice(1, 3), 16) > 0xb0;
+export function paints(theme, { skin, hair, hat, earring, inks }) {
+    if (theme === "color") {
+        return {
+            s: skin[0],
+            d: skin[1],
+            h: hair[0],
+            H: hair[1],
+            f: hair[0],
+            c: hat[0],
+            C: hat[1],
+            b: hat[1],
+            w: "#dcd9d1",
+            g: FRAMES,
+            L: TINT,
+            x: INK,
+            r: RED,
+            e: earring,
+            m: skin[1],
+        };
+    }
+    const { pale, dark } = inks;
+    const paleHair = isPaleHair(hair);
+    return {
+        s: pale,
+        d: pale,
+        h: paleHair ? pale : dark,
+        H: pale,
+        f: dark,
+        c: dark,
+        C: pale,
+        b: dark,
+        w: pale,
+        g: dark,
+        L: dark,
+        x: dark,
+        r: pale,
+        e: dark,
+        m: dark,
+    };
+}

package/dist/pixels/sprites.d.ts

@@ -0,0 +1,42 @@
+/**
+ * The hand-drawn parts, on a 20×20 grid. Each sprite is drawn as text so it can be
+ * edited by eye. `.` is empty, and the other letters are paints:
+ *
+ *   s skin, d skin shadow, h hair, H hair highlight, f facial hair
+ *   c hat, C hat shade, b hat brim, w hat trim, g glasses, L tinted lens
+ *   x ink, r mouth red, e earring, m skin mark
+ */
+export interface Sprite {
+    /** The grid row of the first line. */
+    top: number;
+    rows: string[];
+}
+export declare const HEAD: Sprite;
+export declare const NOSE: Sprite;
+export interface Hair {
+    name: string;
+    front: Sprite;
+    /** Drawn behind the head, for hair that falls past it. */
+    back?: Sprite;
+    /** Covers the ears, so no earring shows. */
+    wraps?: boolean;
+    /** Has the room up top for a hat. */
+    takesHat: boolean;
+}
+export declare const HAIRS: Hair[];
+export interface Hat {
+    name: string;
+    sprite: Sprite;
+    /** Hair above this row is under the hat, so it is not drawn. */
+    bottom: number;
+}
+export declare const HATS: Hat[];
+export declare const BEARDS: Record<string, Sprite>;
+export declare const GLASSES: Record<string, Sprite>;
+export declare const EARRING: Sprite;
+export declare const EYEBROWS: Record<string, Sprite>;
+export declare const MARKS: Record<string, Sprite>;
+/** Where the eyes can sit: the columns of the left and right eye. */
+export declare const EYE_SPACINGS: [number, number][];
+export declare const EYE_SPACING_NAMES: string[];
+export declare const MOUTHS: Record<string, Sprite>;

package/dist/pixels/sprites.js

@@ -0,0 +1,154 @@
+/**
+ * The hand-drawn parts, on a 20×20 grid. Each sprite is drawn as text so it can be
+ * edited by eye. `.` is empty, and the other letters are paints:
+ *
+ *   s skin, d skin shadow, h hair, H hair highlight, f facial hair
+ *   c hat, C hat shade, b hat brim, w hat trim, g glasses, L tinted lens
+ *   x ink, r mouth red, e earring, m skin mark
+ */
+const sprite = (top, ...rows) => ({ top, rows });
+export const HEAD = sprite(5, "......ssssssss......", ".....ssssssssss.....", ".....ssssssssss.....", ".....ssssssssss.....", ".....ssssssssssdd...", ".....ssssssssssdd...", ".....ssssssssssd....", ".....ssssssssss.....", ".....ssssssssss.....", "......sssssssdd.....", ".......sssssddd.....", ".........ddddd......", ".........ddddd......");
+export const NOSE = sprite(11, ".........d..........", ".........dd.........");
+export const HAIRS = [
+    {
+        name: "crop",
+        takesHat: true,
+        front: sprite(3, ".......hhhhhhh......", ".....hhhhhhhhhh.....", "....hhhhhhhhhhhh....", "....hhHhhhhhhhhh....", "....hh.....hhhhh....", "....h........hhh....", ".............hh.....", ".............h......"),
+    },
+    {
+        name: "sidePart",
+        takesHat: true,
+        front: sprite(2, "......hhhhhhhh......", "....hhhhhhhhhhhh....", "...hhhhhhhhhhhhhh...", "...hhhhhhhhHhhhhh...", "...hhhhhhh...hhhh...", "...hhh........hhh...", "....h.........hh....", "..............h....."),
+    },
+    {
+        name: "spiky",
+        takesHat: false,
+        front: sprite(1, "........h..h........", ".....h.hh.hh.h......", ".....hhhhhhhhhh.h...", "....hhhhhhHhhhhhh...", "....hhhhhhhhhhhh....", "....hh.h..h.hhhh....", "....h........hhh....", ".............hh....."),
+    },
+    {
+        name: "curly",
+        takesHat: false,
+        front: sprite(2, ".......hh..hh.......", ".....hhhhhhhhhh.....", "....hhhhhHhhHhhh....", "...hhHhhhhhhhhhhh...", "...hhhhhHhhHhhhhh...", "...hhh..h..h..hhh...", "....h.........hhh...", "...............hh..."),
+    },
+    {
+        name: "afro",
+        takesHat: false,
+        front: sprite(0, "......hhhhhhhh......", "....hhhhhhhhhhhh....", "...hhhhhhhhhhhhhh...", "..hhhhhHhhhhHhhhhh..", "..hhhhhhhhhhhhhhhh..", "..hhhHhhhhhhhhHhhh..", "..hhhhhhhhhhhhhhhh..", "..hhhh........hhhh..", "..hhh..........hhh..", "..hhh...........hh..", "...hh...........hh..", "...h............h..."),
+        wraps: true,
+    },
+    {
+        name: "long",
+        takesHat: true,
+        wraps: true,
+        front: sprite(3, "......hhhhhhhh......", "....hhhhhhhhhhh.....", "....hhhhhHhhhhhh....", "....hhhh....hhhh....", "....hh.......hhh....", "....h.........hh...."),
+        back: sprite(4, "....hhhhhhhhhhhh....", "...hhhhhhhhhhhhhh...", "...hhhhhhhhhhhhhh...", "...hhhhhhhhhhhhhh...", "...hhhhhhhhhhhhhhh..", "...hhhhhhhhhhhhhhh..", "...hhhhhhhhhhhhhhh..", "...hhhhhhhhhhhhhhh..", "...hhhhhhhhhhhhhhh..", "...hhhhhhhhhhhhhhh..", "...hhhhhhhhhhhhhhh..", "...hhhhh.....hhhhh..", "...hhhh......hhhhh..", "...hh.........hhh..."),
+    },
+    {
+        name: "bob",
+        takesHat: true,
+        wraps: true,
+        front: sprite(3, "......hhhhhhhh......", "....hhhhhhhhhhh.....", "....hhhhhhHhhhhh....", "....hhhhhh..hhhh....", "....hhh......hhh....", "....hh........hh...."),
+        back: sprite(4, "....hhhhhhhhhhhh....", "...hhhhhhhhhhhhhh...", "...hhhhhhhhhhhhhh...", "...hhhhhhhhhhhhhh...", "...hhhhhhhhhhhhhhh..", "...hhhhhhhhhhhhhhh..", "...hhhhhhhhhhhhhhh..", "...hhhhhhhhhhhhhhh..", "...hhhhhhhhhhhhhhh..", "...hhh.........hhh.."),
+    },
+    {
+        name: "bun",
+        takesHat: false,
+        front: sprite(0, "........hhhh........", ".......hhHhhh.......", ".......hhhhhh.......", ".......hhhhhh.......", ".....hhhhhhhhhh.....", "....hhhhhhHhhhhh....", "....hhhhh...hhhh....", "....hh.......hhh....", "....h.........hh...."),
+    },
+    {
+        name: "ponytail",
+        takesHat: true,
+        front: sprite(3, "......hhhhhhhh......", "....hhhhhhhhhhh.....", "....hhhhhhHhhhhh....", "....hhh.....hhhh....", "....h........hhh....", ".............hh....."),
+        back: sprite(5, "...............hhh..", "..............hhhhh.", "..............hhhhh.", "...............hhhh.", "...............hhhh.", "................hhh.", "................hhh.", "................hh..", "................h..."),
+    },
+    {
+        name: "mohawk",
+        takesHat: false,
+        front: sprite(0, "........hhh.........", ".......hhhhh........", ".......hhHhh........", ".......hhhhh........", ".......hhHhh........", ".......hhhhh........"),
+    },
+    {
+        name: "dreads",
+        takesHat: false,
+        wraps: true,
+        front: sprite(0, "...........h..h.h...", ".........h.hh.h.h.h.", "......hh.hhhhhhhh...", "....hhhhhhhhhhhhhh..", "...hhhhhhhhhhhhhhhh.", "...hhhhhhHhhhhhhhhh.", "...hhh.hh....hhhhh..", "...hh.........hhhh..", "...hh.........hh.hh.", "...h..........hh.hh.", "...h..........h..hh.", "...h.............h.."),
+    },
+    {
+        name: "balding",
+        takesHat: true,
+        front: sprite(7, "....hh........hhh...", "...hhh........hhhh..", "...hh..........hhh..", "....h...........h..."),
+    },
+    {
+        name: "slick",
+        takesHat: true,
+        front: sprite(3, ".....hhhhhhhhhh.....", "....hhhhhHhhhhhh....", "....hhhhhhhhhhhh....", "....h.......hhhh....", "....h.........hh....", "..............h....."),
+    },
+    {
+        name: "hijab",
+        takesHat: false,
+        wraps: true,
+        front: sprite(2, "......hhhhhhhh......", "....hhhhhhhhhhhh....", "...hhhhhhhhhhhhhh...", "...hhhhhHhhhhhhhhh..", "...hhhhhhhhhhhhhhh..", "...hhhh.....hhhhhh..", "...hhh.......hhhhh..", "...hh.........hhhh..", "...hh.........hhhh..", "...hh.........hhhh..", "...hh.........hhhh..", "...hh.........hhhh..", "...hhh.......hhhhh..", "...hhhh.....hhhhhh..", "....hhhhhhhhhhhhh...", "....hhhhhhhhhhhhh...", ".....hhhhhhhhhhh...."),
+    },
+];
+export const HATS = [
+    {
+        name: "cap",
+        bottom: 6,
+        sprite: sprite(2, "......cccccccc......", "....cccccccccccc....", "....ccccCCcccccc....", "....cccccccccccc....", ".bbbbbbbbbbbcccc...."),
+    },
+    {
+        name: "backwardsCap",
+        bottom: 6,
+        sprite: sprite(2, "......cccccccc......", "....cccccccccccc....", "....ccccccCCcccc....", "....cccccccccccc....", "....ccccbbbbbbbbbbb."),
+    },
+    {
+        name: "beanie",
+        bottom: 6,
+        sprite: sprite(2, ".......cccccc.......", ".....cccccccccc.....", "....cccccccccccc....", "....cCcCcCcCcCcc....", "....CCCCCCCCCCCC...."),
+    },
+    {
+        name: "bucket",
+        bottom: 6,
+        sprite: sprite(2, ".......cccccc.......", ".....cccccccccc.....", ".....cccccccccc.....", ".....CCCCCCCCCC.....", "...bbbbbbbbbbbbbb..."),
+    },
+    {
+        name: "santa",
+        bottom: 6,
+        sprite: sprite(0, ".......ccccccc......", ".....ccccccccccc....", "....cccccccccccccww.", "....cccccccccccc.www", "...ccccccccccccc.www", "...wwwwwwwwwwwwww...", "...wwwwwwwwwwwwww..."),
+    },
+];
+export const BEARDS = {
+    moustache: sprite(12, ".......fffff........"),
+    goatee: sprite(15, "........fff........."),
+    full: sprite(11, ".....f........f.....", ".....ff.fffff.f.....", ".....fff...ffff.....", "......ffffffff......", ".......fffff........"),
+};
+export const GLASSES = {
+    frames: sprite(8, ".....ggggggggggggg..", ".....g...g...g......", ".....g...g...g......", ".....ggggggggg......"),
+    shades: sprite(8, ".....ggggggggggggg..", ".....gLLLgLLLg......", ".....gLLLgLLLg......", ".....ggggggggg......"),
+};
+export const EARRING = sprite(12, "................e...");
+export const EYEBROWS = {
+    flat: sprite(7, "......fff.fff......."),
+    arched: sprite(7, ".......f...f........", "......f.f.f.f......."),
+    worried: sprite(7, "........f.f.........", "......ff...ff......."),
+    stern: sprite(7, "......f.....f.......", ".......ff.ff........"),
+};
+export const MARKS = {
+    freckles: sprite(11, "......m.....m......."),
+    mole: sprite(12, "............m......."),
+    cheek: sprite(11, ".............m......"),
+};
+/** Where the eyes can sit: the columns of the left and right eye. */
+export const EYE_SPACINGS = [
+    [7, 11],
+    [6, 12],
+    [7, 12],
+];
+export const EYE_SPACING_NAMES = ["Close", "Wide", "Uneven"];
+export const MOUTHS = {
+    line: sprite(13, "........xxx........."),
+    small: sprite(13, ".........xx........."),
+    smirk: sprite(13, "...........x........", "........xxx........."),
+    smile: sprite(13, ".......x...x........", "........xxx........."),
+    frown: sprite(13, "........xxx.........", ".......x...x........"),
+    tiny: sprite(13, ".........x.........."),
+};

package/dist/possibilities.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Possibilities: how far an avatar may stray from the plainest ones. Low narrows each
+ * list of parts to its first few, makes extras rare, and draws proportions towards their
+ * middle. High, or a slider left alone, is the full range, exactly as it always was.
+ *
+ * It works on the traits rather than in each generator, so a section only says which of
+ * its keys are which, and its controls read the same calmed traits to stay in step.
+ */
+import type { ChoiceControl, SliderControl } from "./controls.ts";
+import type { Traits } from "./traits.ts";
+export declare const VARIANCE = "variance";
+export interface Calming {
+    /** Proportions and placements, whose spread shrinks as the level falls. */
+    features?: RegExp;
+    /**
+     * Lists picked by position, as `[how many, how few at the lowest]`. Low offers the first
+     * few, or the last few with `"end"` for lists where the plainest choice comes last. For
+     * lists in no useful order, a third entry gives the plainest first, by index.
+     */
+    lists?: Record<string, List>;
+    /** Extras that appear when their trait falls under the odds, and do so less as it falls. */
+    rarer?: string[];
+}
+type List = [number, number] | [number, number, "end" | number[]];
+/** The level, or none while the slider hasn't been touched. */
+export declare const varianceSet: (t: Traits) => number | undefined;
+export declare const varianceOf: (t: Traits) => number;
+/** How many of a list's `count` entries are on offer at `variance`. */
+export declare const keptOf: (count: number, fewest: number, variance: number) => number;
+/** The same traits, calmed to the level set. Anything set by hand is left exactly as set. */
+export declare function calmed(t: Traits, { features, lists, rarer }: Calming): Traits;
+/**
+ * A list control with only the options the level offers, plus whichever is selected. Built
+ * from calmed traits, so what it shows selected is what gets drawn.
+ */
+export declare function narrowed(control: ChoiceControl, t: Traits, { lists }: Calming): ChoiceControl;
+/** The slider itself, with what its ends mean and what the current level gives. */
+export declare function possibilitiesSlider(t: Traits, [low, medium, high]: [string, string, string]): SliderControl;
+export {};

package/dist/possibilities.js

@@ -0,0 +1,88 @@
+/**
+ * Possibilities: how far an avatar may stray from the plainest ones. Low narrows each
+ * list of parts to its first few, makes extras rare, and draws proportions towards their
+ * middle. High, or a slider left alone, is the full range, exactly as it always was.
+ *
+ * It works on the traits rather than in each generator, so a section only says which of
+ * its keys are which, and its controls read the same calmed traits to stay in step.
+ */
+export const VARIANCE = "variance";
+/** How much of their usual spread proportions keep, at the very lowest. */
+const CALMEST = 0.2;
+/** Every index of a list from plainest to wildest: those named first, then the rest. */
+function plainFirst([count, , from]) {
+    const named = Array.isArray(from) ? from : [];
+    return [...named, ...Array.from({ length: count }, (_, i) => i).filter((i) => !named.includes(i))];
+}
+/** The level, or none while the slider hasn't been touched. */
+export const varianceSet = (t) => t.forced(VARIANCE);
+export const varianceOf = (t) => varianceSet(t) ?? 1;
+/** How many of a list's `count` entries are on offer at `variance`. */
+export const keptOf = (count, fewest, variance) => Math.min(count, fewest + Math.floor(variance * (count - fewest + 1)));
+/** The same traits, calmed to the level set. Anything set by hand is left exactly as set. */
+export function calmed(t, { features, lists = {}, rarer = [] }) {
+    const variance = varianceSet(t);
+    if (variance === undefined)
+        return t;
+    const keep = CALMEST + (1 - CALMEST) * variance;
+    const calm = ((key) => {
+        const value = t(key);
+        if (t.forced(key) !== undefined)
+            return value;
+        const list = lists[key];
+        if (list) {
+            const [count, fewest, from] = list;
+            const kept = keptOf(count, fewest, variance);
+            if (from === "end")
+                return 1 - (1 - value) * (kept / count);
+            // The middle of the kept entry's band, so an equal-odds pick lands on exactly it.
+            return (plainFirst(list)[Math.floor(value * kept)] + 0.5) / count;
+        }
+        // Spread over a wider range, so an extra shows up that much less often: never at 0.
+        if (rarer.includes(key))
+            return variance === 0 ? 0.999 : Math.min(0.999, value / variance);
+        if (features?.test(key))
+            return 0.5 + (value - 0.5) * keep;
+        return value;
+    });
+    calm.num = (key, min, max) => min + calm(key) * (max - min);
+    calm.int = (key, min, max) => min + Math.floor(calm(key) * (max - min + 1));
+    calm.jitter = (key, amount) => (calm(key) * 2 - 1) * amount;
+    calm.pick = (key, options) => options[Math.floor(calm(key) * options.length)];
+    calm.forced = t.forced;
+    calm.color = t.color;
+    calm.text = t.text;
+    return calm;
+}
+/**
+ * A list control with only the options the level offers, plus whichever is selected. Built
+ * from calmed traits, so what it shows selected is what gets drawn.
+ */
+export function narrowed(control, t, { lists = {} }) {
+    const variance = varianceSet(t);
+    const list = lists[control.id];
+    if (variance === undefined || !list || t.forced(control.id) !== undefined)
+        return control;
+    const [count, fewest, from] = list;
+    const kept = keptOf(count, fewest, variance);
+    const plain = plainFirst(list).slice(0, kept);
+    const offered = (position) => from === "end" ? position >= 1 - kept / count : plain.includes(Math.floor(position * count));
+    return {
+        ...control,
+        options: control.options.filter((option) => option.id === control.selected || offered(Number(option.set[control.id]))),
+    };
+}
+/** The slider itself, with what its ends mean and what the current level gives. */
+export function possibilitiesSlider(t, [low, medium, high]) {
+    const variance = Math.min(varianceOf(t), 0.999);
+    return {
+        type: "slider",
+        id: VARIANCE,
+        label: "Possibilities",
+        value: variance,
+        display: `${Math.round(variance * 100)}%`,
+        range: [0, 100],
+        ends: ["Low", "High"],
+        note: variance < 1 / 3 ? `Low: ${low}` : variance < 2 / 3 ? `Medium: ${medium}` : `High: ${high}`,
+    };
+}

package/dist/shapes/calming.d.ts

@@ -0,0 +1,7 @@
+/**
+ * What Possibilities calms on a shape face. Low keeps to the eight plainest eyes and
+ * mouths, one for each variant, set evenly. Indices are into `EYES` and `MOUTHS`.
+ */
+import type { Calming } from "../possibilities.ts";
+export declare const CALMING: Calming;
+export declare const NOTES: [string, string, string];

package/dist/shapes/calming.js

@@ -0,0 +1,19 @@
+/**
+ * What Possibilities calms on a shape face. Low keeps to the eight plainest eyes and
+ * mouths, one for each variant, set evenly. Indices are into `EYES` and `MOUTHS`.
+ */
+export const CALMING = {
+    features: /^(eye|mouth)\.(size|gap|y)$|^eye[01]\.(size|y|turn)$|^(weight|tilt)$/,
+    lists: {
+        // Disc, Donut, Pill, Dash, Arch, Cloud, Square, Dome, then Triangle, Chevron, Heart, Leaf, Plus.
+        "eye.left": [13, 8, [2, 0, 7, 9, 5, 3, 6, 12, 10, 1, 8, 11, 4]],
+        "eye.right": [13, 8, [2, 0, 7, 9, 5, 3, 6, 12, 10, 1, 8, 11, 4]],
+        // Smile, Flat, Oh, Grin, Peep, Frown, Smirk, Wave, then Cat and Shout.
+        mouth: [10, 8, [0, 2, 1, 3, 5, 6, 8, 4, 9, 7]],
+    },
+};
+export const NOTES = [
+    "the plainest eyes and mouths, like discs, donuts, pills and smiles, set evenly.",
+    "adds triangles, chevrons, hearts and a cat mouth, sized and placed more freely.",
+    "every shape, up to leaves, pluses and a shout, at the widest spread of sizes and tilts.",
+];