GSAP + P5 + WEBGL Mode = Super pouvoir
Utiliser P5.js en mode WebGL avec GSAP (GreenSock Animation Platform) permet de créer des animations 3D interactives et dynamiques sur le web, offrant une fusion puissante de la programmation graphique et de l’animation.
P5.js, avec son mode WebGL, facilite le rendu de graphiques 3D dans le navigateur, permettant aux développeurs de créer des scènes, des formes et des textures complexes.
En intégrant GSAP, une bibliothèque d’animation JavaScript robuste, on peut animer ces éléments 3D de manière fluide et contrôlée.
Cette combinaison est idéale pour des projets web où l’interactivité et l’engagement visuel sont essentiels.
Animation fluide et contrôlable
GSAP est reconnu pour sa performance et sa fluidité dans les animations web. Il permet un contrôle précis sur les animations, comme les délais, la durée, la répétition, et les courbes d’accélération (easings). Dans votre exemple, GSAP est utilisé pour animer les propriétés rx, ry, rz de myTorus et z de mySphere, offrant des animations complexes avec peu d’effort.
Création graphique avancée avec p5.js
p5.js est une bibliothèque JavaScript qui facilite la création de graphiques et d’interactions visuelles. Dans votre exemple, p5.js est utilisé pour dessiner et manipuler des formes 3D (torus et sphere) dans un environnement WebGL. Cela permet de créer des visuels dynamiques et interactifs avec une relative simplicité.
Combinaison de la logique de programmation et de l’animation
En utilisant GSAP avec p5.js, vous pouvez séparer la logique de création graphique (avec p5.js) de la logique d’animation (avec GSAP). Cette séparation des préoccupations rend le code plus organisé, plus facile à maintenir et à étendre.
Expérience utilisateur enrichie
L’utilisation de ces outils en tandem peut grandement améliorer l’expérience utilisateur grâce à des animations attrayantes et des interactions visuelles. Cela peut rendre un site web plus mémorable et améliorer l’engagement des utilisateurs.
En somme, la combinaison de GSAP et p5.js pour le web créatif offre une puissance et une flexibilité considérables pour créer des animations riches et des visuels interactifs, tout en maintenant un code organisé et performant.
Le code
See the Pen Html+GSAP+P5(WEBGL) by Jerome Mercier (@jmercier) on CodePen.0
Le code expliqué
Ce script combine p5.js pour le dessin graphique et GSAP pour les animations. Voici une explication détaillée de ses différentes parties :…
Initialisation des Variables Globales
palette: un tableau vide pour stocker les couleurs utilisées dans le dessin.myTorusetmySphere: objets pour stocker les propriétés des formes 3D (torus et sphère) qui seront dessinées et animées.weth: variables pour stocker la largeur et la hauteur du canvas.he: une variable déclarée mais non utilisée dans le code fourni.
Fonction setup()
- Initialisation du Canvas :
angleMode(DEGREES): définit le mode d’angle pour les rotations en degrés.wethsont définis en fonction de la largeur et de la hauteur de l’élément HTML avec l’ID « canvas ».createCanvas(w, h, WEBGL): crée un canvas WebGL de taillewxh.cnv.parent("canvas"): attache le canvas au conteneur HTML ayant l’ID « canvas ».
- Configuration des Couleurs : Le tableau
paletteest rempli avec des couleurs définies via la fonctioncolor().
Fonction draw()
- Rotation et Fond :
rotateY: fait tourner le canvas sur l’axe Y en fonction du temps écoulé.background(palette[1]): définit la couleur d’arrière-plan du canvas.
- Dessin du Torus :
- Utilise les méthodes
push(),pop()pour isoler les transformations. noStroke(): le torus n’aura pas de contour.fill(palette[4]): définit la couleur de remplissage du torus.rotateX,rotateY,rotateZ: applique des rotations au torus basées sur les propriétés demyTorus.torus(myTorus.t, 15): dessine un torus avec un rayon majeurmyTorus.tet un rayon mineur de 15.
- Utilise les méthodes
- Dessin de la Sphère :
- Similaire à la méthode utilisée pour le torus, mais la sphère est déplacée le long de l’axe Z en fonction de la propriété
mySphere.zet dessinée avecsphere(30).
- Similaire à la méthode utilisée pour le torus, mais la sphère est déplacée le long de l’axe Z en fonction de la propriété
Animation avec GSAP
- Crée une timeline GSAP qui se répète 99 fois avec un délai initial de 2 secondes et un délai de répétition de 0.1 seconde.
- Anime les propriétés
rxdemyTorusetzdemySphereavec des durées et des fonctions d’accélération spécifiques. Par exemple,tl.to(myTorus, {rx: 180, duration: 2, ease: "elastic.out(1,0.3)"})anime la propriétérxdemyTorusà 180 degrés avec une durée de 2 secondes et une courbe d’accélération élastique.
Gestion du Redimensionnement de la Fenêtre
windowResized(): ajuste la taille du canvas lorsque la taille de la fenêtre change, en maintenant le canvas à la taille de son conteneur parent.
Ce code illustre une intégration créative de dessins graphiques 3D (via p5.js) et d’animations fluides (via GSAP), créant ainsi une expérience visuelle interactive et dynamique.