Comment faire une boucle avec un bruit de Perlin

Dans cet article, je vais t’expliquer ce qu’est un bruit de Perlin, à quoi il sert et comment réussir à faire une boucle sur un bruit de Perlin. Je te montrerai comment le faire avec la librairie Three.js. et p5.js

Pour faire nos boucles de bruit de Perlin, je te propose d’écouter ce mix de (+)earth

Je me suis très largement inspiré de cet article pour comprendre et écrire mon article.

Qu’est-ce qu’un bruit de Perlin

Avant de plonger dans la création de boucles, il est important de comprendre ce qu’est le bruit de Perlin. Développé par Ken Perlin en 1983, c’est une fonction de bruit qui génère des textures lisses et naturelles. Il est souvent utilisé pour créer des paysages, des nuages, des textures et d’autres éléments visuels qui nécessitent un aspect organique.

Voici une œuvre dans laquelle je suppose que l’artiste Ock1tess a utilisée des bruits de Perlin :

Comment utiliser un bruit de Perlin

Pour créer une boucle avec un bruit de Perlin, tu auras besoin d’un langage de programmation et d’une bibliothèque supportant cette fonctionnalité. Des langages populaires incluent Python, JavaScript et C++. Il existe également des bibliothèques spécifiques, comme p5.js, qui simplifient grandement le travail avec le bruit de Perlin.

Des logiciels comme Blender permettent aussi d’utiliser et de générer du bruit de Perlin comme l’indique cette doc. On y découvre que Blender gère d’ailleurs le bruit en 4D et au-delà en contrepartie d’un temps de rendu plus long.

La fonction noise intégrée dans p5.js gère un bruit en 3D, mais pas au-delà. Pour aller en 4D et pouvoir ajouter le temps pour faire notre boucle, il faut utiliser une lib externe.

Comment boucler un bruit de Perlin, théorie en image

La théorie pour boucler un bruit de Perlin c’est de passer le bruit dans un cercle en utilisant de coordonnées polaires. Alors là, je répète ce que j’ai lu, car je suis loin d’être un mathématicien… En tout cas en regardant le GIF suivant, j’espère que tu comprendras le principe.

Ajouté à cela, il faut aussi savoir que la fonction de noise de p5.js se lance avec une graine (seed) à chaque chargement du script. On peut si on veut imposer une graine. La fonction renvoie ensuite des valeurs entre 0 et 1 centrées sur 0.5.

Un autre article intéressant pour comprendre la génération de nombre aléatoire est ce billet de blog de l’artiste anglaise Amy Goodchild, dans lequel elle explique ce qu’est la génération de nombres pseudo aléatoires.

Préparer l’environnement de travail : l’extension p5.vscode

Pour quelqu’un d’habitué à la complétion, utiliser processing (version java) dans l’environnement proposé, c’est un peu revenir en arrière. Il faut apprendre l’api, connaître les paramètres, constamment, avoir une page de doc ouverte, car l’outil ne donne pas de complétion et pour déboguer, je n’en parle pas… Cela ne me plaisait pas. Je suis donc passé sur p5.js sa version JavaScript. J’ai d’abord voulu utiliser le module JavaScript via npm i p5 mais là aussi, ce n’était pas du tout pratique de l’adapter pour l’utiliser dans d’autres projets. Pour faire vite, pour l’utiliser vraiment en mode module, il faut tout préfixer par p5 et donc les codes qu’on trouve sur le net ne sont pas utilisables tel quel.

Bref, pour utiliser p5.js facilement et dans le confort, j’ai installé l’extension p5.vscode. Elle permet de :

• créer un projet p5 : Ctrl + P puis taper p5 > créer
• avoir la complétion (configurée dans jsconfig.json)
• lancer un server html > via le bouton en bas à droit de la fenêtre VSCode > Go Live

Et c’est franchement beaucoup plus sympa et confort de coder dans ces conditions.

L’extension :

Le bouton Go Live qui lance un serveur local, hyper pratique 🙂

Créer le sketch de bruit de perlin

Maintenant qu’on a un environnement sain et agréable pour travailler, on peut coder.

Pour faire le premier gif de présentation de la technique (où on voit un rond qui parcourt une courbe de bruit de Perlin), j’ai testé le code fourni par Jesse Andrews (son adaptation p5.js du code Processing de Golan Levin). J’ai activé (décommenté) l’enregistrement d’images, mais comme on est dans un navigateur, il fallait valider l’enregistrement de chaque image… Ce qui n’est franchement pas génial quand on sait qu’on va devoir enregistrer 150 images et qu’en plus après il nous faudra lancer une commande pour générer un gif.

C’est là que p5.capture arrive à la rescousse ! Il va tout nous faire dans le navigateur et on n’aura qu’un seul fichier à sauver à la fin 🙂 Ouf, on se sauvegarde un peu de temps et on ménage notre taux de clic.

On peut aussi utiliser ccapture, une autre librairie d’enregistrement du canva.

Fabriquer le gif

Télécharger gisicle

Dézipper puis mettre le répertoire où tu as l’habitude de mettre tes outils de ce genre, les outils sans installeur windows.

Voilà ce que j’ai fait sur windows : copier-coller le répertoire dans c:/Dev/Tools, puis j’ai ajouté C:\Dev\Tools\gifsicle-1.92 au Path

PATH=%PATH%;C:/nouveau/chemin;

commande gifsicle pour convertir en gif tout un répertoire d’image, la commande suivante est lancée depuis le répertoire qui contient les images (cd c:/chemin/mon-rep-avec-mes-images)

