Cellular Automata
Le jeu de la vie de Conway sur une grille de petites cellules colorées : dix générations par seconde, des teintes qui tournent, une nouvelle population toutes les 50 secondes.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. SVG comprend 30 effets, dont 3 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
La zone est découpée en cellules de 6 px (grille centrée), dont 30 % sont tirées vivantes au départ. À chaque génération, chaque cellule compte ses huit voisines : une cellule vivante survit avec 2 ou 3 voisines, une cellule morte naît avec exactement 3, toutes les autres meurent ou restent vides. La nouvelle grille est calculée entièrement à partir de l'ancienne, et les bords se rejoignent comme sur un tore : ce qui sort à droite revient à gauche.
Une génération dure 100 ms, mesurées en temps écoulé (plafonné à 50 ms par image), soit dix par seconde sur tous les écrans. Le canvas n'est redessiné qu'au changement de génération : chaque cellule vivante devient un carré de 4 px séparé de ses voisines par 2 px, en hsl(génération × 2 + ligne + colonne, 70 %, 55 %), d'où des diagonales arc-en-ciel qui glissent au fil du temps. Après 500 générations (50 s), une nouvelle population aléatoire repart, car une soupe au hasard finit en blocs immobiles et en clignotants.
La taille de la grille vient de la zone affichée (multipliée par devicePixelRatio pour un rendu net) ; un ResizeObserver relance une population adaptée quand la zone change de taille, et rien ne démarre tant qu'elle est plus petite qu'une cellule. Un IntersectionObserver arrête le calcul hors écran. Le canvas est transparent : le fond est celui de .fx-0618-root. Chaque racine a sa propre population, lancée une seule fois (data-gol-ready) même si le script est collé deux fois.
Accessibilité
- Libellé :
role="img"etaria-labelsur le canvas. En fond de page ou dans une zone d'attente déjà décrite par un texte, passez-le enaria-hidden="true". - Mouvement réduit : sous
prefers-reduced-motion: reduce, 40 générations sont calculées d'un coup et la grille s'affiche figée, avec ses premières structures stables. - Clignotements : les oscillateurs les plus courants changent d'état à chaque génération, soit 5 allers-retours par seconde, sur des carrés de 4 px. Pour un public sensible au scintillement, montez
GENERATION_MSà 350 : on passe sous 3 changements par seconde. - Pause : pas de bouton intégré ; basculer l'attribut
hiddende la racine arrête le calcul (critère WCAG 2.2.2) et le reprend à la même génération. - Clavier : aucun élément interactif dans l'effet.
Compatibilité navigateur
Canvas 2D et environ 4,3 Ko de JavaScript, sans dépendance. ResizeObserver : Chrome 64, Firefox 69, Safari 13.1 ; IntersectionObserver : Chrome 51, Firefox 55, Safari 12.1 (données MDN). Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 : rendu à densité 2, deux populations indépendantes, démarrage après un affichage différé, grille figée en mouvement réduit, aucun calcul hors écran.
Sans ResizeObserver, la grille ne s'adapte qu'au redimensionnement de la fenêtre ; sans IntersectionObserver, les générations continuent hors écran. Sans JavaScript, la zone garde le fond de la racine.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0618-root">
<canvas class="gol-canvas" role="img" aria-label="Jeu de la vie de Conway : cellules colorées qui naissent et meurent sur une grille"></canvas>
</div>Paiement unique, sans abonnement — le code est à toi pour toujours
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Taille des cellules (JS — CELL) |
6 px (carrés de 4 px) | 4 px donne une texture fine, 10 px des motifs lisibles où l'on reconnaît planeurs et clignotants. |
Population de départ (JS — DENSITY) |
0.3 | 0.15 laisse quelques îlots qui s'éteignent vite, 0.5 une mêlée qui se vide d'abord avant de s'organiser. |
Durée d'une génération (JS — GENERATION_MS) |
100 ms | 350 ms ou plus pour un rythme calme et moins de 3 clignotements par seconde, 50 ms pour une évolution rapide. |
Renouvellement (JS — RESTART_AFTER) |
500 générations | Infinity laisse la population s'éteindre ou se figer d'elle-même ; 200 relance plus souvent une soupe agitée. |
Couleurs (JS — ligne fillStyle de draw()) |
hsl(génération × 2 + ligne + colonne, 70 %, 55 %) | Une teinte fixe, par exemple 'hsl(170, 70%, 55%)', donne une grille monochrome sobre. |
Fond (CSS — background de .fx-0618-root) |
#0a0a0f | Le canvas est transparent : seule cette couleur compte, y compris sur fond clair. |
Hauteur (CSS — --gol-height) |
300px | Toute hauteur fixe, ou 100% dans un parent de hauteur connue. |
FAQ
seed() tire les cellules au hasard. Pour un motif, il faut remplacer le tirage par la liste des cellules à allumer (coordonnées ligne, colonne) dans seed(), et mettre RESTART_AFTER à Infinity pour qu'il ne soit pas effacé.RESTART_AFTER (500 générations à 10 par seconde) relance une soupe neuve avant ce moment.
