Art génératif avec p5.js : guide pour débutants

p5.js est une bibliothèque JavaScript libre qui permet de créer de l’art génératif, des animations interactives et des visualisations dans le navigateur sans rien installer. Avec ce guide, vous apprendrez à ouvrir l’éditeur en ligne, à dessiner vos premières formes, à ajouter du mouvement et à introduire de l’aléatoire — les quatre fondements de l’art génératif.

Qu’est-ce que p5.js et pourquoi l’utiliser pour l’art génératif

p5.js est la réinterprétation en JavaScript de Processing, l’environnement de programmation créative créé en 2001 par Casey Reas et Ben Fry au MIT Media Lab. En 2013, Lauren Lee McCarthy — artiste et enseignante à l’UCLA — a développé p5.js dans l’objectif d’amener les principes de Processing au navigateur web, le rendant accessible sans installation ni configuration d’environnement.

Quatre raisons concrètes de le choisir comme premier environnement d’art génératif :

• Sans installation : l’éditeur officiel fonctionne dans le navigateur sur editor.p5js.org. Le code s’exécute et le résultat apparaît instantanément.
• Documentation accessible en français : la communauté p5.js a traduit une partie de la référence officielle, et il existe du matériel pédagogique produit par la Processing Foundation elle-même.
• Courbe d’entrée basse, plafond élevé : un sketch de base tient en 10 lignes; les mêmes concepts passent à des installations interactives complexes. Tyler Hobbs, l’un des artistes d’art génératif les plus reconnus du circuit NFT et de galerie, a construit sa série Fidenza avec des outils dérivés de Processing.
• Version 2.0 disponible depuis 2025 : p5.js 2.0 — lancé en avril 2025 — ajoute le support complet des polices variables, des shaders en JavaScript, de nouveaux espaces de couleur (LAB, OKLab) et un système unifié d’événements de pointeur.

Configurer l’environnement : éditeur en ligne ou local

Pour commencer, l’éditeur en ligne est l’option la plus directe. Pour des projets plus complexes ou un travail hors ligne, l’installation locale est préférable.

Éditeur en ligne (recommandé pour les débutants) :

1. Aller sur editor.p5js.org.
2. Créer un compte gratuit pour pouvoir sauvegarder les sketches.
3. L’éditeur a deux panneaux : le code à gauche, le résultat visuel à droite. Le bouton Play exécute le sketch.
4. La console inférieure affiche les erreurs et les messages de console.log().

Environnement local :

1. Installer VS Code et l’extension Live Server.
2. Télécharger p5.js depuis p5js.org/download ou utiliser le CDN dans le HTML : <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.3/p5.min.js"></script>.
3. Créer un fichier index.html qui charge la bibliothèque et un fichier sketch.js avec le code.
4. Ouvrir avec Live Server pour voir les changements en temps réel.

Votre premier sketch : lignes, formes et couleurs

Tout sketch p5.js comporte deux fonctions de base : setup(), qui s’exécute une seule fois au démarrage, et draw(), qui s’exécute en boucle. Un sketch minimal fonctionnel :

function setup() {
  createCanvas(600, 400);
  background(20);
}

function draw() {
  fill(255, 100, 50);
  noStroke();
  ellipse(300, 200, 80, 80);
}

Ce code crée un canvas de 600×400 pixels, fond presque noir, et dessine un cercle orange au centre. Les concepts qu’il introduit :

• createCanvas(largeur, hauteur) — définit les dimensions de la zone de dessin.
• background(valeur) — peint le fond. Un nombre entre 0 et 255 est une échelle de gris; trois valeurs sont des composantes RGB.
• fill(r, g, b) — couleur de remplissage pour les formes suivantes.
• noStroke() — supprime le contour des formes.
• ellipse(x, y, largeur, hauteur) — dessine une ellipse centrée en (x, y). Avec largeur = hauteur, le résultat est un cercle.

Le système de coordonnées a l’origine (0,0) dans le coin supérieur gauche, avec x croissant vers la droite et y vers le bas — différent de la géométrie cartésienne classique.

Ajouter du mouvement : la fonction draw() et les animations de base

draw() s’exécute par défaut à 60 images par seconde. Cela transforme toute variable qui change avec le temps en animation. Le schéma le plus direct est d’utiliser la variable intégrée frameCount — qui s’incrémente de 1 à chaque image — comme moteur de changement :

function setup() {
  createCanvas(600, 400);
}

function draw() {
  background(20, 20, 30);
  let x = (frameCount * 2) % width;
  fill(100, 200, 255);
  noStroke();
  ellipse(x, height / 2, 40, 40);
}

Le cercle se déplace horizontalement de gauche à droite et revient au début en atteignant le bord. L’opérateur % (modulo) est fondamental en art génératif pour créer des cycles et éviter que les valeurs sortent de la plage visible.

Une autre variable intégrée utile est mouseX et mouseY, qui retournent la position du curseur en temps réel. Substituer la position fixe du cercle par mouseX, mouseY convertit le sketch en outil de dessin interactif en deux mots.

Aléatoire et art génératif : la fonction random()

La différence entre un sketch animé et l’art génératif au sens strict est généralement l’aléatoire : la capacité du système à produire des résultats différents à chaque exécution sans que l’artiste précise chaque détail. La fonction centrale est random() :

• random(max) — retourne un nombre décimal entre 0 et max.
• random(min, max) — retourne un nombre entre min et max.
• random(tableau) — retourne un élément aléatoire du tableau.

Exemple de système génératif simple — 100 cercles avec position, taille et opacité aléatoires, régénérés à chaque exécution :

function setup() {
  createCanvas(800, 600);
  background(10);
  noLoop();

  for (let i = 0; i < 100; i++) {
    let x = random(width);
    let y = random(height);
    let d = random(5, 60);
    let alpha = random(80, 255);
    fill(180, 100, random(200, 255), alpha);
    noStroke();
    ellipse(x, y, d, d);
  }
}

noLoop() dans setup() arrête la boucle de draw() — le résultat est généré une seule fois. C’est le patron de base de l’art génératif statique : une composition différente à chaque ouverture du sketch.

Pour des compositions reproductibles, randomSeed(nombre) fixe la graine du générateur de nombres pseudoaléatoires. Le même numéro de graine produit toujours la même composition — un mécanisme fondamental pour les séries génératives éditées.

Artistes qui utilisent p5.js

La communauté p5.js inclut des artistes avec des parcours documentés dans des festivals, des galeries et des plateformes d’art numérique :

• Lauren Lee McCarthy — créatrice de p5.js et artiste dont la pratique examine les systèmes de surveillance et d’automatisation. Son oeuvre SOMEONE a reçu le Golden Nica d’Ars Electronica.
• Tyler Hobbs — connu pour sa série Fidenza, construite avec des champs de flux (flow fields) en Processing/p5.js.
• Vera Molnár — pionnière de l’art informatique qui a travaillé avec des algorithmes génératifs depuis les années 1960, longtemps avant p5.js, mais dont la pratique a été directement inspiratrice pour plusieurs générations d’artistes qui utilisent aujourd’hui cet outil.
• Aleksandra Jovanić — artiste qui travaille régulièrement avec p5.js, documentée dans l’exposition Compositions in Code du Museum of the Moving Image (New York).