Débuter en P5.js

Une version pdf de ces activités est disponible ici.


Comme pour le TP sur les bases du javascript, vous allez réaliser les exercices de ce document en autonomie et recopier le code de chaque programme demandé dans un document du dossier ICN de votre drive (utilisez le "copier-coller" !). Pensez à le présenter correctement (comme un devoir) avec obligatoirement les éléments suivants :


Comme pour le premier TP, lorsque vous êtes "bloqués", pensez à utiliser internet pour chercher de l'aide avant d'appeler "au secours" le professeur s'il est déjà occupé ! Le site de référence pour P5.js est https://p5js.org/reference/; pensez à le consulter !
N'hésitez pas à vous référer à cette page (les bases en javascript que nous avons découvert précédemment) et au document que vous avez rédigé dans votre drive à l'occasion de la réalisation du premier TP.


À la fin de ce TP vous saurez :

Pour commencer...


Nous avons déjà appris à créer un script javascript qui s'affiche et s'exécute dans une page web. Nous allons poursuivre dans cette voie mais désormais nous allons pouvoir utiliser davantage d'instructions qu'en javascript "classique". Ces instructions sont contenues dans une bibliothèque qu'on charge à la ligne 10 du fichier index.html : 
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <title>p5.js</title>
    <link rel="stylesheet" href="style.css">
    <!-- cette ligne est à décommenter si on souhaite avoir la dernière version de p5.js
	<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.23/p5.min.js"></script> 
    -->
    <script src="p5.min.js"></script>
    <script src="script.js"></script>
</head>
<body>
</body>
</html>
</br>

Nous écrirons notre script dans un fichier script.js qui contiendra ceci au départ : 
function setup() {
// à compléter ici
}
function draw() {
// à compléter ici
}
Enfin, nous mettrons la page forme grâce au fichier de style style.css et nous aurons aussi besoin d'un dossier asset pour stocker des fichiers (nous verrons ça plus tard).
Finalement, l'ensemble des fichiers dont nous avons besoin pour débuter est disponible ici : ProjetVideP5js.zip
Pour chaque exercice, vous téléchargez une nouvelle version de ce projet "vide" et vous renommez le dossier au nom de l'exercice.
Il ne nous reste plus qu'à ouvrir le fichier script.js avec NotePad++ et le fichier index.html avec le navigateur.
Nous sommes prêts à travailler !
Remarque : il existe aussi un éditeur "en ligne" pour écrire et exécuter du code P5.js : http://p5ide.herokuapp.com/editor# (à utiliser avec Firefox).

Méthodes setup et draw


Rappel : en javascript (et donc aussi en P5js) on déclare les variables grâce au mot clé var suivi du nom de la variable et éventuellement de son initialisation à une valeur. Ces déclarations sont à faire avant le "function setup()".
Par exemple un script pourrait commencer par : 
var nom = "toto";
var age;
function setup() {

}

La méthode setup


La méthode setup est la méthode "lancée" au début du script lorsqu'on ouvre la page html (en fait, il peut y avoir une autre méthode qui se lance avant, la méthode preload mais nous verrons cela plus tard). C'est dans cette méthode setup que nous allons initialiser un certain nombre de paramètres et de variables.


En reprenant l'exemple précédent, on peut demander l'âge de toto par exemple.
  1. Copier le code de l'exemple et compléter ainsi : 
    function setup() {
  // Création d'une fenêtre grise
  createCanvas(400,400);
  background(128);
  // Question
  age = parseInt(prompt(nom + ", quel est ton âge ?"));
  // Affichage :
  text(nom+ " a " + age + " ans",200,200);
}
  2. Ouvrir le fichier index.html dans un navigateur.
    1. Modifier les valeurs (400,400) de la ligne 3. Observer les changements en rechargeant la page html.
    2. Même question avec les paramètres 200,200 de la ligne 8.
    3. En déduire une explication du rôle des lignes numérotées 3 et 8 dans le cadre précédent.
  4. Remplacer la valeur 128 de la ligne 4 par une autre valeur comprise entre 0 et 255. En déduire une explication du rôle de la ligne 4.

