Question

I’m trying to use brownian motion to create a group of random moving particles.
http://jsfiddle.net/J75Em/16/

So far I’ve got the particles moving randomly but I’m not sure how to set the forward direction to make it look more natural.

I’ve tried to use the change in x and y axis to calculate rotation using atan, you can see this by uncommenting rotate but this doesn’t seem to perform well.

Is this the right approach for this type of movement? thanks;

Answer 1

This is pretty neat!

You are sort of going about it the right way but you should actually use the atan2 function. This removes the need for any 0 checks.

The atan2 function gives you an angle which is anticlockwise from the positive x vector

(1, 0) —>

The bees are 90 degrees off from this starting angle so you must subtract 90 degrees from the direction. (depending on which way round you do the dy and dx calculation, you might need to add)

You could find that the direction changes rapidly, so you could consider limiting the next change to a set of changes that cause an angle change below some threshold. This will make the movement a little smoother.

I would actually go about it by generating an angle between say -pi/8 and pi/8 radians, and a random length. Essentially using polar coordinates. Then add this new random polar offset to the x and y position like

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

If you work with angles you can also get more natural effects like if you want the bees to stay within a certain area, you can force a bias towards the center of the area as they get closer and closer to the edge.

Update:

So I’ve taken a closer look. The trouble is that you expect .rotate to set the rotation when it actually adds to the rotation

There are 2 options for fixing this.

1. Rotate by the difference between the previous and the current angle

2. Set the rotation using the .transform method

You can see solution 2 in action here http://jsfiddle.net/c5A2A/