Creative Coding — Niveau 1 : Débutant

Résumé EN (abstract): This beginner creative coding course requires no prior programming experience. Working entirely in the browser with p5.js, students explore shapes, color, loops, randomness, and time to create their first generative compositions. The course builds directly on the three existing mini-courses (Data Art, Amazigh Patterns, Arabic Typography) as entry points and optional extensions. The capstone project is a documented generative sketch inspired by a cultural motif or dataset. Outline: p5.js setup → Shapes & color → Loops & repetition → Randomness & variation → Time & animation → Portfolio project.

Objectifs d'apprentissage

À la fin de ce cours, l'étudiant·e sera capable de :

1. Expliquer (Bloom : remembering/understanding) ce qu'est le creative coding et ce qui le distingue d'un développement applicatif classique.
2. Créer (creating) un sketch p5.js fonctionnel dans le navigateur avec des formes, des couleurs et une composition intentionnelle.
3. Appliquer (applying) des boucles for pour générer des compositions répétitives avec variation.
4. Utiliser (applying) random() et noise() pour introduire des variations contrôlées.
5. Animer (applying) une composition avec frameCount, sin() et les événements souris/clavier.
6. Produire (creating) un projet fil rouge documenté et partageable en ligne.

Avant de commencer — Les mini-cours existants comme portes d'entrée

Trois mini-cours gratuits sont disponibles et constituent des introductions thématiques idéales avant ou pendant ce cours :

• Data Art : donner une forme à l'invisible — transformer des données en motif avec p5.js. À suivre avant ou pendant le Module 4 (aléatoire + variation).
• Motifs Amazighs Génératifs — grilles, symétries, répétition. À suivre avant ou pendant le Module 3 (boucles).
• Typographie Arabe en Mouvement — le texte comme forme animée. À suivre avant ou pendant le Module 5 (animation).

Ces mini-cours sont complémentaires, pas préalables. Vous pouvez les parcourir dans l'ordre que vous souhaitez.

Module 1 — Découvrir p5.js (2h)

Concept

p5.js est un framework JavaScript créé en 2013 par Lauren Lee McCarthy. Il permet de dessiner, animer et interagir dans le navigateur — sans installation, sans serveur, juste un fichier HTML ou l'éditeur en ligne.

Documentation : https://p5js.org/reference/ Éditeur en ligne (recommandé pour démarrer) : https://editor.p5js.org

Deux fonctions, un monde :

`javascript function setup() { createCanvas(600, 400); // crée une surface de 600×400 pixels background(30); // fond gris très foncé (0=noir, 255=blanc) }

function draw() { // s'exécute ~60 fois par seconde ellipse(300, 200, 80, 80); // cercle au centre } `

Système de coordonnées : origine (0,0) en haut à gauche. X vers la droite. Y vers le bas.

Couleurs : par défaut en RGB (0–255). fill(255, 0, 0) = rouge. stroke(0) = contour noir. noStroke() = pas de contour.

Lab 1.1 — Mon premier sketch

Étapes :

1. Ouvrir https://editor.p5js.org (compte gratuit recommandé pour sauvegarder)
2. Remplacer le code existant par :

`javascript function setup() { createCanvas(600, 400); background(30); noLoop(); // ne pas animer pour l'instant }

function draw() { fill(255, 200, 50); noStroke(); ellipse(300, 200, 120, 120); } `

1. Cliquer "Run" ▶
2. Modifier : changer la couleur, la taille, la position
3. Ajouter un second cercle d'une autre couleur

Mini-exercice : Dessiner 3 formes (ellipse, rect, triangle) de couleurs différentes. Chaque forme doit "raconter" quelque chose sur votre palette personnelle.

Module 2 — Formes, couleur, composition (2h)

Concept

Les formes de base en p5.js : javascript ellipse(x, y, w, h); // ellipse centrée en (x,y) rect(x, y, w, h); // rectangle coin supérieur gauche (x,y) rect(x, y, w, h, r); // rectangle avec coins arrondis (rayon r) line(x1, y1, x2, y2); // segment triangle(x1,y1, x2,y2, x3,y3); arc(x, y, w, h, start, stop); // arc entre deux angles (radians) point(x, y); // point