En utilisant la documentation présente ici (descendre jusqu'au paragraphe Typography), écrire un script faisant apparaître des textes dans la fenêtre avec :

La méthode draw


La méthode draw est une méthode "lancée" automatiquement un certain nombre de fois par seconde.
C'est dans cette méthode que nous écrirons les instructions de dessin.

Premiers dessins


Avant de voir à quoi sert la méthode draw(), nous allons d'abord apprendre à dessiner des formes à l'écran.

Repérage


La fenêtre est munie d'un repère orthonormé (comme en maths !) mais orienté différemment du repère habituel :
Attention : les coordonnées sont séparées par une virgule (et non pas un point-virgule comme en mathématiques françaises).


Pour une fenêtre définie par createCanvas(200,100), les abscisses vont de 0 à 199 et les ordonnées de 0 à 99.
Enfin, pour en finir avec les généralités, à tout moment du programme, on peut connaître la largeur et la hauteur de la fenêtre à l'aide des mots-clés width et height. Ceci peut être pratique pour repérer le milieu de l'écran (qui a pour coordonnées (width/2,height/2)).

Formes de base


Le point


Pour placer le point de coordonnées (30;40) à l'écran, on écrit la commande : 
point(30,40);

Attention, et ceci est vrai pour toutes les formes, il faut que les coordonnées du point soient entre 0 et width-1 pour l'abscisse et entre 0 et height-1 pour l'ordonnée; sinon on ne le voit pas !

La ligne droite


On trace un segment [AB] par l'instruction : 
line(xA,yA,xB,yB);

Le rectangle


On trace un rectangle de sommet A, de largeur larg et de hauteur haut ainsi : 
rect(xA,yA,larg,haut);

Il est aussi possible de modifier le mode de définition des rectangles (donner les coordonnées de deux coins opposés ou du centre et des largeurs/hauteurs), si vous en avez besoin, voir ici

L'ellipse


Une ellipse est une sorte de cercle "aplati". Pour tracer une ellipse de centre (50,50), de diamètre horizontal 60 et de diamètre vertical 20, on écrit : 
// ellipse de centre (50,50) de diamètre horiz 60 et vertical 20
ellipse(50,50,60,20);

Comme pour le rectangle, il existe plusieurs autres modes décrits ici 
// Mode RADIUS : cercle de centre (100,50) et Rayon=20
ellipseMode(RADIUS);
ellipse(100,50,20,20);



Réaliser un dessin de votre choix avec au minimum un point, une ligne, un rectangle et une ellipse.

Couleurs


Principe des couleurs


L'affichage des couleurs à l'écran se fait grâce à un "mélange" de trois sources de lumières : rouge, vert et bleu (ou red, green, blue d'où le nom du codage des couleur : RGB). Pour plus de détails, vous pouvez consulter cet article wikipédia
Avec 256 nuances de chacune de ces trois couleurs, on obtient : 256 x 256 x 256 = 16777216 nuances de couleurs différentes !
Il existe beaucoup d'outils en ligne pour retrouver la "quantité" de chacune de ces trois couleurs dans une teinte choisie. Par exemple, vous pourrez consulter : http://htmlcolorcodes.com/fr/
Il existe d'autre façons de coder une couleur en informatique mais nous nous contenterons du codage RGB.

Remplissages et contours


Toutes les figures tracées jusqu'à présent ont un contour et sont remplies.
Pour modifier la couleur de remplissage : 
fill(R,G,B,t);
// R, G, B quantités de rouge, vert et bleu entre 0 et 255
// t : degré de transparence (0:transparent, 255:opaque)
fill(N);
// N étant entre 0 et 255 (0=noir, 255=blanc)
fill(#hhhhhh);
// hhhhhh : code hexadécimal de la couleur entre 0 et ffffff
noFill();// Pas de remplissage

La couleur de fond se modifie à l'aide de : 
background(R,G,B);
Attention : modifier le fond après avoir construit des figures les efface !
Pour supprimer le contour, on commence par l'instruction : 
noStroke();

Pour modifier la couleur et l'épaisseur du contour : 
stroke(R,G,B,t);
strokeWeight(2);



Même consigne que l'exercice précédent mais avec des couleurs.

Réaliser quelques-uns des drapeaux suivants :

La méthode draw


Dans le fichier script.js téléchargé précedemment, il y avait une méthode setup et une méthode draw. Cette dernière va être très utile pour créer des animations (par exemple pour déplacer des personnages dans un jeu).


Observer le code suivant (on remarquera au passage qu'en P5.js, la troncature s'écrit floor alors qu'en javascript, c'était Math.floor; idem pour random) : 
var x, y, r, g, b;

function setup() {
  createCanvas(400,400);
  background(128);
}

function draw() {
  r = floor(random() * 256);
  g = floor(random() * 256);
  b = floor(random() * 256);
  fill(r,g,b);
  x = floor(random() * 360);
  y = floor(random() * 360);
  text("ICN",10+x, 25+y);
}
  1. Copier ce code dans votre fichier script.js et ouvrir la page index.html.
  2. Expliquer le rôle de la méthode draw.
  3. Modifier le programme pour que le texte "ICN" s'affiche à un seul endroit (les autres "s'effacent").
  4. Consulter cette page et ralentir le "clignotement" du texte "ICN".


On donne le code suivant : 
var x=10, y=200;

function setup() {
  createCanvas(400,400);
  background(0,50,255);// fond bleu
  fill(255,0,0);// remplissage rouge
  noStroke();// pas de contour
}

function draw() {
  background(0,50,255);// Efface l'écran
  ellipse(x,y,10,10);// dessin d'une balle
}
  1. Que "dessine" ce code ? Vérifier en copiant ce code dans votre script.js
  2. Quelle variable faut-il modifier pour déplacer la balle vers la droite ?
  3. Effectuer cette modification dans la méthode draw.
  4. Comment empêcher la balle de sortir de l'écran ?
  5. Comment la faire rebondir à droite puis à gauche ?

Modifier le code de l'exercice précédent pour déplacer la balle en diagonale et la faire rebondir sur les quatre murs.

Lire et exploiter un fichier texte


L'objectif de la première partie est de lire un fichier "text" dans lequel nous allons écrire des 'X' et des espaces et de transformer ceci en une "map" de jeu (les 'X' représentant les murs de la map).

Lecture du fichier


Nous allons commencer par créer dans le dossier assets un fichier nommé map1.txt et contenant des 'X' est des espaces (voir exemple ci-dessous à gauche, respecter les 10 lignes de 20 caractères). L'objectif étant de le transformer en un écran comme ci-dessous à droite : 
XXXXXXXXXXXXXXXXXXXX
X      X         X X
X XXX XXX XXXXX XX X
X X   X         X  X
X X     X   XX     X
X    XXXX XXXXX  X X
X X     X X      X X
X XXXXXXX XXXXXXXX X
X                  X
XXXXXXXXXXXXXXXXXXXX




Attention : utiliser la touche 'espace' et non pas la touche 'tab' pour faire les blancs.
Nous allons lire ce fichier dans notre script grâce à l'instruction loadStrings. Cette instruction va lire notre fichier ligne par ligne et stocker toutes ces lignes dans un nouveau type de variables qu'on appelle tableau c'est-à-dire une variable "numérotée" (on dit plutôt indicée).
L'objectif des deux prochains exercices est de réaliser cette "map" à l'écran grâce à la lecture du fichier texte.
Dernière précision avant de commencer : le chargement du fichier va se faire dans une nouvelle méthode appelée preload qui permet de mettre "en pause" l'exécution du programme tant que tous les fichiers ne sont pas chargées.


Observer le code suivant : 
var fichier;
var nbLignes;

function preload() {
  fichier = loadStrings('assets/map1.txt');
}

function setup() {
  createCanvas(400,400);
  background(128);
  nbLignes = fichier.length;
  for (var l=0; l<nbLignes; ++l) {
    text(fichier[l], 10, 15 + 15*l);
  }
}

  1. Que veut dire length en anglais ? À quoi sert la ligne 11 ?
  2. Comment s'appelle le bloc des lignes 12 à 14 ? Quelles valeurs va prendre la variable l au cours de l'exécution ce bloc ?
  3. Copier ce programme dans un script et lancer la page html.
    1. Que contient fichier[0] ? Que contient fichier[1] ?
    2. Que fait ce script ?

Finalement, on appelle tableau une variable qui contient plusieurs valeurs qu'on peut exploiter en indiquant le nom de la variable suivi de l'indice de la valeur voulue entre crochets.
Si une variable monTab est un tableau, les différentes valeurs stockées dans ce tableau s'obtiennent ainsi :
monTab[0], monTab[1], monTab[2], ...


L'objectif est maintenant le suivant : à la place de chaque 'X' on souhaite afficher un carré noir de côté 20 et à la place de chaque espace un carré vide de côté 20 également.
  1. Observer le code suivant : 
    var nom = "Informatique";
function setup() {
  createCanvas(400,200);
  fill(255,0,0);
  text(nom.charAt(2),10,10);
  fill(0,255,0);
  text(nom.charAt(6),10,30);
  fill(0,0,255);
  text(nom.charAt(9));
}
    1. Quel caractère sera écrit en rouge ? en vert ? en bleu ?
    2. À quoi sert la méthode charAt() ?
  2. Reprenons le code de l'exercice précédent. Nous allons remplacer la ligne 13 par une deuxième boucle qui, pour chaque ligne numérotée l (lettre l pas 1), va "balayer" tous les caractères de la ligne et afficher un carré noir pour chaque caractère 'X'.
    1. Écrire une boucle for dont le paramètre est une variable c allant de 0 au nombre de caractères de la ligne (exclu).
    2. Dans cette boucle, tester si le caractère d'indice c de la ligne d'indice l est un 'X' grâce à une instruction if et à la méthode charAt.
    3. Si c'est le cas, construire un carré noir de côté 20 et de coordonnées (20*c, 20*l).
    4. Vérifier en rechargeant la page html.
  3. Modifier le fichier map1.txt et recharger la page.
  4. Prolongement : ajouter un 'B' et plusieurs 'R' dans le fichier map1.txt et afficher un rond bleu à la position du 'B' et des ronds rouges à chaque position des 'R'. (Si la map chargée est celle d'un jeu de plateau, ceci permet par exemple de positionner le joueur 'B' et les ennemis 'R' dans la map au début du niveau.)



On donne un fichier texte nommé exo11.txt à télécharger ici contenant entre autres les caractères R, V et B.
L'objectif est de créer un affichage graphique en respectant les contraintes suivantes :

Autres méthodes sur les chaînes de caractères


Dans la partie précédente nous avons utilisée la méthode charAt() appliquée à une chaîne de caractères permettant de retrouver un caractère de la variable à laquelle elle est appliquée.
Quelques autres méthodes à appliquer à des chaînes de caractères :
Méthode Description
str.length; donne la longueur (le nombre de caractères) de la chaîne str

str = str1 + str2; concatène les deux chaînes (elles sont mises "bout à bout")

var c = str.charAt(4); donne le 5e caractère (celui d'indice 4) de la chaîne str

var i = str.indexOf('c'); donne l'indice de la première apparition du caractère c

str = str1.substring(3,6) extrait de la chaîne str1 les caractères d'indices 3 à 5 inclus

str1="Chocolat";
str=str1.substring(3,6) str contient "col"

str1.equals(str2); donne un booléen qui permet de tester si les deux chaînes ont le même contenu


str.toUpperCase(); met toute la chaîne str en majuscules
str.toLowerCase(); met toute la chaîne str en minuscules

str1.compareTo(str2); compare dans l'ordre lexicographique (voir aussi str1.compareToIgnoreCase(str2);)