le fluide de liquide est bien réel

La technique n’est pas la nôtre. Elle suit la méthode des fluides stables publiée par Jos Stam en 1999, qui a rendu la simulation de fluide en temps réel praticable en choisissant des étapes qui ne peuvent pas diverger, peu importe la force avec laquelle on les pousse. Le code de dopa est retapé et réglé à partir de la simulation de fluide WebGL à code source ouvert de Pavel Dobryakov, publiée sous licence MIT. Ce que nous avons ajouté, ce sont les réglages, les quatre modes, l’adaptation aux téléphones et la façon dont elle s’intègre au terrain de jeu.

L’écran est couvert de deux grilles de nombres, stockées comme textures sur la carte graphique. L’une indique à quelle vitesse et dans quelle direction le fluide bouge en chaque point. L’autre contient la teinture, la couleur que vous voyez vraiment. Chaque image suit les mêmes cinq étapes.

1. Faire avancer le mouvement. Le fluide transporte sa propre vitesse, alors chaque cellule regarde en arrière le long du courant pour voir ce qui y est arrivé.
2. Rendre le tourbillon. Les simulations simples perdent vite leurs remous, qui s’étalent, alors cette étape mesure à quel point chaque zone tourne et donne une poussée à cette rotation. C’est pour ça que les volutes gardent leur énergie au lieu de tourner au sirop.
3. Empêcher la compression. L’eau ne peut pas être comprimée dans un espace plus petit, alors la simulation calcule la pression en 16 passes successives et retire toute partie du mouvement qui écraserait le fluide. Plus de passes seraient un peu plus précises et plus lentes, et 16 maintiennent une animation fluide.
4. Transporter la couleur. La teinture suit le courant corrigé.
5. La dessiner. Les parties les plus lumineuses de la teinture rayonnent doucement autour d’elles.

Quand vous glissez le doigt, le jouet injecte un élan de vitesse et une touche de teinture sous votre doigt, dans la direction de votre geste, et un geste plus rapide pousse plus fort. C’est pourquoi un glissement lent et un glissement vif ne donnent rien de semblable, et pourquoi la même forme ne revient jamais deux fois.

Le mouvement et la couleur n’ont pas besoin du même détail. La grille de vitesse est grossière, 128 cellules de large, parce que c’est la forme générale du courant qui compte. La grille de teinture est bien plus fine, 768 de large, parce que c’est elle que votre œil lit. Les séparer, c’est l’essentiel de ce qui permet à un fluide plein écran de tourner en douceur dans un onglet.

Sur les téléphones, et sur tout appareil à pointeur tactile ou à faible densité de pixels, liquide réduit les deux, à 512 pour la teinture et 96 pour le mouvement, et plafonne la netteté du rendu. À la taille d’un téléphone, l’image reste nette, et chaque image coûte nettement moins.

Flow, bloom, swirl et zen font tourner exactement la même simulation. Ils ne diffèrent que par une poignée de nombres, et chacun de ces nombres a un sens physique.

• La dissipation de la teinture, c’est la vitesse à laquelle la couleur s’estompe. À chaque étape, la teinture est divisée par un plus ce taux, alors un nombre plus élevé s’estompe plus vite. Bloom a le plus bas, donc la couleur s’attarde et rayonne. Zen a le plus élevé, donc la toile s’éclaircit et reste calme.
• La dissipation de la vitesse, c’est le temps pendant lequel le fluide continue de bouger après que vous avez relâché. Swirl la garde au plus bas et continue de tourner bien après votre geste. Zen la garde au plus haut et se pose.
• Le rotationnel, c’est la force de la poussée tourbillonnaire : 52 en swirl, 32 en flow et 12 en zen.
• La force d’injection, c’est la force avec laquelle votre doigt pousse. Swirl pousse le plus fort et zen le plus doucement.

Une simulation de fluide est l’une des choses les plus lourdes qu’une page web puisse faire tourner, alors liquide la ménage. Elle tourne pendant que vous la touchez, continue un instant pour que votre dernier geste se pose, puis s’arrête en laissant la dernière image à l’écran au lieu de vider votre batterie en arrière-plan.

Les Drops se gagnent au mouvement accumulé, environ un balayage complet à la fois et jamais plus vite qu’un court délai, alors tourbillonner sans but rapporte un filet plutôt qu’un torrent. Et sur un appareil qui ne peut pas faire tourner la simulation, liquide affiche un aperçu fixe plutôt qu’un canevas brisé, pendant que le reste de dopa continue normalement.