p5鼠标跟随答案

【问题标题】：p5 mouse followp5鼠标跟随
【发布时间】：2018-05-06 07:35:03
【问题描述】：

我正在尝试在 p5.js（画布）中实现某种鼠标跟随效果，我希望对象以它在此处的方式跟随鼠标：https://alpha.editor.p5js.org/momentiris/sketches/BkhShLPpM，但采用“in-back”样式宽松适用于它。换句话说，我希望对象吸引鼠标，但传递它吸引的坐标，比如说 10%，然后回到它实际寻找的坐标。

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

它是用 p5.js 制作的，但我确信数学适用于任何地方，因此请求的帮助不一定限于 p5/canvas。

提前致谢。

【问题讨论】：

标签： javascript canvas processing

【解决方案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);
}

【讨论】：