javascript - 带方向的粒子布朗运动

Question

我正在尝试使用布朗运动来创建一组随机移动的粒子。 http://jsfiddle.net/J75Em/16/

到目前为止，我已经让粒子随机移动，但我不确定如何设置前进方向以使其看起来更自然。

我已经尝试使用 x 和 y 轴的变化来使用 atan 计算旋转，您可以通过取消注释旋转来看到这一点，但这似乎表现不佳。

对于此类运动，这是正确的方法吗？谢谢；

Answer 1

这很漂亮!

您的处理方式有点正确，但实际上您应该使用 atan2 函数。这消除了任何 0 检查的需要。

atan2 函数为您提供一个与正 x 向量逆时针方向的 Angular

(1, 0) --->

蜜蜂偏离此起始 Angular 90 度，因此您必须从方向减去 90 度。 (取决于你进行 dy 和 dx 计算的方式，你可能需要添加)

您会发现方向变化很快，因此您可以考虑将下一次变化限制为一组导致 Angular 变化低于某个阈值的变化。这将使运动更顺畅。

我实际上会通过生成一个介于 say -pi/8 和 pi/8 弧度之间的 Angular 和一个随机长度来解决这个问题。本质上是使用极坐标。然后将这个新的随机极坐标偏移量添加到 x 和 y 位置，如

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

如果您使用 Angular ，您还可以获得更自然的效果，例如，如果您希望蜜蜂停留在某个区域内，您可以在它们越来越靠近边缘时强制偏向该区域的中心。

更新:

所以我仔细看了看。问题是您期望 .rotate 在实际添加到旋转

时设置旋转

有两个选项可以解决这个问题。

1. 旋转前一个 Angular 和当前 Angular 之间的差值

2. 使用.transform 方法设置旋转

您可以在此处查看解决方案 2 http://jsfiddle.net/c5A2A/