Skip to content

Instantly share code, notes, and snippets.

@mikesusz
Created April 25, 2011 14:24
Show Gist options
  • Save mikesusz/940581 to your computer and use it in GitHub Desktop.
Save mikesusz/940581 to your computer and use it in GitHub Desktop.
squaredesign squares draw
window.Squares = function(self)
{
/* TODOS:
- animate? collect squares or just overdraw on the same grid
*/
Sq = function()
{
this.timer;
this.sqD = 64;
this.styles = [
'#E2E5E3',
'#F4F4F4',
'#808AB8',
'#40455c',
'#6C83C6',
'#96a6d6'
];
return this;
}
self.init = function()
{
self.ctx = self.canvas.getContext("2d");
self.ctx.strokeStyle = 'black';
self.ctx.lineWidth = 1;
sq = new Sq();
self.update();
}
self.color = function()
{
return sq.styles[Math.round(Math.random()*sq.styles.length)];
}
self.update = function()
{
self.canvas.width=1;
self.canvas.height=1; //clears the canvas. ugly.
self.canvas.width = document.width;
self.canvas.height = document.height;
sq.sqW = Math.ceil(self.canvas.width/sq.sqD);
sq.sqH = Math.floor(self.canvas.height/(self.canvas.width/sq.sqW))+1;
for (var y=0, yMax = (sq.sqH*sq.sqD); y < yMax; y+=sq.sqD)
{
for (var x=0, xMax = (sq.sqW*sq.sqD); x < xMax; x+=sq.sqD)
{
self.ctx.fillStyle = self.color();
self.ctx.strokeRect(x,y,sq.sqD,sq.sqD);
self.ctx.fillRect(x,y,sq.sqD,sq.sqD);
}
}
}
window.onload = function()
{
self.wrap = document.createElement('div');
self.canvas = document.createElement('canvas');
self.wrap.appendChild(self.canvas);
document.body.appendChild(self.wrap);
self.init();
}
window.onresize = function()
{
clearTimeout(sq.timer)
sq.timer = setTimeout( function()
{
// external - need to be bound at the same time
self.update()
}, 10);
}
return self;
}({});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment