Kamel Ghabte · Cours · Gratuit

Le bruit de Perlin

Générer du mouvement organique avec noise() en p5.js.

Le concept

Le bruit de Perlin produit des valeurs pseudo-aléatoires cohérentes : deux points proches dans l'espace ont des valeurs proches. Contrairement à random() qui saute, noise() ondule. En p5.js, noise(x) renvoie une valeur entre 0 et 1. En variant x lentement (ex. frameCount*0.01), on obtient un signal organique parfait pour animer des positions, tailles ou couleurs.

Le code

// Perlin noise: organic wave
function setup() { createCanvas(400, 280); }
function draw() {
  background(11, 15, 20);
  stroke(55, 227, 195); noFill(); strokeWeight(2);
  beginShape();
  for (let x = 0; x < width; x += 4) {
    let y = noise(x * 0.008, frameCount * 0.01) * height;
    vertex(x, y);
  }
  endShape();
}

Pour aller plus loin

Explorez les autres cours gratuits sur la page Apprendre, ou réservez un appel pour discuter de votre projet.

Envie d'aller plus loin ?

Réserver un appel découverte →