javascript - HTML5 Canvas - 计算物体相对于“磁铁”的速度

Question

我的画布中间直接有一个“磁铁”，我有点击时添加到画布中的对象。然后它们被磁铁吸引。

我有对象之间的 X 和 Y 距离，大约在 -20 到 20 之间。

这是我用来吸引物体的计算，它有效，但它越接近，力越弱，当它应该反过来时，我该怎么做？

impulseX = (distanceX / 100)
impulseY = (distanceY / 100)

例子：

Distance = 20, speed = 0.05
Distance = 10, speed = 0.1
Distance = -20, speed = -0.05
Distance = -10, speed = -0.1

我在做什么的例子：http: //jsfiddle.net/qk8Wk/

谢谢

score 6 · Accepted Answer

你的冲动应该遵循平方反比定律，即

var distance2 = distanceX * distanceX + distanceY * distanceY;
var mag = n / distance2;

其中n是表示场强的一般常数。

那么脉冲需要与该脉冲的方向成比例：

var theta = Math.atan2(distanceY, distanceX);
var impulseX = mag * Math.cos(theta);
var impulseY = mag * Math.sin(theta);

或者，避免使用三角函数（根据@JayC）

var norm = Math.sqrt(distance2);
var impulseX = mag * (distanceX / norm);
var impulseY = mag * (distanceY / norm);

score 1 · Accepted Answer

怎么样：

var distance = Math.sqrt(distanceX*distanceX + distanceY*distanceY)
impulseX = 0.1*distanceX / distance
impulseY = 0.1*distanceY / distance

或者你可以使用距离^2：

var distance2 = distanceX*distanceX + distanceY*distanceY
impulseX = 0.1*distanceX / distance2
impulseY = 0.1*distanceY / distance2

score 0 · Accepted Answer

但距离越近，力量越弱，

很合乎逻辑，因为差异变小了——所以差异/100 也变小了。

当它应该反过来时，我该怎么做？

使您基于因子乘法的值变得更大，而不是更小 - fe

impulseX = ( (20 - distanceX) / 100)

3 回答 3