我正在尝试使用布朗运动来创建一组随机移动的粒子。 http://jsfiddle.net/J75Em/16/
到目前为止,我已经让粒子随机移动,但我不确定如何设置前进方向以使其看起来更自然。
我尝试使用 x 和 y 轴的变化来计算使用 atan 的旋转,您可以通过取消注释旋转看到这一点,但这似乎表现不佳。
这是这种运动的正确方法吗?谢谢;
我正在尝试使用布朗运动来创建一组随机移动的粒子。 http://jsfiddle.net/J75Em/16/
到目前为止,我已经让粒子随机移动,但我不确定如何设置前进方向以使其看起来更自然。
我尝试使用 x 和 y 轴的变化来计算使用 atan 的旋转,您可以通过取消注释旋转看到这一点,但这似乎表现不佳。
这是这种运动的正确方法吗?谢谢;
这很整洁!
您正在以正确的方式进行操作,但您实际上应该使用 atan2 函数。这消除了对任何 0 检查的需要。
atan2 函数为您提供一个从正 x 向量逆时针方向的角度
(1, 0) --->
蜜蜂与该起始角度相差 90 度,因此您必须从该方向减去 90 度。(取决于您进行 dy 和 dx 计算的方式,您可能需要添加)
您会发现方向变化很快,因此您可以考虑将下一次变化限制为一组导致角度变化低于某个阈值的变化。这将使运动更顺畅一些。
我实际上会通过在 -pi/8 和 pi/8 弧度之间生成一个角度和一个随机长度来解决这个问题。基本上使用极坐标。然后将这个新的随机极坐标偏移添加到 x 和 y 位置,如
newX = currentX + (randomLength * cos(randomAngle + currentAngle)) and
newY = currentY + (randomLength * sin(randomAngle + currentAngle))
如果您使用角度,您还可以获得更自然的效果,例如如果您希望蜜蜂停留在某个区域内,您可以在蜜蜂越来越接近边缘时强制偏向该区域的中心。
所以我仔细看了看。问题是您希望 .rotate 在实际添加到旋转时设置旋转
有 2 个选项可以解决此问题。
按前一个角度和当前角度之间的差异旋转
使用 .transform 方法设置旋转
您可以在此处查看解决方案 2 http://jsfiddle.net/c5A2A/