Javascript 如何在p5js中使一个对象移动到另一个对象？

我试着让一个圆圈移动到另一个圆圈。到目前为止，我已经改变了它的x和y位置，直到它们等于另一个圆的x和y，但是这看起来很奇怪，通常它们会比另一个更快地等于其中一个变量，并沿直线移动到它。我想让它做的是沿着对角线直线朝它移动。我该怎么做呢？

要将一个圆移向另一个圆，可以沿两个圆之间的直线移动它

看一下这个草图，看看当鼠标按下时第二个圆的位置是如何更新的

let angle=0；
设x1=25；
设y1=25；
设x2=350；
设y2=350
设d=0.025；
函数设置（）{
createCanvas（400400）；
}
函数绘图（）{
背景（0）；
中风（255）；
冲程重量（4）；
设r=20；
圆（x1，y1，r）；
圆（x2，y2，r）；
如果（按下鼠标）{
x2=（1-d）*x2-d*（x1+x2）；
y2=（1-d）*y2-d*（y1+y2）；
}
}

---

要将一个圆移向另一个圆，可以沿两个圆之间的直线移动

看一下这个草图，看看当鼠标按下时第二个圆的位置是如何更新的

let angle=0；
设x1=25；
设y1=25；
设x2=350；
设y2=350
设d=0.025；
函数设置（）{
createCanvas（400400）；
}
函数绘图（）{
背景（0）；
中风（255）；
冲程重量（4）；
设r=20；
圆（x1，y1，r）；
圆（x2，y2，r）；
如果（按下鼠标）{
x2=（1-d）*x2-d*（x1+x2）；
y2=（1-d）*y2-d*（y1+y2）；
}
}

---

一种方法是使用向量。这有一些优点，例如它可以在（几乎）任何位置工作，并且速度可以轻松调节。如果项目变得更复杂，这也可能派上用场。然而，它确实占用了更多的空间，而且没有那么整洁

设x1=25；
设y1=25；
设x2=350；
设y2=350；
设d=5；
函数设置（）{
createCanvas（400400）；
}
函数绘图（）{
背景（0）；
中风（255）；
冲程重量（4）；
设r=20；
圆（x1，y1，r）；
圆（x2，y2，r）；
如果（按下鼠标）{
//创建它们之间距离的向量
var m=createVector（x2-x1，y2-y1）；
//这将设置幅值，使其以恒定速率移动，但方向正确。
m、 规范化（）；
//将d设置为等于速度
x2-=m.x*d；
y2-=m.y*d；
}
}
//这样圆圈1就可以四处移动了
函数mouseDragged（）{
x1=鼠标；
y1=老鼠；
}

---

一种方法是使用向量。这有一些优点，例如它可以在（几乎）任何位置工作，并且速度可以轻松调节。如果项目变得更复杂，这也可能派上用场。然而，它确实占用了更多的空间，而且没有那么整洁

设x1=25；
设y1=25；
设x2=350；
设y2=350；
设d=5；
函数设置（）{
createCanvas（400400）；
}
函数绘图（）{
背景（0）；
中风（255）；
冲程重量（4）；
设r=20；
圆（x1，y1，r）；
圆（x2，y2，r）；
如果（按下鼠标）{
//创建它们之间距离的向量
var m=createVector（x2-x1，y2-y1）；
//这将设置幅值，使其以恒定速率移动，但方向正确。
m、 规范化（）；
//将d设置为等于速度
x2-=m.x*d；
y2-=m.y*d；
}
}
//这样圆圈1就可以四处移动了
函数mouseDragged（）{
x1=鼠标；
y1=老鼠；
}

---

您必须使用一些三角学来计算“轨迹”的角度，然后相应地更新x和y。考虑到只有x和y作为它们的差，你必须以某种方式使用

tan

。你必须使用一些三角学来计算“轨迹”的角度，然后相应地更新x和y。考虑到只有x和y作为它们的差值，您必须以某种方式使用

tan

。