@springbrand/message-panel 0.1.3-alpha.8 → 0.2.0-alpha.37

package/springbrand-pet/bot/face.test.ts

@@ -0,0 +1,101 @@
+import { describe, expect, it } from 'vitest'
+import { EYE_H, EYE_SPLIT, EYE_W, REST_GAZE, eyePoses, type HeadGaze } from './face'
+
+/**
+ * Valeurs relevees image par image sur la video de reference (unites : rayon de
+ * la boule au repos = 1, y vers le bas). Le modele de sphere doit les
+ * reproduire : c'est lui qui garantit que l'oeil proche du bord se comprime
+ * exactement comme dans l'original.
+ */
+const MESURES: Array<{
+  nom: string
+  gaze: HeadGaze
+  split: number
+  w: number
+  h: number
+  yeux: Array<{ x: number; y: number; court: number; long: number }>
+}> = [
+  {
+    nom: 'repos',
+    gaze: REST_GAZE,
+    split: EYE_SPLIT,
+    w: EYE_W,
+    h: EYE_H,
+    yeux: [
+      { x: 0.189, y: -0.412, court: 0.178, long: 0.39 },
+      { x: 0.614, y: -0.51, court: 0.12, long: 0.395 }
+    ]
+  },
+  {
+    nom: 'yeux ecarquilles',
+    gaze: { yaw: 6.92, pitch: -21.96, roll: 11.6 },
+    split: 18.43,
+    w: 0.356,
+    h: 0.875,
+    yeux: [
+      { x: -0.198, y: 0.295, court: 0.353, long: 0.82 },
+      { x: 0.412, y: 0.415, court: 0.315, long: 0.826 }
+    ]
+  },
+  {
+    nom: 'notification',
+    gaze: { yaw: -21.94, pitch: -5.82, roll: -12.2 },
+    split: 18.89,
+    w: 0.505,
+    h: 0.498,
+    yeux: [
+      { x: -0.675, y: 0.172, court: 0.39, long: 0.495 },
+      { x: -0.059, y: 0.027, court: 0.495, long: 0.5 }
+    ]
+  }
+]
+
+const court = (e: ReturnType<typeof eyePoses>[number], w: number) => Math.hypot(e.a, e.b) * w
+const long = (e: ReturnType<typeof eyePoses>[number], h: number) => Math.hypot(e.c, e.d) * h
+
+describe('yeux poses sur une sphere', () => {
+  for (const m of MESURES) {
+    it(`reproduit la pose "${m.nom}" mesuree sur la video`, () => {
+      const poses = eyePoses(m.gaze, 1, m.split)
+      for (let i = 0; i < 2; i++) {
+        const p = poses[i]!
+        const attendu = m.yeux[i]!
+        // 0.04 rayon = ~7 px sur la boule de 190 px de la video
+        expect(p.x).toBeCloseTo(attendu.x, 1)
+        expect(p.y).toBeCloseTo(attendu.y, 1)
+        expect(Math.abs(court(p, m.w) - attendu.court)).toBeLessThan(0.04)
+        expect(Math.abs(long(p, m.h) - attendu.long)).toBeLessThan(0.04)
+      }
+    })
+  }
+
+  it('comprime l oeil exactement du facteur de profondeur de la sphere', () => {
+    // Invariant exact : le determinant du repere tangent projete vaut z. C'est
+    // lui qui fait que l'aire de l'oeil suit la courbure (mesure : 0.663).
+    for (const e of eyePoses(REST_GAZE, 1)) {
+      expect(e.a * e.d - e.b * e.c).toBeCloseTo(e.depth, 6)
+    }
+    const [proche, loin] = eyePoses(REST_GAZE, 1)
+    expect(loin.depth / proche.depth).toBeCloseTo(0.663, 1)
+    // mesure video de la largeur : 0.120 / 0.178 = 0.674
+    expect(court(loin, EYE_W) / court(proche, EYE_W)).toBeCloseTo(0.674, 1)
+  })
+
+  it('garde la meme longueur pour les deux yeux (axe tangentiel non deforme)', () => {
+    const [a, b] = eyePoses(REST_GAZE, 1)
+    expect(long(a, EYE_H)).toBeCloseTo(long(b, EYE_H), 3)
+  })
+
+  it('conserve la separation angulaire de 31 degres quel que soit le regard', () => {
+    for (const gaze of [REST_GAZE, { yaw: -40, pitch: 10, roll: 5 }, { yaw: 0, pitch: 0, roll: 0 }]) {
+      const [a, b] = eyePoses(gaze, 1)
+      const dot = a.x * b.x + a.y * b.y + a.depth * b.depth
+      expect((Math.acos(dot) * 180) / Math.PI).toBeCloseTo(EYE_SPLIT * 2, 4)
+    }
+  })
+
+  it('fait passer un oeil derriere la sphere quand la tete tourne fort', () => {
+    const [, loin] = eyePoses({ yaw: 80, pitch: 0, roll: 0 }, 1)
+    expect(loin.depth).toBeLessThan(0)
+  })
+})

