Introduction à p5.js

🎯 Objectif : Comprendre ce qu'est p5.js, pourquoi on l'utilise dans ce cours, le mettre en place et découvrir l'interface. À la fin de cette introduction, tu seras capable de lancer ton premier programme.

Réviser JavaScript en s'amusant#

Dans ce cours, tu as déjà appris les bases de JavaScript : variables, conditions, boucles, fonctions... Mais écrire du code qui affiche du texte dans la console, avouons-le, c'est pas le truc le plus excitant du monde.

Et si on révisait tout ça en dessinant ? En créant des animations, des formes colorées, des programmes visuels ?

p5.js, c'est exactement ça : une bibliothèque JavaScript conçue pour rendre le code visuel et créatif. Tu écris du JavaScript, tu rafraîchis ta page, et tu vois directement le résultat à l'écran.

L'avantage ? Tu révises toute la syntaxe JavaScript que tu connais déjà (variables, if, for, fonctions...) mais avec des résultats immédiats et visuels. C'est le même langage, juste avec des super-pouvoirs graphiques !

Un peu d'histoire#

p5.js est né du projet Processing, créé en 2001 au MIT (Massachusetts Institute of Technology) par Ben Fry et Casey Reas. Leur objectif : permettre aux artistes, designers et non-programmeurs de créer des œuvres visuelles avec du code, sans avoir besoin d'un diplôme en informatique.

Le projet a tellement bien marché qu'il a reçu le Golden Nica du prestigieux festival Ars Electronica en 2005.

En 2013, Lauren Lee McCarthy a créé p5.js, une version de Processing qui tourne directement dans le navigateur web grâce à JavaScript. Aujourd'hui, p5.js est utilisé dans le monde entier pour l'art numérique, la visualisation de données, et surtout... l'apprentissage de la programmation.

En 2025, p5.js a franchi une étape importante avec la sortie de la version 2, une refonte de la bibliothèque qui modernise sa façon de gérer les événements (souris, clavier) et le chargement des fichiers. C'est cette version qu'on utilise dans ce cours.

Pourquoi p5.js dans un cours de Scripts Clients ?#

Voici le secret : p5.js, c'est du JavaScript pur. Tout ce que tu as appris en JavaScript fonctionne directement dans p5.js.

JavaScript classique	p5.js
let x = 100;	let x = 100;
if (x > 50) { }	if (x > 50) { }
for (let i = 0; i < 10; i++)	for (let i = 0; i < 10; i++)
function maFonction() { }	function maFonction() { }
console.log("hello")	console.log("hello")

Tu vois ? C'est exactement le même langage. p5.js ajoute simplement des fonctions pour dessiner (rect(), ellipse(), fill()...) et une structure de base (setup() et draw()) pour organiser ton programme.

💡 Fun fact : p5.js peut interagir avec le DOM, gérer du son, de la vidéo, de la webcam, et même de la 3D — tout ça en JavaScript dans le navigateur !

Mettre en place p5.js#

L'éditeur en ligne (le plus simple)#

1. Va sur https://editor.p5js.org
2. Tu arrives directement sur un éditeur de code prêt à l'emploi
3. Clique sur ▶ Play pour lancer ton programme
4. C'est tout ! Pas besoin d'installer quoi que ce soit.

En local (dans ton projet)#

Si tu préfères travailler en local, il suffit d'inclure la bibliothèque p5.js dans ton fichier HTML :

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/p5@2/lib/p5.min.js"></script>
</head>
<body>
  <script src="sketch.js"></script>
</body>
</html>

Puis tu crées un fichier sketch.js avec ton code p5.js. Ouvre le fichier HTML dans ton navigateur et c'est parti !

Quelle version de p5.js ?#

Ce cours est écrit pour p5.js version 2 (v2). C'est la version par défaut de l'éditeur en ligne et du site officiel depuis 2025, et celle que tu obtiens avec le lien CDN ci-dessus (p5@2).

Pourquoi c'est important ? Parce que beaucoup de tutoriels, de vidéos YouTube et d'exemples générés par les IA ont été écrits pour la version 1, et certaines choses ont changé. Pour ce qu'on fait dans ce cours, il y a une seule différence à retenir :

Ce que tu veux faire	p5.js v1 (ancien)	p5.js v2 (ce cours)
Savoir quel bouton de la souris est enfoncé	mouseButton === LEFT	mouseButton.left

On y reviendra dans le chapitre sur les conditions. Le reste (setup(), draw(), formes, couleurs, variables, boucles...) est identique dans les deux versions.

L'interface de l'éditeur en ligne#

Quand tu ouvres l'éditeur p5.js, voici ce que tu vois :

