> ## Content Index > Fetch the complete content index at: https://www.camilleroux.com/llms.txt > Use this file to discover other available public pages before exploring further. # Faire de l'art avec du code : par où commencer ? (p5.js, Three.js, shaders, SVG...) - URL: https://www.camilleroux.com/faire-de-lart-avec-du-code/ - Published: 2025-06-10T08:11:31.000Z - Updated: 2025-06-10T08:17:53.000Z - Author: Camille Roux - Tags: Podcast *L'art fait avec du code, plus précisément l'*[*art génératif*](https://www.camilleroux.com/art-generatif-de-la-decouverte-a-la-publication-dun-projet-dans-un-studio-prestigieux/)*, 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.* ![](https://www.camilleroux.com/content/images/2025/05/image-37.png) 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*](https://open.spotify.com/show/6jiclVZXQDReFAr3CSVGpe?ref=camilleroux.com)*,* [*Apple Podcast*](https://podcasts.apple.com/fr/podcast/le-podcast-de-camille-roux/id1812419419?ref=camilleroux.com)*,* [*Youtube*](https://www.youtube.com/playlist?list=PLsnohpOYr4UJE3wDdtz7l7oydgI0c2kYO&ref=camilleroux.com) ... --- ## Note de l'épisode ### P5.js : Le Paint du JavaScript [P5.js](https://p5js.org/?ref=camilleroux.com) 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](https://threejs.org/?ref=camilleroux.com) 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. > 100k particules [pic.twitter.com/TLv9KsijYq](https://t.co/TLv9KsijYq?ref=camilleroux.com) > > — Camille Roux - Generative artist (@camillerouxart) [December 13, 2024](https://twitter.com/camillerouxart/status/1867622215602344208?ref%5Fsrc=twsrc%5Etfw&ref=camilleroux.com) ### 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)](https://www.fxhash.xyz/?ref=camilleroux.com) \- Plateforme française sur Tezos, très ouverte et économique pour poster vos projets - [Bright Moments](https://brightmoments.io/?ref=camilleroux.com) \- Galerie curatée avec qui j'ai collaboré - [Art Blocks](https://www.artblocks.io/?ref=camilleroux.com) \- Une référence dans l'écosystème Ethereum - [gm.studio](https://www.gmstudio.art/?ref=camilleroux.com) \- Plateforme curated - [gm.scribe](https://www.gmscribe.art/?ref=camilleroux.com) \- Plateforme curated sur Bitcoin - [Rodeo](https://rodeo.xyz/?ref=camilleroux.com) \- Une sorte d'Instagram du Web3 ### Tutoriels et ressources d'apprentissage - [The Book of Shaders](https://thebookofshaders.com/?lan=fr&ref=camilleroux.com) \- Excellent pour comprendre les shaders - [Kishimisu sur YouTube](https://www.youtube.com/watch?v=f4s1h2YETNY&ref=camilleroux.com) \- Excellent tuto GLSL en vidéo - [Coding Train](https://thecodingtrain.com/?ref=camilleroux.com) \- Chaîne YouTube monumentale couvrant P5 et de nombreux algorithmes - [Blog d'Inigo Quilez](https://iquilezles.org/articles/?ref=camilleroux.com) \- La référence sur les SDF et techniques avancées en GLSL - [Shader Toy](https://www.shadertoy.com/?ref=camilleroux.com) \- Répertoire d'œuvres en GLSL pour s'inspirer - [Cours Three.js de Bruno Simon](https://threejs-journey.com/?ref=camilleroux.com) \- Plus de 120 heures de contenu pour maîtriser Three.js ### Bibliothèques - [P5.js](https://p5js.org/?ref=camilleroux.com) - [brush.p5](https://github.com/acamposuribe/p5.brush?ref=camilleroux.com) \- Simulation de pinceau pour P5 - [Three.js](https://threejs.org/?ref=camilleroux.com) - [D3.js](https://d3js.org/?ref=camilleroux.com) 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 artCarefully curated list of awesome resources to create, learn and, drop generative art - camilleroux/awesome-generative-art![](https://www.camilleroux.com/content/images/icon/pinned-octocat-093da3e6fa40.svg)GitHubcamilleroux![](https://www.camilleroux.com/content/images/thumbnail/awesome-generative-art)](https://github.com/camilleroux/awesome-generative-art?ref=camilleroux.com) 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 !*