package/springbrand-pet/bot/face.ts

@@ -0,0 +1,179 @@
+import { clamp, createRng, loopNoise } from './math'
+
+/**
+ * Les yeux sont peints sur une sphere, pas poses a plat.
+ *
+ * Mesure sur la video : l'oeil le plus proche du bord fait 0.69 fois la largeur
+ * de l'autre, et son aire 0.663 fois — exactement le facteur de profondeur
+ * (z = 0.669) d'un point de sphere a cette distance du centre. On modelise donc
+ * une vraie orientation de tete : chaque oeil recupere le repere tangent de la
+ * sphere, projete en orthographique. La compression et l'inclinaison en
+ * decoulent toutes seules, c'est ce qui donne le volume.
+ *
+ * Les constantes ci-dessous ne sont pas choisies a la main : elles sortent d'un
+ * ajustement du modele sur les positions et tailles relevees image par image
+ * (erreur residuelle ~1 px sur un rayon de 190 px).
+ */
+
+type Vec3 = [number, number, number]
+
+/** Demi-ecart des yeux sur la sphere, en degres (separation totale ~31deg). */
+export const EYE_SPLIT = 15.46
+/** Taille de l'oeil au repos, en unites de rayon de boule. */
+export const EYE_W = 0.186
+export const EYE_H = 0.412
+
+/** Orientation de tete au repos, ajustee sur les frames de reference. */
+export const REST_GAZE: HeadGaze = { yaw: 28.49, pitch: 28.62, roll: -13 }
+
+export interface EyePose {
+  x: number
+  y: number
+  /** matrice tangente 2x2 : [a b c d] au sens SVG matrix(a,b,c,d,e,f) */
+  a: number
+  b: number
+  c: number
+  d: number
+  /** composante z de la normale : > 0 = face visible */
+  depth: number
+}
+
+export interface HeadGaze {
+  /** lacet, degres, positif = regarde a droite */
+  yaw: number
+  /** tangage, degres, positif = regarde en haut */
+  pitch: number
+  /** roulis, degres, inclinaison de la tete */
+  roll: number
+}
+
+const deg = (d: number) => (d * Math.PI) / 180
+
+/** Fait tourner deux vecteurs d'un repere orthonorme dans leur plan commun. */
+function spin(u: Vec3, v: Vec3, angle: number): [Vec3, Vec3] {
+  const c = Math.cos(angle)
+  const s = Math.sin(angle)
+  return [
+    [u[0] * c + v[0] * s, u[1] * c + v[1] * s, u[2] * c + v[2] * s],
+    [v[0] * c - u[0] * s, v[1] * c - u[1] * s, v[2] * c - u[2] * s]
+  ]
+}
+
+/**
+ * Repere de la tete puis des deux yeux.
+ * Repere ecran : x a droite, y vers le bas, z vers le spectateur.
+ * L'indice 0 est l'oeil interieur, l'indice 1 l'oeil exterieur.
+ */
+export function eyePoses(gaze: HeadGaze, scale: number, split = EYE_SPLIT): [EyePose, EyePose] {
+  let f: Vec3 = [0, 0, 1]
+  let right: Vec3 = [1, 0, 0]
+  let down: Vec3 = [0, 1, 0]
+
+  // lacet : forward bascule vers right
+  ;[f, right] = spin(f, right, deg(gaze.yaw))
+  // tangage : forward bascule vers le haut (donc a l'oppose de down)
+  ;[down, f] = spin(down, f, deg(gaze.pitch))
+  // roulis : la tete penche dans son propre plan
+  ;[right, down] = spin(right, down, deg(gaze.roll))
+
+  const build = (side: number): EyePose => {
+    const [ef, er] = spin(f, right, deg(split * side))
+    return {
+      x: ef[0] * scale,
+      y: ef[1] * scale,
+      a: er[0],
+      b: er[1],
+      c: down[0],
+      d: down[1],
+      depth: ef[2]
+    }
+  }
+
+  return [build(-1), build(1)]
+}
+
+/**
+ * Vie au repos : derive lente du regard, saccades, clignements.
+ *
+ * Fonction pure du temps (aucun etat interne), donc pause, reprise et saut a
+ * une date arbitraire donnent toujours la meme image. Les valeurs sont des
+ * ECARTS a ajouter a la pose de l'etat courant.
+ */
+export interface Liveliness {
+  dYaw: number
+  dPitch: number
+  dRoll: number
+  /** 1 = oeil ouvert, 0 = ferme (ecrasement vertical en repere ecran) */
+  lid: number
+  driftX: number
+  driftY: number
+  breath: number
+}
+
+const BLINK_RNG = createRng(0x5eed)
+/** Calendrier de clignements pre-tire : deterministe et sans etat. */
+const BLINKS: number[] = (() => {
+  const out: number[] = []
+  let t = 1.4
+  while (t < 900) {
+    out.push(t)
+    // 1.9 a 4.6 s entre deux clignements, plus un double clignement parfois
+    t += 1.9 + BLINK_RNG() * 2.7
+    if (BLINK_RNG() < 0.18) {
+      out.push(t)
+      t += 0.24
+    }
+  }
+  return out
+})()
+
+/** Mesure : 1 a 2 frames a 10 fps. */
+const BLINK_DUR = 0.18
+
+function blinkLid(t: number): number {
+  for (let i = 0; i < BLINKS.length; i++) {
+    const start = BLINKS[i]!
+    if (t < start) break
+    const k = (t - start) / BLINK_DUR
+    if (k >= 0 && k <= 1) {
+      // fermeture rapide, reouverture un peu plus lente
+      return k < 0.45 ? 1 - k / 0.45 : (k - 0.45) / 0.55
+    }
+  }
+  return 1
+}
+
+export interface LivelinessOptions {
+  wander?: number
+  blink?: boolean
+  float?: boolean
+}
+
+export function liveliness(t: number, opt: LivelinessOptions = {}): Liveliness {
+  const { wander = 1, blink = true, float = true } = opt
+
+  // Periodes premieres entre elles : la derive ne se repete jamais a l'oeil.
+  return {
+    dYaw: (loopNoise(t, 11.3, 0.4) * 5.5 + loopNoise(t, 3.7, 2.1) * 1.6) * wander,
+    dPitch: (loopNoise(t, 9.1, 1.3) * 4.2 + loopNoise(t, 4.3, 0.7) * 1.3) * wander,
+    dRoll: loopNoise(t, 13.7, 3.2) * 2.2 * wander,
+    lid: blink ? blinkLid(t) : 1,
+    // Au repos la video est quasiment immobile (centre stable a +-0.003, rayon
+    // constant) : toute la vie passe par le regard et les clignements. On garde
+    // juste de quoi ne pas figer completement l'image.
+    driftX: float ? loopNoise(t, 7.9, 1.9) * 0.006 : 0,
+    driftY: float ? loopNoise(t, 5.3, 0.3) * 0.007 : 0,
+    // La largeur est constante, seule la hauteur respire tres legerement.
+    breath: float ? 1 + Math.sin((t / 3.4) * Math.PI * 2) * 0.005 : 1
+  }
+}
+
+/**
+ * Le clignement est un ecrasement VERTICAL en repere ecran autour du centre de
+ * l'oeil (mesure : la largeur de bbox est conservee, la hauteur tombe a ~0.35),
+ * pas un retrecissement le long de l'axe incline de la gelule. On le compose
+ * donc apres la matrice tangente, en n'affectant que les sorties en y.
+ */
+export function blinkScale(lid: number): number {
+  return 0.06 + 0.94 * clamp(lid)
+}

