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

Question

所以我正在尝试实现一个用 p5.js 编写的数据可视化工具(因为它为我提供了一个 Canvas 来绘制我的可视化)。数据类型是一个具有属性的 javascript 对象:名称和一个子数组，可视化是一个简单的递归树，其中每个分支代表一个节点。主要的绘图功能已经编写和测试。

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

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

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

Answer 1

P5.js 确实支持用户输入。查看 the reference 的事件部分.

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

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);
}

无耻的 self 推销:here是关于用户输入的教程。它是为处理而编写的，但许多相同的原则适用于 P5.js。

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