Skip to content

Instantly share code, notes, and snippets.

@rlemon
Created Nov 15, 2011
Embed
What would you like to do?
Canvas rotation and translate fun #2
// mods by stevether
var s = 0;
window.onload = function() {
var cvs = document.getElementById("cvs");
var ctx = cvs.getContext("2d");
var w = window.innerWidth,
h = window.innerHeight;
cvs.setAttribute("height", h);
cvs.setAttribute("width", w);
var make = function(o) {
ctx.beginPath();
ctx.fillStyle = o.fillStyle;
ctx.translate(o.shiftX, o.shiftY);
ctx.arc(0, 0, o.radius, 0, Math.PI * 2);
ctx.fill();
ctx.closePath();
};
var draw = function() {
ctx.save();
ctx.fillStyle = "black";
ctx.fillRect(0, 0, w, h);
make({
fillStyle: "rgb(0, 0, 0)",
shiftX: w / 2,
shiftY: h / 2,
radius: 1
});
s = s + 0.001;
var j = 1, k = 1;
for (var i = 0; i < 127; i++) {
var nv = [
Math.floor(i),
Math.floor(i * 2),
Math.floor(i * 2),
];
make({
fillStyle: "rgb(" + nv[0] + ", " + nv[1] + ", " + nv[2] + ")",
shiftX: Math.sin(i*s) * (i * j),
shiftY: Math.cos(i*s) * (i * k),
radius: i*((j/k)/5)
});
j++;
k++;
if (j > 2) j = 1;
if (k > 3) k = 1;
}
ctx.restore();
setTimeout(draw, 20);
};
draw();
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment