Ce que l'on veut : L'objectif est de pouvoir sélectionner un objet à la souris dans une scène dessinée en 3 dimensions. Cette technique - qu'on appelle le picking - peut rendre une interface plus confortable pour l'utilisateur ou offrir un gameplay plus sympathique.
En résumé : La méthode consiste à dessiner dans un buffer une vue épurée de la scène, où chaque objet est dessiné dans une couleur unique, sans textures ni lumières ni quoi que ce soit. Lorsque l'utilisateur clique dans la fenêtre, on récupère dans le buffer la couleur du pixel correspondant et on en déduit l'objet désigné.
Ce n'est pas très clair ? Ne vous inquiétez pas, on va y aller pas à pas.
Etape 1. Considérons une scène simple en trois dimensions, comme celle représentée ci-dessus : trois cubes de couleur, un éclairage derrière la caméra. Bref, une scène on ne peut plus banale. Jusqu'ici tout va bien.
Etape 2. Dessinons maintenant dans un buffer la même scène, avec exactement les mêmes point de vue et angle de vue, mais sans fioritures - ni ombres ni arêtes ni antialiasing - et en choisissant pour chaque objet une couleur unique.
L'image du buffer est donc composée de 4 couleurs : blanc pour le fond, et respectivement gris clair, gris foncé et noir pour les trois cubes.
Etape 3. Admettons que l'utilisateur, qui ne voit pas le contenu du buffer, clique sur un des trois cubes, vert clair, vert ou jaune. Pour savoir sur lequel des trois cubes l'utilisateur a cliqué, on récupère les coordonnées de la souris, on regarde la couleur du pixel correspondant dans le buffer, et le tour est joué ! Si c'est noir, on saura par exemple que c'est le cube vert en arrière-plan qui a été cliqué.
Choisir la bonne couleur. Comment affecter une couleur unique à un objet pour le dessiner dans le buffer ? Il suffit d'associer à chaque objet de la scène, en plus de ses propriétés visibles (position, taille, couleur), un identifiant unique. Et de faire en sorte que cet identifiant puisse correspondre à une et une seule couleur, qu'on utilisera pour dessiner l'objet dans le buffer. Et inversement, en récupérant cette couleur, il faut pouvoir retrouver l'identifiant associé. Soit dit en passant, l'identifiant peut d'ailleurs même être directement une couleur.
Dans Processing, une couleur RGB est en fait un simple entier négatif compris entre -16 777 216 (noir) et -1 (blanc). Vous pouvez donc choisir cette fourchette de nombres comme identifiants. Si vous préférez attribuer des identifiants positifs, vous pouvez choisir un nombre compris entre 1 et 16 777 216 et établir les correspondances suivantes :
color c = -id; // affecte à un objet une couleur selon son identifiant int id = -c; // récupère l'identifiant d'un objet d'après sa couleur
En mode RGB, il existe 256^3 = 16 777 216 couleurs différentes, donc presque autant d'identifiants uniques pour les objets à représenter. Je dis presque, parce qu'il faut garder une couleur pour le fond de la scène. Cette méthode fonctionne donc si votre scène comporte moins de 16 777 215 objets cliquables différents, ce qui devrait convenir à la plupart des situations!
En conclusion : Cette technique, simple et rapide, est facile à mettre en oeuvre et peu gourmande en temps de calcul. D'autres techniques permettent d'aller plus loin, en retournant par exemple un tableau d'objets correspondant à l'ensemble des objets situés en dessous du pointeur de la souris, qu'ils soient cachés ou non. A vous de choisir selon vos besoins !