Dessiner une interaction.
Maîtriser son coût.
Un essaim de particules suit un champ de vecteurs et réagit au curseur. J’ai développé cette démo pour explorer le rendu graphique dans le navigateur, avec assistance IA.
Ouvrir la démo Flux →
Déplacez le curseur dans ce dessin.Aperçu statique du rendu, mouvement réduit.
Ce que cette réalisation montre
Construire un rendu graphique, relier une entrée utilisateur au dessin et gérer la boucle d’animation.
Ce que vous pouvez vérifier
La démo réagit au curseur. Le composant limite la résolution et arrête le dessin hors écran ou quand l’onglet est masqué.
Le besoin et le choix
Créer un dessin interactif sans ajouter de bibliothèque graphique. Canvas 2D suffit pour des segments et des traînées. Trois fonctions trigonométriques composent le champ ; les positions des particules évoluent dans un tableau réutilisé.
Les décisions dans l’implémentation
- Résolution limitée à un devicePixelRatio de 1,5 pour borner le nombre de pixels à dessiner.
- Boucle active uniquement si le dessin est visible et l’onglet actif.
- Couleurs lues dans les variables du site, pour suivre sa palette.
- Particules réutilisées ; les nouvelles valeurs sont produites à leur renouvellement.
Examiner le code utilisé sur ce site
Cet extrait est lu dans le composant ou la feuille de style au moment du build.
const S = 0.0016;
function angle(x: number, y: number, t: number): number {
return (
Math.sin(x * S * 1.3 + t * 0.34) * 1.5 +
Math.cos(y * S * 1.9 - t * 0.27) * 1.5 +
Math.sin((x + y) * S * 0.7 + t * 0.16) * 1.1
);
}Ce que la démo ne suffit pas à prouver
La cadence dépend du matériel, de la taille du dessin et du navigateur. Cette démo n’est pas un benchmark : je ne revendique pas 60 images par seconde sur tous les appareils. Le champ est un pseudo-bruit trigonométrique, pas un bruit de Perlin.
Pour une réalisation reliée à un besoin concret et à des sources publiques : l’étude de cas Foncier.