Content
Edit 2017 : Tout ça c'est dépassé depuis longtemps, maintenant il y a p5js (et c'est super) !
Ah et pour bien démarrer avec p5.js, voici des exemples commentés !
* --- *
Dans l’article Pjs #7, il était question d’utiliser jQuery pour récupérer les événements souris quand Processing.js n’en est plus capable (avec une div devant la canvas par exemple).
L’astuce consistait donc à intercepter la position de la souris via l’événément jQuery « mousemove, » et les clics via « mousedown » et « mouseup », pour les renvoyer sur les mousePressed() et mouseReleased() de Processing.js.
Dans la foulée, Olivier de codelab m’a envoyé un email pour me demander si ça pouvait fonctionner sur iPhone et Android… c’était en Octobre 2012 et je ne lui ai toujours pas répondu…
Olivier, ce post est pour toi !
On peut ainsi intercepter les « mouse events » et les « touch events » de la même façon, et les répercuter à Processing.js de manière transparente :
// position à jour de la souris via mouseX et mouseY $(document).bind('mousemove', function(e){ mouseX = e.pageX; mouseY = e.pageY; }); // position à jour du TOUCH via mouseX et mouseY $(document).bind('touchmove', function(e){ e.preventDefault(); // pour empêcher le scroll normal var touch = e.originalEvent.changedTouches[0]; // le premier doigt mouseX = touch.pageX; mouseY = touch.pageY; }); // click/TOUCH events -> déclenche les fonctions de Pjs $(document).bind('mousedown touchstart', function(e){ e.preventDefault(); p.mousePressed(); }); $(document).bind('mouseup touchend', function(e){ e.preventDefault(); p.mouseReleased(); });
Vous pouvez bien-sûr personnaliser ce code pour qu’il réagisse différemment au clic et au touch, mais là c’est une autre histoire…
Et il ne faut pas oublier aussi que la coordonnées de la « souris » tactile n’est accessible que lorsque le doigt touche l’écran… pas de coordonnée du doigt au-dessus de l’écran !
var touch = e.originalEvent.changedTouches[0];
c’est le premier doigt…
var touch = e.originalEvent.changedTouches[1];
c’est le deuxième doigt, etc…
http://www.html5rocks.com/fr/mobile/touch/
Et pour aller encore plus loin, détecter des « gestures »,
« swipe », « zoom », etc, il y a des plugins très
bien comme Hammer.js …