Enseignement de l'informatique et du numérique au lycée Boissy d'Anglas
https://icn-isn-boissy.yj.fr/wp/2017/11/03/programmation-javascript-avec-p5-js/
Export date: Wed Feb 26 14:56:39 2025 / +0000 GMT

Programmation javascript avec p5.js

Débuter avec le javascript

Le javascript est un langage de programmation que l'on peut insérer dans une page web et qui est interprété par le navigateur internet.

Introduction

Pour commencer un utilisera, l'excellent site Silent Teacher ¹ (ne pas y consacrer plus qu'une heure).

Note : Si besoin, notamment si vous vous êtes interrompu, il est possible de faire apparaître le menu permettant de choisir le niveau de difficulté en tapant dans la console javascript (généralement accessible avec F12) le code suivant : (document.getElementById("show_menu")).click().

Variable, conditions et boucle

Pour apprendre les bases de la programmation, on utilisera le livre en ligne JavaScript Éloquent, Une introduction moderne à la programmation de Marijn Haverbeke (dont on pourra lire l'introduction ² à la maison).

Dans ce livre en ligne, les exemple de code peuvent être lancé en cliquant sur

(on peut aussi l'ouvrir pour l'éditer dans une console en cliquant sur

).

Commencer par lire le chapitre :

Les bases du JavaScript : valeurs, variables et structures de contrôle ³

Premiers pas avec p5.js

Récupération des fichiers

Pour commencer, télécharger l'archive ZIP applications-javascript.zip ⁴contenant les fichiers qui seront utilisés pour découvrir le javascript et la bibliothèque p5.js.

Extraire les fichiers dans un répertoire dédié et observer leur organisation :

le répertoire racine contient les fichiers HTML.

le répertoire assets contient les contenus de média (images, sons...).

le répertoire scripts contient les fichiers javascript (extension .js).

le répertoire styles contient les fichiers CSS.

On trouvera dans le répertoire scripts les fichiers p5.js et p5.sound.js. Ces deux fichiers font partie de la bibliothèque p5.js.

Une bibliothèque (library) rassemble un ensemble de fonctions déjà codées qui peuvent alors être utilisées directement dans un programme. p5.js ⁵ permet très facilement de dessiner, de jouer un son, de faire des animations... Il s'agit du portage en en javascript du programme Processing ⁶ (qui utilise un autre langage de programmation, le Java).

Toutes les fonctions de p5.js sont recensées sur la page :

https://p5js.org/reference/ ⁷

Par ailleurs on trouvera sur le site de nombreux exemples et tutoriaux.

HTML et javascript

Pour être interprétable par un navigateur web, un programme javascript doit être intégré dans une page web. On utilise pour cela la balise <script> :

<script type="text/javascript">

  // Mon code Javascript

  ...

</script>

Il est aussi possible de lier directement un fichier javascript avec :

<script type="text/javascript" src="monscript.js"></script>

Ouvrir le fichier exercice-debogage.html avec un éditeur de texte (Notepad++, Sublimtext...) et identifier les deux fichiers javascript qui sont appelés.

Puis ouvrir le fichier exercice-debogage.html dans un navigateur web et observer ce qu'il fait.

Outils de débogage

Les navigateurs modernes possèdent des outils avancés (les Outils de développement) permettant de faire la chasse aux erreurs d'un programme (les bugs ou bogues).

On utilisera le navigateur Mozilla Firefox et son Débogueur accessible dans le menu Développment (ou avec le raccourcis clavier Control-Maj-S). Voici à quoi il ressemble (cliquer pour agrandir):

Conseils :

afficher la console miniature (console scindée).

régler la console de manière à n'afficher que javascript et journal (ce sont les seuls qui doivent avoir un fond coloré).

cliquer sur le fichier p5.js et le mettre dans une boîte noire.

Premier exercice avec les outils de débogage

Ouvrir le fichier exercice-debogage.html et l'outil de débogage de Firefox (si besoin on peut relancer le programme en actualisant la page - touche F5).

Mettre le programme en pause (avec l'outil de débogage de Firefox), puis écrire dans la console les commandes suivantes (aide : on peut reprendre une commande précédente en utilisant la touche flèche haute) :

fill(200);

ellipse(200,300,50);

ellipse(300,400,100,30);

ellipse(400,200,40,200);

En déduire à quoi correspondent chacun des nombres passés entre parenthèse à la fonction ellipse(). Consulter la documentation de la fonction ellipse() pour vérifier votre réponse.

Deuxième exercice avec les outils de débogage

Recharger la page exercice-debogage.html et, avec l'outil de débogage de Firefox, chercher dans le fichier exercice-debogage.js la ligne :

ellipse(400,300,diametre);

Insérer un point d'arrêt sur cette ligne et créer une nouvelle expression espionne sur la variable diametre. Mettre enfin le fichier p5.js dans une boîte noire.

Recharger la page et exécuter pas à pas le programme avec les outils de débogage. Suivre au fur et à mesure de l'exécution du programme l'évolution de la valeur de la variable diametre.

Quelle est la ligne de code qui permet de faire évoluer la taille du disque ?

Application n°1 : Créer un petit programme de dessin

Ouvrir dans un éditeur de texte (comme Notepad++ ou Sublimtext) le fichiers application-1_dessin.js. Ce programme est normalement appelé par le fichier html application-1_dessin.html.

Ce fichier contient deux fonctions (on verra ce qu'est une fonction à la partie suivante) :

la fonction setup() dont le code est appelé au début du programme (pour initialiser des variables ou configurer par exemple la taille de la fenêtre de dessin).

la fonction draw() dont le code est exécuté de manière répétée 60 fois par seconde.

Le but de cette partie est de créer un petit programme de dessin. Ne pas hésiter à tester des bouts de code dans la console, ou à consulter la documentation ⁸. On écrira du code javascript uniquement dans la fonction draw() (chercher le commentaire indiquant le début de l'exercice).

Travail à effectuer :

n°	Tâche	Indications
1	Compléter le commentaire en en-tête du programme en indiquant votre nom et la date.	Toujours prendre le temps de commenter un programme.
2	Afficher un disque de diamètre 10 pixels au centre de la fenêtre de dessin.	Travailler dans la fonction `draw()` Si besoin re-tester la fonction `ellipse()` dans la console ou consulter sa documentation sur le site p5js.org ⁹.
3	Utiliser les variables `mouseX` et `mouseY` pour placer le disque à la position de la souris.	Ces deux variables sont créées par p5.js et contiennent la position en x et en y de la souris (consulter la documentation si besoin).
4	Colorier le disque en rouge si l'on clique à la souris, en vert sinon.	La variable booléenne `mouseIsPressed` est créée par p5.js et permet de savoir si un bouton de la souris est pressé ou non. La couleur de remplissage est définie par `fill(R,V,B)` où R, V et B sont des nombres allant de 0 à 255 indiquant la quantité de rouge, de vert et de bleu (voir documentation).
5	Effacer le dessin lorsqu'on clique avec la molette de la souris (bouton du milieu).	Pour effacer il faut redéfinir la couleur du fond avec la fonction `background()`. Consulter la documentation de la variable `mouseBouton` pour voir comment identifier quel bouton de la souris est utilisé pour cliquer.
6	Augmenter la taille du disque lorsque l'on clique avec le bouton gauche, et la diminuer lorsque l'on clique avec le bouton droit.	Déclarer une variable nommée `diametre` juste avant la fonction `draw()` (à l'endroit indiqué en commentaire). Changer sa valeur en fonction du bouton utilisé pour cliquer.

Apprendre le javascript (suite) : les fonctions

Reprendre le livre JavaScript Éloquent et lire maintenant le chapitre suivant (mais ne pas y passer plus d'une séance, tant pis si vous n'avez pas tout lu) :

Fonctions ¹⁰

Application n°2 : Transformer votre clavier en piano

Cette fois on travaillera avec le fichier application-2_piano.js. Vérifier qu'il est bien appelé par le fichier HTML application-2_piano.html. Au passage vous remarquerez qu'en plus de la bibliothèque p5.js on utilise p5.sound.js (qui est la partie de p5.js qui permet de gérer les sons). La documentation de la bibliothèque p5.sound.js se trouve ici ¹¹.

Ouvrir le fichier application-2_piano.js avec un éditeur. Vous observerez qu'il contient déjà :

une fonction setup() qui est appelée par p5.js au démarrage du programme.

une fonction draw() appelée une fois par seconde [grâce à la ligne frameRate(1); dans setup()] et qui est utilisée pour battre la mesure.

une fonction jouerFrequence() qui, comme son nom l'indique, permet de jouer un son d'une fréquence donnée.

une fonction keyTyped() qui est appelée par p5.js chaque fois qu'une touche du clavier est enfoncée. Pour le moment cette fonction ne fait rien.

une fonction keyReleased() qui coupe le son lorsque une touche du clavier est relâchée.

Ouvrir le fichier application-2_piano.html dans un navigateur. Normalement vous devez avoir le son de la mesure (un bruit de tambour, une fois par seconde). Vérifier que le son fonctionne (utiliser des écouteurs pour ne pas déranger vos voisins).

Le but de cette partie est de transformer le clavier de l'ordinateur en piano, capable de jouer des notes sur plusieurs octaves.

Pour cela, on donne les fréquences des notes pour l'octave n°3 :

Note	do3	ré3	mi3	fa3	sol3	la3	si3
Fréquences (Hz)	261.63	293.66	329.63	349.23	392.00	440.00	493.88

Sachant que pour une autre octave les notes s'en déduisent par :

fréquence de l'octave n = fréquence de l'octave 3 multipliée par (2 à la puissance [n-3])

Travail à effectuer :

n°	Tâche	Indications
1	Compléter le commentaire en en-tête du programme en indiquant votre nom et la date.	Toujours prendre le temps de commenter un programme.
2	Jouer un do3 chaque fois qu'une touche est pressée.	Appeler la fonction `jouerFrequence()` depuis la fonction `keyTyped()` en lui donnant la fréquence du do3.
3	Créer la fonction `frequence()` qui prend comme argument la note à jouer sous forme de chaîne de caractère (do, ré, mi...) et renvoie la fréquence correspondante (pour l'octave n°3).	Par exemple `frequence("la")` renvoie le nombre `440.00`, et `frequence("do")` renvoie le nombre `261.63`, etc. Tester la fonction à partir de la console pour vérifier qu'elle fonctionne pour toutes les valeurs de paramètre possibles.
4	Modifier la fonction `frequence()` de manière qu'elle prenne comme argument le numéro d'octave, en plus de la note à jouer et renvoie toujours la fréquence de la note demandée.	Par exemple, `frequence("si",2)` renverra le résultat de `493.88pow(2,-1)` qui est la fréquence du si2, et `frequence("fa",5)` renverra le résultat de `349.23pow(2,2)` qui est la fréquence du fa5. Utiliser la fonction pow() ¹² pour calculer la fréquence de n'importe quel octave Tester la fonction à partir de la console pour vérifier qu'elle fonctionne pour toutes les valeurs de paramètre possibles.
5	Faire que les touches "a" à "u" du clavier jouent les notes de l'octave n°2 ("a" joue do2, "z" joue ré2, "e" joue mi2, etc.), les touches "q" à "j" les notes de l'octave n°3 et les touches "w" à "," les notes de l'octave n°4.	Utiliser la variable key ¹³ pour savoir quelle touche est pressée. Dans `keyTyped()`, appeler la fonction `frequence()` pour connaître la fréquence à jouer puis la fonction `jouerFrequence` pour la jouer.
6	Stocker la couleur du fond dans une variable et l'utiliser pour changer la couleur du fond.	Un pourra utiliser la fonction `color()`, mais cette fonction ne peut pas être appelée n'importe où. L'utiliser au sein de la fonction `setup()`.

Apprendre le javascript (fin) : les tableau

Reprendre le livre JavaScript Éloquent et lire maintenant le chapitre d'après (mais ne pas y passer plus d'une séance, tant pis si vous n'avez pas tout lu) :

Structures de données : objets et tableaux ¹⁴

Application n°3 : Faire voler un dragon

Le fichier javascript de la troisième application s'appelle application-3_sprites.js et est appelé dans le fichier html correspondant (on appelle sprite, ou lutin, un élément graphique qui peut se déplacer sur l'écran).

Le but de cette application est de créer une animation avec un dragon puis un rouge-gorge. Les images à utiliser se trouvent dans le répertoire assets/images/.

Attention : si le nom de l'image n'est pas correct, le programme peut bloquer sur Loading, sans afficher de message d'erreur dans la console.

Travail à effectuer :

n°	Tâche	Indications
1	Compléter le commentaire en en-tête du programme en indiquant votre nom et la date.	Toujours prendre le temps de commenter un programme.
2	Déclarer une variable appelée `dragon` qui doit pouvoir être accessible de partout dans le programme. Stocker dans cette variable `dragon` l'image `dragon_frame-1.png`. Puis afficher l'image à la position de la souris.	`dragon` doit-elle être une variable locale ou globale ? Pour charger une image, utiliser la fonction `preload()`. Pour afficher une image, utiliser `image(dragon,dx=valeur,dy=valeur)` où les valeurs données à `dx` et `dy` donnent la position de l'image sur la fenêtre de dessin. La position de la souris est donnée par `mouseX` et `mouseY`. Afficher l'image dans la fonction `draw()`. Pour effacer il faut appeler la fontion `background().` Pour plus d'esthétique, on pourra rajouter `imageMode(CENTER)` et `noCursor()` dans la fonction `setup()`.
3	Transformer la variable `dragon` en tableau et y stocker dans l'ordre les quatre images de dragon contenues dans assets/images/ Afficher l'image n°3 à la position de la souris.	Pour déclarer un tableau vide il faut écrire `var tab = []`. Pour ajouter un élément à un tableau on peut utiliser : `tab.push(element)`. Le remplissage du tableau avec la fonction `loadImage()` doit se faire dans la fonction `preload()`. Afficher le tableau dans la console pour vérifier qu'il est bien rempli.
4	Animer le dragon en faisant défiler les images	Il faut créer une variable `index` qui stocke le numéro de l'image à afficher. Changer la valeur de `index` dans la fonction `draw()`. Attention : `index` doit correspondre à un élément du tableau, il ne peut pas prendre n'importe quelle valeur.
5	Remplacer le dragon par un rouge-gorge à en utilisant les fichiers `assets/images/rouge-gorge_frame-i.png`.	Vu le nombre d'image il faut utiliser une boucle `for`. Pour transformer un nombre en chaîne de caractère on peut utiliser `srt()` Pour concaténer deux chaînes de caractère `a` et `b` utiliser simplement `a+b`.

Links:

http://silentteacher.toxicode.fr/
http://fr.eloquentjavascript.net/chapter1.html
http://fr.eloquentjavascript.net/chapter2.html
http://icn-isn-boissy.yj.fr/wp/wp-content/uploads/ 2016/10/applications-javascript.zip
https://p5js.org/
https://processing.org/
https://p5js.org/reference/
https://p5js.org/reference/
https://p5js.org/reference/#/p5/ellipse
http://fr.eloquentjavascript.net/chapter3.html
http://p5js.org/reference/#/libraries/p5.sound
https://p5js.org/reference/#/p5/pow
http://p5js.org/reference/#/p5/key
http://fr.eloquentjavascript.net/chapter4.html

Post date: 2017-11-03 19:26:15
Post date GMT: 2017-11-03 18:26:15

Post modified date: 2017-11-07 13:26:27
Post modified date GMT: 2017-11-07 12:26:27

Export date: Wed Feb 26 14:56:39 2025 / +0000 GMT
This page was exported from Enseignement de l'informatique et du numérique au lycée Boissy d'Anglas [ https://icn-isn-boissy.yj.fr/wp ]

Export of Post and Page has been powered by [ Universal Post Manager ] plugin from www.ProfProjects.com