Applications graphiques avec P5.js

L’objectif de cette activité est d’appliquer les connaissances acquises jusqu’à maintenant pour coder de “vraies” petites applications graphiques qui s’afficheront dans le navigateur internet. Les applications graphiques ne sont pas la priorité dans le BTS SN mais on doit leur reconnaître un aspect attrayant qui peut motiver les étudiants dans leur apprentissage de la programmation informatique.

Le codage d’applications graphiques peut être un peu difficile quand on débute en informatique. Pour cette raison, on va utiliser dans cette activité un outil qui va nous simplifier la tâche. Cet outil est une librairie Javascript qui se nomme P5.js.

Après une courte initiation à librairie P5.js, il est attendu de votre part une véritable réflexion pour aboutir à un programme fonctionnel qui réponde à ce qui est demandé.

Présentation de P5.js

P5.js est une librairie qui s’appuie sur le langage Javascript pour proposer un ensemble de fonctionnalités multimédia accessibles simplement depuis des scripts.

P5.js propose une multitude de fonctions pour le dessin et l’animation dans un composant d’HTML5 appelé canvas. P5.js offre également des possibilités d’interaction à travers différentes interfaces homme machine (clavier, souris, webcam, micro …), ou encore avec les éléments d’une page web.

Voir par exemple Ghosts on the FlowField

Pour utiliser P5.js dans une page web, et étant donné que c’est un “simple” script Javascript, il suffit d’y faire référence avec une balise <script>…</script> comme vu dans l’activité précédente.

Code d’une page web qui utilise P5.js

<!DOCTYPE html>
<html lang="fr">

<head>
   <meta charset="utf-8">
   <title>Test P5.js</title>
</head>

<body>
   <!-- Insérer ici le contenu HTML de la page web -->

   <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.min.js"></script> (1)
   <script src="./script.js"></script> (2)
</body>

</html>

1	Balise HTML qui permet de télécharger directement sur internet — via un CDN (pour Content Delivery Network) — la dernière version de la librairie P5.js
2	Inclusion de `script.js` dans lequel on codera notre programme qui aura accés à toutes les fonctionnalités de P5.js pour dessiner sur la page web, intéragir avec l’utilisateur… Ce script est souvent désigné par le terme de *sketch* dans l’environnement P5.js.

Ainsi, tout a été pensé dans P5.js pour permettre au plus grand nombre de pouvoir créer des programmes interactifs sans nécessiter beaucoup de connaissances en informatique. D’ailleurs, il est destiné au départ pour des étudiants en art graphique et non pour des informaticiens.

Pour pouvoir utiliser les fonctionnalités de P5.js dans notre script Javascript, celui doit disposer de 2 fonctions particulières — nommées setup() et draw() — qui jouent, pour ceux qui connaissent l’environnement Arduino, à peu près le même rôle que setup() et loop() :

setup() est appelée automatiquement par P5.js au chargement de la page web dans le navigateur. Ceci signifie qu’elle n’est appelée qu’une seule fois et que c’est dans celle-ci que devront avoir lieu les différentes initialisations
draw() est aussi appelée automatiquement par P5.js mais, cette fois-ci, continuellement à une fréquence par défaut de 60 fois par seconde. Cette fonction aura en charge de mettre à jour la page web et plus particulièrement le canvas HTML5 qu’elle peut contenir et dans lequel les dessins prendront place. Ce rafraîchissement de la page web est à l’origine des animations graphiques qu’il est possible d’obtenir P5.js.

La structure d’un script utilisant P5.js sera donc la suivante :

/**
 * Fonction automatiquement appelée par P5.js et UNE SEULE FOIS au démarrage du programme
 */
function setup() {
   /* Insérer ici le code d'initialisation du programme */
}

/**
 * Fonction appelée automatiquement par P5.js et EN BOUCLE pour "rafraîchir" la page web.
 * Par défaut elle est appelée environ 60 fois par seconde.
 */
function draw() {
   /* Insérer ici le code qui rend "dynamique" le contenu de la page web */
}

1^er sketch P5.js

Pour découvrir tout de suite le fonctionnement de P5.js, vous allez reproduire le code d’un 1^er exemple tiré du tutoriel disponible sur le site de P5.js.

🖮 Travail n° 1 : 1^er sketch P5.js

