Organic Canvas : un écosystème vivant sur la page d'accueil

Le point de départ

Le canvas organic existait déjà : une forêt WebGL avec des branches qui poussent, des orbes, du pollen, du mycélium. Mais c’était surtout décoratif. Ce soir l’objectif était simple : rendre ça interactif et vivant.

6 interactions souris

Tout part du curseur. Chaque geste produit un effet différent dans la forêt :

• Double-clic : planter un arbre à l’endroit cliqué, avec un burst de spores
• Clic maintenu : arrosage, des gouttes tombent du curseur et accélèrent la pousse des branches proches
• Molette : rafale de vent qui pousse les pollens, pissenlits et spores ambiantes
• Survol d’un orbe : il pulse plus fort et brille, invitant à cliquer
• Clic droit : éclair sur l’arbre le plus proche, qui carbonise ses branches et libère un burst massif
• Drag : traînée lumineuse de fireflies qui attire les pollens comme un aimant

5 espèces d’arbres

Chaque arbre qui pousse (par pollen ou double-clic) est d’un type aléatoire, avec des branches et des feuilles visuellement distinctes :

• Oak : branches solides classiques, feuilles rondes
• Willow : branches fines très courbées, feuilles en goutte qui pendent
• Coral : branches épaisses courtes en blobs, feuilles en grappe de polypes
• Crystal : segments droits géométriques avec nœuds brillants, feuilles en diamant facetté
• Spiral : longues branches en spirale, feuilles en étoile

Bestioles avec IA

4 types de créatures géométriques peuplent la forêt. Chacune a une machine à états complète :

• Énergie qui baisse avec le temps (faim)
• Chasse : cherche une branche, s’y dirige, la grignote
• Repos : fait la sieste après un bon repas (petits zzz au-dessus)
• Reproduction : quand deux congénères bien nourris se croisent, un bébé apparaît
• Mort : de vieillesse ou de famine, avec fade-out et yeux en X
• Fuite : s’écartent de la souris

Les 4 types : mite (triangle rouge, rapide), beetle (hexagone vert, tank), moth (losange violet, aérien), worm (octogone orange, vorace).

Prédateurs spectraux

Des petits wisps abstraits (3 arcs rotatifs, pas de corps plein) qui chassent les bestioles en spiralant autour d’elles avant de les absorber. Après un repas, ils font la sieste avec des zzz bleutés. Apparaissent par le bord de l’écran quand il y a assez de proies.

La forêt sur tout l’écran

La simulation occupait initialement la moitié droite du hero. On l’a étendue à toute la largeur, avec un dégradé sombre + léger flou derrière le texte hero pour garder la lisibilité.

Les pollens peuvent maintenant voyager sur tout l’écran (plus de mur invisible au milieu), et les arbres gardent une distance minimum de 180px entre eux pour éviter les amas.

Persistance localStorage

L’état complet de la forêt est sauvegardé en localStorage toutes les 15 secondes et à la fermeture de la page. Au rechargement, la forêt reprend exactement là où elle en était : arbres, créatures, prédateurs. Les coordonnées sont normalisées en 0-1 pour survivre aux changements de taille d’écran. Les sauvegardes expirent au bout de 7 jours.

Ce qui reste à explorer

Quelques pistes pour la suite : cycle jour/nuit, saisons, météo automatique, symbiose entre espèces, compteur d’espèces, achievements cachés.