Table des matières
P5.js
P5.js est une librairie Javascript permettant de faire du design génératif dans une page web. Il s'agit d'une version de Processing faite pour pouvoir être utilisée sur le web.
On peut l'utiliser soit dans l'éditeur web intégré de P5.js (https://editor.p5js.org/), soit l'importer dans son projet web. On peut alors télécharger la librairie (https://p5js.org/download/) et l'ajouter aux fichiers de son projet web. Ensuite on appelle la librairie dans la <head> de sa page web avec la ligne suivante :
<script src="../p5.min.js"></script>
Une autre solution est de faire appel à une version de la librairie déjà hébergée sur un serveur. Dans ce cas, c'est la ligne suivante qu'il faut ajouter à la <head> de sa page HTML :
<script src="https://cdn.jsdelivr.net/npm/p5@1.5.0/lib/p5.js"></script>
Ensuite il faudra écrire son code dans un autre script qu'il faudra aussi importer dans la page HTML.
Bases de P5.js
Tout comme Processing, P5.js marche avec deux fonctions basiques qu'on retrouve dans quasiment tous les sketchs. Tout d'abord la fonction setup(), dans laquelle on va écrire les instructions devant être exécutées au démarrage du programme (on a souvent besoin d'initialiser des paramètres au démarrage). Ensuite la fonction draw() qui contient ce que le programme va faire tant qu'il tourne. Le programme va tourner à l'infini tant que l'éditeur ou la page web est ouverte, les instructions contenues dans la fonction draw() se répètent en boucle.
P5.js est basé sur Javascript, qui est un langage à la syntaxe pointilleuse, attention à bien la respecter. Les deux fonctions de base doivent être écrites dans le sketch comme ceci :
function setup() {
}
function draw() {
}
Voici un premier code pour illustrer ce fonctionnement :
function setup() {
createCanvas(800, 800);
}
function draw() {
if (mouseIsPressed) {
fill(0);
} else {
fill(255);
}
ellipse(mouseX, mouseY, 80, 80);
}
On a dans la fonction setup() une fonction createCanvas() qui détermine la taille en pixels de la zone de dessin dans la page web. Puis dans la fonction draw(), on a une condition décrite avec les mots-clés if et else. Si la condition suivant le if est vérifiée, alors le code qu'il contient sera exécuté, sinon c'est le code contenu dans le else qui sera exécuté. Dans notre cas, on va vérifier si la souris est pressée (avec mouseIsPressed), et quand c'est le cas définir la couleur de remplissage en noir. Ensuite, le programme se charge de dessiner à chaque frame une ellipse à la position de la souris avec la fonction ellipse().
Voici le résultat du sketch :
P5.js étant une version pour le web de Processing, se référer à cet outil pour obtenir plus d'informations sur les possibilités en terme de design génératif.
Utiliser des librairies
Si on a besoin d'utiliser des fonctionnalités plus larges, on peut importer des librairies dans un projet P5.js (par exemple si on veut travailler le son, la vidéo ou encore d'autres applications bien spécifiques). Dans P5.js, une librairie va se présenter sous la forme d'un fichier Javascript qu'il faut télécharger et importer dans son projet. Il faudra donc ajouter un appel vers ce script dans la <head> de sa page HTML :
<script src="p5.ma_librairie.js"></script>