Programmation javascript avec p5.js

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 :

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.88*pow(2,-1) qui est la fréquence du si2, et frequence("fa",5) renverra le résultat de 349.23*pow(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().