使用P5创建交互式地图

Question

我正在尝试绘制美国各州的地图，并在地图上有点。当您将鼠标悬停在该点上时，它将告诉您国家的标题以及您将要了解的内容的简要提要。单击鼠标，将打开指定的HTML页面。我想为此项目使用P5。任何帮助将不胜感激

Answer 1

考虑到您想使用p5，可以推断您已经掌握了p5的基本知识。所以：

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.
  }
}

draw运行非常频繁，并且mouseX和mouseY内置变量构成了鼠标的坐标。
利用这个优势。

在此示例中，如果鼠标进入从0到100,100的正方形，则rect将在那里。地图会更困难，因为if语句可能会人满为患。

顺便说一句，您不需要使用矩形，主要要点是，if将在用户将鼠标悬停在特定区域上时运行。