Entrer dans le dessin génératif

p5js, dessin procédural, et le début d’une série sur l’apprentissage du plotter

Présentation du projet

Cette série documente mon apprentissage du dessin génératif et du pen plotting, deux pratiques encore peu documentées en français. Ce premier article revient sur le déclic qui a tout lancé, avant même l’arrivée d’une machine : la découverte, en convention, que des mécanismes très simples pouvaient produire des tracés d’une grande finesse, et donner l’envie immédiate de comprendre comment y arriver par le code.

Crédit : tylt

Le déclic : la convention ArtToPlay à Nantes

C’est en découvrant le travail de Swansheep lors de la convention ArtToPlay à Nantes que tout a commencé. Venant de l’impression 3D et de la découpe laser, le langage machine ne m’était pas étranger : le GCode, je connaissais déjà. Mais voir une machine aussi simple en apparence produire des tracés aussi soignés a été une révélation. N’étant pas particulièrement doué en dessin à la main, j’y ai vu le parfait terrain de jeu : un moyen de créer des pièces visuellement abouties en sachant coder plutôt qu’en sachant dessiner.

Premiers pas avec p5js

Avant même de penser au plotter, je me suis mis à coder. p5js s’est imposé naturellement : une librairie JavaScript pensée pour le dessin procédural, construite autour de deux fonctions centrales, setup() pour l’initialisation et draw() pour la boucle de rendu. Cette logique m’était déjà familière : elle rappelle directement l’approche itérative et paramétrique de la modélisation 3D, où l’on décrit des règles plutôt qu’une forme figée.

            
                
                
                
            
                            sketch.js
                                        JavaScript
                    

                            1
2
3
4
5
6
7
8

                        function setup() {
  createCanvas(800, 800);
}

function draw() {
  background(255);
  ellipse(400, 400, 100, 100);
}
        

Une fois cette base posée, l’étape suivante consiste à remplacer une forme unique par une grille générée. C’est le principe derrière mon tout premier sketch : calculer un espacement à partir du nombre de colonnes et de lignes, puis placer un cercle de taille aléatoire à chaque intersection.

            
                
                
                
            
                            sketch.js
                                        JavaScript
                    

                            1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

                        function draw() {
  background(255);
  let cols = 10;
  let rows = 10;
  let spacing = width / cols;

  for (let i = 0; i < cols; i++) {
    for (let j = 0; j < rows; j++) {
      let x = i * spacing + spacing / 2;
      let y = j * spacing + spacing / 2;
      let taille = random(spacing * 0.3, spacing * 0.8);
      noFill();
      ellipse(x, y, taille, taille);
    }
  }
}
        

Ce sketch m’a aussi servi de terrain d’apprentissage pour des notions que je n’avais jamais eu besoin de manipuler en développement web classique : l’interpolation (lerp) pour faire varier une taille dans le temps, les fonctions d’easing (ici une courbe cubic ease-in-out) pour rendre un mouvement moins mécanique, ou encore la gestion d’un état par objet, chaque cercle mémorisant son propre temps de cycle pour ne pas tous grandir et rétrécir de façon synchronisée. Un exemple simplifié de cette logique d’animation :

            
                
                
                
            
                            sketch.js
                                        JavaScript
                    

                            1
2
3
4
5
6
7
8

                        function easeInOutCubic(t) {
  return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
}

// Dans la boucle sur chaque cercle :
let t = progression < 0.5 ? progression * 2 : (1 - progression) * 2;
let easedT = easeInOutCubic(t);
let taille = lerp(tailleInitiale, tailleFinale, easedT);
        

Ce sont des bases simples, mais elles ont posé toute une méthode de travail : décomposer une composition en règles paramétrables, puis laisser le hasard contrôlé (le fameux controlled randomness du dessin génératif) faire le reste.

Grille procédurale (colonnes/lignes calculées à partir de valeurs aléatoires)
Cercles de tailles variables répartis sur deux couches décalées
Palette de couleurs générée dynamiquement à chaque régénération
Animation par interpolation et easing, avec un état indépendant par élément
Séparation de la configuration (dimensions, marges) dans un fichier dédié pour garder le sketch réutilisable

Crédit : tylt

Premiers essais sur une Cricut, avant le vrai plotter

Contrairement à ce qu’on pourrait imaginer, l’ordre réel a été inversé : c’est en voyant une machine tracer que l’envie de coder est née, pas l’inverse. Mes tout premiers essais de plotting se sont faits sur une Cricut, un outil pensé pour la découpe et le loisir créatif plutôt que pour le dessin génératif, mais qui a suffi à me montrer le potentiel de la chose. C’est en voyant ce que ça pouvait donner que je suis parti à la recherche d’un vrai plotter dédié, pendant que j’écrivais en parallèle mes premiers sketches p5js. Le code et l’objectif physique se sont construits ensemble dès le départ.

Résultat

Ce premier article pose les bases de la série : le déclic, l’arrivée dans p5js, et les toutes premières compositions procédurales encore pensées pour l’écran. La suite se penchera sur le vrai basculement : comment penser un dessin non plus pour un pixel qui se remplit, mais pour un stylo qui trace une ligne, et sur le choix et le montage du plotter lui-même.