Du code à l'art : la genèse d'un projet génératif ambitieux - SMALLTALK #3

Matthieu Segret : Bonjour à toutes et à tous. Je suis Matthieu et je suis content de vous accueillir pour ce troisième épisode de SmallTalk. Je suis, comme d'habitude, en compagnie de Camille. Camille, comment ça va ?

Camille Roux : Salut Matthieu, ça va très bien. Je suis ravi de faire ce nouvel épisode avec toi.

Matthieu Segret : Aujourd'hui, on va avoir un épisode un peu particulier. On ne va pas vous parler de plein de petits sujets comme lors des derniers épisodes. On va se concentrer sur un seul sujet : notre plus grosse collaboration d'art génératif, un projet qui nous a passionnés et sur lequel on a énormément appris. On a passé presque un an à travailler dessus. On va vous partager comment on a réussi, sans IA, à générer une texture de papier, une texture d'aquarelle, d'encre de Chine, et comment on a pu ensuite vendre ce projet à une galerie d'art. Tout cela s'inscrit dans l'art génératif. Camille, est-ce que tu veux expliquer rapidement ce qu'est l'art génératif ?

Qu'est-ce que l'art génératif ?

Camille Roux : C'est une discipline que j'ai découverte en 2021. Cela consiste à écrire du code qui tourne dans le navigateur, généralement du JavaScript, qui prend un nombre en entrée (une "seed") et qui génère une image. Cela peut aussi être une animation, de la vidéo, de la 3D ou même un jeu vidéo. On utilise énormément l'aléatoire. L'idée est de créer des collections de quelques centaines de pièces uniques que l'on découvre au moment où elles sont créées.

Matthieu Segret : On a chacun nos raisons d'être tombés dans l'art génératif. Camille, qu'est-ce qui a fait que tu t'y es intéressé et que tu y passes autant de temps aujourd'hui ?

Camille Roux : À la base, je faisais pas mal de musique. En 2021, j'ai voulu apprendre à dessiner, mais j'ai vite réalisé que j'avais envie de dessiner des choses très géométriques. Je suis passé du crayon à Procreate, puis au vectoriel. Finalement, je me suis dit qu'il valait mieux faire ça avec du code. J'ai découvert certaines librairies JavaScript et l'art algorithmique. J'adore ce que je vois car, contrairement aux musées classiques où je pouvais m'ennuyer, ici je peux me projeter, essayer de comprendre comment c'est fait techniquement et si c'est original. C'est un art qui m'a séduit directement. Et toi, Matthieu ?

Matthieu Segret : J'ai toujours adoré avoir des "side projects" à côté de mon boulot principal chez Human Coders pour découvrir de nouvelles technos. Mais j'avais souvent une frustration : c'était difficile de partager ce que je faisais (sur Erlang ou Kubernetes par exemple) avec mes proches. Avec l'art génératif, il y a un côté artistique qui me plaît, même si je n'ai pas de don pour le dessin manuel, et c'est facile à partager. Les gens ne comprennent pas forcément l'algorithme derrière, mais ils peuvent tout de suite dire s'ils aiment ou pas. C'est une interaction très rapide et gratifiante.

La genèse du projet "The Source"

Camille Roux : On peut raconter la genèse du projet. Quelles étaient nos ambitions au départ ?

Matthieu Segret : On faisait chacun des projets en solo que l'on vendait à des collectionneurs sur des plateformes comme fxhash. L'idée était de faire une collaboration plus ambitieuse pour essayer de rentrer dans une galerie d'art "curated", c'est-à-dire une galerie qui sélectionne les artistes à l'entrée.

Camille Roux : Jusque-là, on publiait sur fxhash, qui est un peu le "YouTube de l'art génératif", une plateforme ouverte. On rêvait d'aller sur des plateformes comme Art Blocks ou gm.studio, qui ne publient qu'un projet tous les deux mois. On s'est dit : on s'associe, on bosse comme des fous, on fait le projet ultime et on le propose. À ce moment-là, je faisais des choses très géométriques et mathématiques. Je voulais partir d'un concept mathématique pour y trouver une esthétique.

Matthieu Segret : De mon côté, j'étais fasciné par l'idée de reproduire un côté réaliste avec du code. C'est un défi intéressant car un ordinateur est naturellement précis et régulier. Faire de l'imprécis, de l'irrégulier et de l'organique, c'est difficile. L'aquarelle m'intéressait beaucoup. Je voyais ma copine en faire et j'adorais la texture, la transparence sur le papier, les dégradés. Je voulais que les gens se disent "on dirait presque de la vraie aquarelle", mais avec une structure mathématique qu'on ne pourrait pas faire à la main.