package/springbrand-pet/bot/math.ts

@@ -0,0 +1,42 @@
+export const TAU = Math.PI * 2
+
+export const clamp = (v: number, lo = 0, hi = 1) => (v < lo ? lo : v > hi ? hi : v)
+export const lerp = (a: number, b: number, t: number) => a + (b - a) * t
+
+export type Easing = (t: number) => number
+
+/**
+ * Mesure sur la video : les transitions sont des ease-out exponentiels, sans
+ * depassement du corps. Les seuls effets de ressort sont locaux (le pop de la
+ * pastille de notification, l'ouverture des yeux) et sont ecrits directement
+ * dans l'etat concerne.
+ */
+export const easings = {
+  easeOutCubic: (t: number) => 1 - (1 - t) ** 3,
+  easeInOutCubic: (t: number) => (t < 0.5 ? 4 * t ** 3 : 1 - (-2 * t + 2) ** 3 / 2),
+  easeOutQuint: (t: number) => 1 - (1 - t) ** 5
+} satisfies Record<string, Easing>
+
+/** Bruit 1D periodique : boucle sans couture sur `period`, utile pour la derive du regard. */
+export function loopNoise(t: number, period: number, seed = 0): number {
+  const p = (t / period) * TAU
+  return (
+    0.55 * Math.sin(p + seed) +
+    0.3 * Math.sin(2 * p + seed * 1.7 + 1.1) +
+    0.15 * Math.sin(3 * p + seed * 2.3 + 2.4)
+  )
+}
+
+/** PRNG deterministe (mulberry32) : meme sequence a chaque lecture. */
+export function createRng(seed: number) {
+  let a = seed >>> 0
+  return () => {
+    a = (a + 0x6d2b79f5) >>> 0
+    let t = Math.imul(a ^ (a >>> 15), 1 | a)
+    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296
+  }
+}
+
+/** Arrondi court : divise par ~2 le poids des chaines de path generees a 60 fps. */
+export const r2 = (v: number) => Math.round(v * 100) / 100

