javascript - 来自鼠标的粒子 "run away"

Question

我正在 Canvas 上创建一个简单的粒子实验。现在我希望它们在 Canvas 上“逃离”鼠标光标。检测与鼠标的距离不是问题，但如何编码它们的行为？

每个粒子的创建如下:

    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，则反转方向？也许还可以保存旧速度，并在离开时慢慢降低速度？

如何检测方向？

Answer 1

速度(xVel、yVel，一起)是一个 2D 矢量。鼠标和粒子之间的距离也是如此。 向量包含方向和大小。所以你需要一个向量，它是鼠标位置和粒子位置之间的差。

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

所以 x 和 y 的值越小，说明粒子离鼠标越近，越大，说明粒子离鼠标越远。

接下来我们需要弄清楚这些数字如何影响粒子的速度。所以我们需要两件事。

我们将他们推向什么方向？

我们已经有了这个，大部分。 posRelativeToMouse 是一个具有我们想要的方向的向量。我们只是对其进行归一化，这意味着将向量的长度设置为 1。为此，我们将每个分量除以向量的当前长度。该向量的长度始终是从粒子到鼠标的距离。

var distance = Math.sqrt(
  posRelativeToMouse.x * posRelativeToMouse.x +
  posRelativeToMouse.y * posRelativeToMouse.y
);
var forceDirection = {
  x: posRelativeToMouse.x / distance,
  y: posRelativeToMouse.y / 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 对位置进行动画处理，那么您现在应该有粒子被鼠标推开。