Solution 1 :

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.

Problem :

I am trying to take a map of the US states and have points on the map. When you hover over the point it will tell you the title of the state and a brief synopsis of what you will find out. On the mouse click, it will open up the specified HTML page. I want to use P5 for this project. Any help would be appreciated


Comment posted by How to Ask

Please see this: