Ce que les deux outils ont en commun
Processing et p5.js partagent la même philosophie fondatrice : rendre la programmation accessible aux artistes, designers et créatifs sans formation informatique. Les deux ont été créés dans la continuité des travaux de John Maeda au MIT Media Lab. Ils partagent une syntaxe très proche, une approche par le dessin (les fonctions setup() et draw() sont identiques), et une communauté active avec une documentation bien fournie.
Pour un apprenant qui connaît l'un, passer à l'autre demande une demi-journée d'adaptation — pas une formation complète.
Processing : rigueur, desktop, syntaxe Java
Pour qui
Processing est taillé pour les apprenants qui veulent comprendre ce qui se passe vraiment. Sa syntaxe Java (typage statique, déclaration de variables) est plus stricte : elle force l'apprenant à être précis. Les erreurs sont plus explicites. Le débogage est plus pédagogique.
Il convient particulièrement aux étudiants en design graphique, arts plastiques ou architecture qui ont du temps (semestre complet, atelier hebdomadaire) et qui ont besoin de bases solides avant de créer des œuvres plus complexes.
Quand l'utiliser
- Cours d'initiation à la programmation dans un contexte art/design (12 h ou plus)
- Ateliers centrés sur la logique algorithmique plus que sur le partage immédiat
- Projets qui génèrent des fichiers exportables (PDF, PNG en haute résolution, vidéos frame-by-frame)
- Public adulte avec une disposition à la patience technique
Limites pédagogiques
Le principal frein : installer Processing sur les machines de l'établissement. Avec des labos informatiques verrouillés ou des machines sous Windows sans droits admin, la séance peut commencer par une heure de problèmes d'installation. Processing est aussi desktop-first — pas de partage direct par URL, ce qui casse la dynamique sociale de « montre ton sketch ».
3 exercices concrets pour démarrer
Exercice 1 — Cercles en mouvement. Dessiner 50 cercles dont la taille varie selon la position de la souris. Objectif : comprendre les variables, la boucle draw(), et mouseX/mouseY. Durée : 45 min.
Exercice 2 — Grille de couleurs. Générer une grille de rectangles colorés selon une logique mathématique (position → teinte HSB). Objectif : les boucles imbriquées, le modèle de couleur HSB, la notion de transformation d'espace. Durée : 1 h 30.
Exercice 3 — Particules et attraction. Créer un système de 20 particules attirées par le curseur avec une force proportionnelle à la distance. Objectif : introduire les tableaux, la notion d'objet simple, et la physique de base. Durée : 2 h (avec correction collective).
p5.js : navigateur, partage immédiat, accessibilité
Pour qui
p5.js s'exécute dans le navigateur. Aucune installation. Un lien suffit pour partager une création. Cette caractéristique change tout pédagogiquement : un apprenant peut montrer son travail à ses proches le soir même, recevoir des retours, se comparer aux œuvres de la communauté mondiale sur l'éditeur en ligne p5.js.
Il convient aux publics variés (ados, adultes, seniors), aux formats courts (1 à 5 séances), aux contextes où les machines sont hétérogènes ou contraintes, et aux enseignants qui veulent maintenir un niveau d'engagement élevé dès la première heure.
Quand l'utiliser
- Ateliers publics (médiathèques, centres culturels, résidences)
- Cours courts ou introductifs (1 à 8 h)
- Publics mixtes non-techniques
- Projets de création web, données visualisées, narrations interactives
Limites pédagogiques
JavaScript est un langage à typage dynamique : les erreurs sont parfois moins lisibles pour un débutant. Il est possible d'écrire du code qui « fonctionne » sans que l'apprenant comprenne pourquoi — ce qui peut créer des lacunes conceptuelles. Pour des apprenants qui veulent progresser vers du code plus sérieux, p5.js peut devenir une zone de confort trop confortable.
3 exercices concrets pour démarrer
Exercice 1 — Dessin à la souris. Tracer une ligne continue qui suit le curseur, avec une couleur qui change selon la vitesse. Objectif : le flux draw(), les variables pmouseX/pmouseY, et la notion de map(). Durée : 30 min — parfait pour une première séance.
Exercice 2 — Portrait génératif. Construire un visage simple (ellipses, rectangles) dont les proportions changent aléatoirement à chaque clic. Objectif : les fonctions random(), la modularisation en fonctions, le déclenchement sur événement. Durée : 1 h.
Exercice 3 — Visualisation de données sonores. Utiliser la bibliothèque p5.sound pour visualiser en temps réel le volume du micro sous forme de formes réactives. Objectif : les bibliothèques, les callbacks asynchrones, la relation entrée/sortie. Durée : 2 h.
La progression recommandée : commencer par p5.js, approfondir avec Processing
Après plusieurs années d'enseignement à l'ESD et en workshops publics, la même logique de progression fonctionne :
Phase 1 (0 à 8 h) — p5.js. L'objectif est l'engagement. L'apprenant doit produire quelque chose de visible, de partageable, et qui lui ressemble en moins de deux heures. p5.js y réussit mieux que Processing sur ce point.
Phase 2 (8 à 30 h) — Processing. Une fois la motivation installée, Processing permet d'approfondir : comprendre le typage, écrire du code plus robuste, générer des exports haute résolution, approcher la programmation orientée objet par la pratique.
Phase 3 (au-delà) — les deux selon le projet. Un projet de narration web ? p5.js. Une œuvre pour une impression grand format ? Processing. La question devient pragmatique, pas idéologique.
Ce que Kamel enseigne dans ses ateliers
Cette approche en deux temps est celle utilisée dans les ateliers Creative Coding dispensés à l'ESD et dans les workshops publics depuis 2017. Le point de départ varie selon le contexte — une médiathèque reçoit une initiation p5.js de 3 h, un cours de master design graphique démarre sur p5.js et bascule vers Processing à mi-semestre. Ce qui ne change pas : le principe de produire quelque chose d'esthétiquement satisfaisant avant d'expliquer pourquoi ça fonctionne.
Mini-FAQ
Peut-on enseigner le creative coding à des collégiens avec ces outils ?
Oui, avec p5.js exclusivement. L'éditeur en ligne, l'absence d'installation et les retours visuels immédiats maintiennent l'attention. Processing est trop verbeux pour des séances courtes avec des publics jeunes. Prévoir des exercices centrés sur la couleur et le mouvement plutôt que sur la logique algorithmique dans un premier temps.
Faut-il des connaissances en maths pour enseigner (et apprendre) le creative coding ?
Les exercices de base ne demandent que des notions de collège (coordonnées, proportionnalité). Les exercices avancés (physique de particules, trigonométrie, bruit de Perlin) demandent plus — mais ils sont optionnels et peuvent être abordés de façon empirique, par observation du résultat avant la théorie.
Vous cherchez un atelier Creative Coding ?
Kamel Ghabte propose des ateliers Processing et p5.js adaptés à votre contexte : lycée, école supérieure, médiation culturelle, équipe design. Format flexible : 3 h, demi-journée, cycle de plusieurs séances.
Contactez [email protected] avec votre contexte (niveau, durée, nombre de participants) pour recevoir une proposition.
À lire aussi : méthode pour enseigner le creative coding et zellige, pixel, géométrie et code.