gifsicle --delay=2 --loop --optimize *.gif > perlin-1.gif

on peut aussi faire le gif avec ffmpeg, (je n’ai pas réussi à donner des gif à ffmpeg donc il faut lui donner des png)

ffmpeg -f image2 -framerate 25 -i fr%03d.png -loop 0 perlin-4.gif

Comme j’avais des pb de couleur, j’ai demandé à ChatGPT de me trouver une solution et voici sa réponse :

ffmpeg -f image2 -framerate 25 -i ./simplex-21-2/%07d.png -vf "fps=25,palettegen" -y palette.png
ffmpeg -f image2 -framerate 25 -i ./simplex-21-2/%07d.png -i palette.png -filter_complex "fps=25,paletteuse" -loop 0 perlin-21-2.gif

Et pour l’explication : le format gif n’a qu’une palette de 256 couleurs, on crée donc une palette à partir des images dans la première commade puis on l’utilise dans la deuxième. Le résultat est vraiment très bien, au début, je n’avais quasiment pas de couleur.

Le fichier de départ faisait 24 Mo, donc je l’ai ensuite compressé avec ce service en ligne : https://www.iloveimg.com/fr/compresser-image/compresser-gif

Mes images étaient trop grosses, car il doit y avoir un bug dans CCapture et il multiplie par 2 la taille des images par rapport à la taille du canva, résultat avec un canva de 500×500 je me retrouvais avec des images de 1000×1000 et donc des gros GIF. Je ne m’en suis aperçu qu’au moment d’uploader mon GIF pour cet article.

Pour rattraper le coup, j’ai retaillé les images avec imagemagick, (si tu n’as pas cet outil, je te conseille de l’installer) de cette façon :

 magick mogrify -resize 500x500 perlin-16-50/*.png

J’ai retaillé tous les PNG du répertoire perlin-16-50 pour qu’elles fassent 500×500.

Puis, j’ai relancé ma commande de création de GIF (la commande simple pour les GIF pour lesquels je n’avais pas besoin de créer de palette, cf. plus haut).

ffmpeg -f image2 -framerate 25 -i perlin-14-50/%07d.png -loop 0 perlin-14-50.gif

J’ai ainsi divisé par presque 10 la taille de mes gifs 🙂

Amélioration du programme

Finalement, après une bonne nuit de sommeil, j’ai revu mon code, j’ai intégré P5Capture très rapidement et maintenant le code lance l’animation et enregistre la première boucle dans un GIF. Plus besoin de s’embêter à retailler les PNG et à lancer la commande de génération de GIF ! 🙂

Voici le code :

P5Capture.setDefaultOptions({
  format: "gif",
  framerate: 60,
  quality: 0.5,
  width: 500,
});

const totalFrames = 360;
let counter = 0;

// function ease(p) {
//   return 3 * p * p - 2 * p * p * p;
// }

function ease(p, g) {
  if (p < 0.5)
    return 0.5 * Math.pow(2 * p, g);
  else
    return 1 - 0.5 * Math.pow(2 * (1 - p), g);
}

let record = true
let recorded = false

let N = 75;
let n = 100;
let l = 250;
let scl = 0.01;
let r = 0.5;
let noise;

function setup() {
  createCanvas(500, 500);
  noise = new OpenSimplexNoise();
  colorMode(HSB, 360, 100, 100);
  frameRate(50)
}

function draw() {
  let percent = float(counter % totalFrames) / totalFrames;

  background(0);
  noStroke();
  strokeWeight(0.1);
  

  for (let i = 0; i < N; i++) {
    let y = map(i, 0, N - 1, 0, height);
    let widthPercentage = map(i, 0, N - 1, 60, 90) / 100;

    let hue = map(i, 0, N - 1, 180, 330);
    stroke(hue, 100, 100);

    
    beginShape();
    for (let j = 0; j < n; j++) {
      
      let x = map(j, 0, n - 1, width * (1 - widthPercentage) / 2, width * (1 + widthPercentage) / 2);

      let n2 = noise.noise3D(100 * y + scl * x, 10 + r * cos(TWO_PI * (j / n) + 0.05 * i + percent * TWO_PI), 10 + r * sin(TWO_PI * (j / n) + 0.05 * i + percent * TWO_PI))
      strokeWeight(map(n2, -1, 1, 0, 5.7));

      let intensity = ease(constrain(map(dist(x, y, width / 2, height / 2), 0, 0.5 * width, 1, 0), 0, 1), 2.0);
      let yy = y + intensity * l * n2;
      vertex(x, yy);
    }
    endShape();
  }

  // enregistrement P5Capture
  if(frameCount < totalFrames && !recorded) {
    const capture = P5Capture.getInstance();
    capture.start({
      format: "gif",
      duration: 360,
      frameRate: 60,
    });
  }
  if(frameCount >= totalFrames) {
    recorded = true
  }


  counter++;
}

et le code HTML :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Sketch</title>

    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="libraries/p5.min.js"></script>    
    <script src="libraries/OpenSimplexNoise.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/p5.capture.umd.min.js"></script>
    <script src="sketch.js"></script>
  </head>

  <body>
  </body>
</html>

Quelques GIFs réalisés pour la création de l’article :

Pour terminer, je me suis amusé à demander à Midjourney quelle était sa vision d’un bruit de Perlin et j’ai eu des résultats très intéressants, pistes pour des programmes d’art génératif :

Avec le prompt :

photographie réaliste d'un codeur:: créatif qui diffuse du bruit de perlin sur une œuvre digitale abstraite qui flotte dans un cube en verre, dans le style de jeff wall --v 5 --no fluide

À bientôt !