Head

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.

Rien à changer dans le sketch lui-même, et ça marchait très bien.

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 !

 

Pour ajouter le support du tactile à la méthode précédente c’est très simple, car il y a des événements Javascript pour ça, les « touch events« , et on peut les traiter avec jQuery sans difficulté.

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();
});

 

Ce bout de code va donc vous permettre de rendre votre sketch compatible avec les interfaces tactiles, sans aucune modification du sketch, puisque mouseX et mouseY sont mis à jour aussi bien à la souris qu’au doigt, et les « touchstart » et « touchend » déclencheront la même chose que les « mousedown » et « mouseup »…

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 !

 

Dans l’idée, on peut aussi récupérer la coordonnée du 2ème doigt, pour en faire autre chose, et si l’écran est multitouch…

var touch = e.originalEvent.changedTouches[0];

c’est le premier doigt…

var touch = e.originalEvent.changedTouches[1];

c’est le deuxième doigt, etc…

 

Plus d’infos là-dessus :

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

Enregistrer