conditional statements / mouse over activation problem

Programming Questions

vdrome

conditional statements / mouse over activation problem

in Programming Questions • 2 months ago

Learning the ropes and taking a Processing course online. In this sketch I'm trying to make the mouse cursor make the rectangle flash when it hovers over it. I'm not quite hitting the mark yet as the rectangle activates when the cursor is not exactly over it. I'm pretty sure the error is in the conditional statement defining the mouse coordinates. I sourced the code from an example provided on the Processing website. I just can't get my head around the logic quite yet.

Here's my code:

_______________________________

int rectx;
int recty;
int rectsX, rectsY;

void setup()
{
size(500,500);
rectx = 250;
recty = 250;
rectsX = 200;
rectsY = 80;
}

void draw() {
background(125);
noStroke();
if (mouseX > rectx-rectsX && mouseX < recty+rectsY &&
      mouseY > rectx-rectsX && mouseY < recty+rectsY) {
   fill(random(255),random(255),random(255));
    }
else {
    fill(255);
}
   rectMode(CENTER);
    rect(rectx,recty,rectsX,rectsY);
}

Replies(2)

asimes

Re: conditional statements / mouse over activation problem

2 months ago

I find the variable names very confusing. In the code below I used:

int rectX, rectY, rectW, rectH;

For the rectangles: left edge, top edge, width, and height. Also, rectMode(CENTER) throws a bit of a monkey wrench into how people first learn rectangle bounding boxes. I would recommend making sense of this first:

int rectX, rectY, rectW, rectH;
void setup() {
size(500, 500);
// First set the width and height
rectW = 200;
rectH = 80;
// Use the width and height to center the rectangle
rectX = (width-rectW)/2;
rectY = (height-rectH)/2;
// This only needs to be called once, not every frame in draw()
noStroke();
}
void draw() {
background(125);
// Assume we are going to fill white (see explanation)
fill(255);
// If the mouse is between the left and right edges
if (mouseX > rectX && mouseX < rectX+rectW) {
// If the mouse is between the top and bottom edges
if (mouseY > rectY && mouseY < rectY+rectH) fill(random(255), random(255), random(255));
}
rect(rectX, rectY, rectW, rectH);
}

Your if else structure for filling randomly or with white was fine, the only reason I rewrote that was so that I could put comments above the horizontal and vertical conditions. I've actually never tried to do bounding code for rectMode(CENTER), I'll try it in a minute.

asimes

Re: conditional statements / mouse over activation problem

2 months ago

Here is the code using rectMode(CENTER). It requires more work every frame in draw() though:

int rectX, rectY, rectW, rectH;
void setup() {
size(500, 500);
rectX = 250;
rectY = 250;
rectW = 200;
rectH = 80;
// Call these once instead of every frame in draw()
noStroke();
rectMode(CENTER);
}
void draw() {
background(125);
// Same idea as the last code (mouse within edges) but more work every frame
if (mouseX > rectX-rectW/2 && mouseX < rectX+rectW/2 &&
mouseY > rectY-rectH/2 && mouseY < rectY+rectH/2) {
fill(random(255), random(255), random(255));
}
else fill(255);
rect(rectX, rectY, rectW, rectH);
}

Edit: In the code above, rectW/2 could be calculated, saved in a variable, and referenced instead of being calculated every frame in draw(). I wrote it like that (above) thinking it'd make more sense

Top Reply