Mouse over on a p5.js class only working on first instance of the class

rogerio-romao 0
Viewed 40

I have a custom class in p5js that defines an "ImageButton". This is being used in React through react-p5-wrapper but I don't think that is related to this issue.

I have several different instances of this ImageButton running, and I have a function inside the class to detect if the mouse is over the button. If it detects that it is over, it should change the image to a different one (basically different color icons), and it should also change the mouse cursor to a pointer.

I know the detection works correctly, because all instances change to the "hover" image. The problem is the mouse cursor only changes to pointer on the first instance of the class, and remains as default everywhere else. Couldn't find any resources on this issue, so it's probably something wrong with my code, but haven't been able to figure it out, so here it is:

export default class ImageButton {
    constructor(p5, x, y, img, hoverImg) {
        this.p5 = p5;
        this.x = x;
        this.y = y;
        this.img = img;
        this.hoverImg = hoverImg;
        this.rad = 16;
    }

    display() {
        if (this.over()) {
            this.p5.cursor('pointer');
            this.p5.image(this.hoverImg, this.x, this.y, this.rad, this.rad);
        } else {
            this.p5.cursor('default');
            this.p5.image(this.img, this.x, this.y, this.rad, this.rad);
        }
    }

    over() {
        if (
            this.p5.mouseX > this.x &&
            this.p5.mouseX < this.x + this.rad &&
            this.p5.mouseY > this.y &&
            this.p5.mouseY < this.y + this.rad
        ) {
            return true;
        } else {
            return false;
        }
    }
}

And here is a small quick video showing the issue: video Any ideas?

Searched the web for similar problems, couldn't find anything helpful.

mouseover p5.js reactjs
1 Answers

I assume you call the 'display()' function for each instance of ImageButton class. In the 'display()' function you are using a simple if statement to check if the element is hovered, which sets the cursor to 'default' when it's not being hovered. It means that only last element that is being checked is able to set the cursor to 'pointer', because every element that is currently not hovered is setting the cursor back to 'default'.

The first solution that comes to my mind is to set the return type of the 'display()' function to boolean and then using it in the main loop function to handle the cursor changing. If any element returned 'true' then the cursor should be a pointer, otherwise set it to default.

You should also consider simplifying the 'over()' function:

over()
{
    return
        this.p5.mouseX > this.x &&
        this.p5.mouseX < this.x + this.rad &&
        this.p5.mouseY > this.y &&
        this.p5.mouseY < this.y + this.rad;
}
Kroepniek0
Related