Randomly Drifting Particles

by secretgspot

HTML

<input value=" Stop " type="button" />

CSS

body {
    background-color:#00AAAA; }
#box {
    width:500px;
    height:500px;
    position: relative;
     }
div.spec {
    width:30px;
    height:30px;
    background-color:#00DDAA;
    position:absolute;
    -moz-border-radius: 15px;
    border-radius: 15px;}

JavaScript

// Drifting circles
(function() {
    var x, y, $elie, pos, nowX, nowY, i, $that, vel, deg, fade, curve, ko, mo, oo, grow, len;
    
    // 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;  
    } 
    
    function moveIt()
    {
        $("div.spec").each(function(i, v) {
            $elie = $(v);
            if (! $elie.data("time"))
            {
                $elie.data("time", ran(30, 100));
                $elie.data("deg", ran(-179, 180));
                $elie.data("vel", ran(3, 10));  
                $elie.data("curve", ran(0, 1));
                $elie.data("fade", ran(0, 1));
                $elie.data("grow", ran(-2, 2));                
            }
            
            vel = $elie.data("vel");
            deg = $elie.data("deg");
            fade = $elie.data("fade");            
            curve = $elie.data("curve");
            grow = $elie.data("grow");
            
            len = $elie.width();
            if (grow > 0)
                len = Math.min(len + grow, 50);
            else
                len = Math.max(len + grow, 20);
            
            $elie.css("-moz-border-radius", len/2);
            $elie.css("border-radius", len/2);
            
            $elie.css("width", len);
            $elie.css("height", len);
            
            pos = $elie.position();            
            
            $elie.data("time", $elie.data("time") - 1);
            
            if (curve)
                $elie.data("deg", (deg + 5) % 180);
            else
                $elie.data("deg", (deg - 5) % 180);
            
            ko = $elie.css("-khtml-opacity");
            mo = $elie.css("-moz-opacity");
            oo = $elie.css("opacity");
            if (fade)
            {
                $elie.css("-khtml-opacity", Math.max(ko - .1, .5));
              ...