Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

svg format blockies,new styling #2

Merged
merged 3 commits into from
Nov 7, 2023
Merged

svg format blockies,new styling #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
cbc9710
svg format blockies,new styling
jamesmudgett Oct 31, 2023
1ea2f25
add xmlns attribute
jamesmudgett Nov 1, 2023
ae2f2ea
added dominant color helper function
jamesmudgett Nov 1, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
299 changes: 171 additions & 128 deletions blockies.js
View file
Open in desktop
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);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we use window.crypto.getRandomValue() here it should bias less meaning we won't see patterns repeat in the image as often. I would recommend this, but the odds of a user encountering a repeating image with the current implementation will still be slim.


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
Open in desktop
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