Deux substances, quatre chiffres, une infinité de motifs
Ce n'est pas un jeu à gagner mais une simulation de chimie. Deux substances imaginaires, que j'appelle U et V, occupent une grille. V se nourrit de U pour se reproduire, puis se dégrade lentement ; en parallèle, les deux diffusent dans leurs voisines. De ce couplage — réaction locale et diffusion — naissent des taches, des labyrinthes et des fronts qui ondulent en continu. C'est le modèle de Gray-Scott, réécrit from scratch en Canvas 2D, sans aucune dépendance.
Les motifs de Turing, ou l'ordre né du désordre
En 1952, Alan Turing a montré que deux substances qui diffusent à des vitesses différentes peuvent, à partir d'un état presque uniforme, faire émerger des motifs réguliers — exactement ce qui dessine les rayures d'un poisson-zèbre ou les taches d'un léopard. Ici, il suffit d'ajuster deux paramètres, le taux d'apport (feed) et le taux de retrait (kill), pour basculer d'une famille de motifs à une autre : corail qui bourgeonne, cellules qui se divisent, labyrinthe qui se referme sur lui-même. Rien n'est dessiné à la main : tout est calculé, cellule par cellule.
Le laplacien, une moyenne pondérée du voisinage
Le cœur du calcul tient dans le laplacien discret : pour chaque cellule, je mesure de combien elle s'écarte de la moyenne de ses voisines. En pratique, c'est une petite moyenne pondérée sur le carré 3×3 qui l'entoure — fort au centre, moyen sur les côtés, faible dans les coins, les poids se compensant à zéro. C'est ce terme qui modélise la diffusion : une substance s'écoule des zones concentrées vers les zones qui le sont moins. Les bords de la grille sont bouclés en tore, si bien qu'un motif qui sort d'un côté réapparaît de l'autre, sans jamais buter sur une paroi.
Tableaux typés et double-buffer : la performance au cœur
À chaque image, la simulation traite les 26 000 cellules une dizaine de fois —
soit des centaines de milliers d'opérations flottantes. Pour tenir 60 images par
seconde, deux choix sont décisifs. D'abord les tableaux typés
(Float32Array) : une zone mémoire contiguë, sans surcoût d'objets,
que le moteur JavaScript parcourt à pleine vitesse. Ensuite le
double-buffer : je lis l'état courant, j'écris le suivant dans
un second tampon, puis j'échange les deux. Modifier la grille pendant qu'on la
lit fausserait le laplacien des cellules encore à traiter — le pas de temps ne
serait plus cohérent. Le rendu, lui, passe par un ImageData à la
résolution de la grille, colorié via une table de correspondance calculée une
seule fois, puis étiré en douceur à la taille de l'écran.
Ce que cette démo dit de ma façon de travailler
Un système complexe et vivant qui repose, au fond, sur une poignée de règles simples appliquées avec rigueur : c'est exactement ce que je recherche dans une architecture logicielle. Quand une simulation manipule des centaines de milliers d'opérations par image, on ne peut pas se permettre l'à-peu-près — le bon choix de structure de données fait la différence entre une page fluide et une page qui rame. Sur vos projets, j'applique la même exigence : comprendre le problème en profondeur, choisir la structure juste, et livrer un code performant que vos équipes gardent la main pour faire évoluer.
