Почему мои частицы дрейфуют? (он же Is Math.random () сломан или это мой алгоритм?)

Используя Javascript, я грубо моделирую броуновское движение частиц, но по какой-то причине я не понимаю, что мои частицы дрейфуют вверх и влево.

Алгоритм довольно прост. Каждая частица представляет собой div , и я просто добавляю или вычитаю случайное число из каждого div ' s top и left позиции каждый раунд.

Я немного прочитал Math.random () , и я попытался использовать функцию который возвращает случайное число от мин до макс включительно:

// 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;  
} 

Вот функция для движения частиц:

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)); 
    });
}

И вот как частицы изначально настроены запускается setInterval .

$(function() {
    $("body").append("
").attr("id","box");
    $elie = $("
").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 ";            
    });        
});

Моя проблема в том, что с помощью min и max сверху ( -5, 5 ), все частицы очень быстро дрейфуют вверх и влево.

jsFiddle Пример дрейфа (-5, 5)

Пример дрейфа даже с удалением .min () и .abs () .

To противодействовать этому, Мне нужно использовать min и max из -1, 5 .

jsFiddle пример отсутствия дрейфа (-1, 5)

Здесь это CSS для div , в котором содержатся все частицы:

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

Вот CSS по умолчанию для каждой частицы:

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

Что происходит? Почему минимальное и максимальное значения -5 и 5 вызывают дрейф вверх и влево?

Проверка случайной функции run () не работает » t, похоже, демонстрирует такой устойчивый отрицательный дрейф.

jsFiddle Пример тестирования ran ()

Функция ran () была взята из страницы MDC Math.random () ].