From 44368a71e1c1a70e817a66c2aa6b33ae6b1ec2a9 Mon Sep 17 00:00:00 2001 From: bloodwiing Date: Tue, 14 May 2024 21:16:56 +0300 Subject: [PATCH] Add: Generated Avatar colors --- src/comp/avatar.svelte | 62 ++++++++++++++++- src/comp/comment.svelte | 2 +- src/comp/page/post.svelte | 2 +- src/comp/postcard.svelte | 2 +- src/comp/useritem.svelte | 2 +- src/lib/client/color.js | 68 +++++++++++++++++++ src/lib/client/hash.js | 22 ++++++ static/avatar.svg | 136 +++++++++++++------------------------- 8 files changed, 202 insertions(+), 94 deletions(-) create mode 100644 src/lib/client/color.js create mode 100644 src/lib/client/hash.js diff --git a/src/comp/avatar.svelte b/src/comp/avatar.svelte index 0f499e1..2782768 100644 --- a/src/comp/avatar.svelte +++ b/src/comp/avatar.svelte @@ -1,4 +1,7 @@ - + diff --git a/src/comp/comment.svelte b/src/comp/comment.svelte index 2f28e19..2e2d4f9 100644 --- a/src/comp/comment.svelte +++ b/src/comp/comment.svelte @@ -84,7 +84,7 @@
- +
diff --git a/src/comp/page/post.svelte b/src/comp/page/post.svelte index 1609562..1c8e1c9 100644 --- a/src/comp/page/post.svelte +++ b/src/comp/page/post.svelte @@ -72,7 +72,7 @@
- +
diff --git a/src/comp/postcard.svelte b/src/comp/postcard.svelte index c882b20..7d19158 100644 --- a/src/comp/postcard.svelte +++ b/src/comp/postcard.svelte @@ -103,7 +103,7 @@
- +
diff --git a/src/comp/useritem.svelte b/src/comp/useritem.svelte index 3267bfa..e479e3d 100644 --- a/src/comp/useritem.svelte +++ b/src/comp/useritem.svelte @@ -17,5 +17,5 @@ - + diff --git a/src/lib/client/color.js b/src/lib/client/color.js new file mode 100644 index 0000000..8e538da --- /dev/null +++ b/src/lib/client/color.js @@ -0,0 +1,68 @@ +import seedrandom from "seedrandom"; + +/** + * @typedef {{r: number, g: number, b: number}} rgb + */ + +/** + * @param {seedrandom.PRNG} random + * @returns {rgb} + */ +function createColor(random) { + const r = random.quick(); + const g = random.quick(); + const b = random.quick(); + const normal = Math.pow(r, 2) + Math.pow(g, 2) + Math.pow(b, 2); + return { + r: Math.round(r / normal * 255), + g: Math.round(g / normal * 255), + b: Math.round(b / normal * 255) + }; +} + +/** + * + * @param {rgb} a + * @param {rgb} b + * @returns {rgb} + */ +function mixColors(a, b) { + return { + r: Math.round(a.r * b.r / 255), + g: Math.round(a.g * b.g / 255), + b: Math.round(a.b * b.b / 255), + } +} + +/** + * @param {string} seed + * @returns {{ + * c1: rgb, + * c2: rgb, + * c3: rgb, + * c4: rgb, + * c13: rgb, + * c14: rgb, + * c23: rgb, + * c24: rgb + * }} + */ +export function generateQuadColors(seed) { + const r = seedrandom(seed); + + const c1 = createColor(r); + const c2 = createColor(r); + const c3 = createColor(r); + const c4 = createColor(r); + + return { + c1: c1, + c2: c2, + c3: c3, + c4: c4, + c13: mixColors(c1, c3), + c14: mixColors(c1, c4), + c23: mixColors(c2, c3), + c24: mixColors(c2, c4), + }; +} diff --git a/src/lib/client/hash.js b/src/lib/client/hash.js new file mode 100644 index 0000000..a890d7e --- /dev/null +++ b/src/lib/client/hash.js @@ -0,0 +1,22 @@ +/** + * https://stackoverflow.com/a/8076436 + * @param {string} string + * @returns {number} + */ +export function hashCode(string) { + var hash = 0; + for (var i = 0; i < string.length; i++) { + var code = string.charCodeAt(i); + hash = ((hash<<5)-hash)+code; + hash = hash & hash; // Convert to 32bit integer + } + return hash; +} + +/** + * @param {any} any + * @returns {number} + */ +export function hashOf(any) { + return hashCode(String(any)); +} diff --git a/static/avatar.svg b/static/avatar.svg index c4a7a29..894522e 100644 --- a/static/avatar.svg +++ b/static/avatar.svg @@ -7,99 +7,57 @@ viewBox="0 0 100 100" version="1.1" id="svg1" - inkscape:version="1.3.2 (091e20e, 2023-11-25, custom)" - sodipodi:docname="avatar.svg" - xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" - xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"> - - - - + id="defs1" /> - - - - - - - + + + + + + + + +