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.2
var s = 0, makeSquares = false;
window.onload = function() {
var cvs = document.getElementById("cvs");
var ctx = cvs.getContext("2d");
var w, h;
this.onresize = function() {
w = window.innerWidth;
h = window.innerHeight;
cvs.setAttribute("height", h);
cvs.setAttribute("width", w);
};
this.onresize.call();
var make = function(o) {
ctx.beginPath();
ctx.fillStyle = o.fillStyle;
ctx.translate(o.shiftX, o.shiftY);
if (o.round) {
ctx.arc(0, 0, o.radius, 0, Math.PI * 2);
} else {
ctx.fillRect(0, 0, o.radius, o.radius);
}
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 = 0,
k = 0;
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),
round: makeSquares ? (k > 1) : true,
});
j++;
k++;
if (j > 2) j = 0;
if (k > 3) k = 0;
}
ctx.restore();
setTimeout(draw, 20);
};
draw();
};
window.onkeyup = function(event) {
if(event.keyCode == 83) {
makeSquares = !!!makeSquares;
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment