Considering that you want to use p5, one could infer that you have the basic knowledge of it. So:
function setup() {
createCanvas(windowWidth, windowHeight); //You choose the width and height.
}
function draw() {
if (mouseX < 100 && mouseY < 100) { // IF statement would need changing
rect(x, y, w, h); // undefined variables to be replaced with numbers.
}
}
The draw
runs very frequently and the mouseX
and mouseY
built-in variables make up the coordinate of the mouse.
Use this to your advantage.
In the example, the rect
would be there if the mouse in in the square that extends from 0,0 to 100,100. Maps would be harder because the if statements could be overcrowded.
By the way, you don’t need to use the rect, the main point is that the if
would run if the user hovered over the specific area.