Skip to content

Instantly share code, notes, and snippets.

@kodi
Last active August 29, 2015 14:22
Show Gist options
  • Save kodi/4ddbe1bbb740563cabdf to your computer and use it in GitHub Desktop.
Save kodi/4ddbe1bbb740563cabdf 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 mainRadius = 200;
var center = {x: 0, y: height/2};
var points = [];
//create distorted circle
for (var i = 0; i < Math.PI * 2; i += 0.05) {
var rc = ( 50 * Math.random());
var xc = (550 * Math.sin(i)) + rc;
var yc = (550 * Math.cos(i)) + rc;
points.push([xc, yc]);
}
function rotate(x, y, xm, ym, a) {
a = a * Math.PI / 180; // Convert to radians because that is what
// JavaScript likes
// Subtract midpoints, so that midpoint is translated to origin
// and add it in the end again
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 rotation = 0;
var x = -1 * mainRadius;
var y = -1 * mainRadius;
function draw() {
x += 0.5;
y += 0.4;
var grad = ctx.createRadialGradient(center.x, center.y, 0, center.x, center.y, 3 * Math.abs(x));
grad.addColorStop(0, "rgba(255,150,150,0.1)");
grad.addColorStop(1, "rgba(0,50,150,0.1)");
ctx.strokeStyle = grad;
ctx.beginPath();
for (var j = 0; j < points.length; j++) {
var nx = points[j][0] + x;
var ny = points[j][1] + y;
var rotatedPoints = rotate(nx, ny, x, y, rotation);
rotation += 0.00075;
ctx.lineTo(rotatedPoints[0], rotatedPoints[1]);
}
ctx.closePath();
ctx.stroke();
if (x < width + 550 + 50) {
window.requestAnimationFrame(draw);
} else {
console.log('end');
}
}
window.requestAnimationFrame(draw);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment