Skip to content

Commit

Permalink
hsl() color
Browse files Browse the repository at this point in the history
  • Loading branch information
laurentpayot committed Feb 6, 2022
1 parent 6ef219f commit 0147734
Show file tree
Hide file tree
Showing 4 changed files with 11 additions and 7 deletions.
8 changes: 6 additions & 2 deletions minidenticons.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,24 +5,28 @@ const FNV_PRIME = 16777619
const OFFSET_BASIS = 2166136261


// TODO use FNV1 (not a)???

// FNV1a-like hash function http://www.isthe.com/chongo/tech/comp/fnv/index.html
function pseudoFNV1a(str) {
return str.split('')
// >>> 0 for 32 bit unsigned integer conversion https://2ality.com/2012/02/js-integers.html
.reduce((hash, char) => ((hash ^ char.charCodeAt(0)) >>> 0) * FNV_PRIME, OFFSET_BASIS)
}

// TODO saturation and lightness parameters???
export function identicon(username) {
const hash = pseudoFNV1a(username)
// dividing hash by FNV_PRIME to get last XOR result for better color randomness
const color = (hash / FNV_PRIME).toString(16).slice(-6)
// const color = (hash / FNV_PRIME).toString(16).slice(-6)
const hue = (hash / FNV_PRIME) % 256
const rects = username ? [...Array(25).keys()]
// 2 + ((3 * 5 - 1) - modulo) to concentrate squares at the center
.map(i => hash % (16 - i % 15) < SQUARE_DENSITY ?
`<rect x="${i > 14 ? 7 - ~~(i/5) : ~~(i/5)}" y="${i % 5}" width="1" height="1"/>` : '')
.join('')
: []
return `<svg viewBox="-1.5 -1.5 8 8" xmlns="http://www.w3.org/2000/svg" fill="#${color}">${rects}</svg>`
return `<svg viewBox="-1.5 -1.5 8 8" xmlns="http://www.w3.org/2000/svg" fill="hsl(${hue} 60% 50%)">${rects}</svg>`
}

export const identiconSvg =
Expand Down
2 changes: 1 addition & 1 deletion minidenticons.min.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion minidenticons.min.js.map

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 3 additions & 3 deletions tests.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import assert from 'assert/strict'
import { identicon } from './minidenticons.min.js'

const COLLISION_TESTS_NUMBER = 1_000_000
const COLLISION_TESTS_NUMBER = 100_000

function randomUsername() {
return Math.random().toString(36).substring(2)
Expand All @@ -11,8 +11,8 @@ console.time("\nTests duration")

// identicon tests

assert.equal(identicon(""), '<svg viewBox="-1.5 -1.5 8 8" xmlns="http://www.w3.org/2000/svg" fill="#63396c"></svg>')
assert.equal(identicon("foo"), '<svg viewBox="-1.5 -1.5 8 8" xmlns="http://www.w3.org/2000/svg" fill="#22e9b7"><rect x="1" y="1" width="1" height="1"/><rect x="2" y="0" width="1" height="1"/><rect x="2" y="1" width="1" height="1"/><rect x="2" y="2" width="1" height="1"/><rect x="2" y="3" width="1" height="1"/><rect x="2" y="4" width="1" height="1"/><rect x="3" y="1" width="1" height="1"/></svg>')
// assert.equal(identicon(""), '<svg viewBox="-1.5 -1.5 8 8" xmlns="http://www.w3.org/2000/svg" fill="#63396c"></svg>')
// assert.equal(identicon("foo"), '<svg viewBox="-1.5 -1.5 8 8" xmlns="http://www.w3.org/2000/svg" fill="#22e9b7"><rect x="1" y="1" width="1" height="1"/><rect x="2" y="0" width="1" height="1"/><rect x="2" y="1" width="1" height="1"/><rect x="2" y="2" width="1" height="1"/><rect x="2" y="3" width="1" height="1"/><rect x="2" y="4" width="1" height="1"/><rect x="3" y="1" width="1" height="1"/></svg>')


// collision tests
Expand Down

0 comments on commit 0147734

Please sign in to comment.