Aller au contenu principal
sports_esports Lab Canvas 2D Automate à éléments ImageData Zéro dépendance

Falling Sand — l'automate cellulaire à éléments en Canvas 2D

Un bac à sable cellulaire réécrit from scratch en Canvas 2D : chaque cellule (sable, eau, mur) n'obéit qu'à une règle locale, et les tas comme les flaques émergent tout seuls. Mise à jour en place sur tableaux typés, balayage de bas en haut à sens alterné et rendu via ImageData mise à l'échelle. Zéro dépendance.

Clic ou glissement : peindre 1 : sable · 2 : eau · 3 : mur C : effacer · Espace : mettre en pause

Un automate cellulaire à éléments

Falling Sand n'est pas un jeu à gagner mais un bac à sable au sens propre : chaque case de la grille contient un élément — du vide, du sable, de l'eau ou du mur — et n'obéit qu'à une poignée de règles locales. Aucune forme n'est dessinée ni stockée : les tas, les pentes et les flaques que vous voyez apparaître ne sont écrits nulle part, ils émergent du comportement individuel de milliers de cellules. C'est exactement l'esprit des automates cellulaires, appliqué à de la matière.

Trois règles, trois matières crédibles

Le sable tente de tomber tout droit ; si la case sous lui est occupée, il essaie une diagonale — c'est ce simple report en biais qui, répété, l'empile en talus aux pentes régulières plutôt qu'en colonne. L'eau suit la même chute, mais ajoute une règle : quand elle ne peut plus descendre, elle s'étale à l'horizontale, ce qui la met naturellement à niveau et forme une flaque plate. Le mur, lui, ne bouge jamais et sert de décor ou de récipient. Je gère aussi une notion de densité : un grain de sable, plus lourd, peut chasser l'eau sous lui.

L'ordre de balayage n'est pas un détail

La grille est mise à jour en place, sans double tampon, ce qui impose une discipline stricte. Je balaie les rangées de bas en haut : un grain qui tombe atterrit ainsi dans une ligne déjà traitée et ne redescend pas plusieurs cases dans le même passage. Un drapeau « déjà déplacé » empêche la même cellule d'être rejouée après avoir glissé. Et je alterne le sens gauche / droite à chaque image : sans cette alternance, le sable dériverait systématiquement du même côté et les tas pencheraient. Ces choix d'ordre, ce sont eux qui font la différence entre une simulation crédible et un tas de bugs visuels.

Un rendu pensé pour la performance

La grille compte des dizaines de milliers de cellules, mises à jour soixante fois par seconde. Plutôt que de dessiner chaque case au Canvas — coûteux — j'écris un pixel par cellule dans un ImageData à la résolution de la grille, que j'étire ensuite d'un seul drawImage à la taille réelle de l'écran, lissage désactivé pour garder des grains nets. Toute la logique tient dans des tableaux typés (Uint8Array) : pas d'objets, pas d'allocations dans la boucle, un balayage linéaire de la mémoire. Zéro dépendance.

Ce que ça dit d'un projet sérieux

Un « petit sable qui tombe » condense ce que je recherche dans tout système : des règles simples et lisibles, mais un comportement d'ensemble riche et une attention réelle à l'ordre des opérations et au coût de chaque image. Sur vos projets, c'est la même exigence que j'applique — une logique qu'on peut raisonner et tester, des performances mesurées plutôt que subies, et un code dont vous restez pleinement propriétaire.

Photo d'Emmanuel BALLERY, fondateur de x10

À propos de l'auteur

Emmanuel BALLERY est le fondateur de x10 solutions. Ces petits jeux sont surtout un plaisir de développeur, codés le week-end — pas une vitrine de mes missions, qui sont bien plus exigeantes. J'y soigne quand même la performance et la lisibilité, par habitude.

Voir plus arrow_forward
rocket_launch

Un vrai projet en tête ?

Ce petit jeu m'amuse, mais il ne dit pas grand-chose de mon métier : mes missions sont bien plus complexes. Si vous avez une application à concevoir ou à fiabiliser, c'est là que je suis vraiment utile.

Discuter de mon projet arrow_forward