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 5 : Bruit et generation procedurale Aperçu gratuit

5.1 random() vs noise()

random() vs noise()

// random() - valeurs aleatoires brutes
for (let i = 0; i < width; i++) {
  point(i, random(height));
}
// noise() - valeurs fluides et organiques
for (let i = 0; i < width; i++) {
  point(i, noise(i * 0.01) * height);
}

Difference

  • random() - bruit blanc
  • noise() - bruit de Perlin : valeurs lisses
  • noise(x, y, z) - jusqua 3 dimensions
  • Parfait pour terrains, nuages, textures
Ceci est un aperçu gratuit.
Voir la formation complète