/*From feathericons.com by Cole Bemis*/ "use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const ArrowRight = () => { /*From feathericons.com by Cole Bemis*/ return _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", children: [_jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" }), _jsx("polyline", { points: "12 5 19 12 12 19" })] }); }; const RandomColors = ({count = 1000}) => { const [els, setEls] = React.useState([]); const randomHexColor = () => { return "#" + ("000000" + Math.floor(Math.random() * 16777215).toString(16)).slice(-6); }; const regenEls = () => { const newEls = []; for (let i = 0; i < count; i++) { newEls.push(_jsx("div", { style: { height: 16, width: 16, backgroundColor: randomHexColor() } })); } setEls(newEls); }; React.useEffect(() => regenEls(), []); return _jsx("div", { onClick: regenEls, style: { display: "flex", flexWrap: "wrap", cursor: "pointer" }, children: els }); }; const RandomDistribution = ({width = "40%", steps = 100}) => { const [els, setEls] = React.useState([]); const randomBool = () => Math.random() > 1 / 4; const regenEls = () => { console.log("regenerating els"); const newEls = []; for (let i = 0; i < steps; i++) { newEls.push(_jsx("div", { style: { height: "2vw", width: "2vw", backgroundColor: randomBool() ? "white" : "black" } })); } setEls(newEls); }; React.useEffect(() => regenEls(), []); return _jsx("div", { onClick: regenEls, style: { cursor: "pointer", display: "flex", flexWrap: "wrap", width }, children: els }); }; const UniformDistribution = ({width = "40%", steps = 100}) => { const els = []; for (let i = 0; i < steps; i++) { const isBlack = i % 3 === 0 && i % 2 !== 0; els.push(_jsx("div", { style: { height: "2vw", width: "10%", backgroundColor: isBlack ? "black" : "white" } })); } return _jsx("div", { style: { display: "flex", flexWrap: "wrap", width }, children: els }); }; const RandomColorsLowEntropy = ({count = 1000}) => { const [els, setEls] = React.useState([]); const randomHexColor = () => { return "#" + ("000000" + Math.floor(Math.random() * 1600).toString(16)).slice(-6); }; const regenEls = () => { const newEls = []; for (let i = 0; i < count; i++) { newEls.push(_jsx("div", { style: { height: 16, width: 16, backgroundColor: randomHexColor() } })); } setEls(newEls); }; React.useEffect(() => regenEls(), []); return _jsx("div", { onClick: regenEls, style: { cursor: "pointer", display: "flex", flexWrap: "wrap" }, children: els }); }; const RandomColorsLowEntropyAdjust = ({count = 1000}) => { const [numColors, setNumColors] = React.useState(1600); const els = []; const randomHexColor = () => { return "#" + ("000000" + Math.floor(Math.random() * numColors).toString(16)).slice(-6); }; for (let i = 0; i < count; i++) { els.push(_jsx("div", { style: { height: 16, width: 16, backgroundColor: randomHexColor() } })); } return _jsxs("div", { children: [_jsxs("pre", { children: [`function randomHexColor (){\n return '#' + ('000000' + Math.floor(Math.random()*`, _jsx("strong", { children: numColors }), `).toString(16)).slice(-6)\n}`] }), _jsx("div", { style: { display: "flex", flexWrap: "wrap" }, children: els }), _jsxs("label", { style: { fontWeight: "bold" }, children: [_jsx("input", { type: "range", max: "16777215", min: "0", step: "5", value: numColors, onChange: e => setNumColors(e.target.value), style: { marginRight: 8 } }), "Color range ", numColors] })] }); }; const ColorSteppingTrulyRandom = () => { const randomHexColor = () => { return "#" + ("000000" + Math.floor(Math.random() * 16777215).toString(16)).slice(-6); }; const [colors, setColors] = React.useState([randomHexColor(), randomHexColor(), randomHexColor(), randomHexColor()]); React.useEffect(() => { const interval = setInterval(() => { const index = sample([0, 1, 2, 3]); const newColors = [...colors]; colors[index] = randomHexColor(); setColors(newColors); }, 2000); return () => clearInterval(interval); }, []); const avgDistance = colors.map((color, i) => { if (!colors[i + 1]) { return null; } return chroma.distance(color, colors[i + 1]); }).filter(Boolean).reduce((acc, curr) => acc + curr) / 4; return _jsxs("div", { children: [_jsxs("h3", { children: ["Average color distance: ", Math.round(avgDistance)] }), _jsxs("div", { style: { display: "flex", alignItems: "center" }, children: [_jsx("div", { style: { flex: 1, height: "10vh", transition: "background-color 1s ease-in-out", backgroundColor: colors[0] } }), _jsx(ArrowRight, {}), _jsx("div", { style: { flex: 1, height: "10vh", transition: "background-color 1s ease-in-out", backgroundColor: colors[1] } }), _jsx(ArrowRight, {}), _jsx("div", { style: { flex: 1, height: "10vh", transition: "background-color 1s ease-in-out", backgroundColor: colors[2] } }), _jsx(ArrowRight, {}), _jsx("div", { style: { flex: 1, height: "10vh", backgroundColor: colors[3] } })] })] }); }; const RandomColorRegenerator = () => { const randomHexColor = () => { return "#" + ("000000" + Math.floor(Math.random() * 16777215).toString(16)).slice(-6); }; const [color, setColor] = React.useState(randomHexColor()); return _jsx("div", { onClick: () => setColor(randomHexColor()), style: { height: 240, cursor: "pointer", width: 240, backgroundColor: color } }); }; const RandomMixingColors = ({count = 420}) => { const randomHexColor = () => { return "#" + ("000000" + Math.floor(Math.random() * 16777215).toString(16)).slice(-6); }; let color = randomHexColor(); const els = []; for (let i = 0; i < count; i++) { els.push(_jsx("div", { style: { height: 16, width: 16, backgroundColor: color } })); color = chroma.mix(color, randomHexColor(), Math.random()); } return _jsx("div", { style: { display: "flex", flexWrap: "wrap" }, children: els }); }; const RandomMixingColorsRatio = ({count = 420}) => { const [ratio, setRatio] = React.useState(0.5); const randomHexColor = () => { return "#" + ("000000" + Math.floor(Math.random() * 16777215).toString(16)).slice(-6); }; let color = randomHexColor(); const els = []; for (let i = 0; i < count; i++) { els.push(_jsx("div", { style: { height: 16, width: 16, backgroundColor: color } })); color = chroma.mix(color, randomHexColor(), ratio); } return _jsxs("div", { children: [_jsx("div", { style: { display: "flex", flexWrap: "wrap" }, children: els }), _jsx("div", { children: _jsxs("label", { style: { fontWeight: "bold" }, children: [_jsx("input", { type: "range", max: "1", min: "0", step: ".01", value: ratio, onChange: e => setRatio(e.target.value), style: { marginRight: 8 } }), "Mix ratio ", ratio] }) })] }); }; const RandomBlendColors = ({count = 420}) => { const randomHexColor = () => { return "#" + ("000000" + Math.floor(Math.random() * 16777215).toString(16)).slice(-6); }; let color = randomHexColor(); const els = []; for (let i = 0; i < count; i++) { els.push(_jsx("div", { style: { height: 16, width: 16, backgroundColor: color } })); const blendAlgorithms = ["overlay", "multiply", "darken", "lighten"]; color = chroma.blend(color, randomHexColor(), sample(blendAlgorithms)); } return _jsx("div", { style: { display: "flex", flexWrap: "wrap" }, children: els }); }; const RandomBlendColorsSelect = ({count = 240}) => { const [algorithm, setAlgorithm] = React.useState("multiply"); const randomHexColor = () => { return "#" + ("000000" + Math.floor(Math.random() * 16777215).toString(16)).slice(-6); }; let color = randomHexColor(); const els = []; const blendAlgorithms = ["overlay", "multiply", "darken", "lighten", "screen", "burn", "dodge"]; for (let i = 0; i < count; i++) { els.push(_jsx("div", { style: { height: 16, width: 16, backgroundColor: color } })); const newColor = randomHexColor(); color = chroma.blend(color, newColor, algorithm); } return _jsxs("div", { children: [_jsx("div", { style: { display: "flex", flexWrap: "wrap" }, children: els }), _jsxs("label", { style: { fontWeight: "bold" }, children: [_jsx("select", { style: { marginRight: 8 }, value: algorithm, onChange: e => setAlgorithm(e.target.value), children: blendAlgorithms.map(algo => _jsx("option", { children: algo }, algo)) }), "Blend algorithm ", algorithm] })] }); }; const RandomHSLRotateColors = ({count = 420}) => { const randomHexColor = () => { return "#" + ("000000" + Math.floor(Math.random() * 16777215).toString(16)).slice(-6); }; let color = randomHexColor(); const els = []; for (let i = 0; i < count; i++) { els.push(_jsx("div", { style: { height: 16, width: 16, backgroundColor: color } })); const adjustments = ["*1.5", "*1.25", "*1.1", "*.75", "*.1", "/1.5", "/1.25", "/1.1", "/.75", "/.1"]; const fns = [() => chroma(color).set("hsl.h", sample(adjustments)), () => chroma(color).saturate(), () => chroma(color).desaturate(), () => chroma(color).darken(), () => chroma(color).brighten()]; const fn = sample(fns); color = fn(); } return _jsx("div", { style: { display: "flex", flexWrap: "wrap" }, children: els }); }; const RandomHSLRotateColorsAdjust = ({count = 460}) => { const [hue, setHue] = React.useState(5); const [saturate, setSaturate] = React.useState(5); const [desaturate, setDesaturate] = React.useState(5); const [darken, setDarken] = React.useState(5); const [brighten, setBrighten] = React.useState(5); const randomHexColor = () => { return "#" + ("000000" + Math.floor(Math.random() * 16777215).toString(16)).slice(-6); }; let color = randomHexColor(); const els = []; for (let i = 0; i < count; i++) { els.push(_jsx("div", { style: { height: 16, width: 16, backgroundColor: color } })); const adjustments = ["*1.5", "*1.25", "*1.1", "*.75", "*.1", "/1.5", "/1.25", "/1.1", "/.75", "/.1"]; const fns = []; for (let i = 0; i < hue; i++) { fns.push(() => chroma(color).set("hsl.h", sample(adjustments))); } for (let i = 0; i < saturate; i++) { fns.push(() => chroma(color).saturate()); } for (let i = 0; i < hue; i++) { fns.push(() => chroma(color).desaturate()); } for (let i = 0; i < hue; i++) { fns.push(() => chroma(color).darken()); } for (let i = 0; i < hue; i++) { fns.push(() => chroma(color).brighten()); } const fn = sample(fns); color = fn(); } return _jsxs("div", { style: { display: "flex", alignItems: "center" }, children: [_jsx("div", { style: { display: "flex", flexWrap: "wrap", width: "50%", marginRight: 8 }, children: els }), _jsxs("div", { children: [_jsx("div", { children: _jsxs("label", { style: { fontWeight: "bold" }, children: [_jsx("input", { type: "range", min: "0", max: "10", step: "1", value: hue, onChange: e => setHue(e.target.value) }), "Hue ", hue] }) }), _jsx("div", { children: _jsxs("label", { style: { fontWeight: "bold" }, children: [_jsx("input", { type: "range", min: "0", max: "10", step: "1", value: saturate, onChange: e => setSaturate(e.target.value) }), "Saturate ", saturate] }) }), _jsx("div", { children: _jsxs("label", { style: { fontWeight: "bold" }, children: [_jsx("input", { type: "range", min: "0", max: "10", step: "1", value: desaturate, onChange: e => setDesaturate(e.target.value) }), "Desaturate ", desaturate] }) }), _jsx("div", { children: _jsxs("label", { style: { fontWeight: "bold" }, children: [_jsx("input", { type: "range", min: "0", max: "10", step: "1", value: darken, onChange: e => setDarken(e.target.value) }), "Darken ", darken] }) }), _jsx("div", { children: _jsxs("label", { style: { fontWeight: "bold" }, children: [_jsx("input", { type: "range", min: "0", max: "10", step: "1", value: brighten, onChange: e => setBrighten(e.target.value) }), "Brighten ", brighten] }) })] })] }); }; const regenColorWithMemory = color => { const randomHexColor = () => { return "#" + ("000000" + Math.floor(Math.random() * 16777215).toString(16)).slice(-6); }; color = color || randomHexColor(); const mix = () => chroma.mix(color, randomHexColor(), Math.random()); const blendAlgorithms = ["overlay", "multiply", "darken", "lighten", "screen", "burn", "dodge"]; const blend = () => chroma.blend(color, randomHexColor(), sample(blendAlgorithms)); const adjustments = ["*1.5", "*1.25", "*1.1", "*.75", "*.1", "/1.5", "/1.25", "/1.1", "/.75", "/.1"]; const hueAdjust = () => chroma(color).set("hsl.h", sample(adjustments)); const saturate = () => chroma(color).saturate(); const desaturate = () => chroma(color).desaturate(); const darken = () => chroma(color).darken(); const brighten = () => chroma(color).brighten(); const fns = [mix, blend, blend, blend, blend, hueAdjust, hueAdjust, saturate, saturate, desaturate, darken, brighten]; const fn = sample(fns); return fn(); }; const RandomEvolvingColors = ({count = 50}) => { const [colors, setColors] = React.useState([]); React.useEffect(() => regenColors(), []); let color = regenColorWithMemory(); const regenColors = () => { const newColors = []; for (let i = 0; i < count; i++) { color = regenColorWithMemory(color); newColors.push(color); setColors(newColors); } }; const els = colors.map((color, i) => _jsx("div", { style: { height: 16, width: "2%", backgroundColor: color } }, i)); return _jsx("div", { onClick: regenColors, style: { cursor: "pointer", display: "flex", flexWrap: "wrap" }, children: els }); }; const RandomEvolvingColorsComparison = ({count = 50, width = "2%", height = 16}) => { const [colors, setColors] = React.useState([]); const [randColors, setRandColors] = React.useState([]); React.useEffect(() => regenColors(), []); let color = regenColorWithMemory(); const regenColors = () => { const newColors = []; const newRandColors = []; for (let i = 0; i < count; i++) { color = regenColorWithMemory(color); newColors.push(color); newRandColors.push(regenColorWithMemory()); setColors(newColors); setRandColors(newRandColors); } }; const avgDistance = colors => { const sumOfDistance = colors.map((color, i) => { if (!colors[i + 1]) { return null; } return chroma.distance(color, colors[i + 1]); }).filter(Boolean).reduce((acc, curr) => acc + curr, 0); return Math.round(sumOfDistance / colors.length); }; const els = colors.map((color, i) => _jsx("div", { style: { height, width, backgroundColor: color } }, i)); const randEls = randColors.map((color, i) => _jsx("div", { style: { height, width, backgroundColor: color } }, i)); return _jsxs("div", { onClick: regenColors, style: { display: "flex", flexWrap: "wrap", justifyContent: "space-between", marginTop: -20 }, children: [_jsxs("div", { style: { width: "45%" }, children: [_jsx("h3", { children: "Memory-based" }), _jsx("div", { style: { cursor: "pointer", display: "flex", flexWrap: "wrap" }, children: els }), _jsxs("h5", { style: { marginTop: 10 }, children: ["Average color distance: ", avgDistance(colors)] })] }), _jsxs("div", { style: { width: "45%" }, children: [_jsx("h3", { children: "Pure random" }), _jsx("div", { style: { cursor: "pointer", display: "flex", flexWrap: "wrap" }, children: randEls }), _jsxs("h5", { style: { marginTop: 10 }, children: ["Average color distance: ", avgDistance(randColors)] })] })] }); }; const RandomEvolvingColorsSlider = () => { const [color, setColor] = React.useState(regenColorWithMemory()); const [entropy, setEntropy] = React.useState(50); const randomBool = (percentile = 1 / 2) => Math.random() >= percentile; const regenColor = () => { const newColor = randomBool(entropy / 100) ? regenColorWithMemory(color) : regenColorWithMemory(); setColor(newColor); }; return _jsxs("div", { children: [_jsx("div", { onClick: regenColor, style: { height: 240, width: 240, cursor: "pointer", display: "flex", flexWrap: "wrap", backgroundColor: color } }), _jsxs("label", { style: { fontWeight: "bold", userSelect: "none", marginTop: 16 }, children: ["Entropy ", entropy, "% ", _jsx("br", {}), _jsx("input", { type: "range", max: "100", min: "0", step: "10", value: entropy, onChange: e => setEntropy(e.target.value), style: { marginRight: 16 } })] })] }); }; function _createMdxContent(props) { const _components = { a: "a", blockquote: "blockquote", code: "code", em: "em", h2: "h2", h3: "h3", h4: "h4", hr: "hr", li: "li", p: "p", pre: "pre", strong: "strong", ul: "ul", ...props.components }; return _jsxs(_Fragment, { children: [_jsx(_components.p, { children: "As part of my work I find myself thinking about computational design,\nrandomness, and color. A lot." }), "\n", _jsxs(_components.p, { children: ["With ", _jsx(_components.a, { href: "https://components.ai", children: "Components AI" }), ", we want to let you explore\ngenerative space in one way or another, so we need to be able to compute ", _jsx(_components.em, { children: "all" }), "\npossible values. Though, in practice, it can be difficult."] }), "\n", _jsx(_components.p, { children: "For a better user experience it makes sense to make randomly generated values\nfeel less drastic and instead more gradual. We want randomness to be on a slider.\nWe also want to apply common design knowledge to constrain outputs when desired." }), "\n", _jsx(_components.p, { children: "So, in this post, we'll constrain ourselves to random colors and explore color\ngeneration." }), "\n", _jsxs(_components.p, { children: ["Here I seek to answer some questions that ", _jsx(_components.a, { href: "https://twitter.com/mrmrs_", children: "Adam Morse" }), "\nasked me:"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: _jsx(_components.strong, { children: "can we make color transitions less drastic?" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.strong, { children: "how can randomness be configurable?" }) }), "\n"] }), "\n", _jsx(_components.p, { children: "Which resulted in a few other questions:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: _jsx(_components.strong, { children: "how do random numbers and color relate?" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.strong, { children: "can we create a color generation algorithm that has some sort of memory?" }) }), "\n", _jsx(_components.li, { children: _jsxs(_components.strong, { children: ["how do we verify there ", _jsx(_components.em, { children: "is" }), " color memory?"] }) }), "\n", _jsx(_components.li, { children: _jsx(_components.strong, { children: "can we empower users to configure entropy during generation?" }) }), "\n"] }), "\n", _jsx(_components.h2, { id: "random-numbers", children: _jsx(_components.a, { href: "#random-numbers", children: "Random numbers" }) }), "\n", _jsx(_components.p, { children: "Most of design, in one way or another, is grounded in numbers and math. Even a random color\ncan be computed by calculating a large number and converting it to hex. In fact, for some\ngenerators in Components AI, this is exactly what we do." }), "\n", _jsx(_components.h3, { id: "hex-color", children: _jsx(_components.a, { href: "#hex-color", children: "Hex color" }) }), "\n", _jsxs(_components.p, { children: ["Each character in a CSS ", _jsx(_components.a, { href: "https://en.wikipedia.org/wiki/Hexadecimal", children: "hex string" }), ", like ", _jsx(_components.code, { children: "#123abc" }), ",\nrepresents a number, or digit, 0-16."] }), "\n", _jsx(_components.p, { children: "Since a CSS hex color can have up to six characters, we can compute the entire hex color\nspace which has nearly 17 million colors:" }), "\n", _jsx(_components.p, { children: _jsx(_components.em, { children: "16 × 16 × 16 × 16 × 16 × 16 = 16,777,216" }) }), "\n", _jsxs(_components.p, { children: ["We can use this number to create a function that will randomly generate a\nnumber between ", _jsx(_components.em, { children: "0" }), " and ", _jsx(_components.em, { children: "16,777,215" }), " (at least as randomly as ", _jsx(_components.code, { children: "Math.random" }), " can be) and then\nconvert it to hex:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "function randomHexColor() {\n return (\n \"#\" +\n (\"000000\" + Math.floor(Math.random() * 16777215).toString(16)).slice(-6)\n );\n}\n" }) }), "\n", _jsxs(_components.p, { children: ["This ", _jsx(_components.a, { href: "https://www.paulirish.com/2009/random-hex-color-code-snippets/", children: "algorithm for computing color" }), "\nensures that all possible hex values can be output, but one might quickly notice that a lot\nof colors are all over the place and some aren't aesthetically pleasing."] }), "\n", _jsx(_components.h3, { id: "rendering-generated-hex-colors", children: _jsx(_components.a, { href: "#rendering-generated-hex-colors", children: "Rendering generated hex colors" }) }), "\n", _jsx(_components.p, { children: "To see what we're working with, we can render a series of generated colors and place them\nside by side." }), "\n", _jsx(_components.p, { children: "Click the diagram to regenerate the colors." }), "\n", _jsx(RandomColors, { count: 300 }), "\n", _jsx(_components.h3, { id: "how-random-is-random", children: _jsx(_components.a, { href: "#how-random-is-random", children: "How random is random?" }) }), "\n", _jsxs(_components.p, { children: ["Above I mentioned that the random hex color algorithm is only so\n", _jsxs(_components.a, { href: "https://v8.dev/blog/math-random", children: ["random as ", _jsx(_components.code, { children: "Math.random" })] }), ". This\nis because it turns out that ", _jsx(_components.em, { children: "truly" }), " random number generation is hard. JavaScript uses\na ", _jsx(_components.a, { href: "https://en.wikipedia.org/wiki/Pseudorandom_number_generator", children: "Pseudorandom Number Generator" }), "\n(PRNG) which uses a ", _jsx(_components.a, { href: "https://en.wikipedia.org/wiki/Random_seed", children: "seed" }), " to distribute results\nacross a number space (0-1 for ", _jsx(_components.code, { children: "Math.random" }), ")."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://en.wikipedia.org/wiki/Hardware_random_number_generator", children: "Hardware random number generators" }), "\n(HRNG) are closer to true random because they will tap into a physical process like thermal noise or even\n", _jsx(_components.a, { href: "http://www.fourmilab.ch/hotbits/how3.html", children: "nuclear decay measurements" }), ". The physical world is where we can\nfind true randomness for seeding purposes, all other algorithms are an approximation."] }), "\n", _jsx(_components.p, { children: "Randomness has implications for software systems because it's used for cryptography and\nrequires high entropy in order to be secure." }), "\n", _jsx(_components.p, { children: "For randomly creating design values like color, a PRNG is plenty adequate." }), "\n", _jsx(_components.h2, { id: "entropy", children: _jsx(_components.a, { href: "#entropy", children: "Entropy" }) }), "\n", _jsxs(_components.p, { children: ["When it comes to computation, ", _jsx(_components.a, { href: "https://en.wikipedia.org/wiki/Entropy_(computing)", children: "entropy" }), "\nrefers to the general randomness of what's being computed. In some ways it's the \"noise\" or\n\"chaos\" factor. The hex color generator from earlier has high entropy."] }), "\n", _jsx(_components.p, { children: "We can see this in action when we compute 1,000 random colors and place them together." }), "\n", "\n", _jsx(RandomColors, {}), "\n", _jsxs(_components.p, { children: ["It's safe to say that we see reasonable color variety. It's also important to note that\n", _jsx(_components.strong, { children: "color groupings are to be expected" }), ". We, as humans, tend to see ", _jsx(_components.em, { children: "uniform distribution" }), "\nas more random than true random distributions."] }), "\n", _jsx(_components.h3, { id: "uniform-vs-random-distributions", children: _jsx(_components.a, { href: "#uniform-vs-random-distributions", children: "Uniform vs random distributions" }) }), "\n", _jsx(_components.p, { children: "Let's take a look at two distributions, one is random and one is uniform:" }), "\n", "\n", "\n", _jsxs("div", { style: { display: "flex", justifyContent: "space-between" }, children: [_jsx(RandomDistribution, {}), _jsx(UniformDistribution, {})] }), "\n", _jsxs(_components.p, { children: ["Many of us, myself included, will ", _jsx(_components.a, { href: "https://core.ac.uk/download/pdf/82644986.pdf", children: "feel that the uniform distribution on the right is\nmore random" }), ". We see the clustering\nin the left distribution and are inclined to think that it's not a proper representation\nof randomness."] }), "\n", _jsx(_components.p, { children: "However, the clustered distribution on the left is the random one." }), "\n", _jsx(_components.p, { children: "You can click the random distribution and see new, randomly generated distributions.\nNearly all will have some sort of clustering." }), "\n", _jsx(_components.p, { children: "The uniform distribution on the right is a simply modulo operator that creates a\npoint for all multiples of three that are odd:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "for (let i = 0; i < steps; i++) {\n const isBlack = i % 3 === 0 && i % 2 !== 0;\n // ...\n}\n" }) }), "\n", _jsx(_components.h3, { id: "lowering-entropy", children: _jsx(_components.a, { href: "#lowering-entropy", children: "Lowering entropy" }) }), "\n", _jsxs(_components.p, { children: ["We can lower entropy by adjusting our random hex color generator to only generate numbers\nbetween ", _jsx(_components.em, { children: "0" }), " and ", _jsx(_components.em, { children: "1,600" }), ". This will result in substantially fewer total colors."] }), "\n", "\n", _jsx(RandomColorsLowEntropy, {}), "\n", _jsx(_components.p, { children: "The colors are predominantly a saturated blue and black. The distribution of the colors will\nlook more similar to the pure random distribution we saw before." }), "\n", _jsx(_components.h3, { id: "adjusting-entropy", children: _jsx(_components.a, { href: "#adjusting-entropy", children: "Adjusting entropy" }) }), "\n", _jsx(_components.p, { children: "By increasing the number in our hex color generator, we adjust the entropy by increasing or\ndecreasing the number of possible colors that can be output." }), "\n", "\n", _jsx(RandomColorsLowEntropyAdjust, {}), "\n", _jsx(_components.p, { children: "The higher the range, the more colors we see. The more colors we see, the more entropy in\nour color generator." }), "\n", _jsx(_components.h2, { id: "pure-randomness", children: _jsx(_components.a, { href: "#pure-randomness", children: "Pure randomness" }) }), "\n", _jsx(_components.p, { children: "This brings up interesting implications with our algorithms in Components AI. If we recompute\na truly random color every time it could be a bit too jarring. We'd step from brown to\nto purple to green. It might make you feel lost." }), "\n", "\n", _jsx(ColorSteppingTrulyRandom, {}), "\n", _jsx(_components.p, { children: "When we look at random colors in a series, there doesn't seem to be any relationship between\nthe colors (because there isn't). When there is some sort of relationship, that's\nhappening by pure chance." }), "\n", _jsxs(_components.blockquote, { children: ["\n", _jsx(_components.p, { children: "Well, random values have no correlation between them what so ever, but most natural\npatterns have some memory of the previous state." }), "\n", _jsxs(_components.p, { children: ["— ", _jsx(_components.a, { href: "https://thebookofshaders.com", children: "The Book of Shaders" })] }), "\n"] }), "\n", _jsx(_components.p, { children: "As you cycle through colors generated one at a time, it will feel all over the place because\neach new color is truly random. This allows for a bit of serendipity when generating new\ncolors, but there is no memory of the previous color state at all." }), "\n", _jsx(_components.p, { children: "Click the color swatch below to generate a new one." }), "\n", "\n", _jsx(RandomColorRegenerator, {}), "\n", _jsx(_components.h2, { id: "introducing-memory-of-the-previous-color", children: _jsx(_components.a, { href: "#introducing-memory-of-the-previous-color", children: "Introducing memory of the previous color" }) }), "\n", _jsx(_components.p, { children: "I began to wonder about ways to leverage the previous color in order to generate a\nnew, somewhat related color, while still being able to explore all possible values in\nthe hex color space." }), "\n", _jsx(_components.p, { children: "We needed to \"evolve\" color generation gradually without getting stuck in the corner\nof a particular color." }), "\n", _jsx(_components.p, { children: "Naturally, I gravitated to mixing and blending the previous color with a new color\nas the first approach." }), "\n", _jsx(_components.h3, { id: "mixing-colors", children: _jsx(_components.a, { href: "#mixing-colors", children: "Mixing colors" }) }), "\n", _jsxs(_components.p, { children: ["The ", _jsx(_components.a, { href: "https://gka.github.io/chroma.js/", children: "chroma" }), " JavaScript library has a ", _jsx(_components.code, { children: "mix" }), "\nfunction which accepts two colors and a mix ratio. I combined the previous color,\nwith a random color, and then also generated a random mix ratio."] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "color = chroma.mix(color, randomHexColor(), Math.random());\n" }) }), "\n", "\n", _jsx(RandomMixingColors, {}), "\n", _jsx(_components.p, { children: "The resulting colors aren't bad for a quick first attempt. There does seem\nto be a gradual shift or evolution. But, the colors seem to be a lot of\nmuddy greens, purples, browns, and grays." }), "\n", _jsx(_components.p, { children: "I wondered if it had something to do with the mix ratio, so I decided to\ntry a few fixed ratios out." }), "\n", _jsx(_components.h4, { id: "trying-different-mix-ratios", children: _jsx(_components.a, { href: "#trying-different-mix-ratios", children: "Trying different mix ratios" }) }), "\n", _jsxs(_components.p, { children: ["I put the ratio on a slider with ", _jsx(_components.em, { children: ".01" }), " steps to see how the ratio affected\nthe series of colors."] }), "\n", "\n", _jsx(RandomMixingColorsRatio, {}), "\n", _jsx(_components.p, { children: "Unsurprisingly, the colors were no longer muddy when the mix ratio neared 1\nsince the mixing only slightly affected the newly generated color. Colors\nwere rich, but, they lost their sense of gradual change." }), "\n", _jsx(_components.h3, { id: "blending-the-previous-color-with-a-new-random-color", children: _jsx(_components.a, { href: "#blending-the-previous-color-with-a-new-random-color", children: "Blending the previous color with a new random color" }) }), "\n", _jsxs(_components.p, { children: ["Chroma also has a ", _jsx(_components.code, { children: "blend" }), " function that has a few different algorithms\nfor performing the blend. So, we sampled a random algorithm and combined the previous\ncolor with a new, random color."] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "chroma.blend(\n color,\n randomHexColor(),\n sample([\"overlay\", \"multiply\", \"darken\", \"lighten\"])\n);\n" }) }), "\n", "\n", _jsx(RandomBlendColors, {}), "\n", _jsx(_components.p, { children: "The resulting colors appear to be richer and less muddy. There does seem to be a gradual\n\"evolution\" of new colors based on the previous. However, we can also see that\nblending colors often likes to result in very dark browns and near black colors." }), "\n", _jsx(_components.p, { children: "They sort of take over. Maybe a particular blend algorithm causes the dark colors?" }), "\n", _jsx(_components.h4, { id: "trying-different-blend-algorithms", children: _jsx(_components.a, { href: "#trying-different-blend-algorithms", children: "Trying different blend algorithms" }) }), "\n", _jsx(_components.p, { children: "In order to try out the different blend algorithms individually, I put them in a select\ninput that dictated which algorithm would be used." }), "\n", "\n", _jsx(RandomBlendColorsSelect, {}), "\n", _jsx(_components.p, { children: "Interestingly, all blend algorithms eventually resulted in black, white, or\nsome arbitrary color. The random sampling between algorithms ensured that\nthere was more entropy and color generation didn't get \"stuck in a corner\"." }), "\n", _jsx(_components.h3, { id: "randomly-adjusting-the-hue-saturation-and-lightness", children: _jsx(_components.a, { href: "#randomly-adjusting-the-hue-saturation-and-lightness", children: "Randomly adjusting the hue, saturation, and lightness" }) }), "\n", _jsxs(_components.p, { children: ["Chroma has additional color manipulation functions that I decided to experiment\nwith, particularly manipulating hue, saturation, and lightness that make up\nthe ", _jsx(_components.a, { href: "https://en.wikipedia.org/wiki/HSL_and_HSV", children: "HSL" }), " color format."] }), "\n", _jsxs(_components.blockquote, { children: ["\n", _jsx(_components.p, { children: "It has been seen that color differences are caused by 2 factors: by hue and\nby light, and in most cases by both at the same time." }), "\n", _jsx(_components.p, { children: "— Interaction of Color by Josef Albers" }), "\n"] }), "\n", _jsx(_components.p, { children: "So, I created a handful of hue adjustments to randomly sample from, and then\nused the built in functions for saturation and lightness adjustment. The color\nmanipulation function was selected at random." }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "const adjustments = [\n \"*1.5\",\n \"*1.25\",\n \"*1.1\",\n \"*.75\",\n \"*.1\",\n \"/1.5\",\n \"/1.25\",\n \"/1.1\",\n \"/.75\",\n \"/.1\",\n];\nconst fns = [\n () => chroma(color).set(\"hsl.h\", sample(adjustments)),\n () => chroma(color).saturate(),\n () => chroma(color).desaturate(),\n () => chroma(color).darken(),\n () => chroma(color).brighten(),\n];\nconst fn = sample(fns);\ncolor = fn();\n" }) }), "\n", "\n", _jsx(RandomHSLRotateColors, {}), "\n", _jsx(_components.p, { children: "The results were not very good, unfortunately. There's some gradual shifting through color,\nbut, we're stuck in dark browns and grays for the majority of the series." }), "\n", _jsx(_components.p, { children: "Similarly to the other approaches above, there appears to be a gradual shifting through\ncolor, but it often gets stuck for long periods in dark browns, white, and gray shades." }), "\n", _jsx(_components.h4, { id: "making-the-adjustment-algorithms-configurable", children: _jsx(_components.a, { href: "#making-the-adjustment-algorithms-configurable", children: "Making the adjustment algorithms configurable" }) }), "\n", _jsx(_components.p, { children: "To see how the's HSL algorithms worked, I decided to allow their probability of selection\nto be configurable." }), "\n", "\n", _jsx(RandomHSLRotateColorsAdjust, {}), "\n", _jsx(_components.p, { children: "When I initially built this interactive component, it made me realize that\nhue manipulation seemed to bring in the grays and whites which was surprising\nto me." }), "\n", _jsx(_components.h3, { id: "sporadic-sampling-of-multiple-algorithms", children: _jsx(_components.a, { href: "#sporadic-sampling-of-multiple-algorithms", children: "Sporadic sampling of multiple algorithms" }) }), "\n", _jsx(_components.p, { children: "Each of the above algorithms affected the gradual change in color generation in\ndifferent ways. What happens if we randomly sample each of the algorithms to\ncreate a single color generator with memory?" }), "\n", _jsx(_components.p, { children: "The results aren't too bad." }), "\n", "\n", "\n", _jsx(RandomEvolvingColors, {}), "\n", _jsx(_components.p, { children: "Though, what's the average color distance in comparison to pure\nrandom?" }), "\n", "\n", _jsx(RandomEvolvingColorsComparison, {}), "\n", _jsx(_components.p, { children: "This seems pretty compelling because the average color distance is substantially\nless than pure random. When comparing the color schemes, too, pure random has\nmuch more entropy." }), "\n", _jsx(_components.p, { children: "Though, 50 colors is a relatively small data set. What happens with 1,500 colors\nbeing generated?" }), "\n", _jsx(RandomEvolvingColorsComparison, { count: 1500, width: 8, height: 8 }), "\n", _jsx(_components.h2, { id: "entropy-on-a-slider", children: _jsx(_components.a, { href: "#entropy-on-a-slider", children: "Entropy on a slider" }) }), "\n", _jsx(_components.p, { children: "Now that we've addressed most of the questions we set out to answer, we still\nneed to make the entropy configurable." }), "\n", _jsx(_components.p, { children: "Sometimes users might want to see pure random, sometimes they might something\nmore gradual. Sometimes they might want something in between." }), "\n", "\n", _jsx(RandomEvolvingColorsSlider, {}), "\n", _jsx(_components.p, { children: "Above, entropy is placed on a slider. It's reflected as a percentage\nthat's used to determine whether the pure random color generator function\nis called or if our memory-based generator is called." }), "\n", _jsx(_components.p, { children: "At its most basic, the code looks something like:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "const [color, setColor] = useState(randomHexColor());\nconst [entropy, setEntropy] = useState(50);\n\nconst randomBool = (percentile) => Math.random() >= percentile;\n\nconst regenColor = () => {\n const newColor = randomBool(entropy / 100)\n ? regenColorWithMemory(color)\n : randomHexColor();\n setColor(newColor);\n};\n" }) }), "\n", _jsx(_components.p, { children: "With that, the user can configure the probability of the generator\nfunction. Pretty neat!" }), "\n", _jsx(_components.h2, { id: "conclusion", children: _jsx(_components.a, { href: "#conclusion", children: "Conclusion" }) }), "\n", _jsx(_components.p, { children: "Over time this memory-based color generator will surely evolve, but\nI think it's ready to start pushing to production for some generators\non Components AI." }), "\n", _jsx(_components.p, { children: "For next steps, this concept can be used as one of the many generators\nfor more complex components as well. Consider the button, generating\ncolors that are of high entropy." }), "\n", _jsx(_components.p, { children: "I also want to explore multiple color generation and handling relationship\nbetween colors in a palette." }), "\n", _jsx(_components.p, { children: "Thanks for reading <3." }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.p, { children: "Thanks to Adam Morse on asking the tough questions that inspired me to\ntry and experiment with a few solutions." }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.p, { children: "Thanks to Chris Biscardi, Brent Jackson, Cole Bemis, Taylor Bell,\nFlorian Kissling, Prince Wilson, Rose Wiegley, Nick Bender, and my wife, Elsa, for\nreading drafts of this post and providing feedback." })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = props.components || ({}); return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { ArrowRight, RandomColors, RandomDistribution, UniformDistribution, RandomColorsLowEntropy, RandomColorsLowEntropyAdjust, ColorSteppingTrulyRandom, RandomColorRegenerator, RandomMixingColors, RandomMixingColorsRatio, RandomBlendColors, RandomBlendColorsSelect, RandomHSLRotateColors, RandomHSLRotateColorsAdjust, regenColorWithMemory, RandomEvolvingColors, RandomEvolvingColorsComparison, RandomEvolvingColorsSlider, default: MDXContent };

Randomness and color