Bible — Creative Coding : Code comme langage d'auteur

Document de référence public. Histoire complète, fondations techniques, mathématiques créatives, domaines d'application, outils 2026, éthique et IA. Chaque fait est sourcé.

Chapitre 1 — Définition & posture

1.1 Creative coding vs. développement classique

Le creative coding (code créatif) désigne une pratique où l'écriture de code est un moyen d'expression plutôt qu'un outil de résolution de problèmes fonctionnels. L'objectif n'est pas de livrer un logiciel opérationnel — c'est de produire une expérience esthétique, poétique ou conceptuelle.

1.2 Le code comme matériau

En creative coding, le code est un matériau au même titre que la peinture ou le bronze. Il a ses propriétés propres : la boucle (répétition avec variation), l'aléatoire (imprévisibilité contrôlée), le temps (animation, événement), la réponse (interaction, data). Comprendre ces propriétés c'est maîtriser son matériau.

1.3 Posture d'auteur

Le creative coder est à la fois auteur (intention, choix esthétiques), artiste (sensibilité à la forme) et artisan (compétence technique). La distinction avec le "développeur qui fait du beau" tient dans l'intention : l'auteur construit un point de vue, pas une fonctionnalité.

"To misquote Klee, the computer is like a hammer — it amplifies the artist's intentions, for better or worse." — Casey Reas

Chapitre 2 — Histoire complète (chronologique, sourcée)

2.1 Les précurseurs algorithmiques (1960–1968)

1959–1960 — Vera Molnár, l'art combinatoire avant l'ordinateur La peintre franco-hongroise Vera Molnár commence dès 1959 à créer des œuvres à partir de règles combinatoires systématiques — des grilles, des transformations, des variations d'une forme de base — entièrement à la main, avant d'avoir accès à un ordinateur. Elle co-fonde le Groupe de Recherche d'Art Visuel (GRAV) en 1960 à Paris. En 1968, elle accède à un ordinateur IBM à l'Université de Paris et produit ses premières œuvres algorithmiques générées par machine. Elle reste active jusqu'à plus de 90 ans, pionnière reconnue de l'art génératif.

Source : Wikipedia. Vera Molnár. https://en.wikipedia.org/wiki/Vera_Moln%C3%A1r

1963 — Ivan Sutherland, Sketchpad Ivan Sutherland présente à MIT sa thèse de doctorat Sketchpad: A Man-Machine Graphical Communication System. C'est le premier programme d'infographie interactive — dessiner avec un stylet lumineux sur un écran cathodique. Il introduit les concepts d'objets graphiques, de contraintes et d'héritage. Fondation conceptuelle de toute l'interaction graphique à venir.

Sutherland, I. (1963). Sketchpad: A Man-Machine Graphical Communication System. PhD Thesis, MIT. https://en.wikipedia.org/wiki/Sketchpad

Février 1965 — Georg Nees, première exposition d'art informatique Georg Nees, ingénieur chez Siemens, présente à la Galerie d'études de la Hochschule für Gestaltung de Stuttgart les premières œuvres graphiques générées par ordinateur et présentées dans un contexte artistique. C'est généralement considéré comme la première exposition d'art informatique.

Source : Wikipedia. Georg Nees. https://en.wikipedia.org/wiki/Georg_Nees

Novembre 1965 — Frieder Nake Le mathématicien Frieder Nake expose à la Galerie Wendelin Niedlich de Stuttgart. Ses œuvres algorithmiques (matrices, lignes) sont parmi les premières à explorer la tension entre règle mathématique et esthétique visuelle.

Source : Wikipedia. Frieder Nake. https://en.wikipedia.org/wiki/Frieder_Nake

1969–1971 — Manfred Mohr Le peintre et musicien Manfred Mohr produit ses premiers dessins algorithmiques en 1969 à Paris, après avoir découvert le potentiel de l'ordinateur. En 1971, il expose au Musée d'Art Moderne de la Ville de Paris (ARC) — première exposition d'art informatique dans un musée majeur.

