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

您可以通过从鼠标的位置减去粒子的位置来获得向量 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 回答
1

Velocity (xVel, yVel, together) 是一个二维向量。鼠标和粒子之间的距离也是如此。向量包含方向和大小。所以你想要一个向量，它是鼠标位置和粒子位置之间的差异。

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

x 和 y 的数字太小意味着粒子离鼠标很近，而大的数字意味着它离鼠标很远。

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

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

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

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

我们推动粒子的力度有多大？

这是距离的倒数。近意味着大推，远意味着小推。所以让我们重用我们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 回答