From 2421529ba866cd4c94eedb5bf507a5912338a056 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Mon, 10 May 2021 15:28:52 +0100 Subject: [PATCH] Update gradient algorithm to use a seed value for predictable gradients and use app names for seeds --- packages/builder/src/actions.js | 62 +++++++++++++------ .../src/components/start/AppCard.svelte | 2 +- .../src/components/start/AppRow.svelte | 2 +- 3 files changed, 46 insertions(+), 20 deletions(-) diff --git a/packages/builder/src/actions.js b/packages/builder/src/actions.js index cb5f61bd9c..c39f004af0 100644 --- a/packages/builder/src/actions.js +++ b/packages/builder/src/actions.js @@ -1,9 +1,10 @@ export const gradient = (node, config = {}) => { const defaultConfig = { - points: 10, - saturation: 0.8, + points: 12, + saturation: 0.85, lightness: 0.7, softness: 0.9, + seed: null, } // Applies a gradient background @@ -13,42 +14,67 @@ export const gradient = (node, config = {}) => { ...config, } const { saturation, lightness, softness, points } = config + const seed = config.seed || Math.random().toString(32).substring(2) - // Generates a random number between min and max - const rand = (min, max) => { - return Math.round(min + Math.random() * (max - min)) + // Hash function which returns a fixed hash between specified limits + // for a given seed and a given version + const rangeHash = (seed, min = 0, max = 100, version = 0) => { + const range = max - min + let hash = range + version + for (let i = 0; i < seed.length * 2 + version; i++) { + hash = (hash << 5) - hash + seed.charCodeAt(i % seed.length) + hash = ((hash & hash) % range) + version + } + return min + (hash % range) } // Generates a random HSL colour using the options specified - const randomHSL = () => { + const randomHSL = (seed, version, alpha = 1) => { const lowerSaturation = Math.min(100, saturation * 100) const upperSaturation = Math.min(100, (saturation + 0.2) * 100) const lowerLightness = Math.min(100, lightness * 100) const upperLightness = Math.min(100, (lightness + 0.2) * 100) - const hue = rand(0, 360) - const sat = `${rand(lowerSaturation, upperSaturation)}%` - const light = `${rand(lowerLightness, upperLightness)}%` - return `hsl(${hue},${sat},${light})` + const hue = rangeHash(seed, 0, 360, version) + const sat = `${rangeHash( + seed, + lowerSaturation, + upperSaturation, + version + )}%` + const light = `${rangeHash( + seed, + lowerLightness, + upperLightness, + version + )}%` + return `hsla(${hue},${sat},${light},${alpha})` } // Generates a radial gradient stop point - const randomGradientPoint = () => { + const randomGradientPoint = (seed, version) => { const lowerTransparency = Math.min(100, softness * 100) const upperTransparency = Math.min(100, (softness + 0.2) * 100) - const transparency = rand(lowerTransparency, upperTransparency) + const transparency = rangeHash( + seed, + lowerTransparency, + upperTransparency, + version + ) return ( - `radial-gradient(` + - `at ${rand(10, 90)}% ${rand(10, 90)}%,` + - `${randomHSL()} 0,` + + `radial-gradient(at ` + + `${rangeHash(seed, 0, 100, version)}% ` + + `${rangeHash(seed, 0, 100, version + 1)}%,` + + `${randomHSL(seed, version, saturation)} 0,` + `transparent ${transparency}%)` ) } - let css = `opacity:0.9;background-color:${randomHSL()};background-image:` + let css = `opacity:0.9;background:${randomHSL(seed, 0, 0.7)};` + css += "background-image:" for (let i = 0; i < points - 1; i++) { - css += `${randomGradientPoint()},` + css += `${randomGradientPoint(seed, i)},` } - css += `${randomGradientPoint()};` + css += `${randomGradientPoint(seed, points)};` node.style = css } diff --git a/packages/builder/src/components/start/AppCard.svelte b/packages/builder/src/components/start/AppCard.svelte index b19416e0f3..60f29cebae 100644 --- a/packages/builder/src/components/start/AppCard.svelte +++ b/packages/builder/src/components/start/AppCard.svelte @@ -18,7 +18,7 @@
-
+
diff --git a/packages/builder/src/components/start/AppRow.svelte b/packages/builder/src/components/start/AppRow.svelte index 78fc3d25df..ce534336ca 100644 --- a/packages/builder/src/components/start/AppRow.svelte +++ b/packages/builder/src/components/start/AppRow.svelte @@ -18,7 +18,7 @@
-
+
{app.name}