Skip to content

Instantly share code, notes, and snippets.

@kodi
Created July 5, 2015 04:59
Show Gist options
  • Save kodi/2ecb2b92046f8d544941 to your computer and use it in GitHub Desktop.
Save kodi/2ecb2b92046f8d544941 to your computer and use it in GitHub Desktop.
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);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment