Aujourd’hui, je vais vous montrer comment créer une animation générative fascinante avec seulement quelques lignes de code JavaScript et la bibliothèque p5.js. Le résultat ? Des lignes colorées qui rebondissent sur l’écran en créant des motifs organiques et hypnotiques. SPOILER: Le résultat est disponible ici

Le concept

L’idée est simple mais puissante : une ligne traverse le canvas en rebondissant contre les bords, laissant une traînée colorée derrière elle. La magie opère grâce à trois éléments clés : le mouvement, la rotation et les couleurs dynamiques.

Décortiquons le code

L’initialisation

Au démarrage, nous créons un canvas de 600×600 pixels et plaçons notre ligne à une position aléatoire avec une vitesse aléatoire. C’est ce qui rend chaque exécution unique : pas deux animations ne seront jamais identiques.

x = random(0, width);
y = random(0, height);
speedX = random(-10, 10);
speedY = random(-10, 10);

La magie des couleurs

La partie la plus intéressante du code, c’est la manière dont les couleurs évoluent. La valeur rouge dépend de la position horizontale de la ligne, tandis que le vert dépend de sa position verticale. Le bleu reste constant à 255, ce qui donne cette teinte cyan caractéristique.

const redVal = map(x, 0, width, 0, 255);
const greenVal = map(y, 0, height, 0, 255);
stroke(redVal, greenVal, 255);

Résultat : quand la ligne se déplace vers la droite et vers le bas, elle devient progressivement plus jaune. Vers la gauche et le haut, elle tire vers le cyan. C’est un arc-en-ciel géométrique qui se dessine en temps réel.

La rotation dynamique

Au lieu de dessiner une simple ligne horizontale, le code la fait pivoter en fonction de sa position verticale. Plus la ligne descend, plus elle tourne. Cette rotation crée des motifs en spirale absolument captivants.

const rotation = map(y, 0, height, 0, TWO_PI);
rotate(rotation);

L’effet de rebond

Le comportement de rebond est géré par une condition simple : quand la ligne atteint un bord horizontal, on inverse sa vitesse. Cependant, j’ai remarqué un petit bug dans le code original : le rebond vertical n’est pas implémenté ! La ligne finira par sortir du canvas par le haut ou le bas.

Ce qui manque

Pour parfaire cette animation, il faudrait ajouter la condition de rebond vertical :

if(y > height || y < 0) {
  speedY = -speedY;
}

Pourquoi c’est fascinant

Ce qui rend cette animation particulièrement intéressante, c’est l’équilibre entre le contrôle et le chaos. Le programmeur définit les règles simples, mais le résultat est complexe, organique et imprévisible. C’est l’essence même de l’art génératif : créer des systèmes qui nous surprennent.

Chaque fois que vous rafraîchissez la page, vous obtenez une nouvelle œuvre d’art. Les motifs qui émergent dépendent des conditions initiales aléatoires, créant une infinité de variations possibles.

Pour aller plus loin

Voici quelques idées pour expérimenter avec ce code :

  • Ajouter plusieurs lignes simultanées avec des vitesses différentes
  • Varier l’épaisseur des traits au fil du temps
  • Utiliser un fond semi-transparent pour créer des effets de traînée
  • Jouer avec d’autres modes de fusion de couleurs
  • Ajouter une interaction avec la souris

L’art génératif est un terrain de jeu infini. Ce petit morceau de code n’est qu’une graine qui peut germer en mille directions différentes.