Aller au contenu
SCRIPTS CLIENTS 25-26

P5.js

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.

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@1/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 !

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 :