Question

我试图在p5.js（画布）中实现某个鼠标跟随效果，我想让对象按照它在此处的方式跟随鼠标：https://alpha.editor.p5js.org/momentiris/sketches/BkhShLPpM，但是使用＆＃ 34;在回＆＃34;风格缓和适用于它。换句话说，我想让对象吸引到鼠标，但是传递它所吸引的坐标，比方说10％，然后回到它实际寻求的坐标。

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

它是在p5.js制作的，但我确定数学适用于所有地方，所以请求的帮助不一定限于p5 / canvas。

提前致谢。

Answer 1

您可能想使用Penner的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);
}

p5小鼠跟随

1 个答案: