@voqalize/avatar 0.4.4 → 0.5.1

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

@@ -1,167 +0,0 @@
-/**
- * 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

@@ -1,7 +0,0 @@
-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;