L'histoire commune
Processing et p5.js partagent la même philosophie et la même origine. Processing a été créé en 2001 par Casey Reas et Ben Fry au MIT Media Lab avec un objectif explicite : rendre la programmation accessible aux artistes et aux designers. Le nom "Processing" venait de l'idée de traiter visuellement de l'information.
p5.js, créé par Lauren McCarthy en 2013, est une réinterprétation de Processing pour le web. JavaScript plutôt que Java, navigateur plutôt qu'application, mais la même syntaxe de base : setup(), draw(), ellipse(), background().
Les différences pratiques
| Aspect | Processing | p5.js |
|---|---|---|
| Langage | Java | JavaScript |
| Environnement | Application desktop | Navigateur web |
| Installation | Requise (Processing IDE) | Non (éditeur en ligne) |
| Performance | Meilleure (natif) | Bonne (WebGL disponible) |
| Partage | Export JAR / application | URL directe |
| Bibliothèques | Très riche (video, son, ML...) | Croissante, accès npm |
| Communauté | Grande, mature | Grande, active |
Pour commencer avec p5.js : la voie recommandée
Étape 1 : l'éditeur en ligne
Allez sur editor.p5js.org. Aucune installation. Vous avez un sketch fonctionnel en 30 secondes :
function setup() {
createCanvas(400, 400);
}
function draw() {
background(11, 15, 20);
fill(55, 227, 195);
ellipse(mouseX, mouseY, 40, 40);
}
Lancez. Un cercle suit votre souris. C'est p5.js.
Étape 2 : comprendre le cycle setup/draw
setup() s'exécute une fois au démarrage. draw() s'exécute en boucle, environ 60 fois par seconde. Tout ce qui change dans le temps va dans draw(). Tout ce qui ne change pas va dans setup().
Étape 3 : explorer le système de coordonnées
En p5.js, l'origine (0,0) est en haut à gauche. L'axe x va vers la droite. L'axe y va vers le bas (inverse de la géométrie classique). Connaître ça évite les surprises.
Étape 4 : les fonctions de dessin essentielles
// Formes
ellipse(x, y, largeur, hauteur);
rect(x, y, largeur, hauteur);
line(x1, y1, x2, y2);
triangle(x1, y1, x2, y2, x3, y3);
// Couleurs
fill(r, g, b); // couleur de remplissage
stroke(r, g, b); // couleur du contour
noFill(); // pas de remplissage
noStroke(); // pas de contour
background(r, g, b); // effacer le fond
// Transformations
translate(x, y); // déplacer l'origine
rotate(angle); // rotation (angle en radians)
push(); // sauvegarder l'état des transformations
pop(); // restaurer l'état
Si vous venez de Processing
La syntaxe est quasi identique. Les différences principales :
int,float→letouconsten JavaScriptprintln()→console.log()- Les bibliothèques Processing ne fonctionnent pas directement — cherchez leur équivalent npm ou p5.sound / p5.serialport
mousePressed()etkeyPressed()fonctionnent de la même façon
Les ressources incontournables
- editor.p5js.org : éditeur en ligne officiel
- p5js.org/reference/ : référence complète
- The Coding Train : tutoriels vidéo de Daniel Shiffman (anglais)
- Les ateliers gratuits de ce site : tous les tutos →
- OpenProcessing.org : communauté de sketches partagés