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 2 : Les fondamentaux de l'animation Aperçu gratuit

2.1 La boucle draw()

La boucle draw()

Le coeur de l'animation p5.js est la boucle draw() qui sexecute environ 60 fois par seconde.

let x = 0;
function setup() { createCanvas(400, 200); }
function draw() {
  background(220);
  ellipse(x, height/2, 50);
  x = x + 1;
  if (x > width) x = 0;
}

Concepts

  • frameCount - compteur de frames ecoulees
  • frameRate() - controle la vitesse (defaut: 60)
  • noLoop() - arrete la boucle
  • loop() - redemarre la boucle
Ceci est un aperçu gratuit.
Voir la formation complète