如何在 p5.js 中实现用户交互？我知道 p5 本身不支持交互，但是有没有办法编写自己的交互？

Question

所以我正在尝试实现一个用p5编写的数据可视化工具.js(因为它为我提供了一个画布来绘制我的可视化(。数据类型是具有属性的 javascript 对象：name 和子项数组，可视化是一个简单的递归树，其中每个分支表示一个节点。主绘图函数已经过编写和测试。

我知道 p5 没有任何开箱即用的交互，因此当我尝试编写用户交互时我面临一个障碍，主要是，我想到当用户将鼠标悬停在节点(即分支(上时，它应该显示代码的名称，其次，当用户单击节点时， 应通过将单击的节点作为根来绘制新树(并可能通过单击新树的根恢复到原始树(。

我将避免发布我的代码，因为这是一个小组项目，其他小组成员不会欣赏我发布代码。所以我不是在寻找具体的代码，而是主要寻找实现它们的想法和/或算法。

我期待着有关如何实现此类功能的建议。谢谢！

Answer 1

P5.js支持用户输入。查看参考中的事件部分。

例如，这里有一个草图，显示一个绿色圆圈，当您将鼠标悬停在它上面时，它会变成红色：

function setup() {
createCanvas(400, 400);
}
function draw() {
if(dist(mouseX, mouseY, width/2, height/2) < 100){
fill(255, 0, 0);
}
else{
fill(0, 255, 0);    
}
background(32);
ellipse(width/2, height/2, 200);
}

无耻的自我推销：这里有一个关于用户输入的教程。它是为处理而编写的，但许多相同的原则适用于 P5.js。

如果您仍然遇到问题，请在新帖子中提出更具体的问题。无论如何，您都不应该发布完整的程序 - 相反，请尝试将您的问题缩小到MCVE。

Answer 2

其实很简单。如果您有一个存储所有节点的对象 然后循环以显示节点和交互，方法是检查mouseX和mouseY是否位于节点上方。 如果您的节点是rect()应该很容易

void node = //node here       
if(mouseX>node.x&&mouseX<node.x+node.width&&mouseY>node.y&&mouseY<node.y+node.height){
//Display information about node when mouse hovers
}
//Later
mouseClicked(){
if(mouseX>node.x&&mouseX<node.x+node.width&&mouseY>node.y&&mouseY<node.y+node.height){
//When clicked on node
}
}

我建议在网站上查看一些鼠标示例 https://processing.org/examples/