Question

Using Javascript I’m crudely simulating Brownian motion of particles, but for some reason I don’t understand my particles are drifting up and to the left.

The algorithm is pretty straight forward. Each particle is a div and I simply add or subtract a random number from each div‘s top and left position each round.

I read up on Math.random() a little, and I’ve tried to use a function that returns a random number from min to max inclussive:

// Returns a random integer between min and max  
// Using Math.round() will give you a non-uniform distribution!  
function ran(min, max)  
{  
    return Math.floor(Math.random() * (max - min + 1)) + min;  
} 

Here is the function for the movement of the particles:

var x, y, $elie, pos, nowX, nowY, i, $that;    

function moveIt()
{
    $("div.spec").each(function(i, v) {
        x = ran(-5, 5);
        y = ran(-5, 5);
        $elie = $(v);
        pos = $elie.position();
        nowX = pos.left;
        nowY = pos.top;

          // The min and abs are to keep the particles within a box
          // The drift occurs even if I remove min and abs
        $elie.css("left", Math.min(Math.abs(nowX + x), 515));
        $elie.css("top",  Math.min(Math.abs(nowY + y), 515)); 
    });
}

And here is how the particles are initially set up an the setInterval started.

$(function() {
    $("body").append("<div/>").attr("id","box");
    $elie = $("<div/>").attr("class","spec");
    // Note that math random is inclussive for 0 and exclussive for Max
    for (i = 0; i < 25; ++i)
    {
        $that = $elie.clone();  
        $that.css("top", ran(0, 495));
        $that.css("left", ran(0, 495));            
        $("#box").append($that);            
    }          
    timer = setInterval(moveIt, 60);
    $("input").toggle(function() {
        clearInterval(timer);
        this.value = " Start ";
    }, function() {
        timer = setInterval(moveIt, 60);        
        this.value = " Stop ";            
    });        
});

My problem is that using the min and max from above ( -5, 5 ), all the particles drift up and to the left very fast.

jsFiddle example of drift (-5, 5)

Example of drift even with the removal of .min() and .abs().

To counteract this, I have to use a min and max of -1, 5.

jsFiddle example of no drift (-1, 5)

Here is the CSS for the div all the particles are contained in:

#box {
    width:500px;
    height:500px;
    border:2px #000 solid;
    position: relative; }

Here is the default CSS for each particle:

div.spec {
    width:5px;
    height:5px;
    background-color:#00DDAA;
    position:absolute; }

What is going on? Why does a min and max of -5 and 5 cause an upward and leftward drift?

A test of the random function ran() doesn’t seem to show such a persistent negative drift.

jsFiddle example of testing ran()

---

The ran() function was taken from the MDC Math.random() page.

Answer 1

Your mistake is to use

pos = $elie.position();

rather than

pos = $elie.offset();

This wouldn’t have made a difference had they been added to parent div, but your elements aren’t properly added to a parent div, they’re appended directly to the document body. So your other mistake is this:

$("body").append("<div/>").attr("id","box");

If you want the div to have id of ‘box’, the line should read:

$box = $("<div/>").attr("id","box");
$("body").append($box)

Otherwise you’re actually giving “body” the id of “box”

EDIT:

The most efficient way to append the div would be the following (as noted by this post):

$(document.createElement('div')).appendTo('body').attr('id', 'box')