Mettre le son...

Touches Blanches

Code interne (note, blanche)Code de la noteNote associée
1, 160D34
2, 162Ré3
3, 164Mi3
4, 165Fa3
5, 167Sol3
6, 169La3
7, 171Si3
8, 172Do4
9, 174Ré4
10, 176Mi4
11, 177Fa4
12, 179Sol4
13, 181La4
14, 183Si4

Touches Noires

Code interne (note, noire)Code de la noteNote associée
1, 261Do3#
2, 263Ré3#
3, 266Fa3#
4, 268Sol3#
5, 270La3#
6, 273Do4#
7, 275Ré4#
8, 278Fa4#
9, 280Sol4#
10, 282La4#

Touches Blanches

Touche du clavierCode de la toucheNote associée
Tab9Do3
A65Ré3
Z90Mi3
E69Fa3
R82Sol3
T84La3
Y89Si3
U85Do4
I73Ré4
O79Mi4
P80Fa4
^130/514/160Sol4
$515/164La4
Enter10Si4

Touches Noires

Touche du clavierCode de la toucheNote associée
&49Do3#
é50Ré3#
'52Fa3#
(53Sol3#
-54La3#
_56Do4#
ç57Ré4#
)522/169Fa4#
=61Sol4#
8La4#

Évènements

NomCodeDescription
MOUSEPRESSED0Clic sur un bouton de l'interface
KEYPRESSED1Appuie d'une touche du clavier
PLAYPRESSED2Clic sur le bouton lecture
MUSICSTARTED3Démarrage de la musique après un PLAYPRESSED
MUSICFINISHED4Fin de la musique
RECORDINGSTARTED5Début de l'enregistrement lors du clic sur le bouton enregistrer
RECORDINGSTOPPED6Fin de l'enregistrement après un clic sur le bouton enregistrer si RECORDINGSTARTED
MUSICPLAYED7La musique a déjà été jouée une fois

Le synthétiseur

Le synthétiseur en lui même utilise les fonctions de javax.sound.midi. Il est initialisé grâce à la fonction initSynth() puis les notes sont jouées dans la fonction playNotes().

Différentes variables permettent de configurer le comportement du synthétiseur :

playNotes() parcourt le tableau des notes après avoir définit l'horodatage de lancement à la variable timer. C'est à dire que si le nombre de millisecondes écoulées depuis le lancement du programme est supérieur à la valeur enregistrée dans timer, additionée de la durée d'une note, le curseur numnote passe à la note suivante. La durée d'une note est définie par rapport à la seconde valeur qui lui est attribuée dans le tableau notes, qui est sa durée relative par rapport aux autres multipliée de la durée d'une note, c'est à dire une minute divisée par le tempo. Nous sommes en millisecondes, donc 1 minute = 60 000 millisecondes.

La fonction channel.noteOn() permet de jouer la note.

La fonction channel.noteOff() la désactive par la suite.

Le projet Processing.js utilise une autre bibliothèque MIDI, MIDI.js s'utilisant de manière assez similaire avec les fonctions MIDI.noteOn() et MIDI.noteOff().

L'interface

Coordonnées relatives

Afin de faciliter les ajustements de l'interface (changement de résolution, ajout d'octaves, etc…), toutes les coordonnées, qui correspondent à l'origine à une valeur en pixel, ont été converties en coordonnées relatives par rapport à la taille de la fenêtre. Ainsi, un point de coordonnées (1;1) correspond au point en bas à droite de la fenêtre, et un point de coordonnées (0;0) au point en haut à gauche. Toutes ces valeurs sont donc des nombres à virgule flottante, stockées dans des float.

windowSize[] est un tableau indiquant la largeur et la hauteur de la fenêtre. Cependant, avec Processing.js, il n'est pas possible de définir dynamiquement la taille de la fenêtre, ces valeurs sont donc ecrites directement dans size()

En outre, windowSize[] est utilisé à chaque affichage d'un élément sur l'interface, étant donné l'utilisation de coordonnées relatives par rapport à la taille de la fenêtre, il faut donc les multiplier par la largeur et la hauteur puisque Processing utilise des coordonnées absolues en pixel.

Enfin, les fonctions rect(), triangle(), ellipse(), text(), image() ont été redéfinies afin de faciliter leur utilisation avec des coordonnées relatives. super n'existant pas en JavaScript, le projet Processing.js utilise ces mêmes noms de fonctions précédés d'un d.

Détection d'un clic sur un élément

Touches du clavier

Puisque les touches ne sont que de simples rectangles et que les touches noires sont dessinées au dessus des touches blanches, on cherche tout d'abord à détecter si le clic a été effectué au niveau du clavier (mouseY >= keyboardYCoordinate*windowSize[1]), puis si une touche noire est cliquée (à l'aide de blackKeys()). Si la première condition est validée, et que blackKeys() retourne 0, cela signifie qu'un clic a été effectué sur le clavier, mais pas sur un touche noire. On a donc cliqué sur une touche blanche. whiteKeys() permet de détecter laquelle a été cliquée.

Boutons circulaires

Afin de détecter un clic sur un bouton circulaire (créé avec ellipse()) plutôt que rectangle, le mode de calcul des coordonées n'est pas le même. On utilise ici la formule de calcul de distance entre deux points :

Ici, windowSize[] est utilisé puisque les coordonnées mouseX et mouseY sont en pixel par rapport à la largeur et la hauteur de la fenêtre.

La distance entre le point A (le centre du cercle) et le point B (le point cliqué) doit alors être inférieure au rayon du cercle :