Mode de couleur HSB (plus intuitif pour les artistes) : javascript colorMode(HSB, 360, 100, 100, 100); // H = teinte (0-360), S = saturation (0-100), B = luminosité (0-100), A = alpha (0-100) fill(30, 85, 95); // orange saturé fill(200, 40, 80); // bleu désaturé

Composition : diviser le canvas en zones, utiliser les proportions, penser l'espace négatif.

Lab 2.1 — Composition géométrique

Étapes :

1. Créer un canvas 800×800
2. Définir une palette de 4 couleurs en HSB
3. Composer une scène avec au moins 5 formes différentes, 3 tailles différentes
4. Utiliser noStroke() sur certaines formes et strokeWeight(3) sur d'autres
5. Exporter l'image : saveCanvas('composition', 'png') appelé dans setup()

Mini-exercice : Recréer en p5.js un motif que vous avez dessiné à la main en Lab 1.1. Comparer les deux — qu'est-ce que le code permet que le dessin ne permet pas (et vice-versa) ?

Module 3 — Boucles et répétition (2h)

Concept

La boucle for génère des formes répétées avec une variation contrôlée. C'est l'une des techniques les plus puissantes du creative coding.

`javascript // Grille 10×10 de cercles let colonnes = 10; let lignes = 10; let taille = width / colonnes;

for (let col = 0; col < colonnes; col++) { for (let ligne = 0; ligne < lignes; ligne++) { let x = col taille + taille / 2; let y = ligne taille + taille / 2; fill((col 36) % 360, 80, 90); // teinte varie par colonne ellipse(x, y, taille 0.8, taille * 0.8); } } `

Variation dans la boucle : changer la taille, la couleur, la position en fonction de col et ligne. C'est la différence entre une grille mécanique et une composition avec structure.

Lien mini-cours : Le cours Motifs Amazighs Génératifs approfondit les grilles et symétries — excellent à parcourir maintenant.

Lab 3.1 — Grille avec variation

Étapes :

1. Créer une grille 8×8 de formes géométriques
2. Faire varier 2 propriétés selon la position dans la grille (ex. : taille diminue vers le bas, teinte varie de gauche à droite)
3. Ajouter rectMode(CENTER) pour centrer les rectangles
4. Expérimenter : que se passe-t-il si on multiplie les indices par des fonctions (sin, cos) ?

javascript // Taille modulée par sin let d = taille * 0.3 + sin(col * 0.8 + ligne * 0.5) * taille * 0.3; ellipse(x, y, d, d);

Mini-exercice : À partir de votre grille, trouver 3 paramètres différents à moduler pour obtenir 3 ambiances visuelles distinctes. Sauvegarder les 3 versions.

Module 4 — Aléatoire et variation contrôlée (2h)

Concept

random(min, max) retourne une valeur aléatoire entre min et max. À chaque exécution, les valeurs changent.

randomSeed(n) fixe la graine — même seed = même résultat. Essentiel pour la reproductibilité d'une œuvre.

noise(t) retourne des valeurs continues et lisses (bruit de Perlin). Valeurs voisines sont proches — idéal pour le naturel.

javascript // Comparaison : random vs noise for (let i = 0; i < 200; i++) { let x = random(width); // sauts aléatoires let x2 = noise(i * 0.05) * width; // progression douce }

map(valeur, min1, max1, min2, max2) : transformer un intervalle en un autre. Fondamental pour calibrer les paramètres.

javascript // Hauteur de barre proportionnelle à une valeur 0-1 let h = map(noise(i * 0.1), 0, 1, 20, height * 0.8);

Lien mini-cours : Le cours Data Art montre comment mapper des données réelles vers des formes visuelles.

Lab 4.1 — Composition aléatoire reproductible

Étapes :

1. Créer 50 ellipses placées aléatoirement (random)
2. Fixer la seed (randomSeed(42)) — vérifier que le sketch est identique à chaque rechargement
3. Paramétrer taille et couleur aussi avec random
4. Créer un second mode avec noise — comparer les deux esthétiques
5. Trouver la seed qui produit la composition la plus intéressante

Mini-exercice : Créer 3 compositions identiques en structure mais différentes en seed. Laquelle préférez-vous et pourquoi ? Documenter le numéro de seed de votre composition choisie.

Module 5 — Temps, animation et interaction (2h)

Concept

En creative coding, le temps est une dimension du dessin.

