0

キャンバス上で簡単な粒子実験を作成しています。今、私は彼らにキャンバス上のマウスクールから「逃げる」ことを望んでいます。マウスからの距離を検出することは問題ではありませんが、それらの動作をどのようにコーディングするのですか？

各パーティクルは次のように作成されます。

    var particle = {
        x: Math.floor(Math.random() * width),
        y: Math.floor(Math.random() * height),
        xVel: Math.random() * 10 - 5,
        yVel: Math.random() * 10 - 5,
    }

だから私はどうにかして方向も保存する必要があると思います、そしてポインタからの距離が<xの場合、方向を逆にしますか？たぶん、古い速度を節約し、離れるときにゆっくりと速度を落としますか？

方向を検出する方法は？

4

2 に答える 2

1

速度（xVel、yVel、一緒に）は2Dベクトルです。また、マウスとパーティクルの間の距離も同様です。ベクトルには、方向と大きさの両方が含まれます。したがって、マウスの位置とパーティクルの位置の差であるベクトルが必要です。

var posRelativeToMouse = {
  x: particle.x - mousPosX,
  y: particle.y - mousPosY
};

したがって、xとyの数が少ない場合は、パーティクルがマウスに近いことを意味し、大きい場合は、パーティクルがマウスに近いことを意味します。

次に、これらの数値が粒子の速度にどのように影響するかを理解する必要があります。したがって、2つのものが必要です。

それらをどの方向に押し込みますか？

ほとんどの場合、これはすでにあります。posRelativeToMouseは、必要な方向を持つベクトルです。正規化するだけです。つまり、ベクトルの長さを1に設定します。これを行うには、各コンポーネントをベクトルの現在の長さで除算します。このベクトルの長さは、常にdistanceパーティクルからマウスまでのtoです。

var distance = Math.sqrt(
  posRelativeToMouse.x * posRelativeToMouse.x +
  posRelativeToMouse.y * posRelativeToMouse.y
);
var forceDirection = {
  x: posRelativeToMouse.x / distance,
  y: posRelativeToMouse.y / distance,
};

粒子をどれだけ強く押しますか？

これは距離の逆数です。Closeは大きなプッシュを意味し、farは小さなプッシュを意味します。それでは、distance上記で計算したものを再利用しましょう。

// distance past which the force is zero
var maxDistance = 1000;

// convert (0...maxDistance) range into a (1...0).
// Close is near 1, far is near 0
// for example:
//   250 => 0.75
//   100 => 0.9
//   10  => 0.99
var force = (maxDistance - distance) / maxDistance;

// if we went below zero, set it to zero.
if (force < 0) force = 0;

方向性があり、力があります。残っているのは、これを粒子速度に適用することだけです。

particle.xVel += forceDirection.x * force * timeElapsedSinceLastFrame;
particle.yVel += forceDirection.y * force * timeElapsedSinceLastFrame;

そして、そのxVel / yVelによって各フレームの位置をアニメートしていると仮定すると、マウスによってパーティクルが押しのけられるはずです。

于 2013-02-26T19:59:01.507 に答える
1

マウスの位置から粒子の位置を引くことでベクトル v を取得できます。

次に、このベクトルの大きさをsqrt(x^2 + y^2)で求めることができます

v をマグニチュードで割ると、粒子を移動させたい方向の単位ベクトルが得られます。

例えば。

リスト U に 10 個の粒子があり、それぞれに x フィールドと y フィールドがあるとします。

v = (xpart - mousepart, ypart - mousepart) を設定することで、各パーティクル v からそのベクトルを取得できます。

次に、sqrt(vx^2 + vy^2) を取得してマグニチュード vmag を見つける必要があります。

次に、vunit = (vx / vmag, vy / vmag) を取得します。

これが「マウスから離れた」ベクトルです。

残りは、移動したい速度を決定し、壁などを確実に跳ね返すようにすることができます。

私はgithubオープンソースで同様のプロジェクトを持っています: https://github.com/dmitrymakhnin/JavaParticleSystem/blob/master/Main.java

于 2013-02-26T19:39:42.660 に答える