From 1ce6652e32b5bb33d572b23c314d30355bfd7b4b Mon Sep 17 00:00:00 2001 From: Antoine Kingue Date: Sun, 29 Sep 2024 17:48:40 +0200 Subject: [PATCH 1/2] Fix gradient generation to reduce hue collisions for longer usernames --- utils/gradient.ts | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/utils/gradient.ts b/utils/gradient.ts index 8ff5362..9fadde4 100644 --- a/utils/gradient.ts +++ b/utils/gradient.ts @@ -9,11 +9,19 @@ export function djb2(str: string) { } export function generateGradient(username: string) { - const c1 = color({ h: djb2(username) % 360, s: 0.95, l: 0.5 }); - const second = c1.triad()[1].toHexString(); + const hue = djb2(username) % 360; + + let hash2 = 7; + for (let i = 0; i < username.length; i++) { + hash2 = hash2 * 31 + username.charCodeAt(i); + } + const hue2 = Math.abs(hash2) % 360; + + const c1 = color({ h: hue, s: 0.95, l: 0.5 }); + const c2 = color({ h: hue2, s: 0.95, l: 0.5 }); return { fromColor: c1.toHexString(), - toColor: second, + toColor: c2.toHexString(), }; } From 1dc0c5f34f88b58ea74ca33ad109b989f17374c3 Mon Sep 17 00:00:00 2001 From: Antoine Kingue Date: Mon, 30 Sep 2024 22:38:50 +0200 Subject: [PATCH 2/2] Update gradient generation to preserve triad color relationship --- utils/gradient.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/utils/gradient.ts b/utils/gradient.ts index 9fadde4..0224ebf 100644 --- a/utils/gradient.ts +++ b/utils/gradient.ts @@ -18,7 +18,8 @@ export function generateGradient(username: string) { const hue2 = Math.abs(hash2) % 360; const c1 = color({ h: hue, s: 0.95, l: 0.5 }); - const c2 = color({ h: hue2, s: 0.95, l: 0.5 }); + const triadColors = c1.triad(); + const c2 = triadColors[1].spin(hue2); return { fromColor: c1.toHexString(),