package/springbrand-pet/bot/profiles.ts

@@ -0,0 +1,22 @@
+// Profils radiaux r(theta) releves au pixel sur la video de reference.
+// theta = 0 pointe vers la droite et croit dans le sens horaire (y vers le bas).
+// Unite : rayon de la boule au repos = 1.
+//
+// Genere par tools/extract-profiles.py — ne pas editer a la main.
+
+export const PROFILE_SAMPLES = 64
+
+export const PROFILES = {
+  // oeuf : meme hauteur que la boule, retreci en largeur
+  // image 164, empreinte mesuree 1.647 x 2.000
+  egg: [0.8369,0.8424,0.8497,0.8585,0.8674,0.8775,0.8878,0.8983,0.9089,0.9185,0.9288,0.9374,0.9445,0.9504,0.9543,0.9559,0.9555,0.9519,0.9466,0.9389,0.9302,0.9193,0.9085,0.8969,0.8852,0.8734,0.8625,0.8513,0.8411,0.8325,0.8243,0.8179,0.8137,0.8112,0.8102,0.8128,0.8178,0.8262,0.8374,0.8518,0.8702,0.8922,0.9169,0.9446,0.9741,1.0023,1.0267,1.0433,1.0481,1.0393,1.0216,0.9970,0.9697,0.9418,0.9169,0.8949,0.8760,0.8604,0.8490,0.8394,0.8337,0.8314,0.8305,0.8326],
+  // hexagone pointe en haut, coins tres arrondis
+  // image 174, empreinte mesuree 1.826 x 2.011
+  hexagon: [0.9210,0.9282,0.9441,0.9706,0.9984,1.0059,0.9896,0.9562,0.9290,0.9124,0.9047,0.9058,0.9157,0.9349,0.9642,0.9873,0.9882,0.9665,0.9336,0.9105,0.8968,0.8918,0.8955,0.9080,0.9293,0.9611,0.9820,0.9812,0.9590,0.9282,0.9089,0.8978,0.8964,0.9026,0.9189,0.9439,0.9778,0.9990,0.9964,0.9713,0.9439,0.9274,0.9196,0.9206,0.9308,0.9502,0.9799,1.0121,1.0226,1.0071,0.9752,0.9510,0.9366,0.9316,0.9351,0.9485,0.9711,1.0026,1.0213,1.0155,0.9863,0.9547,0.9347,0.9232],
+  // triangle pointe en haut, coins tres arrondis
+  // image 190, empreinte mesuree 1.995 x 1.884
+  triangle: [0.7819,0.8211,0.8747,0.9440,1.0223,1.0960,1.1401,1.1340,1.0808,1.0047,0.9265,0.8603,0.8104,0.7730,0.7450,0.7273,0.7151,0.7118,0.7148,0.7245,0.7427,0.7680,0.8037,0.8518,0.9148,0.9876,1.0583,1.1073,1.1109,1.0667,0.9940,0.9164,0.8482,0.7948,0.7555,0.7261,0.7056,0.6925,0.6859,0.6869,0.6938,0.7084,0.7305,0.7615,0.8040,0.8595,0.9311,1.0092,1.0791,1.1171,1.1054,1.0501,0.9779,0.9050,0.8450,0.7990,0.7656,0.7413,0.7258,0.7160,0.7146,0.7204,0.7330,0.7528],
+} as const
+
+export type ProfileName = keyof typeof PROFILES
+

