p5鼠标跟随

Question

我试图在p5.js (画布)中实现特定的鼠标跟随效果，我希望对象像这里一样跟随鼠标：https://alpha.editor.p5js.org/momentiris/sketches/BkhShLPpM，但应用了" in -back“样式的缓动。换句话说，我想让对象吸引鼠标，但要传递吸引它的坐标，比如说10%，然后返回到它实际正在寻找的坐标。

如果你看我添加的示例草图，这应该应用于触发矩形内的所有鼠标跟随，而不仅仅是最初的触发移动。

它是用p5.js编写的，但我确信数学原理适用于所有地方，所以所请求的帮助不一定仅限于p5/canvas。

提前谢谢。

Answer 1

您可能希望使用Penner's Elastic EaseOut中的数学公式

float easeOut(float t, float b, float c, float d) {
  if (t==0) return b;  
  if ((t/=d)==1) return b+c;  
  float p=d*.3f;
  float a=c; 
  float s=p/4;
  return (a*(float)Math.pow(2, -10*t) * (float)Math.sin( (t*d-s)*(2*(float)Math.PI)/p ) + c + b);
}