듣는 얼굴

// The face's presence: signals in, a pose out. The same numbers on every surface.
type Mode = 'listening' | 'waiting' | 'speaking' | 'held';
interface Signals { mode: Mode; level: number; hearingWords: boolean; heardPieces: number }
interface Pose { scale: number; x: number; y: number; rotate: number }

const P = {
  breathSeconds: 4.2, breathScale: 0.008, heldBreath: 0.5,
  swayX: 0.008, swayY: 0.006, swayRotate: 0.6, swaySpeed: 0.5,
  leanScale: 0.015, nodSeconds: 0.7, nodY: 0.02,
  tiltAfter: 4, tiltRamp: 3, tiltRotate: 1.5, thinkY: -0.01, thinkRotate: -1.2,
  settle: 0.35, levelSeconds: 0.12, maxStep: 0.1,
};

/** Three sines whose periods never line up: a wander that doesn't visibly repeat. */
const wander = (t: number, phase: number) =>
  (Math.sin(t + phase) + 0.6 * Math.sin(1.618 * t + 1.3 + phase) + 0.3 * Math.sin(2.718 * t + 0.7 + phase)) / 1.9;

/** Ease toward a target: a change of mode is a glide, never a jump. */
const approach = (now: number, target: number, dt: number, tau: number) =>
  now + (target - now) * (1 - Math.exp(-dt / tau));

export class Presence {
  private t = 0; private level = 0; private live = 1; private think = 0; private tilt = 0;
  private pieces: number | null = null;
  private nodAt: number | null = null;
  private wordsSince: number | null = null;

  step(s: Signals, dt: number, motion: number, reducedMotion = false): Pose {
    const step = Math.max(0, Math.min(dt, P.maxStep));       // a hidden tab is not a jump
    this.t += step;
    const listening = s.mode === 'listening';
    this.level = approach(this.level, listening ? s.level : 0, step, P.levelSeconds);
    if (listening && this.pieces !== null && s.heardPieces > this.pieces) this.nodAt = this.t;
    this.pieces = s.heardPieces;
    this.wordsSince = listening && s.hearingWords ? this.wordsSince ?? this.t : null;
    const heardFor = this.wordsSince === null ? 0 : this.t - this.wordsSince;
    const tiltTarget = Math.max(0, Math.min(1, (heardFor - P.tiltAfter) / P.tiltRamp));
    this.tilt = approach(this.tilt, tiltTarget, step, P.settle);
    this.think = approach(this.think, s.mode === 'waiting' ? 1 : 0, step, P.settle);
    this.live = approach(this.live, s.mode === 'held' ? 0 : 1, step, P.settle);
    let nod = 0;
    if (this.nodAt !== null) {
      const progress = (this.t - this.nodAt) / P.nodSeconds;
      if (progress >= 1) this.nodAt = null; else nod = Math.sin(Math.PI * progress);
    }
    const amount = reducedMotion ? 0 : Math.max(0, Math.min(2, motion));
    if (amount === 0) return { scale: 1, x: 0, y: 0, rotate: 0 };
    const w = this.t * P.swaySpeed;
    const breath = Math.sin((2 * Math.PI * this.t) / P.breathSeconds)
      * (P.heldBreath + (1 - P.heldBreath) * this.live);
    return {
      scale: 1 + amount * (P.breathScale * breath + P.leanScale * this.level),
      x: amount * P.swayX * this.live * wander(w, 0),
      y: amount * (P.swayY * this.live * wander(w, 2.1) + P.nodY * nod + P.thinkY * this.think),
      rotate: amount * (P.swayRotate * this.live * wander(w, 4.2) + P.tiltRotate * this.tilt
        + P.thinkRotate * this.think),
    };
  }
}

const face = new Presence();
const marks = new Set([0, 10, 33, 50, 63, 80, 95, 110]);   // tenths of a second worth printing
for (let i = 0; i <= 110; i += 1) {
  const t = i / 10;
  const mode: Mode = t < 9 ? 'listening' : 'waiting';
  const talking = t >= 1 && t < 8.5;
  const pieces = t >= 6 ? 2 : t >= 3 ? 1 : 0;                // two pieces of his words land
  const pose = face.step({ mode, level: talking ? 0.7 : 0.05, hearingWords: talking,
    heardPieces: pieces }, 0.1, 1);
  if (marks.has(i)) {
    console.log(`${t.toFixed(1).padStart(4)}s ${mode.padEnd(9)} scale ${pose.scale.toFixed(4)}`
      + `  y ${(pose.y * 100).toFixed(2)}%  rotate ${pose.rotate.toFixed(2)}°`);
  }
}
console.log('reduced motion:', face.step(
  { mode: 'listening', level: 1, hearingWords: true, heardPieces: 2 }, 0.1, 2, true));