hue angle fix

minidenticons.js

@@ -1,7 +1,7 @@
 // density of 4 for the lowest probability of collision
 const SQUARE_DENSITY = 4
-// 16 different colors only for easy distinction
-const COLORS_NB = 16
+// 18 different colors only for easy distinction
+const COLORS_NB = 18
 
 // 32 bit FNV-1a hash parameters
 const FNV_PRIME = 16777619
@@ -17,8 +17,8 @@ function pseudoFNV1a(str) {
 
 export function identicon(username, saturation=50, lightness=50) {
     const hash = pseudoFNV1a(username)
-    // dividing hash by FNV_PRIME to get last XOR result for better color randomness
-    const hue = ~~(hash / FNV_PRIME % COLORS_NB * 256 / COLORS_NB)
+    // dividing hash by FNV_PRIME to get last XOR result for better color randomness (will be an integer except for empty string hash)
+    const hue = ((hash / FNV_PRIME) % COLORS_NB) * (360 / COLORS_NB)
     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 ?

tests.js

@@ -11,8 +11,19 @@ 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="hsl(17 50% 50%)"></svg>')
-assert.equal(identicon("foo"), '<svg viewBox="-1.5 -1.5 8 8" xmlns="http://www.w3.org/2000/svg" fill="hsl(112 50% 50%)"><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>')
+// non-integer hue normal for empty string
+assert.equal(identicon(""), '<svg viewBox="-1.5 -1.5 8 8" xmlns="http://www.w3.org/2000/svg" fill="hsl(62.17362189473988 50% 50%)"></svg>')
+assert.equal(identicon("foo"), '<svg viewBox="-1.5 -1.5 8 8" xmlns="http://www.w3.org/2000/svg" fill="hsl(60 50% 50%)"><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("Johnny5"), '<svg viewBox="-1.5 -1.5 8 8" xmlns="http://www.w3.org/2000/svg" fill="hsl(140 50% 50%)"><rect x="0" y="1" width="1" height="1"/><rect x="0" y="2" width="1" height="1"/><rect x="0" y="4" width="1" height="1"/><rect x="1" y="2" width="1" height="1"/><rect x="1" y="3" width="1" height="1"/><rect x="1" y="4" 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="4" y="1" width="1" height="1"/><rect x="4" y="2" width="1" height="1"/><rect x="4" y="4" width="1" height="1"/><rect x="3" y="2" width="1" height="1"/><rect x="3" y="3" width="1" height="1"/><rect x="3" y="4" width="1" height="1"/></svg>')
+
+for (let saturation = 0; saturation < 100; saturation += 5) {
+    for (let lightness = 0; lightness < COLLISION_TESTS_NUMBER; lightness += 5) {
+        assert.equal(
+            identicon("foo", saturation, lightness),
+            `<svg viewBox="-1.5 -1.5 8 8" xmlns="http://www.w3.org/2000/svg" fill="hsl(60 ${saturation}% ${lightness}%)"><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