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 3 : Interactivite et evenements Aperçu gratuit

3.1 Interaction souris

Interaction souris

function draw() {
  background(220);
  fill(mouseX, mouseY, 150);
  ellipse(mouseX, mouseY, 50);
}
function mousePressed() {
  background(random(255), random(255), random(255));
}

Variables d'interaction

  • mouseX, mouseY - position de la souris
  • mouseIsPressed - booleen
  • pmouseX, pmouseY - position precedente
Ceci est un aperçu gratuit.
Voir la formation complète