How to get a shape to change color when mouse is over it?

Can someone help, I have been sitting here trying to figure this out for 3 hours.

It depends on the shape.

If the shape is a circle, you can measure the distance from the mouse to the center of the circle and if that distance is less than the radius of the circle, you know the mouse is over it.

If the shape is an ellipse, you can do the same sort of thing with the sum of the distances between the mouse position and the two focuses of the ellipse.

If your shape is a grid-aligned rectangle, you can check to see if the mouse is inside it directly, by making sure the X position of the mouse is more than the X position of the left side of the rectangle, and less that the right side of it, and do the same for the Y position with the top and bottom sides.

If your shape is more generic, there are other ways. Look up, search for, and research “collision detection”!

Once you have determined that the mouse is over your shape, change the color you use to draw it before you draw it:

void draw(){
  background(0);
  fill(200,0,0);
  if( over_shape() ){
    fill(0,0,200);
  }
  draw_shape();
}
2 Likes