From 51e3baf2cf7081c67c2fe6b97871330abe72af41 Mon Sep 17 00:00:00 2001 From: Keir Finlow-Bates Date: Sun, 13 Aug 2023 18:31:41 +0300 Subject: [PATCH] Added saturation and snowglob generators --- makeAllGlobs.js | 51 ++++++++++++++++++++++++++ package.json | 1 + saturationBoost.js | 52 +++++++++++++++++++++++++++ web/src/pages/HomePage/HomePage.tsx | 55 ++++++++++++++++++++++------- 4 files changed, 146 insertions(+), 13 deletions(-) create mode 100644 makeAllGlobs.js create mode 100644 saturationBoost.js diff --git a/makeAllGlobs.js b/makeAllGlobs.js new file mode 100644 index 0000000..d39d2dd --- /dev/null +++ b/makeAllGlobs.js @@ -0,0 +1,51 @@ +const Jimp = require("jimp") + +let base, bottom, middle, top + +async function generateGlob(hue) { + + const constructed = await base + .clone() + .composite( + bottom.clone().color([ + {apply: 'hue', params: [hue]} + ]), + 0, + 0, + { mode: Jimp.BLEND_SOURCE_OVER } + ) + .composite( + middle.clone().color([ + {apply: 'hue', params: [hue]} + ]), + 0, + 0, + { mode: Jimp.BLEND_SOURCE_OVER } + ) + .composite( + top.clone().color([ + {apply: 'hue', params: [hue]} + ]), + 0, + 0, + { mode: Jimp.BLEND_SOURCE_OVER } + ) + return constructed +} + +async function main() { + base = await Jimp.read('./web/public/img/base.png') + bottom = await Jimp.read('./web/public/img/bottom.png') + middle = await Jimp.read('./web/public/img/middle.png') + top = await Jimp.read('./web/public/img/top.png') + for (let i=0; i<1800; i++) { + if ( i%100 === 0) { + process.stdout.write('x') + } else { process.stdout.write('.') } + const hue = i/5 + const result = await generateGlob(hue) + await result.write('./allGlobs/' + i + '.png') + } +} + +main() diff --git a/package.json b/package.json index b40911c..92437bb 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "packageManager": "yarn@3.6.1", "dependencies": { "browserify-zlib": "^0.2.0", + "color-convert": "^2.0.1", "https-browserify": "^1.0.0", "jimp": "^0.16.2", "js-file-download": "^0.4.12", diff --git a/saturationBoost.js b/saturationBoost.js new file mode 100644 index 0000000..fe8a416 --- /dev/null +++ b/saturationBoost.js @@ -0,0 +1,52 @@ +const Jimp = require("jimp") + +let base, bottom, middle, top + +async function generateGlob(hue, satBoost) { + + const constructed = await base + .clone() + .composite( + bottom.clone().color([ + {apply: 'hue', params: [hue]}, {apply: 'saturate', params: [satBoost]} + ]), + 0, + 0, + { mode: Jimp.BLEND_SOURCE_OVER } + ) + .composite( + middle.clone().color([ + {apply: 'hue', params: [hue]}, {apply: 'saturate', params: [satBoost]} + ]), + 0, + 0, + { mode: Jimp.BLEND_SOURCE_OVER } + ) + .composite( + top.clone().color([ + {apply: 'hue', params: [hue]}, {apply: 'saturate', params: [satBoost]} + ]), + 0, + 0, + { mode: Jimp.BLEND_SOURCE_OVER } + ) + return constructed +} + +async function main() { + base = await Jimp.read('./web/public/img/base.png') + bottom = await Jimp.read('./web/public/img/bottom.png') + middle = await Jimp.read('./web/public/img/middle.png') + top = await Jimp.read('./web/public/img/top.png') + for (let i=0; i<1800; i++) { + if ( i%100 === 0) { + process.stdout.write('x') + } else { process.stdout.write('.') } + const hue = i/5 + const satBoost = i % 100 + const result = await generateGlob(hue,satBoost) + await result.write('./allGlobs/' + i + '.png') + } +} + +main() diff --git a/web/src/pages/HomePage/HomePage.tsx b/web/src/pages/HomePage/HomePage.tsx index 0ff1d06..f75dbba 100644 --- a/web/src/pages/HomePage/HomePage.tsx +++ b/web/src/pages/HomePage/HomePage.tsx @@ -19,10 +19,12 @@ import { import Jimp from 'jimp' import fileDownload from 'js-file-download' +import convert from 'color-convert' const HomePage = () => { const [h, setH] = useState(100.0) + const [s, setS] = useState(0) const [iconB64, setIconB64] = useState("data:image/png;base64,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AAIAYAABADCAAAAYQAAADCAAAAYQAAADCACAAQQAwAACAGAAAQAwgAAAGEAAAAwgAIABBADAAAIAYAABADCAAAAYQAAADCAAAAYQAAADCACAAQQAwAACAGAAAQAwgAAAGEAAAAMIAIABBADAAAIAYAABADCAAAAYQAAADCAAAAYQAAADCACAAQQAwAACAGAAAQAwgAAAGEAAAAMIAIABBADAAAIAYAABADCAAAAYQAAADCAAAAYQAAADCACAAQQAwAACAGAAAQAwgAAABhAAAAMIAIABBADAAAIAYAABADCAAAAYQAAADCAAAAYQAAADCACAAQQAwAACAGAAAQAwgAAABhAAAAMIAIABBADAAAIAYAABADCAAAAYQAAADCAAAAYQAAADCACAAQQAwAACAGAAAQAwgAAABhAAAAMIAIABBADAAAIAYAABADCAAAAYQAAADCAAAAYQAAADCACAAQQAwAACAGAAAQAMIAAABhAAAAMIAIABBADAAAIAYAABADCAAAAYQAAADCAAAAYQAAADCACAAQQAwAACAGAAAQAMIAAABhAAAAMIAIABBADAAAIAYAABADCAAAAYQAAADCAAAAYQAAADCACAAQQAwAACABhAAAAMIAAABhAAAAMIAIABBADAAAIAYAABADCAAAAYQAAADCAAAAYQAAADCACAAQQAwAACABhAAAAMIAAABhAAAAMIAIABBADAAAIAYAABADCAAAAYQAAADCAAAAYQAAADCACAAQQAMIASAAAYQAAADCAAAAYQAAADCACAAQQAwAACAGAAAQAwgAAAGEAAAAwgAAAGEAAAAwgAgAEEADCAAAAYQAAADCAAAAYQAAADCACAAQQAwAACAGAAAQAwgAAAGEAAAAwgAAAGEAAAAwgAgAEEADCAAAAYQAAADCAAAAYQAAADCACAAQQAwAACAGAAAQAwgAAAGEAAAAwgAAAGEAAAAwgAYAABADCAAAAYQAAADCAAAAYQAAADCACAAQQAwAACAGAAAQAwgAAAGEAAAAwgAAAGEAAAAwgAYAABADCAAAAYQAAADCAAAAYQAAADCACAAQQAwAACAGAAAQAwgAAAGEAAAAwgAAAGEADAAAIAYAABADCAAAAYQAAADCAAAAYQAAADCACAAQQAwAACAGAAAQAwgAAAGEAAAAwgAAAGEADAAAIAYAABADCAAAAYQAAADCAAAAYQAAADCACAAQQAwAACAGAAAQAwgAAAGEAAAAwgAAAGEADAAAIAYAABADCAAAAYQAAADCAAAAYQAAADCACAAQQAwAACAGAAAQAwgAAAGEAAAAwgAIABBADAAAIAYAABADCAAAAYQAAADCAAAAYQAAADCACAAQQAwAACAGAAAQAwgAAAGEAAAAwgAIABBADAAAIAYAABADCAAAAYQAAADCAAAAYQAAADCACAAQQAwAACAGAAAQAwgAAAGEAAAAMIAIABBADAAAIAYAABADCAAAAYQAAADCAAAAYQAAADCACAAQQAwAACAGAAAQAwgAAAGEAAAAMIAIABBADAAAIAYAABADCAAAAYQAAADCAAAAYQAAADCACAAQQAwAACAGAAAQAwgAAABhAAAAMIAIABBADAAAIAYAABADCAAAAYQAAADCAAAAYQAAADCACAAQQAwAACAGAAAQAwgAAABhAAAAMIAIABBADAAAIAYAABADCAAAAYQAAADCAAAAYQAAADCACAAQQAwAACAGAAAQAwgAAABhAAAAMIAIABBADAAAIAYAABADCAAAAYQAAADCAAAAYQAAADCACAAQQAwAACAGAAAQAMIAAABhAAAAMIAIABBADAAAIAYAABADCAAAAYQAAADCAAAAYQAAADCACAAQQAwAACAGAAAQAMIAAABhAAAAMIAIABBADAAAIAYAABADCAAAAYQAAADCAAAAYQAAADCACAAQQAwAACABhAAAAMIAAABhAAAAMIAIABBADAAAIAYAABADCAAAAYQAAADCAAAAYQAAADCACAAQQAwAACABhAAAAMIAAABhAAAAMIAIABBADAAAIAYAABADCAAAAYQAAADCAAAAYQAAADCACAAQQAMIASAAAYQAAADCAAAAYQAAADCACAAQQAwAACAGAAAQAwgAAAGEAAAAwgAAAGEAAAAwgAgAEEADCAAAAYQAAADCAAAAYQAAADCACAAQQAwAACAGAAAQAwgAAAGEAAAAwgAAAGEAAAAwgAgAEEADCAAAAYQAAADCAAAAYQAAADCACAAQQAwAACAGAAAQAwgAAAGEAAAAwgAAAGEAAAAwgAYAABADCAAAAYQAAADCAAAAYQAAADCACAAQQAwAACAGAAAQAwgAAAGEAAAAwgAAAGEAAAAwgAYAABADCAAAAYQAAADCAAAAYQAAADCACAAQQAwAACAGAAAQAwgAAAGEAAAAwgAAAGEADAAAIAYAABADCAAAAYQAAADCAAAAYQAAADCACAAQQAwAACAGAAAQAwgAAAGEAAAAwgAAAGEADAAAIAYAABADCAAAAYQAAADCAAAAYQAAADCACAAQQAwAACAGAAAQAwgAAAGEAAAAwgAAAGEADAAAIAYAABADCAAAAYQAAADCAAAAYQAAADCACAAQQAwAACAGAAAQAwgAAAGEAAAAwgAIABBADAAAIAYAABADCAAAAYQAAADCAAAAYQAAADCACAAQQAwAACAGAAAQAwgAAAGEAAAAwgAMA9C1TgCKSLscS8AAAAAElFTkSuQmCC") let base, bottom, middle, top @@ -33,7 +35,7 @@ const HomePage = () => { bottom = await Jimp.read('/img/bottom.png') middle = await Jimp.read('/img/middle.png') top = await Jimp.read('/img/top.png') - updateIcon(h).then( (val) => { + updateIcon(h, s).then( (val) => { setIconB64(val) }) } @@ -41,13 +43,13 @@ const HomePage = () => { }, []) useEffect(() => { - updateIcon(h).then( (string) => { + updateIcon(h, s).then( (string) => { console.log("Changing iconB64") setIconB64(string) }) - }, [h]) + }, [h, s]) - const updateIcon = async (hue) => { + const updateIcon = async (hue, sat) => { const base = await Jimp.read('/img/base.png') const bottom = await Jimp.read('/img/bottom.png') const middle = await Jimp.read('/img/middle.png') @@ -55,25 +57,31 @@ const HomePage = () => { const constructed = await base .clone() .composite( - bottom.color([ - {apply: 'hue', params: [hue]} - ]), + bottom + .color([ + {apply: 'hue', params: [hue]}, + {apply: 'saturate', params: [sat]} + ]), 0, 0, { mode: Jimp.BLEND_SOURCE_OVER } ) .composite( - middle.color([ - {apply: 'hue', params: [hue]} - ]), + middle + .color([ + {apply: 'hue', params: [hue]}, + {apply: 'saturate', params: [sat]} + ]), 0, 0, { mode: Jimp.BLEND_SOURCE_OVER } ) .composite( - top.color([ - {apply: 'hue', params: [hue]} - ]), + top + .color([ + {apply: 'hue', params: [hue]}, + {apply: 'saturate', params: [sat]} + ]), 0, 0, { mode: Jimp.BLEND_SOURCE_OVER } @@ -92,6 +100,15 @@ const HomePage = () => { }) } + function gradient(hue) { + const offset = 210 + const start = convert.hsv.hex((hue + offset) % 360, 27.3, 64.7) + const end = convert.hsv.hex((hue + offset) % 360, 100, 100) + const string = 'linear(to-r, #' + start + ', #' + end + ')' + console.log(string) + return string + } + return ( <> @@ -132,6 +149,18 @@ const HomePage = () => { +
+ setS(val)} + > + + + + +