Champ de Vecteurs
Ouvrir le champ de vecteurs. Faites glisser la poignée circulaire ou utilisez les touches fléchées pour déplacer le centre du vortex. Réglez l'intensité du tourbillon et régénérez de nouvelles phases d'onde.
L’aperçu sur l’accueil et la page dédiée démarrent automatiquement, même si le système demande de réduire les animations. L’aperçu ne comporte pas de bouton de lecture ; la page dédiée permet de mettre en pause et de reprendre. L’animation se suspend lorsque le champ sort de la zone visible ou que l’onglet est masqué.
Formulation Mathématique du Champ
Le déplacement des particules est régi par un champ analytique combinant un écoulement laminaire horizontal, une composante sinusoïdale et un vortex centré en :
const field = (x, y) => {
const {source: s, strength: k, seed: currentSeed} = settings.current;
const dx = x - s.x;
const dy = y - s.y;
const radius = dx * dx + dy * dy + 0.025;
const vx = 0.8 - dy * 0.22 * k / radius;
const vy = 0.13 * Math.sin(x * 9 + currentSeed % 19) + dx * 0.22 * k / radius;
const length = Math.hypot(vx, vy) || 1;
return {x: vx / length * 0.009, y: vy / length * 0.009};
};
Optimisation par Tampon Graphique Hors-Écran
Pour éviter 15 500 calculs de vecteurs à chaque trame, les 62 lignes de courant sont intégrées une seule fois dans un tampon p5.Graphics (paper) :
p.draw = () => {
if (!paper || disposed) return;
if (dirty) trace();
p.image(paper, 0, 0); // Copie instantanée de l'image de fond
p.noStroke(); p.fill(ink);
paths.forEach((points, index) => {
const point = points[(frame + index * 17) % points.length];
p.circle(point.x, point.y, index % 6 === 0 ? 3 : 1.6);
});
if (settings.current.playing) frame++;
};
Les particules animées avancent le long des tableaux de coordonnées précalculées, préservant une fluidité constante à 60 FPS.