Retour
Module 1 : Qu'est-ce que le creative coding ?
1.1 Qu'est-ce que p5.js ? Aperçu
1.2 Votre premier sketch
1.3 Formes et couleurs
Projet : Mon premier canvas anime
Module 2 : Les fondamentaux de l'animation
2.1 La boucle draw() Aperçu
2.2 Variables et mouvement
2.3 Oscillation et sinusoides
Projet : Balle rebondissante
Module 3 : Interactivite et evenements
3.1 Interaction souris Aperçu
3.2 Clavier et touches
3.3 Slider, boutons et DOM
Projet : Dessin interactif
Module 4 : Transformations et matrices
4.1 push() et pop() Aperçu
4.2 Rotation et translation
4.3 Echelle et transformations avancees
4.4 Exemple : Systeme solaire anime
Module 5 : Bruit et generation procedurale
5.1 random() vs noise() Aperçu
5.2 Bruit de Perlin 2D
5.3 Flow fields
Projet : Paysage generatif
Module 6 : Tableaux et systemes de particules
6.1 Tableaux en JavaScript Aperçu
6.2 Systeme de particules
6.3 Forces et physique
Projet : Feu d'artifice
Module 7 : Export et optimisation
7.1 Export PNG et GIF Aperçu
7.2 Performance
7.3 p5.js en mode instance
Module 8 : Projet final - Exposition interactive
8.1 Concevoir l'experience Aperçu
8.2 Coder l'interface
8.3 Integrer les animations
Projet final : Exposition interactive

Le reste de la formation est réservé aux inscrits.

S'inscrire gratuitement
Module 4 : Transformations et matrices Aperçu gratuit

4.1 push() et pop()

push() et pop()

Les transformations utilisent une pile matricielle. push() sauvegarde letat, pop() le restaure.

function draw() {
  background(220);
  push();
  translate(100, 100);
  rotate(QUARTER_PI);
  rect(0, 0, 50, 50);
  pop();
  // Ce rectangle n'est pas affecte
  rect(200, 100, 50, 50);
}

Regle d'or

Toujours associer chaque push() a un pop().

Ceci est un aperçu gratuit.
Voir la formation complète