Swarm Intelligence
60 « boids » sur canvas qui appliquent les trois règles de Reynolds — se rapprocher et s'aligner sur les voisins à moins de 80 px, s'écarter sous 25 px — avec une vitesse plafonnée et des bords qui se rejoignent : des groupes se forment, se séparent et virent ensemble en laissant de courtes traînées. Canvas 2D net sur Retina, boucle arrêtée hors écran, image fixe si l'utilisateur réduit les animations. Un comportement émergent calculé, sans intelligence artificielle ni interaction.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Liquid comprend 31 effets, dont 6 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Le cadre .fx-0415-root fait 300 px de haut sur toute la largeur et le canvas s'y cale (display: block, 100 % × 100 %). Taille interne = taille affichée × devicePixelRatio, dessin en pixels CSS par setTransform : mesuré à densité 2, 1280 × 600 pour 640 × 300. Un ResizeObserver suit le cadre ; les boids pas encore placés, ou laissés hors du cadre quand il rétrécit, sont replacés au hasard. Hauteur stable après 20 redimensionnements (mesuré dans Chromium 151, Firefox 153 et WebKit 26).
À chaque image, chaque boid regarde les 59 autres. Ceux à moins de 80 px sont ses voisins : il se tourne vers leur centre (cohésion, × 0,003), rapproche sa vitesse de leur vitesse moyenne (alignement, × 0,05) et s'écarte de ceux à moins de 25 px (séparation, × 0,05). Sa vitesse est plafonnée à 3 px par image ; il sort d'un côté et rentre par l'autre. Personne ne commande le groupe : les nuées naissent de ces trois règles locales, c'est ce qu'on appelle un comportement émergent. Le calcul compare chaque paire, soit 3 540 distances par image pour 60 boids.
Chaque boid est un point violet #a855f7 de 3 px de rayon. Le canvas n'est jamais effacé : un voile rgba(10, 10, 15, 0.15) par image estompe les positions précédentes, d'où une traînée d'une quinzaine d'images qui montre la direction de vol. La boucle requestAnimationFrame s'arrête quand un IntersectionObserver voit le canvas sortir de l'écran (mesuré : 0 image par seconde hors écran contre 120 à l'écran) et repart à son retour ; l'essaim reprend alors là où il en était.
Accessibilité
- Mouvement réduit : sous
prefers-reduced-motion: reduce, le script calcule 100 pas sans les montrer (les groupes se forment), en dessine 8 pour de courtes traînées, puis s'arrête : une image fixe de plusieurs nuées. Mesuré dans les trois moteurs : 0 % de pixels changés en 500 ms. - Rôle décoratif : le canvas n'a pas de texte. Si l'essaim illustre un propos (des oiseaux, un essaim d'abeilles, une règle de TP), écrivez ce propos en HTML à côté, comme dans les exemples.
- Mouvement rapide : les boids filent jusqu'à 3 px par image et virent brusquement ; 7 % des pixels changent en 500 ms. Évitez de placer un texte long par-dessus ; ralentissez (
speed > 1.5) pour un fond calme. - Vitesse liée à l'écran : tout est compté par image ; à 120 Hz, l'essaim va deux fois plus vite qu'à 60 Hz.
Compatibilité navigateur
Canvas 2D + 4,1 Ko de JavaScript, aucune dépendance. Mesuré dans Chromium 151, Firefox 153 et WebKit 26 : mêmes nuées, taille interne doublée à densité 2, hauteur stable, boucle à l'arrêt hors écran, image fixe sous mouvement réduit. Coût mesuré par image à 640 × 300 : 0,1 ms de JavaScript dans Chromium et 1 ms dans Firefox pour 60 boids ; 0,7 ms et 2 ms pour 300 boids (25 fois plus de paires). ResizeObserver existe depuis Chrome 64, Firefox 69 et Safari 13.1.
Sans JavaScript, le cadre reste noir bleuté, sans boids. Sans IntersectionObserver, la boucle tourne aussi hors écran ; sans ResizeObserver, le canvas suit le redimensionnement de la fenêtre seulement.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0415-root">
<div class="ai-swarm-container">
<canvas class="ai-swarm-canvas" width="393" height="280"></canvas>
</div>
</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 |
|---|---|---|
Nombre de boids (JS — length: 60) |
60 | Le coût croît avec le carré du nombre : 300 boids, 25 fois plus de paires (mesuré : 0,7 ms par image dans Chromium, 2 ms dans Firefox). Au-delà de 500, découpez le cadre en cases pour ne comparer que les voisins proches. |
Rayons de voisinage (JS — dist < 80 et dist < 25) |
80 px pour voir, 25 px pour s'écarter | 150 px de vue donne de grandes nuées uniques ; 40 px des petits groupes nombreux. Une séparation à 40 px aère les groupes. |
Forces (JS — 0.003, 0.05, 0.05) |
cohésion 0,003, séparation 0,05, alignement 0,05 | Alignement à 0,15 : vols très ordonnés. Séparation à 0 : les boids s'empilent en boules serrées. Cohésion à 0,01 : les groupes se resserrent et tournoient. |
Vitesse maximale (JS — speed > 3 et les deux * 3) |
3 px par image | 1,5 pour un fond calme ; changez les trois valeurs ensemble. |
Traînées (JS — rgba(10, 10, 15, 0.15)) |
voile de 15 % par image | 0,05 allonge les traînées, 1 les supprime (points nets). Gardez la couleur du fond de .fx-0415-root. |
Points (JS — '#a855f7' et arc(…, 3, …)) |
violet, 3 px de rayon | Des points sombres de 2 px sur un ciel clair donnent des étourneaux ; dorés, des abeilles. |
Hauteur (CSS — .fx-0415-root { height: 300px }) |
300 px | Le canvas suit ; un cadre plus petit concentre l'essaim en une seule grappe. |
FAQ
boid.vx *= -1 quand boid.x sort).