Examiner le code suivant et lire les explications le concernant avant de le reproduire dans un fichier sketch01.js avec un éditeur de texte comme Visual Studio Code

function setup() {
  createCanvas(640, 480); (1)
}

function draw() {
  if (mouseIsPressed) { (2)
    fill(0);
  } else {
    fill(255);
  }
  ellipse(mouseX, mouseY, 80, 80); (3)
}

1	Au lancement du programme, on définit dans la fenêtre du navigateur une zone de 640 points de large sur 480 points de haut dans laquelle on va pouvoir dessiner. Cette zone représente le canvas HTML5 évoqué dans la présentation de P5.js.
2	On teste la variable globale `mouseIsPressed` mise à notre disposition par P5.js pour savoir si le bouton de la souris est enfoncé. Si oui, on spécifie une couleur de remplissage qui vaut 0 (→ code de la couleur noire) par l’intermédiaire de la fonction `fill()`. Si non, cette couleur de remplissage prend la valeur 255 (→ code de la couleur blanche).
3	On trace une ellipse dont le grand et le petit axe mesurent tous les deux 80 points écran (donc un cercle de diamètre 80 points) à l’emplacement de la souris dont les coordonnées sont fournies par P5.js par l’intermédiaire des variables globales `mouseX` et `mouseY`. Ce cercle sera “vide” ou “plein” selon la couleur de remplissage déterminée juste au dessus.

Intégrer ce script dans une page web index.html en adaptant le code donné dans la Présentation de P5.js
Charger la page web dans votre navigateur internet et vérifier que :
- des cercles vides sont tracés dans la fenêtre à l’endroit où se situe la souris
- les cercles suivent la position de la souris tant que celle-ci se trouve dans la zone de dessin
- les cercles apparaissent “vides” ou “pleins” selon que le bouton gauche de la souris est enfoncé ou non

Interception des évènements souris et clavier.

Vous venez de voir que P5.js rend disponible l’état et la position de la souris à travers des variables globales (mouseIsPressed, mouseX, mouseY).

P5.js permet aussi à l’utilisateur de savoir quand la souris est déplacée ou quand un de ses boutons est enfoncé de façon à réagir à ces évènements. Par exemple, lorsque P5.js détecte l’enfoncement d’un bouton de la souris, il va appeler automatiquement une méthode appelée mousePressed(). Si vous voulez réagir à cet enfoncement de bouton, il suffit donc de définir dans votre script une fonction qui doit s’appeler mousePressed() et dans laquelle vous ajouterez le code que vous souhaitez exécuter lorsque cet évènement se produit.

Ainsi, le code suivant permet d’inverser la couleur de remplissage d’un carré à chaque appui sur le bouton de la souris.

var value; // Couleur de remplissage du carré (0 = noire, 255 = blanc)
// La variable est déclarée globale (i.e. en dehors de toute fonction) car
// elle doit être accessible depuis les 3 fonctions setup(), draw() et mousePressed()

/**
 * Initialise tout ce qui doit l'être au démarrage du script
 */
function setup() {
   createCanvas(100,100);
   value = 0;
}

/**
 * Rafraichit l'affichage (environ 60 fois par seconde par défaut)
 */
function draw() {
  fill(value); // Spécifie la couleur de remplissage à partir de la variable `value`
  rect(25, 25, 50, 50); // Trace un carré
}

/**
 * Inverse la couleur de remplissage.
 * Si elle vaut 0 (-> noir) elle passe à 255 (-> blanc) et réciproquement.
 */
function mousePressed() {
  if (value == 0) {
    value = 255;
  } else {
    value = 0;
  }
}

Dans le même ordre d’idée, il existe une fonction keyPressed() qui est appelée automatiquement lorsqu’une touche de clavier est enfoncée. Le code de la touche enfoncée est alors renseigné dans la variable globale keyCode.

Le code de la touche est un code numérique qui peut être obtenu depuis le site keycode.info.

Le code suivant montre un exemple d’utilisation de la fonction keyPressed() pour changer la couleur de remplissage d’un carré selon la touche de clavier enfoncée.

// change la couleur de remplissage d’un carré selon la touche de clavier enfoncée

var value; // Couleur de remplissage du carré

