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

Posted 2023-03-05

【中文标题】HTML5 Canvas - 计算物体相对于“磁铁”的速度

【英文标题】：HTML5 Canvas - Calculate speed of object in relation to a 'magnet'

【发布时间】：2013-04-15 12:21:55

【问题描述】：

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

我有对象之间的 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/

谢谢

【问题讨论】：

你能准备一份fiddle吗？！

jsfiddle.net/qk8Wk

en.wikipedia.org/wiki/Newton%27s_law_of_universal_gravitation

【参考方案1】：

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

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);

见http://jsfiddle.net/alnitak/BH5qL/

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

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

【讨论】：

严格来说，数学三角函数的使用是不必要的。如果你让某个值norm=Math.sqrt(distanceX * distanceX + distanceY * distanceY)，那么cos(theta) 在数学上等价于distanceX/norm，同样distanceY/norm 对应于sin(theta)。注意我说的是“数学上”等价的，就像浮点数一样，你可能会得到不同的结果。但是，由于该值通过较少的操作传递，如果您完全避免使用三角函数，我希望值的质量会更好。

@JayC 好点，虽然使用 trig 可能更容易理解（最初）。

很好的解决方案，效果很好。我什至没有在正确的轨道上思考我想要的东西。

发现了一个小故障，在小提琴中，很有趣：D，将鼠标放在白色大球的中间。

【参考方案2】：

怎么样：

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

【讨论】：

你没有考虑到冲动的方向

你是对的，我想它是一个向量，并在最后一刻添加了X 后缀。现已修复。

您好，我接受了另一个答案，但此解决方案也很有效，效果略有不同：) 谢谢您的帮助

【参考方案3】：

但距离越近，力量越弱，

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

什么时候应该反过来，我该怎么做？

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

impulseX = ( (20 - distanceX) / 100)