package/springbrand-pet/bot/repere.ts

@@ -0,0 +1,31 @@
+/**
+ * Le repere de tout ce que le moteur rend.
+ *
+ * `engine.sample()` sort des coordonnees en unites de viewBox, et ces deux nombres en sont
+ * la definition : sans eux, une sortie du moteur ne veut rien dire. Ils vivaient dans
+ * `BloubBot.vue`, donc hors d'atteinte — un `<script setup>` n'exporte rien — et
+ * `export.ts` en redisait un a la main avec le commentaire qui nommait le probleme.
+ *
+ * Ils sont ici parce que `src/bot/` est ce qui se lit et se consomme du dehors : le
+ * composant Vue est UN client du moteur, pas sa definition.
+ */
+
+/**
+ * Rayon de la boule au repos, en unites de viewBox. C'est le `scale` que le composant
+ * passe a `BotEngine`.
+ *
+ * Choisi et non mesure : c'est l'unite de travail. Tout le reste du dossier s'exprime en
+ * fractions de ce rayon, ce qui rend les mesures relevees sur la video independantes de la
+ * taille d'affichage.
+ */
+export const RAYON = 100
+
+/**
+ * Demi-cote du viewBox affiche. La marge au-dela du rayon loge les anneaux.
+ *
+ * Ce n'est pas une valeur libre : les anneaux de l'orbite et le swoosh de la comete montent
+ * a 1,4 fois le rayon, soit 140. Rien ne les borne au runtime — c'est le reglage a la main
+ * des tableaux `RINGS` et `SWOOSH` (`decor.ts`) qui les tient sous 158, et un test le
+ * verrouille.
+ */
+export const DEMI_VIEWBOX = 158

package/springbrand-pet/bot/shape.test.ts