frameCount : nombre de frames depuis le démarrage. Chaque frame = appel à draw().

sin(frameCount * vitesse) : oscillation entre -1 et 1 à une fréquence contrôlée par vitesse.

javascript // Taille qui pulse let d = 100 + sin(frameCount * 0.05) * 40; ellipse(width/2, height/2, d, d);

Effacement vs trace :

• background() dans draw() : réinitialise l'écran à chaque frame → animation propre
• background() avec transparence ou absent : les formes s'accumulent → traces

javascript // Trace : fond semi-transparent background(0, 10); // RGB + alpha

Événements souris : javascript mouseX, mouseY // position courante mouseIsPressed // bouton tenu function mousePressed() {... } // clic function keyPressed() {... } // touche clavier

Lien mini-cours : Le cours Typographie Arabe en Mouvement explore le trait animé dans le temps.

Lab 5.1 — Animation interactive

Étapes :

1. Animer 3 formes avec des oscillations sin() de fréquences différentes
2. Faire que mouseX contrôle un paramètre (couleur, vitesse, taille)
3. Avec mousePressed() : alterner entre mode fond renouvelé et mode trace
4. Avec keyPressed() : sauvegarder une frame (saveCanvas()) sur appui de 's'

Mini-exercice : Trouver 2 comportements différents selon la vitesse du curseur souris. Que se passe-t-il si on accélère le mouvement vs. si on déplace la souris lentement ?

Module 6 — Composition finale et exportation (2h)

Concept

De l'exploration au projet présentable : trois étapes.

1 — Choisir un concept : quelle idée guide la composition ? (Un motif, une donnée, une sensation, un hommage)

2 — Cadrer les paramètres :

• Résolution finale : createCanvas(2400, 2400) + pixelDensity(1) pour haute résolution
• Palette de couleurs définie et cohérente
• Seed fixée ou variation contrôlée

3 — Documenter :

• Description du concept (3 phrases)
• Outils utilisés
• Seed si applicable
• Process : qu'est-ce que vous avez tenté avant d'arriver à ce résultat ?

Export : `javascript // Dans setup() — version haute résolution statique function setup() { pixelDensity(2); // 2× la résolution d'écran createCanvas(1200, 1200); noLoop(); randomSeed(137); noiseSeed(137); }

function keyPressed() { if (key === 's') saveCanvas('mon-sketch', 'png'); } `

Lab 6.1 — Finalisation et documentation

Étapes :

1. Choisir votre sketch favori parmi les Labs 1–5
2. Améliorer la composition (couleurs, équilibre, lisibilité)
3. Fixer la seed (si aléatoire)
4. Écrire la documentation courte (voir §Projet)
5. Exporter en haute résolution + partager sur OpenProcessing (https://openprocessing.org)

Projet fil rouge — "Première composition générative"

Brief

Créer une composition générative originale avec p5.js, inspirée d'un motif culturel, d'un jeu de données ou d'un phénomène visuel qui vous est signifiant.

Contraintes

• Technologie : p5.js (éditeur web ou local)
• La composition doit utiliser au moins : 1 boucle, 1 source de variation (random ou noise), 1 forme d'animation ou d'interaction
• Reproductible : seed fixée OU variation documentée
• Pas d'image importée — tout généré par code

Livrables

1. Fichier .js ou lien OpenProcessing (sketch fonctionnel)
2. Documentation courte (1 page) : concept, palette, paramètres clés, seed, process
3. 3 exports PNG : la même composition avec 3 seeds différentes (ou 3 états)
4. Présentation (5 min) : montrer le sketch, expliquer 3 décisions créatives

Rubrique d'évaluation

Lectures & ressources

• p5.js référence : https://p5js.org/reference/
• p5.js éditeur en ligne : https://editor.p5js.org
• The Coding Train (tutoriels vidéo p5.js) : https://www.youtube.com/c/TheCodingTrain
• OpenProcessing (partager/explorer des sketches) : https://openprocessing.org
• Mini-cours Data Art : /apprendre/creative-coding/
• Mini-cours Motifs Amazighs : /apprendre/creative-coding/
• Mini-cours Typographie Arabe : /apprendre/creative-coding/

→ Niveau suivant : Creative Coding — Niveau 2 → Formation sur mesure pour votre école ou équipe : Prendre rendez-vous