slow down particles

by Nick Hulea

HTML

<canvas id="canvas"></canvas>

CSS

canvas {
    position:absolute;
    overflow:hidden;
    top:0;
    left:0;
}
html {
    width:100%;
    height:100%;
    position:absolute;
    overflow:hidden;
    top:0;
    left:0;
}

JavaScript

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

var img = new Image();
img.src = "http://www.clipartbest.com/cliparts/eiM/jKA/eiMjKARin.png";
img.width = '20px';
img.height = '20px';

var v = isNaN(v) ? 0 : v;
var spd = 20;

var W = window.innerWidth;
var H = window.innerHeight;
canvas.width = W;
canvas.height = H;

var particles = [];
for (var i = 0; i < 200; i++) particles.push(new create_particle());

function create_particle() {
    this.x = Math.random() * W;
    this.y = Math.random() * H;
    this.vx = Math.random() * 20 - 1;
    this.vy = Math.random() * 20 - 1;
    this.radius = Math.random() * 20 + 20;
}
var x = 100;
var y = 100;
var draw = function () {
    ctx.save();
    ctx.fillStyle = "rgba(0, 0, 0, 1)";
    ctx.fillRect(0, 0, W, H);
    //ctx.drawImage(skyImg2, 0, 0, W, H);
    ctx.restore();
    for (var t = 0; t < particles.length; t++) {
        var p = particles[t];
        ctx.beginPath();
        ctx.fillStyle = "white";
        ctx.drawImage(img, p.x, p.y, 200, 200);
        ctx.fill();
        p.x += p.vx;
        p.y += p.vy;
        if (v > 200) {
            spd = spd - 0.001;
            console.log(spd);
            if (spd < 0.09) {
                spd = 0.09;
                p.vx = spd;
                p.vy = spd;
                p.x += p.vx;
                p.y += p.vy;
            }
        }
        if (p.x < -1E3) p.x = W + 1E3;
        if (p.y < -1E3) p.y = H + 1E3;
        if (p.x > W + 1E3) p.x = -1E3;
        if (p.y > H + 1E3) p.y = -1E3;
    }

};
var update = function () {
    requestAnimationFrame(update);
    v++;
    //console.log(v);
    draw();
};
requestAnimationFrame(update);