Ce guide détaille le fonctionnement du script d'animation des équations de Maxwell, réalisé avec p5.js. Il couvre chaque partie du code, de la structure HTML à la logique JavaScript, pour vous permettre de comprendre, modifier et étendre ce projet.
La structure HTML se divise en deux parties principales : l'en-tête () et le corps ().
body : Supprime les marges et cache le dépassement de contenu pour éviter les barres de défilement. Définit la police par défaut.#controls : Positionne les contrôles en bas de l'écran, avec un fond semi-transparent et une disposition flexible pour l'alignement.#speedSlider : Définit la largeur du slider..speed-control : Dispose les boutons de contrôle de la vitesse horizontalement..speed-display : Style pour l'affichage de la vitesse actuelle..multiplier-btn : Style pour les boutons de multiplicateur de vitesse avec des effets de survol et d'état actif.#controls : Contient tous les éléments d'interface pour contrôler l'animation.
data-speed qui stocke sa valeur de multiplicateur. pour afficher la vitesse actuelle.
- Script JavaScript : Contient la logique principale de l'animation, utilisant p5.js.
Script JavaScript (p5.js)
Le script JavaScript utilise la bibliothèque p5.js pour créer et animer les champs électriques et magnétiques.
Variables Globales
fieldResolution : Détermine la résolution des champs (distance entre les vecteurs).electricField : Tableau stockant les données pour chaque vecteur du champ électrique (position et angle).magneticField : Tableau stockant les données pour chaque vecteur du champ magnétique (position et angle).time : Une variable pour suivre le temps, utilisée pour l'animation.speedMultiplier : Le multiplicateur de vitesse appliqué à l'animation.MAX_SPEED : Une constante définissant la vitesse maximale autorisée.
Fonctions Principales
setup()
- Crée le canvas p5.js avec une largeur de
windowWidth et une hauteur de windowHeight - 50 (pour laisser de la place aux contrôles).
- Définit l'épaisseur des lignes.
- Initialise les tableaux
electricField et magneticField en créant des objets pour chaque point du champ, avec des angles aléatoires.
- Configure les écouteurs d'événements pour le slider de vitesse et les boutons de multiplicateur.
- Définit la fonction
updateSpeed(speed) qui met à jour la variable speedMultiplier et l'affichage de la vitesse, et met en évidence le bouton de multiplicateur actif.
draw()
- Calcule la couleur de fond en fonction de la vitesse de l'animation, interpolant entre le bleu et le rouge.
- Efface le canvas avec la couleur de fond calculée.
- Parcourt les tableaux
electricField et magneticField pour dessiner les vecteurs de chaque champ.
- Définit la couleur du trait (rouge pour le champ électrique, cyan pour le champ magnétique).
- Calcule les coordonnées du point final du vecteur en utilisant
cos() et sin() pour déterminer la direction en fonction de l'angle.
- Dessine une ligne représentant le vecteur.
- Met à jour l'angle de chaque vecteur en fonction du temps et du multiplicateur de vitesse, créant ainsi l'animation.
- Incrémente la variable
time.
- Gère l'interaction de la souris :
- Si la souris est pressée et que la position de la souris est dans la zone du canvas, dessine un cercle blanc et modifie les angles des vecteurs du champ à proximité de la souris, créant une perturbation.
windowResized()
- Redimensionne le canvas lorsque la fenêtre est redimensionnée, assurant que l'animation s'adapte à la taille de l'écran.
Interactions et Contrôles
L'animation offre les contrôles suivants :
- Slider de Vitesse : Permet d'ajuster la vitesse de l'animation de manière continue.
- Boutons Multiplicateurs : Permettent de sélectionner une vitesse prédéfinie (x4, x16, x32, x64, x128, x256).
- Interaction à la Souris : En cliquant et en maintenant la souris enfoncée sur le canvas, vous pouvez perturber les champs électriques et magnétiques.
Personnalisation et Extensions
Voici quelques idées pour personnaliser et étendre ce script :
- Modifier les Couleurs : Expérimentez avec différentes couleurs pour les champs électriques et magnétiques, ainsi que pour le fond.
- Modifier la Résolution du Champ : Ajustez la variable
fieldResolution pour changer la densité des vecteurs du champ. Une résolution plus faible (valeur plus élevée) donnera moins de vecteurs mais une meilleure performance.
- Ajouter des Équations de Maxwell : Affichez les équations de Maxwell en texte sur l'écran pour une expérience plus éducative.
- Ajouter des Interactions : Explorez d'autres façons d'interagir avec l'animation, comme en utilisant le clavier ou en ajoutant des objets qui interagissent avec les champs.
- Optimisation des Performances : Pour les animations plus complexes, optimisez le code pour améliorer les performances, par exemple en utilisant des techniques de mise en cache ou en réduisant le nombre de calculs effectués à chaque frame.