@originkit/avatars 0.0.0-stage → 0.2.0

package/dist/doodles/index.js

@@ -0,0 +1,236 @@
+/**
+ * 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 { contrast } from "../colors.js";
+import { calmed } from "../possibilities.js";
+import { createTraits } from "../traits.js";
+import { CALMING } from "./calming.js";
+/** Paper. White is the reference, and the rest are only just tinted, to stay minimal. */
+export const TILES = ["#ffffff", "#fbf6ec", "#f2f2ef", "#fdeef0", "#eaf6ee", "#eaf2fb", "#f1ecfa", "#f7efe2", "#fff7d6"];
+export const INKS = ["#111111", "#2b2d42", "#4a2c1d", "#1f3a5f", "#ffffff"];
+const round2 = (value) => Math.round(value * 100) / 100;
+const point = (x, y) => `${round2(x)} ${round2(y)}`;
+/** A filled blob, its edge wobbling gently. Points above `cut` are flattened onto it. */
+function blob(pen, key, cx, cy, rx, ry, cut) {
+    const { t, wobble } = pen;
+    const waves = [2, 3, 5].map((count) => [count, t.jitter(`${key}.a${count}`, wobble), t.num(`${key}.p${count}`, 0, 2 * Math.PI)]);
+    const points = Array.from({ length: 32 }, (_, i) => {
+        const angle = (i / 32) * 2 * Math.PI;
+        const r = 1 + waves.reduce((sum, [count, amount, start]) => sum + amount * Math.cos(count * angle + start), 0);
+        const x = cx + rx * r * Math.cos(angle);
+        let y = cy + ry * r * Math.sin(angle);
+        if (cut)
+            y = Math.max(y, cy + cut.at * ry + cut.slope * (x - cx));
+        return [x, y];
+    });
+    // Through the midpoints, so even the flattened edge has softly rounded ends.
+    const mid = (i) => {
+        const [ax, ay] = points[i % points.length];
+        const [bx, by] = points[(i + 1) % points.length];
+        return point((ax + bx) / 2, (ay + by) / 2);
+    };
+    return `<path d="M${mid(0)}${points.map((_, i) => `Q${point(...points[(i + 1) % points.length])} ${mid(i + 1)}`).join("")}Z"/>`;
+}
+/** A stroke, with its middle nudged off true by the pen. */
+function stroke(pen, key, d) {
+    const nudge = (index) => round2(pen.t.jitter(`${key}.n${index}`, pen.wobble * 10));
+    let index = 0;
+    // Only the curve's control points move, so ends stay where the face needs them.
+    const drawn = d.replace(/Q(-?[\d.]+) (-?[\d.]+)/g, (_, x, y) => `Q${round2(Number(x) + nudge(index++))} ${round2(Number(y) + nudge(index++))}`);
+    return `<path d="${drawn}" fill="none"/>`;
+}
+const EYES = {
+    dot: (pen, { x, y, r }, key) => blob(pen, key, x, y, r * 0.82, r * 0.92),
+    big: (pen, { x, y, r }, key) => blob(pen, key, x, y, r * 1.08, r * 1.14),
+    // A blob with its top cut away on a slant, falling towards the nose.
+    angry: (pen, { x, y, r, side }, key) => blob(pen, key, x, y, r * 1.02, r * 0.95, { at: -0.18, slope: -side * 0.5 }),
+    flat: (pen, { x, y, r }, key) => blob(pen, key, x, y, r * 1.08, r * 0.92, { at: -0.05, slope: 0 }) +
+        stroke(pen, `${key}.lid`, `M${point(x - r * 1.25, y - r * 0.05)}Q${point(x, y - r * 0.12)} ${point(x + r * 1.25, y - r * 0.05)}`),
+    ring: (pen, { x, y, r }, key) => `<circle cx="${round2(x)}" cy="${round2(y)}" r="${round2(r * 0.95)}" fill="none"/>` + blob(pen, key, x, y - r * 0.12, r * 0.44, r * 0.48),
+    arc: (pen, { x, y, r }, key) => stroke(pen, key, `M${point(x - r, y + r * 0.35)}Q${point(x, y - r * 1.1)} ${point(x + r, y + r * 0.35)}`),
+    closed: (pen, { x, y, r }, key) => stroke(pen, key, `M${point(x - r, y - r * 0.15)}Q${point(x, y + r * 0.85)} ${point(x + r, y - r * 0.15)}`),
+    heart: (_pen, { x, y, r }) => {
+        const s = r * 0.11;
+        return `<path d="M${point(x, y + 8 * s)}C${point(x - 11 * s, y)} ${point(x - 8 * s, y - 9 * s)} ${point(x, y - 4 * s)}C${point(x + 8 * s, y - 9 * s)} ${point(x + 11 * s, y)} ${point(x, y + 8 * s)}Z"/>`;
+    },
+    cross: (pen, { x, y, r }, key) => stroke(pen, key, `M${point(x - r * 0.75, y - r * 0.75)}Q${point(x, y)} ${point(x + r * 0.75, y + r * 0.75)}`) +
+        stroke(pen, `${key}.b`, `M${point(x + r * 0.75, y - r * 0.75)}Q${point(x, y)} ${point(x - r * 0.75, y + r * 0.75)}`),
+    teary: (pen, eye, key) => EYES.dot(pen, eye, key) +
+        `<path d="M${point(eye.x + eye.side * eye.r * 0.2, eye.y + eye.r * 1.2)}q-1.6 2.6 0 4q1.6 -1.4 0 -4Z" fill="none"/>`,
+    // Each tip reaches a little further or shorter, by hand.
+    star: (pen, { x, y, r }, key) => {
+        const tips = Array.from({ length: 10 }, (_, i) => {
+            const angle = -Math.PI / 2 + (i * Math.PI) / 5;
+            const reach = r * (i % 2 ? 0.45 : 1.05) * (1 + pen.t.jitter(`${key}.t${i}`, pen.wobble * 1.5));
+            return point(x + reach * Math.cos(angle), y + reach * Math.sin(angle));
+        });
+        return `<path d="M${tips.join("L")}Z"/>`;
+    },
+    // Under two turns in from the edge, in a finer line, so the gaps stay open at any weight.
+    spiral: (pen, { x, y, r, side }, key) => {
+        const turns = 1.75 * 2 * Math.PI;
+        const waver = pen.t.jitter(`${key}.w`, pen.wobble * 2);
+        const points = Array.from({ length: 33 }, (_, i) => {
+            const angle = (i / 32) * turns;
+            const reach = (r * 1.05 * (1 - i / 32) + r * 0.1) * (1 + waver * Math.sin(angle * 1.5));
+            return point(x + side * reach * Math.cos(angle), y + reach * Math.sin(angle));
+        });
+        return `<path d="M${points.join("L")}" fill="none" stroke-width="2.2"/>`;
+    },
+};
+const brow = (pen, { x, y, r, side }, key, lift) => stroke(pen, key, `M${point(x - r * 1.1, y - r * (1.75 + lift * side))}Q${point(x, y - r * 2.15)} ${point(x + r * 1.1, y - r * (1.75 - lift * side))}`);
+/** A mouth around the origin, as path data, whether it is filled rather than drawn, and any finer line. */
+const MOUTHS = {
+    fangs: ["M-5 0Q0 0.6 5 0M-3.3 0.2l1.3 2.8l1.3 -2.8M0.7 0.2l1.3 2.8l1.3 -2.8"],
+    cat: ["M-5 -1Q-2.5 3.8 0 0Q2.5 3.8 5 -1"],
+    frown: ["M-3.8 2.2Q0 -2.2 3.8 2.2"],
+    wavy: ["M-4.5 1Q-2.2 -2 0 0.6Q2.2 3 4.5 -0.6"],
+    smile: ["M-4.5 -1Q0 4.6 4.5 -1"],
+    oh: ["M-3 1.4a3 3.6 0 1 0 6 0a3 3.6 0 1 0 -6 0Z"],
+    line: ["M-3 0.5Q0 0.2 3 0.5"],
+    smirk: ["M-4.5 1Q1 2.6 4.5 -2"],
+    grin: ["M-5.5 -0.5Q0 0 5.5 -0.5Q5 6 0 6.2Q-5 6 -5.5 -0.5Z", true],
+    tongue: ["M-4.5 -1Q0 4 4.5 -1M0.5 2.2Q1 6 3.4 5.4Q5 4.4 3.6 1.4"],
+    kiss: ["M-1.2 -3Q3 -2.2 0 0Q3 2.2 -1.2 3"],
+    shout: ["M-4.2 3.2Q-4 -2.8 0 -3Q4 -2.8 4.2 3.2Q0 2 -4.2 3.2Z", true],
+    // In a finer line, so the gaps between teeth stay open.
+    teeth: ["M-5.5 -2.4Q0 -2.7 5.5 -2.4Q5.8 0 5.5 2.4Q0 2.7 -5.5 2.4Q-5.8 0 -5.5 -2.4ZM-1.8 -2.4Q-1.7 0 -1.8 2.4M1.8 -2.4Q1.9 0 1.8 2.4", false, 1.3],
+};
+/** Every emotion. The first five are the ones in the reference. */
+export const MOODS = [
+    { name: "Grumpy", eyes: ["angry", "angry"], mouth: "fangs" },
+    { name: "Cute", eyes: ["dot", "dot"], mouth: "cat" },
+    { name: "Skeptical", eyes: ["ring", "dot"], mouth: "wavy", brows: [-0.15, 0.45] },
+    { name: "Unimpressed", eyes: ["flat", "flat"], mouth: "frown" },
+    { name: "Mischief", eyes: ["flat", "angry"], mouth: "fangs" },
+    { name: "Happy", eyes: ["arc", "arc"], mouth: "smile" },
+    { name: "Shocked", eyes: ["big", "big"], mouth: "oh" },
+    { name: "Sleepy", eyes: ["closed", "closed"], mouth: "line" },
+    { name: "Smug", eyes: ["flat", "flat"], mouth: "smirk", brows: [null, -0.35] },
+    { name: "Teary", eyes: ["teary", "teary"], mouth: "wavy", brows: [0.3, -0.3] },
+    { name: "In love", eyes: ["heart", "heart"], mouth: "tongue" },
+    { name: "Dizzy", eyes: ["cross", "cross"], mouth: "grin" },
+    { name: "Wink", eyes: ["dot", "closed"], mouth: "smile" },
+    { name: "Starstruck", eyes: ["star", "star"], mouth: "grin" },
+    { name: "Worried", eyes: ["dot", "dot"], mouth: "frown", brows: [0.35, -0.35] },
+    { name: "Laughing", eyes: ["arc", "arc"], mouth: "grin" },
+    { name: "Surprised", eyes: ["ring", "ring"], mouth: "oh" },
+    { name: "Furious", eyes: ["angry", "angry"], mouth: "shout" },
+    { name: "Kissy", eyes: ["closed", "closed"], mouth: "kiss" },
+    { name: "Neutral", eyes: ["dot", "dot"], mouth: "line" },
+    { name: "Hypnotised", eyes: ["spiral", "spiral"], mouth: "wavy" },
+    { name: "Nervous", eyes: ["big", "big"], mouth: "teeth" },
+    { name: "Sly", eyes: ["flat", "flat"], mouth: "cat" },
+    { name: "Silly", eyes: ["dot", "big"], mouth: "tongue" },
+];
+export const moodOf = (t) => t.pick("mood", MOODS);
+/** Extras on some faces, each drawn in the same few strokes. One face in this many hundred has them. */
+export const CHEEK_ODDS = 35;
+export const CHEEKS = ["Rosy", "Hatched", "Freckles"];
+export const NOSE_ODDS = 30;
+export const NOSES = ["Dot", "Hook", "Line"];
+const present = (t, key, odds, kinds) => (t(key) * 100 < odds ? t.pick(`${key}.kind`, kinds) : undefined);
+/** Under the outer side of each eye. */
+function drawCheeks(pen, eyes) {
+    const kind = present(pen.t, "cheeks", CHEEK_ODDS, CHEEKS);
+    if (!kind)
+        return "";
+    return eyes
+        .map(({ x, y, r, side }, i) => {
+        const cx = x + side * r * 0.35;
+        const cy = y + r * 1.75;
+        if (kind === "Rosy")
+            return `<ellipse cx="${round2(cx)}" cy="${round2(cy)}" rx="${round2(r * 0.62)}" ry="${round2(r * 0.36)}" fill="#ff8fa3" fill-opacity="0.55" stroke="none"/>`;
+        if (kind === "Freckles") {
+            return [-0.4, 0, 0.4]
+                .map((dx, j) => `<circle cx="${round2(cx + dx * r)}" cy="${round2(cy + (j === 1 ? -0.25 : 0.1) * r)}" r="0.7" stroke="none"/>`)
+                .join("");
+        }
+        return [-0.45, 0, 0.45]
+            .map((dx, j) => stroke(pen, `cheek${i}.${j}`, `M${point(cx + dx * r - 1.2, cy + 1.6)}Q${point(cx + dx * r, cy)} ${point(cx + dx * r + 1.2, cy - 1.6)}`))
+            .join("")
+            .replace(/<path /g, `<path stroke-width="1.6" `);
+    })
+        .join("");
+}
+/** Between the eyes and the mouth. */
+function drawNose(pen, y) {
+    const kind = present(pen.t, "nose", NOSE_ODDS, NOSES);
+    if (!kind)
+        return "";
+    if (kind === "Dot")
+        return blob(pen, "nose", 0, y, 1.5, 1.2);
+    if (kind === "Hook")
+        return stroke(pen, "nose", `M${point(0.6, y - 2.6)}Q${point(-2.4, y + 1.4)} ${point(1.2, y + 1.6)}`);
+    return stroke(pen, "nose", `M${point(0, y - 2.2)}Q${point(0.4, y)} ${point(0, y + 2)}`);
+}
+/**
+ * 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 const COLOURWAYS = [
+    { label: "Sorbet", colors: ["#fc8b8a", "#38aa85", "#fcc73a", "#263252"] },
+    { label: "Lagoon", colors: ["#1c7ed6", "#22b8cf", "#94d82d", "#0b4f6c"] },
+    { label: "Ember", colors: ["#e03131", "#f76707", "#fab005", "#5c3d2e"] },
+    { label: "Candy", colors: ["#ff5d8f", "#a06cd5", "#4cc9f0", "#ffbe0b"] },
+    { label: "Forest", colors: ["#2b9348", "#80b918", "#d4a373", "#354f52"] },
+    { label: "Berry", colors: ["#d63384", "#7048e8", "#ffa94d", "#4a1942"] },
+    { label: "Citrus", colors: ["#ff7b00", "#ffd60a", "#38b000", "#0077b6"] },
+    { label: "Dusk", colors: ["#3d5a80", "#ee6c4d", "#98c1d9", "#293241"] },
+    { label: "Rose", colors: ["#e56b6f", "#b56576", "#6d597a", "#eaac8b"] },
+    { label: "Mint", colors: ["#20c997", "#f783ac", "#4dabf7", "#495057"] },
+];
+/** Each with a colour of its own, which can be picked by hand. Cheeks and nose follow the mouth. */
+export const PARTS = ["left", "right", "mouth"];
+/** The colours in use, each of which can be changed by hand. `parts` only on a colourful face. */
+export function coloursOf(t) {
+    const tile = t.color("tile") ?? t.pick("tile", TILES);
+    const ink = t.color("ink") ?? INKS[0];
+    // Every face is in one ink until switched to colourful by hand.
+    if ((t.forced("colourful") ?? 1) >= 0.5)
+        return { tile, ink };
+    // The spare colour stands in for one that would fade into the tile, as yellow does on yellow.
+    const order = t.pick("colourway", COLOURWAYS).colors
+        .map((color, i) => [t(`colourway.${i}`) + (contrast(color, tile) < 1.5 ? 1 : 0), color])
+        .sort(([a], [b]) => a - b);
+    return { tile, ink, parts: Object.fromEntries(PARTS.map((part, i) => [part, t.color(part) ?? order[i][1]])) };
+}
+export function createDoodle(name, overrides) {
+    const t = calmed(createTraits(name, overrides), CALMING);
+    const mood = moodOf(t);
+    const { tile, ink, parts } = coloursOf(t);
+    const tint = (part) => (parts ? ` color="${parts[part]}"` : "");
+    const pen = { t, wobble: t.num("wobble", 0.02, 0.09) };
+    const r = t.num("eye.size", 8.4, 11);
+    const gap = t.num("eye.gap", 17.5, 23);
+    const eyeY = t.num("eye.y", -7, -3);
+    const eyes = [-1, 1].map((side) => ({ x: side * gap, y: eyeY + t.jitter(`eye.dy${side}`, 0.8), r: r * (1 + t.jitter(`eye.r${side}`, 0.06)), side }));
+    const drawEye = (eye, i) => `<g${tint(PARTS[i])}>${EYES[mood.eyes[i]](pen, eye, `eye${i}`)}${mood.brows?.[i] != null ? brow(pen, eye, `brow${i}`, mood.brows[i]) : ""}</g>`;
+    const [d, filled, fine] = MOUTHS[mood.mouth];
+    const size = t.num("mouth.size", 1.3, 1.7);
+    const mouthY = eyeY + t.num("mouth.y", 16, 21);
+    return {
+        tile,
+        ink,
+        face: `translate(${round2(50 + t.jitter("face.x", 4))} ${round2(52 + t.jitter("face.y", 4))}) rotate(${round2(t.jitter("tilt", 7))})`,
+        weight: round2(t.num("weight", 3.2, 4.2)),
+        eyes: eyes.map(drawEye).join(""),
+        mouth: `<g transform="translate(${round2(t.jitter("mouth.x", 2))} ${round2(mouthY)}) scale(${round2(size)})"${tint("mouth")}>` +
+            (filled ? `<path d="${d}" stroke="none"/>` : stroke(pen, "mouth", d).replace("<path ", fine ? `<path stroke-width="${fine}" ` : "<path ")) + `</g>`,
+        marks: `<g${tint("mouth")}>${drawCheeks(pen, eyes)}${drawNose(pen, round2(eyeY + (mouthY - eyeY) * 0.5))}</g>`,
+        mood: mood.name,
+        blinkDelay: t.num("blink", 0, 4),
+    };
+}
+/** How every line and blob of a face is painted. Colour comes through `currentColor`. */
+export const INK_STYLE = (weight) => `fill="currentColor" stroke="currentColor" stroke-width="${weight}" stroke-linecap="round" stroke-linejoin="round"`;
+/** The doodle at rest, for thumbnails. */
+export const doodleSvg = (name, overrides) => {
+    const doodle = createDoodle(name, overrides);
+    // Fills are ink too, so a line's "fill: none" is set on the line itself.
+    return (`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect width="100" height="100" rx="22.22" fill="${doodle.tile}"/>` +
+        `<g transform="${doodle.face}" color="${doodle.ink}" ${INK_STYLE(doodle.weight)}>${doodle.marks}${doodle.eyes}${doodle.mouth}</g></svg>`);
+};