9

ブラウン運動を使用して、ランダムに動く粒子のグループを作成しようとしています。 http://jsfiddle.net/J75Em/16/

これまでのところ、パーティクルはランダムに移動していますが、より自然に見えるように順方向を設定する方法がわかりません。

x軸とy軸の変化を使用して、atanを使用して回転を計算しようとしました。これは、rotateのコメントを外すことで確認できますが、うまく機能していないようです。

これは、このタイプの動きに適したアプローチですか？ありがとう;

4

1 に答える 1

8

これはかなりきれいです！

あなたは正しい方法でそれを行っていますが、実際には atan2 関数を使用する必要があります。これにより、0 チェックの必要がなくなります。

atan2 関数は、正の x ベクトルから反時計回りの角度を返します。

(1,0) --->

ミツバチはこの開始角度から 90 度ずれているため、方向から 90 度を引く必要があります。(dy と dx の計算を行う方法によっては、追加する必要がある場合があります)

方向が急速に変化することがわかった場合は、次の変化を、あるしきい値を下回る角度変化を引き起こす一連の変化に制限することを検討できます。これで動きが少しスムーズになります。

私は実際に -pi/8 と pi/8 ラジアンの間の角度とランダムな長さを生成することでそれを行います。基本的に極座標を使用します。次に、この新しいランダムな極オフセットを x と y の位置に追加します

newX = currentX + (randomLength * cos(randomAngle + currentAngle)) and 
newY = currentY + (randomLength * sin(randomAngle + currentAngle))

角度を使って作業する場合、ミツバチを特定の領域内にとどめたい場合など、より自然な効果を得ることができます。ミツバチがエッジに近づくにつれて、その領域の中心にバイアスをかけることができます。

アップデート：

というわけで詳しく見てみました。問題は、実際に回転に追加するときに .rotate が回転を設定することを期待していることです

これを修正するには 2 つのオプションがあります。

  1. 前回と現在の角度の差だけ回転

  2. .transform メソッドを使用して回転を設定します

ここでソリューション 2 の動作を確認できますhttp://jsfiddle.net/c5A2A/

于 2012-03-07T16:25:31.533 に答える