|
|
|
@ -12,7 +12,6 @@ define(["q"], function(Q) {
|
|
|
|
|
var GRID = 5;
|
|
|
|
|
|
|
|
|
|
// Padding on the edge of the canvas in px
|
|
|
|
|
var PADDING = 4;
|
|
|
|
|
|
|
|
|
|
var pad = function(n, width) {
|
|
|
|
|
return n.length >= width ? n : new Array(width - n.length + 1).join("0") + n;
|
|
|
|
@ -21,43 +20,39 @@ define(["q"], function(Q) {
|
|
|
|
|
/**
|
|
|
|
|
* Fill in a square on the canvas.
|
|
|
|
|
*/
|
|
|
|
|
var fillBlock = function(x, y, color, ctx) {
|
|
|
|
|
ctx.beginPath();
|
|
|
|
|
ctx.rect(
|
|
|
|
|
PADDING+x*SQUARE,
|
|
|
|
|
PADDING+y*SQUARE,
|
|
|
|
|
SQUARE,
|
|
|
|
|
SQUARE
|
|
|
|
|
);
|
|
|
|
|
ctx.fillStyle = color;
|
|
|
|
|
ctx.fill();
|
|
|
|
|
var fill = function(svg, x, y, padding, size, color) {
|
|
|
|
|
var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
|
|
|
|
|
|
|
|
|
|
rect.setAttribute("x", padding + x * size);
|
|
|
|
|
rect.setAttribute("y", padding + y * size);
|
|
|
|
|
rect.setAttribute("width", size);
|
|
|
|
|
rect.setAttribute("height", size);
|
|
|
|
|
rect.setAttribute("style", "fill: " + color);
|
|
|
|
|
|
|
|
|
|
svg.appendChild(rect);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Pick random squares to fill in.
|
|
|
|
|
*/
|
|
|
|
|
var generateIdenticon = function(key, height, width) {
|
|
|
|
|
|
|
|
|
|
var canvas = document.createElement("canvas"),
|
|
|
|
|
ctx = canvas.getContext("2d");
|
|
|
|
|
canvas.width = width;
|
|
|
|
|
canvas.height = height;
|
|
|
|
|
var generateIdenticon = function(key, padding, size) {
|
|
|
|
|
|
|
|
|
|
// FILL CANVAS BG
|
|
|
|
|
ctx.beginPath();
|
|
|
|
|
ctx.rect(0, 0, height, width);
|
|
|
|
|
ctx.fillStyle = '#F0F0F0';
|
|
|
|
|
ctx.fill();
|
|
|
|
|
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
|
|
|
|
svg.setAttribute("version", "1.1");
|
|
|
|
|
svg.setAttribute("viewBox", "0 0 " + size + " " + size);
|
|
|
|
|
svg.setAttribute("preserveAspectRatio", "xMinYMin meet");
|
|
|
|
|
svg.setAttribute("shape-rendering", "crispEdges");
|
|
|
|
|
fill(svg, 0, 0, 0, size + 2*padding, "#F0F0F0");
|
|
|
|
|
|
|
|
|
|
if (typeof key === null) {
|
|
|
|
|
return canvas;
|
|
|
|
|
return svg;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
Q.when(key, function(key) {
|
|
|
|
|
var hash = pad((parseInt(key, 16) % Math.pow(2, 18)).toString(2), 18),
|
|
|
|
|
index = 0, color = null;
|
|
|
|
|
|
|
|
|
|
canvas.setAttribute("data-hash", key);
|
|
|
|
|
svg.setAttribute("data-hash", key);
|
|
|
|
|
|
|
|
|
|
// via http://colrd.com/palette/19308/
|
|
|
|
|
switch (hash.substring(hash.length - 3, hash.length)) {
|
|
|
|
@ -92,11 +87,11 @@ define(["q"], function(Q) {
|
|
|
|
|
for (var y=0; y<GRID; y++) {
|
|
|
|
|
|
|
|
|
|
if (hash.charAt(index) === "1") {
|
|
|
|
|
fillBlock(x, y, color, ctx);
|
|
|
|
|
fill(svg, x, y, padding, 8, color);
|
|
|
|
|
|
|
|
|
|
// FILL RIGHT SIDE SYMMETRICALLY
|
|
|
|
|
if (x < Math.floor(GRID/2)) {
|
|
|
|
|
fillBlock((GRID-1) - x, y, color, ctx);
|
|
|
|
|
fill(svg, (GRID-1) - x, y, padding, 8, color);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
index++;
|
|
|
|
@ -104,7 +99,7 @@ define(["q"], function(Q) {
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
return canvas;
|
|
|
|
|
return svg;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
var generateBlank = function(height, width) {
|
|
|
|
@ -116,7 +111,7 @@ define(["q"], function(Q) {
|
|
|
|
|
].join(""), 2).toString(16);
|
|
|
|
|
|
|
|
|
|
var el = generateIdenticon(blank, height, width);
|
|
|
|
|
el.className = "blank";
|
|
|
|
|
el.classList.add("blank");
|
|
|
|
|
|
|
|
|
|
return el;
|
|
|
|
|
};
|
|
|
|
|