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 #3
// just fucking around
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: 0
});
s = s + 0.005;
var l = 56,
j = 0,
k = true;
for (var i = 0; i < 128; i++) {
if (k) {
j++;
} else {
j--;
l++;
}
var nv = [
Math.floor(l - (i / j)) + 128,
Math.floor(l / j) + 128,
Math.floor(i * j + j) + 56,
];
make({
fillStyle: "rgb(" + nv[0] + ", " + nv[1] + ", " + nv[2] + ")",
shiftX: (k ? 1 : -1) * Math.sin(i * s) * (i * l--),
shiftY: (k ? -1 : 1) * Math.cos(i * s) * (i * j++),
radius: i / j
});
if (j > 3) {
k = false;
} else if (j < 1) {
k = true;
}
}
ctx.restore();
setTimeout(draw, 1000 / 32);
};
draw();
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment