@voqalize/avatar 0.2.2 → 0.4.0

package/src/face-peep-control-plane.js

@@ -0,0 +1,167 @@
+/**
+ * Peep control-plane study.
+ *
+ * This is intentionally not a character and is not registered in faces.js.
+ * It retains only SVG elements whose geometry is written from apply(params):
+ * brows, eyes, mouth interior/lips, teeth and tongue. The other pose-layer
+ * groups remain empty because poseTransforms writes their transforms; keeping
+ * the groups lets this file exercise the exact same animation contract without
+ * silently changing the engine.
+ */
+
+import { clamp, lerp } from './params.js';
+import { f, createFaceShell, faceApi, poseTransforms, pairedTeeth } from './face-core.js';
+import { taper, taperRing, region } from './line-art.js';
+
+export const THEME = {
+  ink: '#1b1b1b', paper: '#ffffff', accent: '#f97415',
+  mouthIn: '#1b1b1b', teeth: '#ffffff', tongue: '#8d7f79',
+};
+
+const VB = { x: 92, y: 76, w: 576, h: 800 };
+export const META = {
+  viewBox: { ...VB },
+  mouthCrop: { x: 296, y: 434, w: 168, h: 98 },
+};
+
+// These are geometry anchors for paths regenerated by apply(), not drawn art.
+const CX = 380;
+const BROW_L = [[CX - 20, 347], [CX - 40, 340], [CX - 60, 336], [CX - 76, 337],
+  [CX - 86, 339], [CX - 94, 343], [CX - 99, 348]];
+const BROW_R = [[CX + 22, 344], [CX + 40, 337], [CX + 58, 333], [CX + 73, 335],
+  [CX + 83, 337], [CX + 90, 341], [CX + 95, 346]];
+const EYE = { y: 386, dx: 55, rx: 14, ry: 16.5 };
+const MOUTH = { cx: CX, cy: 488 };
+const MOUTH_APERTURE = 38;
+
+// The original pose specification is retained verbatim: this study is for
+// observing control planes, not for creating a second motion model.
+const PIVOT = { x: CX, y: 700 };
+const POSE = {
+  leanTravel: 23, leanPivot: { x: PIVOT.x, y: 560 },
+  shrugLift: 30, shrugTiltDeg: 1.6, shrugPivot: { x: PIVOT.x, y: 800 },
+  yawPx: 28, pitchPx: 17, pivot: PIVOT,
+  pitch: {
+    headLayers: ['skull', 'features', 'hair'], neckLayer: 'neck',
+    hinge: { x: CX, y: 620 }, neckBase: { x: CX, y: 720 },
+    headTravel: 1.0, neckTravel: 0.22, foreshorten: 0.040, neckCompress: 0.034,
+  },
+  breathSwell: 0.008, swellPivot: { x: CX, y: 950 }, turnPx: 16,
+  layers: ['neck', 'skull', 'body', 'features', 'hair'],
+  parallax: { neck: 1.0, skull: 1.0, body: 0.1, features: 1.22, hair: 1.12 },
+  torsoLayers: ['body'], units: 1,
+};
+
+function mouthGeometry(p) {
+  const cx = MOUTH.cx, cy = MOUTH.cy;
+  const open = clamp(p.mouthOpen), round = clamp(p.mouthRound), tuck = clamp(p.mouthTuck);
+  const w = (26 + clamp(p.mouthWidth) * 32) * (1 - 0.36 * round);
+  const t = 1 - 0.4 * clamp(p.mouthPress);
+  const profile = [2.5 * t, 10.5 * t, 3 * t, 11.5 * t * (1 + 0.35 * tuck), 2.5 * t];
+  const halfUp = profile[1] / 2, halfLo = profile[3] / 2;
+  const h = open * MOUTH_APERTURE, k = clamp(open / 0.18);
+  const yL = cy - 1.5 - p.mouthCornerL * 24;
+  const yR = cy - 1.5 - p.mouthCornerR * 24;
+  const apTop = cy - h * 0.25;
+  let apBot = cy + h * 0.75;
+  if (tuck > 0) apBot = Math.max(apTop + 6, apBot - tuck * (h * 0.6 + 4));
+  const cornerMid = (yL + yR) / 8;
+  const topY = (apTop - k * halfUp - cornerMid) / 0.75;
+  const botY = (apBot + k * halfLo - cornerMid) / 0.75;
+  const contour = [
+    [cx - w, yL], [cx - w * 0.55, topY], [cx + w * 0.55, topY], [cx + w, yR],
+    [cx + w * 0.55, botY], [cx - w * 0.55, botY], [cx - w, yL],
+  ];
+  return {
+    contour, profile, cx, w, open, tuck,
+    innerTop: cornerMid + 0.75 * topY + halfUp,
+    innerBot: cornerMid + 0.75 * botY - halfLo,
+  };
+}
+
+function teethPath(m, amt, lower) {
+  if (amt < 0.01) return '';
+  const gap = m.innerBot - m.innerTop;
+  if (gap < 2) return '';
+  const tw = m.w * (lower ? 0.6 : 0.76);
+  const cap = lower ? 0.5 : 0.5 + 0.35 * m.tuck;
+  const th = Math.min(amt * (lower ? 13 : 20), gap * cap);
+  if (lower) {
+    const base = m.innerBot + 8, edge = m.innerBot - th, end = m.innerBot - th * 0.35;
+    return `M${f(m.cx - tw)} ${f(base)}L${f(m.cx + tw)} ${f(base)}`
+      + `L${f(m.cx + tw * 0.92)} ${f(end)}Q${f(m.cx)} ${f(2 * edge - end)} ${f(m.cx - tw * 0.92)} ${f(end)}Z`;
+  }
+  const top = m.innerTop - 8, edge = m.innerTop + th, end = m.innerTop + th * 0.35;
+  return `M${f(m.cx - tw)} ${f(top)}L${f(m.cx + tw)} ${f(top)}`
+    + `L${f(m.cx + tw * 0.92)} ${f(end)}Q${f(m.cx)} ${f(2 * edge - end)} ${f(m.cx - tw * 0.92)} ${f(end)}Z`;
+}
+
+function eyePath(cx, cy, lid, squint, tiltDeg) {
+  const L = clamp(lid);
+  const topY = lerp(cy - EYE.ry * 1.05, cy - EYE.ry * 0.42, L);
+  const botY = lerp(cy + EYE.ry * 1.05, cy - EYE.ry * 0.05, L) - clamp(squint) * EYE.ry * 0.7;
+  const a = (tiltDeg * Math.PI) / 180, ca = Math.cos(a), sa = Math.sin(a);
+  const R = (x, y) => {
+    const dx = x - cx, dy = y - cy;
+    return `${f(cx + dx * ca - dy * sa)} ${f(cy + dx * sa + dy * ca)}`;
+  };
+  return `M${R(cx - EYE.rx, cy)}C${R(cx - EYE.rx * 0.5, topY)} ${R(cx + EYE.rx * 0.5, topY)} ${R(cx + EYE.rx, cy)}`
+    + `C${R(cx + EYE.rx * 0.5, botY)} ${R(cx - EYE.rx * 0.5, botY)} ${R(cx - EYE.rx, cy)}Z`;
+}
+
+function browPath(pts, raise, angle, inner) {
+  const n = pts.length - 1;
+  return taper(pts.map(([x, y], i) => {
+    const u = i / n;
+    return [x, y - raise * 15 - inner * 11 * (1 - u) - angle * 12 * u];
+  }), [3.5, 17, 8], 6);
+}
+
+function markup(id, t) {
+  return `<svg id="${id}" viewBox="${VB.x} ${VB.y} ${VB.w} ${VB.h}" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" style="display:block;width:100%;height:100%">
+  <defs><clipPath id="${id}-clipMouth"><path id="${id}-clipMouthP" d=""/></clipPath></defs>
+  <g id="${id}-neck"/>
+  <g id="${id}-skull"/>
+  <g id="${id}-body"/>
+  <g id="${id}-features">
+    <path id="${id}-browL" fill="${t.ink}"/><path id="${id}-browR" fill="${t.ink}"/>
+    <g id="${id}-eyes"><path id="${id}-eyeL" fill="${t.ink}"/><path id="${id}-eyeR" fill="${t.ink}"/></g>
+    <g id="${id}-mouth"><path id="${id}-mouthIn" fill="${t.mouthIn}"/>
+      <g clip-path="url(#${id}-clipMouth)"><ellipse id="${id}-tongue" fill="${t.tongue}"/><path id="${id}-teeth" fill="${t.teeth}"/><path id="${id}-teethLo" fill="${t.teeth}" opacity=".85"/></g>
+      <path id="${id}-lips" fill="${t.ink}"/></g>
+  </g>
+  <g id="${id}-hair"/>
+</svg>`;
+}
+
+let uid = 0;
+export function createFace(mount, theme = {}) {
+  const t = Object.assign({}, THEME, theme);
+  const id = `peepControlPlane${++uid}`;
+  const { svg, $, set } = createFaceShell(mount, id, markup(id, t));
+  const el = {
+    neck: $('neck'), skull: $('skull'), body: $('body'), features: $('features'), hair: $('hair'),
+    browL: $('browL'), browR: $('browR'), eyes: $('eyes'), eyeL: $('eyeL'), eyeR: $('eyeR'),
+    mouthIn: $('mouthIn'), lips: $('lips'), clipMouth: $('clipMouthP'),
+    teeth: $('teeth'), teethLo: $('teethLo'), tongue: $('tongue'),
+  };
+  function apply(p) {
+    poseTransforms(p, set, el, POSE);
+    set(el.eyes, 'transform', `translate(${f(p.pupilX * 11)} ${f(p.pupilY * 8)})`);
+    const lidFollow = Math.max(0, p.pupilY) * 0.22;
+    set(el.eyeL, 'd', eyePath(CX - EYE.dx, EYE.y + 1, p.lidL + lidFollow, p.squintL, -9));
+    set(el.eyeR, 'd', eyePath(CX + EYE.dx, EYE.y - 1, p.lidR + lidFollow, p.squintR, 8));
+    set(el.browL, 'd', browPath(BROW_L, p.browRaiseL, p.browAngleL, p.browInnerL));
+    set(el.browR, 'd', browPath(BROW_R, p.browRaiseR, p.browAngleR, p.browInnerR));
+    const m = mouthGeometry(p), contour = region(m.contour);
+    set(el.mouthIn, 'd', contour); set(el.clipMouth, 'd', contour); set(el.lips, 'd', taperRing(m.contour, m.profile, 12));
+    set(el.mouthIn, 'opacity', f(clamp((m.innerBot - m.innerTop) / 3)));
+    pairedTeeth(p, set, el, teethPath, m);
+    const tg = clamp(p.tongue);
+    set(el.tongue, 'cx', f(m.cx)); set(el.tongue, 'cy', f(m.innerBot + 6 - tg * ((m.innerBot - m.innerTop) * 0.8 + 6)));
+    set(el.tongue, 'rx', f(m.w * 0.58)); set(el.tongue, 'ry', '8'); set(el.tongue, 'opacity', tg > 0.02 ? '1' : '0');
+  }
+  return faceApi(mount, svg, apply, t);
+}
+
+export const peepControlPlane = { create: createFace, meta: META };

package/src/face-peep.d.ts

@@ -0,0 +1,7 @@
+import type { AvatarMeta, Face, FaceFactory } from "./avatar.js";
+
+export const createFace: FaceFactory;
+export const META: AvatarMeta;
+/** Default palette. Passed as `createAvatar({ theme })`; see authoring-a-face.md. */
+export const THEME: Readonly<Record<string, string>>;
+export const peep: Face;