L'art fait avec du code, plus précisément l'art génératif, suscite de plus en plus d'intérêt. Suite à mes conférences récentes à MixIT, MontpellierJS et DevFest Toulouse, vous avez été nombreuses et nombreux à me demander comment vous lancer dans cette discipline fascinante. Voici donc un guide pour débuter, avec un focus sur les approches les plus utilisées.

Présentation de mon parcours lors de la cérémonie de cloture du DevFest Toulouse 2023

Introduction

L'art génératif, c'est créer des visuels avec du code. Ma spécialité, c'est le "long form" : des œuvres générées par un code JavaScript qui tourne dans un navigateur sans API externe. Chaque collectionneuse ou collectionneur se voit attribuer une pièce unique déterminée par un nombre aléatoire, généralement le numéro de la transaction sur la blockchain.

Retrouvez tous les épisodes du podcast sur Spotify, Apple Podcast, Youtube ...

Note de l'épisode

P5.js : Le Paint du JavaScript

P5.js est idéal pour débuter. Imaginez Paint, mais en JavaScript : pour dessiner un cercle, appelez simplement la méthode circle() avec une position et une taille.

Cette simplicité a ses limites : dégradés compliqués, textures quasi impossibles, performances restreintes. Pourtant, ces contraintes stimulent la créativité ! Des artistes créent des œuvres époustouflantes en dessinant des milliers de petites formes, simulant des textures ou travaillant presque au niveau du pixel.

Pour enrichir P5, explorez des bibliothèques comme brush.p5 qui simule un pinceau, donnant un aspect plus organique à vos créations.

Shaders : La puissance du GLSL

Les shaders offrent une approche différente avec :

  • Le vertex shader pour manipuler les formes 3D
  • Le fragment shader pour dessiner ou modifier les textures

Le paradigme change totalement : votre programme s'exécute sur chaque pixel. Pour dessiner un cercle, calculez la distance entre le pixel actuel et le centre, puis appliquez une condition basée sur le rayon.

Cette approche permet des formes complexes impossibles en P5 : cercles aux bords ondulés, textures élaborées, dégradés précis... tout devient possible en travaillant au niveau du pixel.

Pour approfondir, familiarisez-vous avec les SDF (Signed Distance Functions) qui permettent de manipuler facilement des formes en 2D comme en 3D.

Three.js : La 3D à portée de main

Three.js est une bibliothèque JavaScript pour la 3D, également utile pour initialiser des shaders ou manipuler des particules.

Elle simplifie certaines tâches complexes en code pur. J'ai récemment créé une œuvre manipulant des centaines de milliers de particules en GPGPU, et Three.js m'a considérablement facilité l'initialisation.

Autres approches

L'art par le code ne se limite pas à ces trois technologies. Certaines et certains artistes utilisent :

  • HTML/CSS généré par JavaScript
  • SVG (très populaire pour le "pen plotting")
  • Des bibliothèques de dataviz comme D3.js

Les plateformes comme fx(hash) sont ouvertes à presque toutes les technologies compatibles au niveau des licences.

Les plateformes pour découvrir l'art fait avec du code

Si vous souhaitez explorer ce domaine, plusieurs plateformes vous offrent une vitrine sur cet art :

fx(hash) est probablement la plus accessible et ouverte. Cette plateforme française sur la blockchain Tezos héberge entre 50 000 et 100 000 projets. Son principal avantage ? Publier y coûte très peu et elle est ouverte à toutes et tous, ce qui en fait un excellent terrain de jeu pour débuter. L'interface de publication est intuitive, parfaite pour un premier projet.

Pour une expérience plus curated, explorez Bright Moments, Art Blocks, gm.studio ou gm.scribe. Ces plateformes sélectionnent leurs artistes, ce qui vous garantit une certaine qualité mais rend l'accès plus difficile en tant que créateur ou créatrice débutante.

Rodeo, sorte d'Instagram du Web3, propose également de nombreuses œuvres d'art faites avec du code, même si le code lui-même n'y est pas hébergé.

Instagram reste aussi un bon moyen de découvrir les artistes de ce milieu. Beaucoup y partagent leurs créations et leurs processus créatifs.

Ce qu'il fallait retenir

  • P5.js est idéal pour débuter : API simple, accessible, mais avec des limitations
  • Les shaders (GLSL) offrent une puissance incroyable en travaillant au niveau du pixel
  • Three.js excelle pour la 3D ou pour initialiser des projets complexes
  • Le "long form" consiste en des collections de pièces uniques déterminées par un nombre aléatoire définit lors de l'achat
  • Les contraintes techniques stimulent la créativité
  • Les SDF (Signed Distance Functions) sont des outils mathématiques puissants pour manipuler des formes
  • Le SVG est particulièrement utilisé dans le mouvement "pen plot"

Ressources et liens

Plateformes pour découvrir l'art fait avec du code

  • fx(hash) - Plateforme française sur Tezos, très ouverte et économique pour poster vos projets
  • Bright Moments - Galerie curatée avec qui j'ai collaboré
  • Art Blocks - Une référence dans l'écosystème Ethereum
  • gm.studio - Plateforme curated
  • gm.scribe - Plateforme curated sur Bitcoin
  • Rodeo - Une sorte d'Instagram du Web3

Tutoriels et ressources d'apprentissage

Bibliothèques

J'ai aussi créé cet Awesome list sur l'art génératif si vous voulez aller plus loin

GitHub - camilleroux/awesome-generative-art: Carefully curated list of awesome resources to create, learn and, drop generative art
Carefully curated list of awesome resources to create, learn and, drop generative art - camilleroux/awesome-generative-art
GitHubcamilleroux

Si cet article vous a donné envie de vous lancer, n'hésitez pas à expérimenter et à partager vos créations ! Pourquoi ne pas vous fixer comme objectif de créer une œuvre et de la publier sur fx(hash) ? C'est accessible et ça pourrait être le début d'une belle aventure, comme ce fut le cas pour moi.

Dites-moi en commentaire si vous souhaitez un prochain épisode sur les algorithmes, des pistes pour faire des projets esthétiques, les principaux artistes ou d'autres aspects de l'art fait avec du code !