function setup() {
   createCanvas(100,100);
   value = 'red'; // couleur initiale du carré
};

function draw() {
   background(192);
   fill(color(value)); // Spécifie la couleur de remplissage à partir de la variable `value`
   rect(25, 25, 50, 50); // Trace un carré plein
}

/**
 * Détermine une couleur de remplissage selon la touche enfoncée.
 * `R` ou `r` -&gt; rouge. `O` ou `o` -&gt; orange. `G` ou `g` -&gt; vert.
 * La touche ESPACE (code 32) permet de passer d'une couleur à l'autre.
 */
function keyPressed() {

   switch(keyCode) {
      case  82 : // touche R
         value = 'red';
         break;

      case 79 : // touche O
         value = 'orange';
         break;

      case 71 : // touche G
         value = 'green';
         break;

      case 32 : // touche ESPACE
         if( value === 'red' ) {
            value = 'orange';
         } else if ( value === 'orange' ) {
            value = 'green';
         } else { // value === 'green'
            value = 'red';
         }
         break;
   }

   return false;
}

🖮 Travail n° 2 : Tracé de lignes multicolores

À partir des exemples donnés pour les fonctions mousePressed() et keyPressed() ainsi que la documentation de P5.js sur les fonctions de tracé de lignes (→ line()) et d’ellipses (→ ellipse()), faire un script qui permet de tracer des segments de droite dont les extrémités sont spécifiées par des clics de souris et dont la couleur est déterminée à partir de la dernière touche clavier enfoncée.

Chaque segment débutera à partir de l’endroit où se termine le précédent segment (→ un seul clic de souris sera donc suffisant pour tracer chaque segment).

Les segments seront délimités par un cercle plein.

4 couleurs seront prises en charge :

le rouge avec la touche R
l’orange avec la touche O
le vert avec la touche G
le bleu avec la touche B

Un exemple de ce qui est attendu est reporté ci-dessous:

[Optionnel] Faire en sorte que les lignes ne se tracent que si le clic souris intervient à une distance supérieure à 50 points du point précédent.

Pour résoudre ce problème, faire resurgir vos souvenirs du collège et notamment le Théorème de Pythagore link 😉.

Un peu de géométrie…

🖮 Travail n° 3 : Cercle circonscrit

À partir de la documentation de P5.js et du document ressource “Centre et rayon d’un cercle passant par trois points donnés” pdf (voir plus particulièrement le chapitre “II - application dans un tableur”), faire un programme qui trace le cercle circonscrit à 3 points déterminés par 3 clics de souris dans la zone de dessin.

Un exemple d’exécution de ce programme est représenté ci-dessous afin de vous donner un exemple de ce qui est attendu.

Pour aller plus loin…

Les fonctionnalités offertes par P5.js rendent relativement aisée la programmation de petits jeux.

🖮 Travail n° 4 : Codage d’un jeu

Développer votre propre jeu en utilisant la librairie P5.js.

Quelques idées de jeu

Jeu de Snake

Consiste à faire manger le plus de pommes à un serpent en lui faisant éviter les murs et son propre corps.
“Jeu” de la vie de Conway

Illustre la multiplication d’une colonie de cellules à partir de règles pré-établies
Tic-Tac-Toe ou morpion

Jeu qui se joue à 2 ou contre l’ordinateur et qui consiste à créer le premier un alignement.
…

Conclusion

Dans cette activité vous avez utilisé une librairie Javascript qui facilite le développement d’applications web intéractives.

Les application web sont de plus en fréquentes car elles permettent plus de souplesse que les applications natives (telles que celles réalisées avec le framework Qt par exemple) du fait qu’elles ne requièrent de la part de ceux qui les utilisent que le lancement d’un navigateur internet. Il est même possible de les utiliser depuis des types d’appareil différents (comme ordinateurs, tablettes, smartphones) en adoptant ce qu’on appelle un responsive design.

Ce type de design est relativement facile à mettre en place à travers des librairies comme Bootstrap.

Cependant les applications web imposent certaines limitations (ex.: interdiction d’accéder aux fichiers de l’ordinateur pour des raisons de sécurité) et sont moins performantes que les applications natives.

Dans votre formation — qui est généraliste — vous serez amenés à développer ces 2 types d’application (web et natives).

🞄 🞄 🞄