Squares.js
/*! Animated Squares
*
* @author Livingston Samuel
* @license MIT License
*
*/
;(function (win, doc, Math) {
var getRandomColor = function () {
return 'rgba('+ Math.floor(Math.random()*255) +','+ Math.floor(Math.random()*255) +','+ Math.floor(Math.random()*255) +','+ Math.random().toFixed(1) +')';
};
var renderSquare = function (ctx, cols, x, y) {
ctx.fillStyle = getRandomColor();
ctx.fillRect(0, 0, cols, cols);
};
var Squares = function (board, options) {
var defaultOptions = {
width: doc.body.offsetWidth,
height: doc.body.offsetHeight,
colWidth: 20,
grid: {
color: '#f7f7f7',
width: 1
},
shapeFn: renderSquare
};
this.board = board;
this.options = _.assign(defaultOptions, options || {});
this.setup();
if(this.options.grid)
this.renderGrid();
};
Squares.prototype = {
setup: function () {
var options = this.options;
this.ctx = this.board.getContext('2d');
this.updateDimensions();
},
updateDimensions: function () {
var options = this.options;
this.board.width = options.width;
this.board.height = options.height;
},
renderGrid: function () {
var options = this.options,
ctx = this.ctx,
width = options.width,
height = options.height,
cols = options.colWidth;
ctx.save();
ctx.translate(0,0);
ctx.beginPath();
var x, y;
for (x = .5; x <= width; x += cols) {
ctx.moveTo(x, 0);
ctx.lineTo(x, height);
}
for (y = .5; y <= height; y += cols) {
ctx.moveTo(0, y);
ctx.lineTo(width, y);
}
ctx.closePath();
ctx.strokeStyle = options.grid.color;
ctx.strokeWidth = options.grid.width;
ctx.stroke();
ctx.restore();
},
renderShape: function (x, y) {
var cols = this.options.colWidth;
x = x * cols;
y = y * cols;
this.ctx.save();
this.ctx.translate(x, y);
this.options.shapeFn(this.ctx, cols, x, y)
this.ctx.restore();
},
tick: function () {
var cols = this.options.colWidth,
randomX = Math.floor((Math.random()*this.options.width)/cols),
randomY = Math.floor((Math.random()*this.options.height)/cols);
this.renderShape(randomX, randomY);
requestAnimationFrame(this.tick.bind(this));
}
};
win.Squares = Squares;
}(window, document, Math));