Comment colorer un rect rectangle lorsqu'il est survolé?

Question

Comment procéder pour colorier un rectangle individuel lorsqu'il est survolé? La méthode spécifique utilisée ci-dessous ne me donne vraiment aucune idée sur la façon de résoudre ce problème. Il génère une grille dans la fenêtre en utilisant des rectangles individuels. Comment serait-il possible d'écouter mouseX et mouseY et de colorer un rectangle sans perturber ce code? Merci.

int cols,rows; 
int scl = 20; 
int gridsize = 0; 

void setup(){ 
size(400,400); 
int w = 400; 
int h = 400; 
cols = w/scl; 
rows = h/scl; 

} 

void draw() { 
//mouseX, mouseY 
background(r,g,b); 

for (int x = 0; x < cols; x++){ 
    for (int y = 0; y < rows; y++){ 
    stroke(55); 
    //noFill(); 
    fill(50,50,50); 
    rect(x*scl,y*scl,scl,scl); 
    } 
    } 
} 

Pour référence, j'utilise Processing 3 for Java.

Answer 1

Vous pouvez toujours vérifier si la souris est dans les limites d'un rectangle:

• vous connaissez la mouseX, mouseY valeurs
• vous connaissez le x, y et la taille de chaque boîte
• si mouseX est à l'intérieur de x et x + size et mouseY est à l'intérieur de y et y + taille vous êtes sur une boîte.

Voici ci-dessus appliqué à votre code (si la condition mise en forme pour une meilleure visibilité, ne hésitez pas à reformater):

int cols, rows; 
int scl = 20; 
int gridsize = 0; 

void setup() { 
    size(400, 400); 
    int w = 400; 
    int h = 400; 
    cols = w/scl; 
    rows = h/scl; 
} 

void draw() { 
    //mouseX, mouseY 
    background(255); 

    for (int x = 0; x < cols; x++) { 
    for (int y = 0; y < rows; y++) { 
     int xpos = x*scl; 
     int ypos = y*scl; 
     stroke(55); 
     if(
     (mouseX >= xpos && mouseX <= xpos+scl) && 
     (mouseY >= ypos && mouseY <= ypos+scl) 
     ){ 
     fill(90); 
     }else{ 
     fill(50); 
     } 

     rect(xpos, ypos, scl, scl); 
    } 
    } 
} 

Pour plus d'informations Existe aussi les Processing Button example

Answer 2

George's answer fonctionne bien pour ce scénario, mais il y en a un autre, un peu plus complexe aussi, si vous voulez aller dans Object Oriented ici. Pour ce petit exemple, vous pouvez avoir une classe Grid qui contient et gère un tableau d'objets Cell. Ou vous pouvez simplement ignorer la classe Grid et gérer le Cells dans votre esquisse principale. Vous pouvez donner à la classe Cell une fonction de rendu et vous pouvez donner à chaque cellule une couleur et une taille aussi, cela dépend entièrement de vous. En outre, il pourrait avoir une fonction qui vous indique si votre souris est dessus et une fonction pour changer sa couleur. Un squelette ressemblerait à ceci:

class Cell { 

float x,y; 
float length, breadth; 
color col; 

Cell(float x, float y) { 
    this.x = x; 
    this.y = y; 

    length = 10; 
    breadth = 10; 
    col = color(0); 
} 

void render() { 
    fill(col); 
    rect(x, y, length, breadth); 
} 

void setColor(color col) { 
    this.col = col; 
} 

boolean mouseOver() { 
    if(mouseX > x && mouseX < x+length) { 
     if(mouseY > y && mouseY < y+breadth) { 
      return true; 
     } 
    } 
    return false; 
} 

Maintenant, vous pouvez simplement utiliser cette classe et ses méthodes dans votre esquisse principale pour trouver la cellule avec la souris dessus et appelez setColor sur elle pour changer sa couleur.

Answer 3

La réponse de George est correcte. Je l'ai upvoted et je crois que vous devriez le marquer comme la bonne réponse. La réponse de Yushi est fondamentalement juste la réponse de George, déplacée dans une classe.

Ils utilisent tous les deux détection de collision rectangle de point, qui vérifie si le point est à l'intérieur du rectangle. Vous vérifiez simplement chaque rectangle par rapport au point (dans votre cas, la position de la souris), et cela vous permet de déterminer dans quel rectangle la souris se trouve. Cela fonctionnera même si vous avez un tas de rectangles de formes différentes, et même rectangles qui se chevauchent.

L'autre façon de le faire est d'utiliser détection de collision basée sur la grille qui tire parti du fait que vous avez un tas de rectangles espacés uniformément qui ne se chevauchent pas. Vous utiliseriez simplement la division pour déterminer dans quelle cellule se trouvait la souris, puis vous convertiriez cette cellule en coordonnées et vous utiliseriez ces coordonnées pour dessiner le rectangle. Cela peut sembler déroutant, mais il ressemble à ceci:

int cols; 
int rows; 
int scl = 20; 

void setup() { 
    size(400, 400); 
    cols = width/scl; 
    rows = height/scl; 
} 

void draw() { 
    background(100); 

    for (int x = 0; x < cols; x++) { 
    for (int y = 0; y < rows; y++) { 
     stroke(55); 
     fill(50, 50, 50); 
     rect(x*scl, y*scl, scl, scl); 
    } 
    } 

    int hoveredRectColX = int(mouseX/scl); 
    int hoveredRectRowY = int(mouseY/scl); 
    float rectX = hoveredRectColX * scl; 
    float rectY = hoveredRectRowY * scl; 
    fill(255, 0, 0); 
    rect(rectX, rectY, scl, scl); 
} 

Le dernier bloc de code est la viande et les pommes de terre.D'abord, il détermine la ligne et la colonne de la souris, puis détermine la position de cette cellule et l'utilise pour dessiner un rectangle. Si cela n'a pas de sens, la meilleure chose à faire est de sortir une feuille de papier et un crayon et de dessiner un tas d'exemples pour voir ce qui se passe. Auto-promotion éhontée: J'ai écrit un tutoriel sur la détection de collisions dans le traitement, y compris la détection de collisions ponctuelle et rectangulaire, disponible here.