Zone	Rôle
Zone de code (grande zone blanche)	C'est là que tu écris ton programme
Bouton ▶ Play (en haut à gauche)	Lance ton programme
Bouton ■ Stop	Arrête ton programme
Console (zone noire en bas)	Affiche les messages et les erreurs
Zone de prévisualisation	S'affiche à droite quand tu cliques sur Play — c'est ton canevas !

💡 Astuce : Si tu vois du texte rouge dans la console, c'est une erreur. Pas de panique ! Lis le message, il te dit souvent quelle ligne pose problème.

La structure d'un programme p5.js#

Tout programme p5.js a la même structure de base :

function setup() {
  // Code exécuté UNE SEULE FOIS au démarrage
}

function draw() {
  // Code exécuté EN BOUCLE (60 fois par seconde !)
}

Le parallèle avec JavaScript classique#

Concept	JavaScript classique	p5.js	Rôle
Initialisation	window.onload = ...	function setup() { }	S'exécute une seule fois au début
Répétition	setInterval(...)	function draw() { }	S'exécute en boucle, encore et encore
Zone d'affichage	Le DOM / un <canvas>	Le canevas (canvas)	La zone où on dessine

Pour créer un canevas, on utilise createCanvas() dans le setup() :

function setup() {
  createCanvas(400, 300);  // Crée un canevas de 400 pixels de large et 300 de haut
}

function draw() {
  // On dessinera ici
}

⚠️ Attention : createCanvas() doit toujours être dans setup(), idéalement comme première instruction.

Ton premier programme#

Tape ce code dans l'éditeur p5.js et clique sur ▶ Play :

function setup() {
  createCanvas(400, 300);
}

function draw() {
  background(200);
  ellipse(200, 150, 100, 100);
}

Tu devrais voir une fenêtre grise avec un cercle blanc au centre. Félicitations, tu viens d'écrire ton premier programme p5.js ! 🎉

Ne t'inquiète pas si tu ne comprends pas encore chaque ligne — on va tout décortiquer dans les prochains chapitres.

Ce qu'on va apprendre dans les prochains chapitres#

Voici un aperçu de la suite. Chaque concept utilise du JavaScript que tu connais déjà :

Chapitre	Concept	En JavaScript classique	En p5.js
0b	Outils de dessin	Manipuler un <canvas>	rect(), ellipse(), stroke(), fill()
0c	Couleurs	ctx.fillStyle = "red"	fill(255, 0, 0), background()
1	Premières formes	Canvas API complexe	Combiner formes et couleurs
2	Variables	let x = 10;	let x = 10; (identique !)
3	Conditions	if (x > 5) { } else { }	if (x > 5) { } else { } (identique !)
4	Boucles	for (let i = 0; i < 10; i++)	for (let i = 0; i < 10; i++) (identique !)
5	Fonctions	function dessiner() { }	function dessinerMaison(x, y) { }
6	Animation	requestAnimationFrame()	Variable qui change dans draw()

Les types de données (un avant-goût)#

En JavaScript, les variables sont déclarées avec let ou const. Contrairement à des langages comme Java ou C++, tu ne dois pas déclarer le type — JavaScript le détermine automatiquement. Mais il est important de connaître les types qui existent :

Type	Ce que ça stocke	Exemple
number	Un nombre (entier ou à virgule)	let age = 25; / let prix = 9.99;
boolean	Vrai ou Faux	let estVisible = true;
string	Du texte	let nom = "Alice";

💡 En JavaScript, pas besoin de préciser int ou float comme en Java/C++ — un number gère les deux :

let x = 100;          // ✅ Nombre entier
let y = 3.14;         // ✅ Nombre à virgule
let nom = "Bonjour";  // ✅ Texte
let ok = true;        // ✅ Booléen

p5.js ajoute aussi la fonction color() pour manipuler les couleurs facilement :

let rouge = color(255, 0, 0);

On verra tout ça en détail dans le chapitre sur les variables.

Pour aller plus loin#

Si tu veux explorer p5.js par toi-même :

• Documentation officielle : https://p5js.org/reference — la liste complète de toutes les fonctions (version 2). Si tu suis un vieux tutoriel, l'ancienne référence v1 est sur https://v1.p5js.org/reference
• Guide de transition v1 → v2 : https://p5js.org/tutorials/v2_transition/ — court et clair, pour comprendre ce qui a changé
• The Coding Train (YouTube) : Daniel Shiffman explique p5.js de façon fun et accessible (attention, beaucoup de vidéos datent de la v1)
• Nature of Code (https://natureofcode.com) : un livre gratuit pour les plus avancés, mêlant code et simulation physique
• Éditeur en ligne : https://editor.p5js.org — code et teste directement dans le navigateur