settings = settings || {};

var imageSource = settings.imageSource,

step = settings.step || 10,

shape = settings.shape || "circ",

attributes = settings.attributes || {stroke: "none"},

animator = settings.animator,

staggered = settings.staggered || false,

staggeredSpacing = settings.staggeredSpacing || 0.5,

generator = settings.generator,

generatorCenterDistance = settings.generatorCenterDistance;

var paper = this,

canvas = document.createElement('canvas'),

context = canvas.getContext('2d'),

colorData;

var center = step / 2,

radius = center - 1;

var getColorAt = function(x, y) {

var index = ((canvas.width * y) + x) * 4;

return "rgb(" + colorData[index] + ", " + colorData[index + 1] + ", " + colorData[index + 2] + ")";

}

var defaultRect = function(x, y, clr) {

return paper.rect(x, y, step, step).attr({fill: clr}).attr(attributes);

}

var defaultCirc = function(x, y, clr) {

return paper.circle(x+center, y+center, radius).attr({fill: clr}).attr(attributes);

}

var defaultHex = function (x, y, clr) {

var r = radius;

var sqrt3 = Math.sqrt(3);

var rhalf = r / 2;

var yoffset = r * sqrt3;

var hexM = [r + rhalf, yoffset];

var hexL = [[r + rhalf, yoffset],

[rhalf, yoffset],

[0.0, yoffset / 2],

[rhalf, 0.0],

[r + rhalf, 0.0],

[2 * r, yoffset / 2],

[r + rhalf, yoffset]];

var hex = paper.path('M ' + hexM[0] + ' ' + hexM[1] +

' L ' + hexL[0][0] + ' ' + hexL[0][1] +

' L ' + hexL[1][0] + ' ' + hexL[1][1] +

' L ' + hexL[2][0] + ' ' + hexL[2][1] +

' L ' + hexL[3][0] + ' ' + hexL[3][1] +

' L ' + hexL[4][0] + ' ' + hexL[4][1] +

' L ' + hexL[5][0] + ' ' + hexL[5][1] +

' L ' + hexL[6][0] + ' ' + hexL[6][1]);

return hex.transform('...T' + x + ',' + y).attr({ fill: clr }).attr(attributes);

};

var img = new Image();

img. {

var x = 0,

y = 0,

element,

color;

canvas.width = img.width;

canvas.height = img.height;

context.drawImage(img, 0, 0, img.width, img.height);

colorData = context.getImageData(0, 0, img.width, img.height).data;

if (!staggered) {

for (; x < canvas.width; x += step) {

for (y = 0; y < canvas.height; y += step) {

color = getColorAt(x + center, y + center);

element = (generator) ? generator(paper, x, y, color, step, attributes) :

(shape == "rect") ? defaultRect(x, y, color) : defaultCirc(x, y, color);

if (animator) {

animator(element, x, y, step);

}

}

}

} else {

var staggeredStepX;

var staggeredStepY;

if (generator) {

staggeredStepX = generatorCenterDistance * Math.sqrt(2.0);

staggeredStepY = 0.5 * staggeredStepX;

} else if (shape == "rect") {

staggeredStepX = 2.0 * (step + staggeredSpacing);

staggeredStepY = 0.25 * staggeredStepX;

} else if (shape == "hex") {

staggeredStepX = Math.sqrt(3.0) * staggeredSpacing + (3.0 * radius);

staggeredStepY = 0.5 * staggeredSpacing + (0.5 * Math.sqrt(3.0) * radius);

}

var rowIndex = 0;

for (y = 0; y < canvas.height-(staggeredStepY/2.0); y += staggeredStepY) {

for (x = (rowIndex%2)*0.5*staggeredStepX; x < canvas.width-(staggeredStepX/2.0); x += staggeredStepX) {

color = getColorAt(Math.floor(x + center), Math.floor(y + center));

if (generator) element = generator(paper, x, y, color, step, attributes);

else if (shape == "rect") element = defaultRect(x, y, color);

else if (shape == "hex") element = defaultHex(x, y, color);

else element = defaultCirc(x, y, color);

if (animator) {

animator(element, x, y, step);

}

}

rowIndex++;

}

}

}

img.crossOrigin = '';

img.src = imageSource;