Head

[ Article ] dans Processing.JS, le [ 17/01/2012 ]

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 !

 

* --- *

 

Un nouvel écueil dans la mise en place d’un framework pjs+jquery+mootools+tweens cohérent…
Pour afficher notre sketch en plein écran, et cumuler avec un contenu html par-dessus, on est obligé de placer une div « au-dessus » de la canvas pjs.

Du coup, un problème inattendu se pose : on perd les clics et le mouseX/Y de processing !

La <div> html a un z-index supérieur à la canvas (sinon on ne la voit pas), qui plus est on est éventuellement amené à la formater à 100% pour qu’elle prenne toute la place… et impossible de passer « au travers » pour récupérer les Mouse Events.

Pour cumuler tous ces outils (pjs+jquery+mootools+tweens) il va donc falloir uniformiser les évènements souris depuis le niveau supérieur : les écouteurs souris Javascript.

L’idée est donc de mettre un place une écoute de la souris centralisée (dans une librairie facile à utiliser),

qui laisserait la possibilité de cliquer sur des liens html (quand-même), et permettrait d’avoir à tout moment :

  1. la position de la souris
  2. les events de type click, release, press
  3. d’utiliser ces infos aussi bien depuis un skecth pjs que depuis des instructions JQuery ou Javascript
  4. Et tant qu’à faire, qui assurerait une similarité avec les évènements de Processing, histoire de ne pas avoir à réécrire l’interactivité du sketch.

Et oui, car les events de jquery (du genre click()) sont loin de fonctionner comme dans Processing, où on doit « construire » soit-même les évènements, à partir seulement de mousePressed() et mouseReleased()

On pourrait construire ça à partir des écouteurs Javascript « purs » (c’est ce qui se fait pour récupérer les touch sur mobile par exemple), mais on peut plus simplement s’appuyer sur JQuery, qui propose aussi des méthodes souples (des raccourcis des écouteurs Javascript de base, en fait) en utilisant la fonction $(document).bind();

Je vous passe le détail des paramètres utilisés, voici un bloc de Javascript qui solutionne le problème :

// position à jour de la souris via mouseX et mouseY
$(document).bind('mousemove', function(e){
   mouseX = e.pageX;
   mouseY = e.pageY;
});
$(document).trigger('mousemove'); // pour l'initialiser

// click events -> déclenche les fonctions de Pjs
$(document).bind('mousedown', function(e){
   e.preventDefault();
   p.mousePressed();
});
$(document).bind('mouseup', function(e){
   e.preventDefault();
   p.mouseReleased();
});

« e » fait référence à l’évènement souris Javascript, pour empêcher les comportements « normaux » des clics, ex : quand on drag avec le curseur, normalement ça surligne le texte, ou sert à copier une image… et ça empêche de trainer un graphique Pjs.

« p » fait référence au sketch Pjs, pour transmettre directement l’évènement souris aux fonctions Processing.js mousePressed() et mouseReleased()ce qui veut dire que vous n’avez aucune modif à faire dans votre sketch !
Si ça marche dans Processing, ça marchera avec Pjs automatiquement :)

Le code est à placer dans le header, il sert donc de pont entre l’évènement Javascript natif et les fonctions Processing habituelles, sans avoir à rien faire de plus.

Dès lors vous pourrez accéder aussi bien depuis un sketch que depuis Javascript aux variables globales suivantes : mouseX, mouseY (et pas pjsObj.mouseX/Y, du coup).

A vous les drags et autres fonctionnalités basées sur la souris !

Enregistrer