Animated Experiments 003.js

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var width = 700;
var height = 700;
var center = {x: width/2 , y: height/2};

var circleStroke = function(radius, x, y, strokeColor) {
    ctx.strokeStyle = strokeColor;
    ctx.beginPath();
    ctx.arc(x, y, radius, 0, Math.PI * 2);
    ctx.stroke();
    ctx.closePath();
};

function rotate(x, y, xm, ym, a) {
    a = a * Math.PI / 180;
    var xr = (x - xm) * Math.cos(a) - (y - ym) * Math.sin(a) + xm;
    var yr = (x - xm) * Math.sin(a) + (y - ym) * Math.cos(a) + ym;
    return [xr, yr];
}

var objects = [];
for (var oc = 0; oc < 20; oc++) {
    var x = (width/4) + (width/1.5 * Math.random());
    var y = (height/4) + (height/1.5 * Math.random());
    var r =  2 * Math.random();
    objects.push({x: x, y: y, r: r});
}

var i = 0;

function draw() {

    var grad = ctx.createRadialGradient(center.x, center.y, 0, center.x, center.y, 500);
    grad.addColorStop(0, "rgba(0,20,150,0.05)");
    grad.addColorStop(1, "rgba(255,0,0,0.05)");

    for (var j = 0; j < objects.length; j++) {
        var circle = objects[j];
        var horizontalOffset = ((80* Math.sin(i/15)));
        var verticalOffset = ((50* Math.cos(i/15)));
        var newC = rotate(circle.x, circle.y, (width / 2) + horizontalOffset, (height / 2) + verticalOffset, i);
        var radius = circle.r + Math.abs((10* Math.sin(i/50)));
        circleStroke(radius, newC[0], newC[1], grad);
    }

    i += 0.2;
    window.requestAnimationFrame(draw);

}

window.requestAnimationFrame(draw);