Snow particles


<html>
    <head>
        <title>HTML5 Canvas</title>
        <style>

            * { padding:0; margin:0; }
            body { overflow:hidden; }

        </style>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
        <script>

            $(function() {

               var canvas = document.getElementById("canvas");
               var ctx = canvas.getContext("2d");

               var W = $(document).width();
               var H = $(document).height();

               canvas.width = W;
               canvas.height = H;

               var parts = [];
               var dir_x = ranInt(-10,10);

               function Rain() {
                   this.x = ranInt(0,W);
                   this.y = 0;
                   this.s = ranInt(5,10);
                   this.c = "rgba(255,255,255,1)";
                   this.sx = 0;
                   this.sy = ranInt(2,4) * ranInt(1,10);
               }

               function Draw() {

                   ctx.globalCompositeOperation = "source-over";
                   ctx.fillStyle = "rgba(0,0,0,1)";
                   ctx.fillRect(0,0,W,H);
                   ctx.globalCompositeOperation = "lighter";

                   for(var i = 0; i < parts.length; i++) {

                       var p = parts[i];

                       //draw particle
                       ctx.beginPath();
                       ctx.arc(p.x, p.y, p.s, 0, Math.PI * 2);
                       ctx.fillStyle = p.c;
                       ctx.fill();

                       //update particle
                       parts[i].x += dir_x;
                       parts[i].y += p.sy;

                       if(p.y > H - p.s || p.x > W - p.s || p.x < 0) {
                           console.log(i + " is over the border, removing index");
                           parts[i] = new Rain();
                       }

                   }

                   /* debug purposes */
                   ctx.fillStyle = "rgba(255,255,255,1)";
                   ctx.font = "24px Arial";
                   var debug = [
                       "parts.length: " + parts.length,
                       "dir_x: " + dir_x
                       ];
                   var h = 40;
                   for(i = 0; i < debug.length; i++) {
                       ctx.fillText(debug[i], 20, h*(i+1));
                   }

               }

               function CreateParticle() {

                   if(parts.length != 100)
                   parts.push(new Rain());

               }

               setInterval(Draw, 33);
               setInterval(CreateParticle, 100);
               setInterval(function() {

                   dir_x += ranInt(-2,2);

                   if(dir_x > 10) {
                       dir_x -= ranInt(3,7);
                   }
                   if(dir_x < -10) {
                       dir_x += ranInt(3,7)
                   }

               }, 500);


               /* Other important functions */
               function ranInt(Min, Max) {
                   return Math.floor(Math.random() * (Max-Min) + Min);
               }
            });

        </script>

    </head>

    <body>
        <canvas id="canvas"></canvas>
    </body>
</html>