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