@@ -0,0 +1,97 @@
+import { describe, expect, it } from 'vitest'
+import { TAU } from './math'
+import { PROFILE_SAMPLES } from './profiles'
+import { radiusAtAngle, silhouette } from './shape'
+import { SHAPES } from './skins'
+
+/**
+ * `radiusAtAngle`, la fonction qui recolle sur le contour reel tout ce qui est pose « sur »
+ * le corps — les yeux et la pastille de notification.
+ *
+ * Elle n'avait aucun test, alors que le moteur l'appelle en `atan2(y, x) - pose.sil.rot` et
+ * qu'`orbit` pousse `rot` jusqu'a environ -30 rad : son argument sort donc largement de
+ * `[0, 2*PI)`. Toute simplification de son double modulo decollerait les yeux de la
+ * silhouette pendant l'orbite, soit exactement la panne que cette fonction existe pour
+ * eviter.
+ */
+
+/** Un profil franchement non circulaire : sur un cercle, tout angle donnerait 1. */
+const TRIANGLE = silhouette('triangle').radii
+
+describe('radiusAtAngle', () => {
+  it('rend le rayon du profil, pas une constante', () => {
+    const vus = new Set(Array.from({ length: 16 }, (_, i) => radiusAtAngle(TRIANGLE, (i / 16) * TAU)))
+    expect(vus.size).toBeGreaterThan(8)
+  })
+
+  it('enroule les angles negatifs', () => {
+    expect(radiusAtAngle(TRIANGLE, -0.1)).toBeCloseTo(radiusAtAngle(TRIANGLE, TAU - 0.1), 12)
+    expect(radiusAtAngle(TRIANGLE, -1)).toBeCloseTo(radiusAtAngle(TRIANGLE, TAU - 1), 12)
+  })
+
+  /**
+   * Le cas d'`orbit` : plusieurs tours dans le negatif. C'est ce que le double modulo de
+   * `((x % 1) + 1) % 1` gere et qu'un modulo simple casse.
+   */
+  it('enroule sur plusieurs tours, dans les deux sens', () => {
+    for (const base of [-30, -12.5, 7.3]) {
+      for (const tours of [-3, -1, 1, 5]) {
+        expect(
+          radiusAtAngle(TRIANGLE, base),
+          `base=${base} tours=${tours}`
+        ).toBeCloseTo(radiusAtAngle(TRIANGLE, base + tours * TAU), 10)
+      }
+    }
+  })
+
+  /**
+   * Continue au passage par zero, la ou l'enroulement fait sauter l'index de 63 a 0. Une
+   * simplification qui renverrait une valeur de repli — 1, typiquement — se verrait ici
+   * comme une marche de 0,22 sur ce profil.
+   *
+   * Huit decimales et pas neuf : l'ecart mesure vaut 7e-10, du bruit flottant sur des
+   * indices calcules par modulo. C'est trois ordres de grandeur sous ce qu'une vraie
+   * discontinuite produirait.
+   */
+  it('est continue au passage par zero', () => {
+    expect(radiusAtAngle(TRIANGLE, -1e-9)).toBeCloseTo(radiusAtAngle(TRIANGLE, 1e-9), 8)
+    // et la valeur y est bien celle du profil, pas un repli
+    expect(radiusAtAngle(TRIANGLE, 0)).toBeCloseTo(TRIANGLE[0]!, 12)
+  })
+})
+
+/**
+ * Les formes du personnalisateur sont baties analytiquement, sans passer par le generateur
+ * qui produit `profiles.ts`. Rien ne verifiait leur echantillonnage.
+ *
+ * C'est ce qui rend le controle necessaire : `blend` interpole par INDEX et retombe sur
+ * `?? 1` quand l'index manque, donc une forme construite avec un autre nombre
+ * d'echantillons morphe silencieusement vers un cercle unite au lieu d'echouer. Elle serait
+ * juste au repos et fausse dans toutes ses transitions — le pire des deux mondes, parce que
+ * personne ne penserait a regarder un morph.
+ */
+describe('profils des formes du personnalisateur', () => {
+  it('ont tous le meme echantillonnage angulaire, fini et positif', () => {
+    for (const forme of SHAPES) {
+      expect(forme.radii, forme.id).toHaveLength(PROFILE_SAMPLES)
+      for (const [i, r] of forme.radii.entries()) {
+        expect(Number.isFinite(r), `${forme.id}[${i}] = ${r}`).toBe(true)
+        expect(r, `${forme.id}[${i}]`).toBeGreaterThan(0)
+      }
+    }
+  })
+
+  /**
+   * Bornes larges, uniquement la pour attraper une forme aberrante : un rayon sous 0,3
+   * ferait sortir les yeux, un rayon au-dela de 1,6 sortirait du viewBox. Ce ne sont pas des
+   * mesures, c'est le domaine dans lequel le reste du dossier a du sens.
+   */
+  it('restent dans un domaine ou le reste du moteur tient', () => {
+    for (const forme of SHAPES) {
+      const min = Math.min(...forme.radii)
+      const max = Math.max(...forme.radii)
+      expect(min, `${forme.id} min`).toBeGreaterThan(0.3)
+      expect(max, `${forme.id} max`).toBeLessThan(1.6)
+    }
+  })
+})