PLAY AROUND JAVASCRIPT
Jouons un peu avec Javascript
Présentation
En parcourant plusieurs magasins d'application (Apple Store, Windows Store, ...) nous sommes souvent tombés sur des applications de musique représentant un simple instrument donnant la possibilité d'y jouer (piano, batterie ...). Des applications sympas lorsque l'on s'ennuie vraiment. Ce qui est moins sympathique en revanche, c'est que bien souvent ces applications sont gratuites, mais remplies de publicités ou, pires encore, elles sont payantes.
Personnellement, cela nous gêne de faire payer pour une application qui est en réalité d'une extrême facilité.
Nous avons donc écrit cette page pour montrer cette simplicité et c'est pour cette même raison que nous sommes restés au coeur de la technique en ne rajoutant aucun artifice.
L'instrument
Nous avons choisi de faire un instrument à cordes et la cithare a été choisie sans aucune raison particulière (nous ne sommes en rien musiciens).
La seule chose importante de l'instrument est le groupe de cordes, elles sont créées avec le DOM SVG et sont simplement des courbes de Béziers faites à l'aide de <PATH>.
<svg id="cords" width="700" height="280" viewbox="0 0 700 280" pointer-events="all">
<path d="M 32,50 Q 309,50 586,50" data-note="0" fill="none" stroke="#000000" stroke-width="3"></path>
<path d="M 32,75 Q 309,75 586,75" data-note="1" fill="none" stroke="#000000" stroke-width="3"></path>
<path d="M 32,100 Q 309,100 586,100" data-note="2" fill="none" stroke="#000000" stroke-width="3"></path>
<path d="M 33,125 Q 309,125 586,125" data-note="3" fill="none" stroke="#000000" stroke-width="3"></path>
<path d="M 33,150 Q 309,150 586,150" data-note="4" fill="none" stroke="#000000" stroke-width="3"></path>
<path d="M 33,175 Q 309,175 586,175" data-note="5" fill="none" stroke="#000000" stroke-width="3"></path>
<path d="M 31,200 Q 309,200 586,200" data-note="6" fill="none" stroke="#000000" stroke-width="3"></path>
<path d="M 32,225 Q 309,225 586,225" data-note="7" fill="none" stroke="#000000" stroke-width="3"></path>
<path d="M 33,250 Q 309,250 586,250" data-note="8" fill="none" stroke="#000000" stroke-width="3"></path>
</svg>
Nos cordes sont définies par l'attribue d :
- M x1,y1 : Point d'encrage X,Y du début de la courbe
- Q xq,yq : Position X,Y du point de contrôle de la courbe quadratique
- x2,y2 : Position X,Y de fin
Animation de la corde
Comme nous l'avons vu l'animation se fait en manipulant simplement la valeur Q de l'élément l'attribue d.
L'animation n'a pas besoin d'être très poussée, car de toute façon elle est rapide. La seule chose que l'on souhaite pour donner un effet suffisamment réaliste est de savoir si au moment d'attaquer la corde, on la pousse vers le haut ou vers le bas et connaître l'emplacement du «doigt» sur la corde pour déterminer où la courbure doit se trouver.
Il suffit de comparer la position du pointer au moment du premier touché de la corde (à l'entrée) et également la position au moment du dernier touché (la sortie) :
var enterY;
cord.onmouseover = function(event) {
enterY = event.clientY;
}
cord.onmouseout = function(event) {
if (event.clientY > enterY) {
// push down
} else {
// push up
}
}