Question

我在画布上创建一个简单的粒子实验。现在我希望他们能够跑掉＃34;从鼠标光标到画布。检测鼠标的距离不是问题，但如何编码他们的行为？

每个粒子的创建如下：

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

所以我假设我也应该以某种方式保存方向，如果指针的距离是＆lt; x，反转方向？也许还可以节省旧的速度，并在离开时缓慢减速？

如何检测方向？

Answer 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

Answer 2

Velocity （xVel，yVel，在一起）是一个2D矢量。鼠标和粒子之间的距离也是如此。向量包含方向和幅度。所以你想要一个矢量，它是鼠标位置和粒子位置之间的差异。

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为每个帧设置动画效果，现在应该让鼠标推开粒子。

粒子从老鼠身上“逃跑”

2 个答案: