9

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;

j08691
  • 204,283
  • 31
  • 260
  • 272
michael
  • 1,202
  • 5
  • 23
  • 34
  • If you're actually using bees I'd have just one set to be really erratic and have a swarm follow the leader. – Incognito Mar 07 '12 at 16:25
  • you can manipulate the odds a little so it is not entirely random. Like 85% random and 15% the last direction or something like that. I think this will make it go a little bit more to the forward direction – ajax333221 Mar 07 '12 at 16:27

1 Answers1

8

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/

Matt Esch
  • 22,661
  • 8
  • 53
  • 51
  • Thanks for the help me232, I figured raphaels rotation but I'm startin to think brownian motion might not be suited in this case. Makes the bees a bit erratic. Ill have ago at your other method! thanks again – michael Mar 08 '12 at 20:23
  • I actually liked their erratic movements, it looks like they are buzzing :) – Matt Esch Mar 08 '12 at 20:29
  • 1
    Fiddle was not working because it was missing Raphaël js and an image. Here's a quick update: http://jsfiddle.net/brunoimbrizi/c5A2A/54/ – imbrizi Sep 30 '16 at 10:20