Source : Wikipedia. Manfred Mohr. https://en.wikipedia.org/wiki/Manfred_Mohr

2.2 Outils et démocratisation (1985–2001)

1985 — Max (Miller Puckette, IRCAM) Miller Puckette développe Max à l'IRCAM à Paris — un environnement de programmation graphique par flux pour la musique interactive. Max permet à des musiciens non-informaticiens de créer des interactions son/geste en temps réel. En 1997, Cycling '74 publie la version commerciale Max/MSP (Miller Smith Puckette), ajoutant le traitement audio numérique.

Source : Wikipedia. Max (software). https://en.wikipedia.org/wiki/Max_(software)

1996 — Pure Data (Pd) Miller Puckette crée Pure Data (Pd), version open source et libre de Max. Pd devient la référence des artistes sonores, performers et chercheurs qui ne peuvent ou ne veulent pas dépendre d'un logiciel commercial.

Source : Wikipedia. Pure Data. https://en.wikipedia.org/wiki/Pure_Data

~1998–2000 — vvvv L'équipe MESO Digital Interiors (Joreg et al.) à Frankfurt développe vvvv (Quad V), un environnement de programmation visuelle pour la création temps réel d'installations vidéo, de graphiques et d'interactions. Particulièrement influent dans les installations muséales et live.

Source : Wikipedia. Vvvv. https://en.wikipedia.org/wiki/Vvvv_(software)

2000 — TouchDesigner Greg Hermanovic chez Derivative (Toronto) utilise Houdini 4.1 comme base pour construire TouchDesigner en 2000 — un environnement de programmation visuelle node-based orienté temps réel, installations interactives, mapping vidéo, VJing. Devient la référence de l'industrie pour les installations et performances audiovisuelles.

Source : Wikipedia. TouchDesigner. https://en.wikipedia.org/wiki/TouchDesigner

2001 — Processing (Casey Reas & Ben Fry) Processing naît en 2001 au MIT Media Lab (groupe Aesthetics and Computation de John Maeda), créé par Casey Reas et Ben Fry. C'est un langage/environnement basé sur Java, conçu pour faciliter l'accès au code visuel aux non-programmeurs. Sa syntaxe setup() / draw() devient le modèle de référence. Processing Foundation créée en 2012.

Source : Wikipedia. Processing. https://en.wikipedia.org/wiki/Processing_(programming_language) · https://processing.org

2.3 L'ère Web et la démocratisation radicale (2004–2016)

2004 — openFrameworks Zachary Lieberman (avec Theo Watson et Arturo Castro) lance openFrameworks, un toolkit C++ open source pour le creative coding, conçu pour la performance et la flexibilité. Populaire pour les installations temps réel, la vision par ordinateur et les projets haute performance.

Source : https://openframeworks.cc · Wikipedia. openFrameworks. https://en.wikipedia.org/wiki/OpenFrameworks

~2010 — Cinder The Barbarian Group développe Cinder, un toolkit C++ open source similaire à openFrameworks, orienté haute performance et visuellement ambitieux. Adopté par des studios de design créatif.

Source : https://libcinder.org

2013 — p5.js (Lauren Lee McCarthy) Lauren Lee McCarthy crée p5.js en 2013, port de Processing en JavaScript natif. L'idée : les valeurs de Processing (accessibilité, sketchbook) dans le navigateur, sans installation. p5.js devient l'outil le plus utilisé pour enseigner le creative coding dans le monde. En 2022, la direction passe à Qianqian Ye.

Source : Wikipedia. p5.js. https://en.wikipedia.org/wiki/P5.js · https://p5js.org

2013 — Shadertoy Pol Jeremias et Inigo Quilez lancent Shadertoy (live : février 2013), une plateforme web permettant d'écrire, partager et visualiser des shaders GLSL directement dans le navigateur. Elle devient le point de référence mondial pour la communauté des shaders et la démoscène web.

Source : Wikipedia. Shadertoy. https://en.wikipedia.org/wiki/Shadertoy · https://www.shadertoy.com

