$.init();

var balls = [],
    numBalls = 80,
    gravity = 0.5,
    color = 0;

$.fullScreen();

for (var ball, i = 0; i < numBalls; ++i) {
    ball = new $.Circle({
        radius: 5,
        x: canvas.width / 2,
        y: canvas.height,
    });
    ball.vx = Math.random() * 2 - 1;
    ball.vy = Math.random() * -10 - 10;

    balls.push(ball);
}

function draw(ball) {
    ball.vy += gravity;
    ball.x += ball.vx;
    ball.y += ball.vy;
    ball.color = 'hsla(' + color + ', 100%, 50%, 1)'

    if( ball.x - ball.radius > canvas.width ||
        ball.x + ball.radius < 0 ||
        ball.y - ball.radius > canvas.height ||
        ball.y + ball.radius < 0)
    {
        ball.x = canvas.width / 2;
        ball.y = canvas.height;
        ball.vx = Math.random() * 4 - 1;
        ball.vy = Math.random() * -20 - 10;
    }
    ball.fill();
}

(function drawFrame() {
    $.animate(drawFrame);
    $.clear();

    balls.forEach(draw);

    color++;
})();