Camille Roux : On a commencé par passer une semaine dans les Pyrénées pour poser les bases. On a décidé de faire des mosaïques, une idée inspirée des tapis ou des carrelages persans.

Matthieu Segret : J'ai une partie de ma famille qui est franco-iranienne et j'ai toujours vu chez eux ces motifs magnifiques.

Camille Roux : On s'est donc lancés : faire des mosaïques avec une texture d'aquarelle. Mais on s'est vite rendu compte qu'on était limités mathématiquement, ou en tout cas avec la technologie qu'on utilisait à l'époque. On tombait sur des pages Wikipédia obscures avec des formules qui ressemblaient à de la chimie pour décrire des patterns géométriques complexes. On n'arrivait pas à les implémenter.

Notre première stack technique : p5.js

Matthieu Segret : Au début, on est partis sur nos connaissances classiques. L'idée est de faire tourner un projet dans un navigateur. On utilisait TypeScript avec Webpack et une librairie appelée p5.js.

Camille Roux : p5.js, c'est un peu le "Paint" du JavaScript. C'est une librairie qui permet de dessiner un carré ou un cercle à des coordonnées précises avec une taille et une couleur données.

Matthieu Segret : Ça n'a l'air de rien, mais si vous dessinez des milliers de cercles avec une légère transparence (alpha) et en décalant un peu les positions, vous obtenez tout de suite des textures sympas. J'avais vu un article de Tyler Hobbs, l'auteur de la célèbre collection "Fidenza", qui expliquait comment approcher une texture d'aquarelle avec p5.js. L'idée est d'utiliser des milliers de petits polygones (des triangles par exemple) avec une grande transparence. C'est la superposition de tous ces éléments qui crée des zones de densité variable et donne cet aspect organique.

Camille Roux : On avait donc notre texture, mais on ne savait toujours pas quoi en faire car on galérait sur les mosaïques. On a essayé de faire des grilles triangulaires, puis des "canaux", des sortes de chemins qui parcourent la page. On a passé des mois là-dessus, à chercher des algos pour que les canaux ne se superposent pas trop.

Matthieu Segret : Il y avait deux problèmes : l'esthétique n'était pas encore parfaite et on avait un gros souci de performance. p5.js utilise le CPU via l'élément Canvas. Quand vous dessinez 100 000 triangles transparents, l'exécution devient très lente. On n'arrivait même pas à atteindre 1 FPS (une image par seconde), donc l'animation était impossible. C'était frustrant.

Le passage aux Fragment Shaders (GLSL)

Camille Roux : À ce moment-là, je participais à des meetups sur le GLSL. C'est le langage des cartes graphiques (GPU). C'était tout nouveau pour moi. Matthieu, tu peux expliquer ce qu'est un fragment shader ?

Matthieu Segret : Pour simplifier, p5.js c'est du JavaScript : vous dites "dessine un cercle ici". Le fragment shader, c'est du code exécuté directement sur la carte graphique. C'est une fonction qui est appelée pour chaque pixel de l'écran en parallèle. En entrée, vous avez les coordonnées X et Y du pixel, et en sortie, vous devez donner sa couleur (RGB). C'est extrêmement performant, mais ça change complètement la manière de coder. Comment dessiner un cercle si on ne peut pas dire "dessine un cercle" ? Il faut créer une fonction mathématique qui dit : "si la distance entre ce pixel et le centre est inférieure au rayon, alors colore-le".

Camille Roux : Le GLSL ressemble à du C. Pour nous qui venons du monde Ruby ou JavaScript avec des langages très haut niveau et du "garbage collection", c'était rude. On est au plus proche du matériel. Le débogage est un enfer : pas de console.log. Si vous faites une erreur, l'écran est noir ou le navigateur plante.

Matthieu Segret : Mais le gain de performance est incroyable. On est passés de plusieurs secondes par image à 60 ou 120 FPS sans problème.

Les SDF et la construction de l'œuvre

Camille Roux : Le pilier de ce projet en GLSL, ce sont les SDF (Signed Distance Functions). Ce sont des fonctions mathématiques qui donnent la distance par rapport à une forme. Si la distance est négative, on est à l'intérieur ; si elle est positive, on est à l'extérieur. Inigo Quilez est la référence absolue sur ce sujet, son blog est une mine d'or. Avec les SDF, on peut faire des opérations booléennes : l'union ou l'intersection de deux formes devient simple mathématiquement.

Matthieu Segret : On a donc recréé une grille avec des SDF. On est repartis sur l'idée de déformer cette grille pour obtenir quelque chose d'organique.

