1. Expression SVG
Chaque bouton charge deux chemins de 48 points. Les grandes différences de position et de taille sont déjà contenues dans ces chemins.
2. Regard indépendant
Limites exactes : le pointeur est borné à ±0,6, puis
multiplié par 22 horizontalement et 14 verticalement, soit environ ±13,2 ×
±8,4 unités.
3. Rotation et profondeur
Effet périphérique : un œil proche du bord voit sa largeur
multipliée par un rapport de cosinus. Lorsqu’il passe derrière la tête, il
devient invisible.
4. Clignement et cadence
Un clignement dure 320 ms : fermeture pendant 42 % du temps, réouverture pendant 58 %, avec une hauteur minimale de 4 %.
idle
Pool d’expressions
Changement d’expression
Clignement
Comment un état devient une animation
Étatidle
Pool[0, 8]
Cadence9–16 s
Ressortsx, y, scale
SVGnouveau frame
Les 18 silhouettes et leur correction du visage
Chaque forme fournit un anneau de 96 points, une fonction donnant les limites gauche/droite à une hauteur donnée, et cinq paramètres qui repositionnent le visage.
Pipeline exact d’un frame
01État + timers
expression, blink, morph
02Ressorts
pas fixes à 120 Hz
03Anneaux
interpolation des 48 points
04Projection
position, profondeur, limites
05SVG
d + transform à chaque frame
Formules principales
gazeX = 22 × clamp(pointerX / width, −0.6, 0.6)Le regard
utilisateur n’atteint que ±13,2 unités.
longitude₀ = asin(offsetX / radius)Le centroïde de l’œil est
converti en longitude sur la tête.
longitude = longitude₀ + turnLa rotation de tête est ajoutée en
radians.
x = center + radius × sin(longitude)La position horizontale suit la
surface sphérique.
scaleX = cos(longitude) / cos(longitude₀)La largeur se comprime
avec la profondeur.
eyeScale ≤ (distance − 5) / (halfWidth₁ + halfWidth₂)La taille est
plafonnée pour empêcher le chevauchement.
blink(t) = close 42 % → open 58 %La fermeture est plus rapide que
la réouverture.
spring: v += (−2ζωv − ω²(x−target))dtLes mouvements sont amortis
plutôt qu’interpolés linéairement.
API publique observée
state="idle"Choisit les pools, cadences et mouvements secondaires.
shape="blob"Choisit la silhouette et la correction géométrique du
visage.
sizeFixe la taille rendue du SVG.gazeTarget={x, y}Injecte une cible de regard en coordonnées écran.
mouseInteractiveÉcoute le pointeur global lorsque le composant est
visible.
flipXRetourne tout le SVG horizontalement.
emphasisForce une taille d’yeux et un corps légèrement plus grands.
spinSignalDéclenche une rotation via une valeur incrémentée.
badgeColorCouleur du badge utilisé par certains états.
badgeScaleÉchelle du badge d’état.ref.spin(turns)Commande impérative de rotation.
ref.bounce() / ref.burst()Commandes impératives de rebond et
particules.