From a44a4bd2553f4d79a1ef441e54890d900d210d2d Mon Sep 17 00:00:00 2001 From: Corinna Cohn Date: Tue, 25 May 2021 21:14:08 -0400 Subject: [PATCH] feature: color parameter sliders for Maneesh\'s algorithm --- lib/pages/debug-page.tsx | 5 +- lib/palette-algorithm-widget.tsx | 37 +- lib/random-colors.ts | 119 +- lib/randomizer-widget.tsx | 13 +- package-lock.json | 12768 +---------------------------- 5 files changed, 119 insertions(+), 12823 deletions(-) diff --git a/lib/pages/debug-page.tsx b/lib/pages/debug-page.tsx index 5800edd..d182f08 100644 --- a/lib/pages/debug-page.tsx +++ b/lib/pages/debug-page.tsx @@ -60,17 +60,18 @@ const EYE_CREATURE = ( ); const RandomColorSampling: React.FC<{}> = () => { + const [paletteConfig, setPaletteConfig] = useState({}) const [paletteAlg, setPaletteAlg] = useState( DEFAULT_RANDOM_PALETTE_ALGORITHM ); const [seed, setSeed] = useState(Date.now()); const NUM_COLORS = 100; const rng = new Random(seed); - const palette = createRandomColorPalette(NUM_COLORS, rng, paletteAlg); + const palette = createRandomColorPalette(NUM_COLORS, rng, paletteAlg, paletteConfig); return ( <> - +
{range(NUM_COLORS).map((i) => ( diff --git a/lib/palette-algorithm-widget.tsx b/lib/palette-algorithm-widget.tsx index 523f8ae..53689fe 100644 --- a/lib/palette-algorithm-widget.tsx +++ b/lib/palette-algorithm-widget.tsx @@ -1,22 +1,55 @@ -import React from "react"; +import React, {useEffect, useState} from "react"; import { RandomPaletteAlgorithm, - RANDOM_PALETTE_ALGORITHMS, + RANDOM_PALETTE_ALGORITHMS, PaletteAlgorithmConfig, } from "./random-colors"; export type PaletteAlgorithmWidgetProps = { value: RandomPaletteAlgorithm; onChange: (value: RandomPaletteAlgorithm) => void; + onPaletteConfigChange: (value: PaletteAlgorithmConfig) => void; }; export const PaletteAlgorithmWidget: React.FC = ({ value, onChange, + onPaletteConfigChange = () => {} }) => { const id = "algorithm"; + const [paletteConfig, setPaletteConfig] = useState({ + hue: 120, + hueInterval: 15, + saturation: 50, + valueMin: 20, + valueMax: 80, + }); + useEffect(() => { + onPaletteConfigChange(paletteConfig); + }, [paletteConfig]) return (
+ {value === "threevals" && ( +
+ + setPaletteConfig({...paletteConfig, hue: Number(e.target.value) }) } /> + + setPaletteConfig({...paletteConfig, hueInterval: Number(e.target.value) }) } + /> + + setPaletteConfig({...paletteConfig, valueMin: Number(e.target.value) }) } + /> + + setPaletteConfig({...paletteConfig, valueMax: Number(e.target.value) }) } + /> + + setPaletteConfig({...paletteConfig, saturation: Number(e.target.value) }) } + />
)}