Skip to content

Commit

Permalink
Merge pull request #2 from brave/styling
Browse files Browse the repository at this point in the history 
svg format blockies,new styling
  • Loading branch information
@jamesmudgett
jamesmudgett authored Nov 7, 2023
2 parents 07ebdfa + ae2f2ea commit 0880fa9
Show file tree
Hide file tree
Showing 2 changed files with 181 additions and 138 deletions.
299 changes: 171 additions & 128 deletions blockies.js
View file
Original file line number Diff line number Diff line change
@@ -1,130 +1,173 @@
(function() {
// The random number is a js implementation of the Xorshift PRNG
var randseed = new Array(4); // Xorshift: [x, y, z, w] 32 bit values
var colors = ['#5B5C63', '#151E9A', '#2197F9', '#1FC3DC', '#086582', '#67D4B4', '#AFCE57', '#F0CB44', '#F28A29', '#FC798F', '#C1226E', '#FAB5EE', '#9677EE', '#5433B0'];

function seedrand(seed) {
for (var i = 0; i < randseed.length; i++) {
randseed[i] = 0;
}
for (var i = 0; i < seed.length; i++) {
randseed[i%4] = ((randseed[i%4] << 5) - randseed[i%4]) + seed.charCodeAt(i);
}
var randseed = new Array(4);
var colors = ['#423EEE', '#E2E2FC', '#FE5907', '#FEDED6', '#5F5CF1', '#171553', '#1C1E26', '#E1E2E8', ];

function seedrand(seed) {
for (var i = 0; i < randseed.length; i++) {
randseed[i] = 0;
}
for (var i = 0; i < seed.length; i++) {
randseed[i % 4] = ((randseed[i % 4] << 5) - randseed[i % 4]) + seed.charCodeAt(i);
}
}

function rand() {
var t = randseed[0] ^ (randseed[0] << 11);

randseed[0] = randseed[1];
randseed[1] = randseed[2];
randseed[2] = randseed[3];
randseed[3] = (randseed[3] ^ (randseed[3] >> 19) ^ t ^ (t >> 8));

return (randseed[3] >>> 0) / ((1 << 31) >>> 0);
}

function createColor() {
return colors[Math.floor(rand() * 100) % colors.length];
}

function createImageData(size) {
var width = size;
var height = size;

var dataWidth = Math.ceil(width / 2);
var mirrorWidth = width - dataWidth;

var data = [];
for (var y = 0; y < height; y++) {
var row = [];
for (var x = 0; x < dataWidth; x++) {
row[x] = Math.floor(rand() * 2.3);
}
var r = row.slice(0, mirrorWidth);
r.reverse();
row = row.concat(r);

for (var i = 0; i < row.length; i++) {
data.push(row[i]);
}
}

return data;
}

function buildOpts(opts) {
var newOpts = {};

newOpts.seed = opts.seed || Math.floor((Math.random() * Math.pow(10, 16))).toString(16);

seedrand(newOpts.seed);

newOpts.size = opts.size || 8;
newOpts.scale = opts.scale || 4;
newOpts.color = opts.color || createColor();
newOpts.bgcolor = opts.bgcolor || createColor();
newOpts.spotcolor = opts.spotcolor || createColor();

return newOpts;
}

function renderIcon(opts) {
opts = buildOpts(opts || {});
var imageData = createImageData(opts.size);
var width = Math.sqrt(imageData.length);

var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('width', opts.size * opts.scale);
svg.setAttribute('height', opts.size * opts.scale);
svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');

var bgRect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
bgRect.setAttribute('width', opts.size * opts.scale);
bgRect.setAttribute('height', opts.size * opts.scale);
bgRect.setAttribute('fill', opts.bgcolor);
svg.appendChild(bgRect);

for (var i = 0; i < imageData.length; i++) {
if (imageData[i]) {
var row = Math.floor(i / width);
var col = i % width;

var fillColor = (imageData[i] == 1) ? opts.color : opts.spotcolor;
var shapeType = Math.floor(rand() * 3);

switch (shapeType) {
case 0: // Rectangle
var rectSizeMultiplier = rand() * 2;
var rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
rect.setAttribute('x', col * opts.scale);
rect.setAttribute('y', row * opts.scale);
rect.setAttribute('width', opts.scale * rectSizeMultiplier);
rect.setAttribute('height', opts.scale * rectSizeMultiplier);
rect.setAttribute('fill', fillColor);
svg.appendChild(rect);
break;
case 1: // Circle
var circleSizeMultiplier = rand() * 1;
var circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
circle.setAttribute('cx', col * opts.scale + opts.scale / 2);
circle.setAttribute('cy', row * opts.scale + opts.scale / 2);
circle.setAttribute('r', (opts.scale / 2) * circleSizeMultiplier);
circle.setAttribute('fill', fillColor);
svg.appendChild(circle);
break;
default:
break;
}
}
}

function rand() {
// based on Java's String.hashCode(), expanded to 4 32bit values
var t = randseed[0] ^ (randseed[0] << 11);

randseed[0] = randseed[1];
randseed[1] = randseed[2];
randseed[2] = randseed[3];
randseed[3] = (randseed[3] ^ (randseed[3] >> 19) ^ t ^ (t >> 8));

return (randseed[3]>>>0) / ((1 << 31)>>>0);
}

function createColor() {
return colors[Math.floor(rand() * 100) % colors.length];
}

function createImageData(size) {
var width = size; // Only support square icons for now
var height = size;

var dataWidth = Math.ceil(width / 2);
var mirrorWidth = width - dataWidth;

var data = [];
for(var y = 0; y < height; y++) {
var row = [];
for(var x = 0; x < dataWidth; x++) {
// this makes foreground and background color to have a 43% (1/2.3) probability
// spot color has 13% chance
row[x] = Math.floor(rand()*2.3);
}
var r = row.slice(0, mirrorWidth);
r.reverse();
row = row.concat(r);

for(var i = 0; i < row.length; i++) {
data.push(row[i]);
}
}

return data;
}

function buildOpts(opts) {
var newOpts = {};

newOpts.seed = opts.seed || Math.floor((Math.random()*Math.pow(10,16))).toString(16);

seedrand(newOpts.seed);

newOpts.size = opts.size || 8;
newOpts.scale = opts.scale || 4;
newOpts.color = opts.color || createColor();
newOpts.bgcolor = opts.bgcolor || createColor();
newOpts.spotcolor = opts.spotcolor || createColor();

return newOpts;
}

function renderIcon(opts, canvas) {
opts = buildOpts(opts || {});
var imageData = createImageData(opts.size);
var width = Math.sqrt(imageData.length);

canvas.width = canvas.height = opts.size * opts.scale;

var cc = canvas.getContext('2d');
cc.fillStyle = opts.bgcolor;
cc.fillRect(0, 0, canvas.width, canvas.height);
cc.fillStyle = opts.color;

for(var i = 0; i < imageData.length; i++) {

// if data is 0, leave the background
if(imageData[i]) {
var row = Math.floor(i / width);
var col = i % width;

// if data is 2, choose spot color, if 1 choose foreground
cc.fillStyle = (imageData[i] == 1) ? opts.color : opts.spotcolor;
cc.filter = 'blur(17px)';
cc.fillRect(col * opts.scale, row * opts.scale, opts.scale, opts.scale);
}
}

return canvas;
}

function createIcon(opts) {
var canvas = document.createElement('canvas');

renderIcon(opts, canvas);

return canvas;
}

function backgroundColors(opts) {
opts = buildOpts(opts || {});

return '100% 100% linear-gradient(to bottom, ' + opts.bgcolor + ' 0%, ' + opts.spotcolor + ' 100%) no-repeat';
}

var api = {
create: createIcon,
background: backgroundColors,
render: renderIcon
};

if (typeof module !== "undefined") {
module.exports = api;
}
if (typeof window !== "undefined") {
window.blockies = api;
}

})();

return svg;
}

function getDominantColor(svgElement) {
const colors = {};
const elements = svgElement.querySelectorAll('*');

elements.forEach(element => {
const style = getComputedStyle(element);
const fillColor = style.fill;

if (fillColor) {
colors[fillColor] = (colors[fillColor] || 0) + 1;
}
});

let dominantColor = null;
let maxCount = 0;

Object.entries(colors).forEach(([color, count]) => {
if (count > maxCount) {
maxCount = count;
dominantColor = color;
}
});

return dominantColor;
}

function createIcon(opts) {
return renderIcon(opts);
}

function backgroundColors(opts) {
opts = buildOpts(opts || {});

return '100% 100% linear-gradient(to bottom, ' + opts.bgcolor + ' 0%, ' + opts.spotcolor + ' 100%) no-repeat';
}

var api = {
create: createIcon,
background: backgroundColors,
render: renderIcon,
dominantColor: getDominantColor
};

if (typeof module !== "undefined") {
module.exports = api;
}
if (typeof window !== "undefined") {
window.blockies = api;
}

})();
20 changes: 10 additions & 10 deletions random-samples.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,12 +27,13 @@
} */


.icon {
svg {
display: inline-block;
position: relative;
width: 64px;
height: 64px;
margin: 8px;
border-radius: 0px;
}

</style>
Expand All @@ -55,15 +56,14 @@
for (i = 0; i < addresses.length; i ++ ){
var seed = addresses[i].toLowerCase();

var source = blockies.create({ seed:seed ,size: 8,scale: 1});

var icon = document.createElement("div");
icon.className = "icon";

var image = document.createElement("img");
image.src = blockies.create({ seed:seed ,size: 8,scale: 16}).toDataURL();
icon.appendChild( image );
document.body.appendChild(icon)
// var image = document.createElement("img");
// console.log(blockies.create({ seed:seed ,size: 8,scale: 16}));
// //image.src = blockies.create({ seed:seed ,size: 8,scale: 16}).toDataURL();
// icon.appendChild( image );
const svg = blockies.create({ seed:seed ,size: 8,scale: 16});
document.body.appendChild(svg);
const dc = blockies.dominantColor(svg);
console.log('Dominant color:', dc);
}

};
Expand Down

0 comments on commit 0880fa9

Please sign in to comment.