Tutoriel 13 : Utilisation des Bruits de Perlin en p5.js

1. Introduction

Créer des textures et des motifs organiques en utilisant le bruit de Perlin.

2. Configuration de l'environnement

Utilisez le même fichier HTML que dans les tutoriels précédents pour configurer l'environnement :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>p5.js Tutorial</title>
  <!-- Inclusion de la bibliothèque p5.js -->
  <script src="p5.min.js"></script>
</head>
<body>
  <!-- Inclusion du fichier JavaScript contenant notre code p5.js -->
  <script src="sketch.js"></script>
</body>
</html>

Explication :

Ce code crée une structure de base pour une page web avec un fichier HTML.
La balise <script src="p5.min.js"></script> inclut la bibliothèque p5.js dans notre projet.
Le fichier sketch.js contiendra notre code p5.js.

3. Mise en place du canvas et des paramètres

a) Initialisation de la taille du canvas

Exemple :

function setup() {
  createCanvas(400, 400); // Crée un canvas de 400x400 pixels
  background(220); // Remplit le fond avec une couleur gris clair
}

Explication :

createCanvas(400, 400) : Crée un canvas de 400x400 pixels.
background(220) : Remplit le fond du canvas avec une couleur gris clair.

4. Qu'est-ce que le Bruit de Perlin ?

Le bruit de Perlin est une technique inventée par Ken Perlin, utilisée pour générer des textures naturelles et organiques. Contrairement au bruit aléatoire pur (ou bruit blanc), le bruit de Perlin est lissé, ce qui signifie que les valeurs générées changent progressivement, créant ainsi des transitions douces. Cela le rend particulièrement utile pour des applications comme les textures de terrain, les nuages, l'eau, et bien d'autres phénomènes naturels.

5. Utilisation du bruit de Perlin

Nous allons explorer plusieurs exemples pour utiliser le bruit de Perlin et créer des motifs organiques.

Exemple 1 : Texture de Bruit de Perlin

Exemple :

function setup() {
  createCanvas(400, 400);
  background(220);
  loadPixels(); // Charge les pixels du canvas
  for (let x = 0; x < width; x++) {
    for (let y = 0; y < height; y++) {
      let bright = noise(x * 0.01, y * 0.01) * 255;
      set(x, y, color(bright));
    }
  }
  updatePixels(); // Applique les modifications au canvas
}

Explication :

loadPixels() : Charge les pixels du canvas dans un tableau accessible via la propriété pixels.
noise(x * 0.01, y * 0.01) : Génère une valeur de bruit de Perlin entre 0 et 1 pour les coordonnées (x, y). Le facteur 0.01 permet de lisser les valeurs de bruit pour créer une transition douce.
set(x, y, color(bright)) : Définit la couleur du pixel à la position (x, y) en fonction de la valeur de bruit.
updatePixels() : Applique les modifications au canvas.

Exemple 2 : Paysage de Bruit de Perlin

Exemple :

function setup() {
  createCanvas(400, 400);
  background(220);
  noLoop(); // Empêche draw() de boucler en continu
}

function draw() {
  let yoff = 0;
  for (let y = 0; y < height; y++) {
    let xoff = 0;
    for (let x = 0; x < width; x++) {
      let bright = noise(xoff, yoff) * 255;
      stroke(bright);
      point(x, y);
      xoff += 0.01;
    }
    yoff += 0.01;
  }
}

Explication :

noLoop() : Empêche la fonction draw() de boucler en continu, ce qui est utile pour les dessins statiques.
noise(xoff, yoff) : Génère une valeur de bruit de Perlin pour les coordonnées xoff et yoff.
xoff += 0.01 et yoff += 0.01 : Incrémente les décalages pour générer un motif de bruit lissé.

Exemple 3 : Animation de Bruit de Perlin

Exemple :

let xoff = 0;
let yoff = 0;

function setup() {
  createCanvas(400, 400);
  background(220);
}

function draw() {
  background(220, 50); // Ajoute un effet de traînée
  let x = noise(xoff) * width;
  let y = noise(yoff) * height;
  ellipse(x, y, 24, 24);
  xoff += 0.01;
  yoff += 0.01;
}

Explication :

noise(xoff) : Génère une valeur de bruit de Perlin pour animer la position x du cercle.
noise(yoff) : Génère une valeur de bruit de Perlin pour animer la position y du cercle.
background(220, 50) : Ajoute un effet de traînée en dessinant un arrière-plan semi-transparent.

6. Conclusion

Vous avez maintenant appris à utiliser le bruit de Perlin en p5.js pour créer des textures, des paysages et des animations douces. Expérimentez avec ces concepts pour créer des œuvres d'art encore plus variées et complexes.

Retour