L'interactivité sous Processing est très impressionnates. En quelque lignes, il est possible de récupérer et traiter les différents évènements prevenant de la souris ou bien du clavier. Cet exemple vise à donner un avant-goût de ces capacités.
Le Drag Drop consiste à lever un objet en cliquant dessus, le déplacer (le voir se déplacer) en gardant le clique et le déposer en relâchant le clique.
Sous Processing, nous pouvons exploiter les éléments suivants :
Le seul élément que nous allons ajouter est une variable booléenne pour garder trace est ce que l'objet est entrain d'être déplacé ou pas. Le code suivant est le code de l'objet (nommé Activite, préparé dans un contexte précis) :Le Drag Drop consiste à lever un objet en cliquant dessus, le déplacer (le voir se déplacer) en gardant le clique et le déposer en relâchant le clique.
Sous Processing, nous pouvons exploiter les éléments suivants :
- Il est à tout moement possible de récupérer la position de la souris grâce à deux variables prédéfinies : museX, mouseY. Aucun code ou fonction ou Listener sont nécessaires.
- Pour récupérer l'évènement du clique, il suffit d'implémenter la méthode "mousePressed()"; elle sera appelée si l'un des deux bouttons de la souris est enfoncé. mouseBoutton permet de connaître est ce qu'il s'agit d'un clique droit (RIGHT) u gauche (LEFT).
- Pour récupérer l'évènement du relâche de la souris, il suffit d'implémenter la méthode "mouseReleased()".
class Activite { int x, y; final int HEIGHT = 180; final int WIDTH = 180; public Activite(int x, int y){ this.x = x; this.y = y; } void draw(){ rect(x, y, HEIGHT, WIDTH); } void setX(int x){ this.x= x; } void setY(int y){ this.y = y; } int getX(){ return x; } int getY(){ return y; } }
Ce code est presque un JavaBean, à l'exception de la méthode draw() qui déssine un rectangle.
Le code du Drag & Drop est :
Activite a; int diffx, diffy; boolean drawing = false; void setup(){ size(960, 480); a = new Activite(100, 100); } void draw(){ background(240); if(drawing){ a.setX(mouseX + diffx); a.setY(mouseY + diffy); } a.draw(); } void mousePressed(){ diffx = a.getX() - mouseX; diffy = a.getY() - mouseY; drawing = true; } void mouseReleased(){ drawing = false; }
Les deux variables diffx et diffy c'est pour garder la distance entre la position de la souris et la position de l'objet au départ de l'action.
Une version abrégée de ce code peut montrer qu'il est possible d'implémenter le tout avec toutes les données et les fonctions en moins de 30 lignes en gardant notre code claire at aéré:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | int x, y, h, w; int diffx, diffy; boolean drawing = false; void setup(){ size(960, 480); x = 100; y = 100; h = 100; w = 250; } void draw(){ background(240); if(drawing){ x = mouseX + diffx; y = mouseY + diffy; } rect(x, y, w, h); } void mousePressed(){ diffx = x - mouseX; diffy = y - mouseY; drawing = true; } void mouseReleased(){ drawing = false; } |