Expérience 01 · Octobre 2026
Logo vivant
Le logo est un récipient. Une simulation calcule en temps réel une encre enfermée dans ses lettres : en la remplissant, elle révèle le mot.
Passez la souris sur les lettres, ou faites glisser le doigt, pour remuer l’encre.
Le principe
Le logo n’est dessiné nulle part à l’écran : sa silhouette sert de paroi au fluide. L’encre ne peut exister qu’à l’intérieur des lettres, elle rebondit sur leurs bords et passe d’une lettre à l’autre par les ponts fins qui les relient.
Au chargement, quatre coups de pinceau traversent le mot et le remplissent. Ensuite, quelques gouttes relancent le mouvement de temps en temps : le logo ne reste jamais immobile.
La technique
La simulation résout les équations de Navier-Stokes d’un fluide incompressible, directement sur la carte graphique : transport de la vitesse et de l’encre, entretien des tourbillons, puis 28 itérations pour la pression, à chaque image. Aux bords des lettres, la vitesse ne peut pas traverser la paroi.
Le calcul ne porte que sur le rectangle du logo : une grille de 512 × 138 cellules pour la vitesse, une texture de 1536 pixels pour l’encre. La paroi vient du même tracé vectoriel que le logo de l’en-tête.
La méthode est celle de « Stable Fluids » (Jos Stam, 1999), popularisée sur le web par la simulation WebGL de Pavel Dobryakov.
- Rendu
- Three.js, WebGL 2
- Simulation
- Navier-Stokes sur GPU
- Grille
- 512 × 138, dans la forme du logo