Introduction à p5.js

Qu’est-ce que p5.js ?

p5.js est une bibliothèque JavaScript qui permet, dans un navigateur web, de :

créer des dessins ;
modifier des images ;
créer des animations ;
manipuler du texte ou des données ;
interagir avec des éléments HTML de la page (vidéos, sons, boutons, etc).

Une bibliothèque, ou librairie en anglais, c'est un paquet de fonctions pré-codées qui permettent d'alléger la syntaxe et de simplifier un programme informatique.
Cette bibliothèque a été conçue pour servir à enseigner les bases de la programmation informatique dans un contexte visuel. P5.js est donc un outil très accessible pour les artistes, les concepteurs, les professeurs et les débutants.

Remarque : Dans p5.js, un programme est appelé un sketch (ou esquisse en français).

Comment utiliser p5.js ?

La méthode la plus simple pour éditer un programme avec p5.js est d'utiliser l'éditeur en ligne. Une inscription est nécessaire pour enregistrer vos sketchs.

https://editor.p5js.org/

L'utilisation d'autres éditeurs en lignes est possible. Avec CodePen par exemple, il faudra installer au préalable la bibliothèque p5.js.

Vous pouvez aussi utiliser un éditeur de texte comme Notepad++ :

A faire vous-même 1

- Télécharger le dossier zipper projet0.zip.
- Dézipper ce dossier puis enregistrer le dans un sous-dossier nommé “p5.js” situé dans votre dossier “ICN”.
- Dupliquer ce dossier afin de garder une copie et renommer cette copie.

Le dossier “projet0” contient la structure de base qui vous permettra d'utiliser p5.js .
Il suffira de “copier-coller” le dossier “projet0” et de le renommer à chaque fois que vous aurez besoin de créer un nouveau projet.

A faire vous-même 2

Pour comprendre la structure d'un projet :

- Ouvrir index.html dans NotePad++. Ce fichier montre la structure de votre projet et le lien avec la librairie de p5.js.

<!DOCTYPE html>
<html>
  <head>
 
	<meta charset="utf-8">
    <title>Titre</title>
    <link rel="stylesheet" href="style.css">
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.min.js"></script>
 
  </head>
 
  <body>
 
   <!-- ici le code HTML -->
 
    <script src="sketch.js"></script>
 
  </body>
</html>

- Ouvrir sketch.js dans NotePad++. Le code contient 2 blocs qui forment la base de tous les programmes (appelés aussi sketchs) dans p5.js.

function setup() {
  createCanvas(400, 400);
}
 
function draw() {
  background(220);
}

- Ouvrir le fichier index.html avec un navigateur comme Firefox pour exécuter.

Remarque : le dossier “media” contiendra les images utilisées dans votre projet.

Interprétons ce premier sketch :

function setup () :
Le code compris entre les accolades ne va s’exécuter qu’une seule fois contrairement à la function draw qui va s’exécuter en boucle.
La fonction setup() contient les éléments du sketch qui n'évoluent plus lors de son exécution.
Exemple : createCanvas défini la taille de l’animation (400 pixels sur 400 pixels).

function draw () :
Tout ce qui se trouve entre les accolades est « dessiné » en boucle.
Dans l’exemple, la couleur d'arrière-plan (background) est grise (220). Ce nombre entre parenthèse correspond à une nuance de gris compris entre 0 et 255 (0 pour le noir et 255 pour le blanc).

Quelques rappels sur la syntaxe du JavaScript

Un programme informatique est une séquence d'instructions. Les instructions doivent être séparées par un point-virgule que l’on place à la fin de chaque instruction. Il est d'usage de revenir à la ligne après chaque instruction.
Exemple :

Instruction1 ;
Instruction2 ;

Comme dans tout langage de programmation, il est bon d'ajouter des commentaires dans les scripts.
Pour mettre en commentaire toute une ligne on utilise le double slash // :
Exemple :

Instruction1 ; // ceci est un commentaire sur une seule ligne
Instruction2 ;

Pour mettre en commentaire plusieurs lignes, il doit se commencer par : /* et se terminer par */
Exemple :

Instruction1 ; 
/*   ceci est un commentaire
     sur plusieurs lignes   */
Instruction2 ;

Le JavaScript est sensible à la casse, c'est-à-dire qu'il fait une différence entre un nom de variable contenant ou non des majuscules.
Ainsi la variable 'TOTO' et la variable 'toto' sont deux variables différentes.

Le JavaScript n’est pas sensible aux espaces.

http://icn.lec.ac-grenoble.fr/videos/p5js_base/introduction_a_Processing.mp4