Camille Roux : Pour l'aquarelle, on a utilisé des fonctions de "noise" (bruit). Le shader nous donne la position, et on passe cette position dans une fonction de bruit pour déformer l'espace. C'est ce qu'on appelle du "warping". Avant de donner les coordonnées à notre grille, on les tord un peu. C'est ce qui fait que nos formes deviennent imparfaites, comme si l'encre s'étalait sur le papier.

Matthieu Segret : On a aussi ajouté de l'encre de Chine sur les bords de la grille pour donner du contraste. Et un élément crucial : la texture du papier.

Camille Roux : On a encore utilisé une technique d'Inigo Quilez (et Peter Pasma nous a aussi aidés). On simule des micro-bosses sur la surface avec du bruit, puis on applique une lumière rasante. Cela crée des micro-ombres qui donnent l'illusion du grain du papier. Beaucoup de gens pensaient que c'était un scan de vrai papier, alors que c'était 100 % généré par le code.

Composition et esthétique

Matthieu Segret : Une fois la technique maîtrisée, il a fallu s'occuper de l'artistique. On a oscillé entre deux idées. L'une était très géométrique, façon Mondrian, avec des cases rectilignes remplies d'aquarelle. L'autre était beaucoup plus organique, avec des déformations mathématiques complexes qui ressemblaient à des reflets à la surface de l'eau.

Camille Roux : On manquait un peu d'expérience pour les grilles complexes en GLSL. On a donc choisi la voie organique. Le défi de l'art génératif, c'est d'avoir une collection variée mais cohérente. On utilise des curseurs (paramètres) aléatoires. Si on pousse trop loin, ça devient moche ou ça ressemble à un bug. Si on ne pousse pas assez, toutes les pièces se ressemblent (l'effet "bol de céréales"). On a passé des semaines à régler ces paramètres.

Matthieu Segret : On a passé des soirées entières à tester des combinaisons. On générait des lots de 100 images et on se disait : "celle-là est géniale, mais celle-là est horrible, pourquoi ?". On a dû apprendre à être d'accord sur ce qui était "beau", ce qui est très subjectif.

Camille Roux : Pour les couleurs, c'était aussi un défi. Faire des dégradés en RGB donne souvent du gris au milieu (le "bleu + jaune = gris" au lieu de vert). On a utilisé les "Cosine Palettes", une technique qui permet de créer des palettes très riches et continues avec peu de paramètres. On a même développé une interface sur iPad avec TouchOSC pour modifier les 12 paramètres de couleur en temps réel et voir le résultat instantanément sur le projet.

Animation et finalisation

Matthieu Segret : Comme on avait de super performances grâce aux shaders, on a pu ajouter une animation. L'idée était de montrer l'œuvre en train de se créer, comme un time-lapse d'un peintre. On voit d'abord l'encre de Chine s'écouler, puis les taches d'aquarelle apparaître et s'étaler. C'était très satisfaisant à regarder.

Camille Roux : Avant la vente, il y a eu la phase de débogage. On a utilisé BrowserStack pour tester sur tous les navigateurs et tous les téléphones. Et là, surprise : sur les Samsung S22, il y avait des pixels roses partout. C'était un problème d'overflow sur la carte graphique que certains processeurs géraient mal. Peter Pasma nous a encore sauvés en nous suggérant de "clamper" certaines valeurs.

La vente et gm.studio

Matthieu Segret : On a finalement soumis le projet à gm.studio. Leur particularité, c'est la "blind curation" : le jury de 10 personnes voit le travail mais ne connaît pas l'artiste. Cela permet aux débutants comme nous d'avoir une chance face aux grands noms.

Camille Roux : On a été pris à l'unanimité ! C'était incroyable pour nous. On a passé un mois à préparer le marketing, les visuels et surtout la partie impression, pour que l'aquarelle générée soit aussi belle sur du vrai papier.

Matthieu Segret : La vente, le "drop", a eu lieu en été 2023. Les 118 pièces ont été vendues rapidement. C'était un moment fort. Ce projet nous a énormément appris sur le GLSL, les shaders et la collaboration artistique. On a pu réutiliser tout ce savoir pour notre projet suivant, "The Destination", pour Bright Moments Paris en 2024.

Camille Roux : Si vous voulez vous lancer, je recommande deux ressources géniales : The Book of Shaders de Patricio Gonzalez Vivo et la chaîne YouTube The Coding Train. Vous pouvez aussi essayer l'éditeur en ligne de p5.js ou OpenProcessing. Et n'oubliez pas le "Genuary" en janvier, c'est un excellent exercice quotidien.

Matthieu Segret : On espère que cette plongée dans les coulisses de "The Source" vous a plu. Si vous avez des questions, n'hésitez pas à nous les poser sur le Discord de Human Coders ou en commentaire. On vous dit à bientôt pour un prochain épisode !

Camille Roux : À bientôt ! Merci beaucoup.