gpt4 book ai didi

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

转载 作者:塔克拉玛干 更新时间:2023-11-03 06:41:10 25 4
gpt4 key购买 nike

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

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

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

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

最佳答案

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 .

关于javascript - 如何在 p5.js 中实现用户交互?我知道 p5 本身不支持交互,但有没有办法让我自己编写?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50748484/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com