HTML5畫布 - 計算物體相對於「磁鐵」的速度

我在畫布中間直接放置了一個「磁鐵」，並且在點擊時將對象添加到畫布上。然後他們被磁鐵吸引。HTML5畫布 - 計算物體相對於「磁鐵」的速度

我在相對於彼此的對象的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/

感謝

來源

2013-04-22 Henryz

你能準備一個[小提琴]（http://jsfiddle.net/）嗎？！ – yckart 2013-04-22 14:44:58

http://jsfiddle.net/qk8Wk/ – Henryz 2013-04-22 14:52:42

http://en.wikipedia.org/wiki/Newton%27s_law_of_universal_gravitation <= – JayC 2013-04-22 14:52:51

你的衝動應該遵循平方反比定律，即

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

來源

2013-04-22 14:51:30 Alnitak

嚴格地說，使用數學三角函數是沒有必要的。如果你讓某個值'norm = Math.sqrt（距離X *距離X +距離Y *距離Y）'，那麼'cos（theta）'在數學上等同於'distanceX/norm'，類似'distanceY/norm'爲'sin（theta ）'。注意我說，「數學上」相當於浮點數，您可能會得到不同的結果。但是，隨着價值通過較少的操作，我希望如果完全避免trig函數，值的質量會更好。 – JayC 2013-04-22 15:00:54

@JayC好點，儘管使用trig可能更容易遵循（最初）。 – Alnitak 2013-04-22 15:02:46

偉大的解決方案，這很好。我絕對沒有想到在正確的軌道上想出我想要的東西。 – Henryz 2013-04-22 16:45:42

，但它得到的越近，力較弱，

非常符合邏輯，因爲差異變小 - 所以差異/ 100也變小。

當它應該是另一種方式，我該怎麼做？

使您的基礎乘上的值增大，而不是更小 - f.e.

impulseX = ((20 - distanceX)/100)

來源

2013-04-22 14:46:53 CBroe

怎麼樣：

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

來源

2013-04-22 14:47:44 Iftah

你還沒有把_direction_的衝動考慮到 – Alnitak 2013-04-22 14:58:43

你說得對，我想它的一個矢量，並在最後一刻添加了「X」後綴。現在修復。 – Iftah 2013-04-22 15:02:21

嗨，我接受了另一個答案，但這種解決方案也很好，並有一個稍微不同的影響:)謝謝你的幫助 – Henryz 2013-04-22 16:46:32

HTML5畫布 - 計算物體相對於「磁鐵」的速度

回答

相關問題