Touches Blanches

Touches Noires

Touches Blanches

Touches Noires

Évènements

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 :

• bpm = tempo de la musique
• nVelocity = volume de la musique

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 :