2.4 Art génératif contemporain et NFT (2020–2026)

Milieu des années 1980 — La demoscene La demoscene émerge dans les années 1980 de la culture des "cracktros" — des intros animées attachées aux logiciels piratés. Des groupes de programmeurs (en Scandinavie, Europe de l'Est, Allemagne) commencent à créer des animations temps réel optimisées en taille (le défi : 64 ko, 4 ko, 256 octets). La demoscene établit les standards de la programmation graphique temps réel (shaders, optimisation, synchronisation musique).

Source : Wikipedia. Demoscene. https://en.wikipedia.org/wiki/Demoscene

2020 — Art Blocks (Erick Calderon / Snowfro) Erick "Snowfro" Calderon lance Art Blocks sur la blockchain Ethereum en 2020 — une plateforme où des artistes déploient des scripts de génération algorithmique, et chaque achat génère une œuvre unique. Les œuvres de Chromie Squiggle (Snowfro lui-même), Ringers (Dmitri Cherniak) et Fidenza (Tyler Hobbs) deviennent emblématiques du mouvement.

Source : Wikipedia. Generative art (cryptocurrency).

2021 — fxhash (Tezos) fxhash est lancé en octobre/novembre 2021 sur la blockchain Tezos — alternative plus accessible et décentralisée à Art Blocks, avec des frais moindres. Il accélère la production d'art génératif on-chain, en particulier en dehors du marché Ethereum.

Source : Wikipedia. Generative art (cryptocurrency).

2021 — Tyler Hobbs, Fidenza Tyler Hobbs publie Fidenza sur Art Blocks en 2021. Fidenza utilise un algorithme de flux de turbulence pour générer 999 œuvres aux compositions organiques distinctives. Elle devient l'une des œuvres d'art génératif les plus reconnues et les plus étudiées.

Source : Wikipedia. Generative art (cryptocurrency). https://tylerxhobbs.com

Chapitre 3 — Fondations techniques

3.1 La boucle de dessin : setup/draw

Tout programme de creative coding repose sur deux fonctions fondamentales :

`javascript // p5.js — structure canonique function setup() { createCanvas(800, 600); // s'exécute une seule fois background(0); }

function draw() { // s'exécute en boucle (60 fois/sec par défaut) // ici : tout le dessin, l'animation, les interactions } `

setup() : initialisation (taille du canvas, arrière-plan, paramètres). draw() : boucle de rendu — chaque appel = une frame.

3.2 Coordonnées

Le système de coordonnées du canvas est inversé par rapport au plan mathématique standard :

• Origine (0, 0) en haut à gauche
• Axe x : vers la droite
• Axe y : vers le bas (attention : y = 0 en haut, y = height en bas)

3.3 Couleur

p5.js gère la couleur en RGB (0–255) ou HSB (Hue 0–360, Saturation 0–100, Brightness 0–100).

javascript colorMode(HSB, 360, 100, 100, 100); // HSB avec alpha fill(45, 80, 95); // teinte chaude, saturée stroke(0, 0, 0, 50); // contour noir semi-transparent

Le mode HSB est souvent plus intuitif pour animer la couleur (changer la teinte en bouclant).

3.4 Aléatoire vs. bruit de Perlin

Aléatoire brut (random()) : valeurs indépendantes, "sautées". Idéal pour placer des éléments sans lien.

Bruit de Perlin (noise()) : valeurs continues et lisses. Les valeurs voisines sont proches. Idéal pour simuler du naturel (vent, terrain, mouvement organique).

`javascript // random : chaque appel = valeur indépendante let x = random(0, width);

// noise : avancer dans l'espace du bruit = variation continue let t = frameCount 0.01; let x = noise(t) width; // mouvement fluide let y = noise(t + 100) * height; // offset 100 pour y indépendant de x `

Perlin, K. (1985). An Image Synthesizer. SIGGRAPH '85 Proceedings, pp. 287–296. https://doi.org/10.1145/325334.325247

3.5 Transformations

Les transformations (translate, rotate, scale) s'appliquent à tout ce qui est dessiné après, jusqu'à pop() :

javascript push(); // sauvegarde l'état de transformation translate(cx, cy); // déplacer l'origine rotate(angle); // rotation en radians scale(1.2); // facteur d'échelle //... dessin ici... pop(); // restaure l'état précédent

3.6 Temps & animation

frameCount : nombre de frames depuis le démarrage. millis() : millisecondes depuis le démarrage. sin() / cos() : oscillation entre -1 et 1 — base de toute animation cyclique.

javascript // Oscillation : position y qui monte et descend let y = height/2 + sin(frameCount * 0.05) * 50;

Chapitre 4 — Mathématiques créatives

4.1 Trigonométrie

sin() et cos() permettent de placer des points sur un cercle, de créer des oscillations, de générer des courbes organiques.

javascript // Placer N points sur un cercle let n = 12; for (let i = 0; i < n; i++) { let angle = (TWO_PI / n) * i; let x = cx + radius * cos(angle); let y = cy + radius * sin(angle); ellipse(x, y, 8, 8); }

4.2 Champs de vecteurs

Un champ de vecteurs associe à chaque point de l'espace un vecteur direction. On peut utiliser le bruit de Perlin pour générer un champ organique — chaque particule suit la direction locale du champ.

javascript // Direction locale dans un champ de bruit let angle = noise(x * 0.003, y * 0.003, frameCount * 0.0008) * TWO_PI * 2; let v = p5.Vector.fromAngle(angle);

4.3 Fractales et auto-similarité

Les fractales exhibent une auto-similarité à différentes échelles — zoomer révèle la même structure. Exemples : ensemble de Mandelbrot, flocon de Koch, fougère de Barnsley.

Récursivité en p5.js : javascript function branche(x, y, longueur, angle, profondeur) { if (profondeur === 0) return; let x2 = x + cos(angle) * longueur; let y2 = y + sin(angle) * longueur; line(x, y, x2, y2); branche(x2, y2, longueur * 0.67, angle - 0.4, profondeur - 1); branche(x2, y2, longueur * 0.67, angle + 0.4, profondeur - 1); }

4.4 L-systèmes

Introduits par le botaniste Aristid Lindenmayer en 1968, les L-systèmes sont des grammaires formelles de réécriture qui modélisent la croissance des plantes.

Axiome : F Règle : F → F[+F]F[-F]F Iterations : 5

À chaque itération, chaque F est remplacé par la règle. Après 5 itérations, la chaîne résultante est interprétée comme des instructions de dessin (F = avancer, + = tourner à droite, - = tourner à gauche, [ = push, ] = pop).

4.5 Automates cellulaires

Un automate cellulaire est une grille de cellules dont l'état évolue selon des règles locales (état des voisins). Le Jeu de la Vie de Conway (1970) est l'exemple canonique : 4 règles simples génèrent des patterns d'une complexité infinie — gliders, oscillateurs, vaisseaux.

4.6 Physique de particules

Simuler des particules physiques nécessite : position, vitesse, accélération. À chaque frame : vitesse += accélération; position += vitesse; appliquer friction, limites, forces.

javascript class Particle { constructor(x, y) { this.pos = createVector(x, y); this.vel = p5.Vector.random2D().mult(2); this.acc = createVector(0, 0.1); // gravité } update() { this.vel.add(this.acc); this.vel.mult(0.98); // friction this.pos.add(this.vel); } }

Chapitre 5 — Domaines d'application

5.1 Art génératif

L'art génératif utilise des systèmes autonomes (algorithmes, règles, aléatoire) pour générer des œuvres. L'artiste définit le système, pas l'œuvre. Chaque génération produit une variation.

5.2 Data Art

Le data art transforme des données en formes visuelles avec une intention esthétique et narrative, au-delà de la simple information. L'œuvre DATA RUG de Kamel Ghabte est un tapis génératif où des données d'open data marocain deviennent motif textile.

→ Mini-cours existant : Data Art : donner une forme à l'invisible

5.3 Typographie générative

Animer, déformer, fragmenter le texte selon des règles algorithmiques — la lettre devient forme en mouvement. Le calligraphe et l'algorithme partagent le même souci du trait.

→ Mini-cours existant : Typographie Arabe en Mouvement

5.4 Motifs et ornement algorithmique

Les géométries traditionnelles (zellige marocain, motifs amazighs, tessellations islamiques) se prêtent naturellement à la génération algorithmique — leurs règles de symétrie et de répétition sont déjà du code.

→ Mini-cours existant : Motifs Amazighs Génératifs → Masterclass : Masterclass Zellige

5.5 Audio-réactif

L'audio-réactif transforme en temps réel un signal audio (amplitude, fréquences FFT) en paramètres visuels. Les visuels "dansent" avec la musique.

javascript // p5.js avec p5.sound let fft = new p5.FFT(); //... function draw() { let spectrum = fft.analyze(); for (let i = 0; i < spectrum.length; i++) { let h = map(spectrum[i], 0, 255, 0, height); rect(i * 2, height - h, 2, h); } }

5.6 Temps réel et installation

Les installations interactives déclenchent des comportements visuels/sonores en réponse à des capteurs (présence, geste, voix). TouchDesigner est la référence technique pour les installations de grande échelle.

5.7 Shaders GLSL

Les shaders sont des programmes exécutés directement sur le GPU — infiniment plus rapides que le CPU pour les opérations visuelles parallèles. Le fragment shader calcule la couleur de chaque pixel indépendamment et en parallèle.

glsl // Fragment shader GLSL minimal void main() { vec2 uv = gl_FragCoord.xy / u_resolution; vec3 color = vec3(uv.x, uv.y, 0.5 + 0.5 * sin(u_time)); gl_FragColor = vec4(color, 1.0); }

5.8 Pont AR/VR

Le creative coding fournit les fondations techniques aux expériences AR et VR : shaders pour les matériaux, physique de particules pour les effets, génération procédurale pour les environnements.

→ Voir Bible AR et Bible VR

Chapitre 6 — Outils & écosystème 2026

6.1 Environnements généralistes

6.2 Environnements node-based (temps réel)

6.3 Shaders et GPU

6.4 Communautés & galeries

Chapitre 7 — Du sketch à l'œuvre exposée

7.1 Performance et résolution

Un sketch p5.js tourne à 60 fps sur un laptop standard pour des compositions simples. Au-delà de ~50 000 objets dessinés par frame, des optimisations sont nécessaires :

• Utiliser des images/textures plutôt que de redessiner à chaque frame
• createGraphics() : buffer hors-écran pour les parties statiques
• Shaders GLSL pour les effets visuels parallèles
• WebWorkers pour les calculs lourds hors du thread UI

Export haute résolution : javascript // p5.js : sauvegarder une image haute résolution pixelDensity(3); // 3× la résolution d'écran saveCanvas('composition', 'png');

7.2 Scénographie

Pour une installation ou une présentation en exposition :

• Format : quelle taille d'écran ? Portrait/paysage ? Résolution ?
• Interaction : l'œuvre est-elle interactive (capteur, souris, clavier, micro) ou autonome ?
• Boucle : durée d'un cycle ? Reset automatique ?
• Robustesse : l'œuvre tourne-t-elle sans intervention pendant 8h ?

7.3 Pont AR/VR

Les techniques du creative coding (shaders, particules, génération procédurale) s'intègrent directement dans les pipelines AR (three.js + WebXR) et VR (Unity shaders, TouchDesigner en live).

Chapitre 8 — Éthique & IA

8.1 IA générative et posture d'auteur

L'IA générative (Stable Diffusion, MidJourney, GPT, Claude) est désormais un outil disponible dans le pipeline créatif. La question posée au creative coder est la même qu'avec n'importe quel autre outil : quelle est l'intention ? qui décide ?

L'IA comme outil de génération brute (sans intention) ≠ le creative coding comme pratique d'auteur. L'outil ne fait pas l'art — la décision de ce que l'on fait avec l'output, oui.

8.2 Droits et reproduction

Une œuvre générée algorithmiquement à partir d'un programme original est couverte par le droit d'auteur du programme (dans la plupart des juridictions). L'œuvre "générée par IA" seule (sans contribution créative humaine substantielle) est dans un flou juridique qui évolue rapidement. Se renseigner pour chaque juridiction.

8.3 Reproductibilité et seed

Un programme déterministe avec une seed fixe produit toujours la même œuvre. Publier la seed avec l'œuvre est une forme de transparence (l'acheteur peut vérifier l'unicité et la reproductibilité). C'est le modèle d'Art Blocks.

javascript // p5.js : seed fixe pour reproductibilité randomSeed(42); noiseSeed(42);

8.4 Open source et communauté

Le creative coding est un mouvement profondément open source. p5.js, Processing, openFrameworks, PureData sont libres et maintenus par des communautés. Contribuer — signaler des bugs, documenter, traduire — est une façon de participer à l'écosystème.

Chapitre 9 — Glossaire (42 termes)

Chapitre 9 — Bibliographie complète

Sources primaires

• Perlin, K. (1985). An Image Synthesizer. SIGGRAPH '85, pp. 287–296. https://doi.org/10.1145/325334.325247
• Lindenmayer, A. (1968). Mathematical models for cellular interactions in development. Journal of Theoretical Biology, 18(3), 280–315.
• Sutherland, I. (1963). Sketchpad: A Man-Machine Graphical Communication System. PhD Thesis, MIT.

Sources secondaires & ressources

• Wikipedia. Processing (programming language). https://en.wikipedia.org/wiki/Processing_(programming_language)
• Wikipedia. p5.js. https://en.wikipedia.org/wiki/P5.js
• Wikipedia. openFrameworks. https://en.wikipedia.org/wiki/OpenFrameworks
• Wikipedia. TouchDesigner. https://en.wikipedia.org/wiki/TouchDesigner
• Wikipedia. Vera Molnár. https://en.wikipedia.org/wiki/Vera_Moln%C3%A1r
• Wikipedia. Georg Nees. https://en.wikipedia.org/wiki/Georg_Nees
• Wikipedia. Frieder Nake. https://en.wikipedia.org/wiki/Frieder_Nake
• Wikipedia. Manfred Mohr. https://en.wikipedia.org/wiki/Manfred_Mohr
• Wikipedia. Demoscene. https://en.wikipedia.org/wiki/Demoscene
• Wikipedia. Shadertoy. https://en.wikipedia.org/wiki/Shadertoy
• Wikipedia. Max (software). https://en.wikipedia.org/wiki/Max_(software)
• Wikipedia. Pure Data. https://en.wikipedia.org/wiki/Pure_Data

Ressources pour aller plus loin

• p5.js documentation : https://p5js.org/reference/
• The Nature of Code (Daniel Shiffman) : https://natureofcode.com — simulations physiques, agents, évolution
• The Coding Train (YouTube) : https://www.youtube.com/c/TheCodingTrain — tutoriels p5.js/Processing
• The Book of Shaders (Patricio Gonzalez Vivo & Jen Lowe) : https://thebookofshaders.com — shaders GLSL
• Generative Design (Hartmann, Hochgesang, Klaas, Lazaros) : livre de référence Processing/p5.js
• Form+Code (Casey Reas & Chandler McWilliams) : https://formandcode.com
• OpenProcessing : https://openprocessing.org — galerie de sketches
• Shadertoy : https://shadertoy.com — galerie de shaders

Pont vers la formation

Cette bible est un document de référence public. Pour aller plus loin :

→ Formation Creative Coding — des sketches aux œuvres exposées → Workshop intensif pour écoles supérieures et studios créatifs (1–3 jours) → Prendre rendez-vous — 30 min, gratuit