From d2c38a40535821e7e4f642790125a5beb96cda8e Mon Sep 17 00:00:00 2001 From: Mike Lynch Date: Sun, 26 Jan 2025 18:00:14 +1100 Subject: [PATCH] Broke out the colour stuff to its own component --- src/components/controls.js | 86 +------------------------------------- src/components/palettes.js | 78 ++++++++++++++++++++++++++++++++++ src/index.md | 3 +- 3 files changed, 81 insertions(+), 86 deletions(-) create mode 100644 src/components/palettes.js diff --git a/src/components/controls.js b/src/components/controls.js index 8d8166e..6a3d3c2 100644 --- a/src/components/controls.js +++ b/src/components/controls.js @@ -2,90 +2,6 @@ import * as Inputs from "npm:@observablehq/inputs"; import random from "npm:random"; -import shuffle from "npm:lodash.shuffle"; -import * as d3 from "npm:d3-color"; - -const PALETTES = new Map([ - [ "random RGB", palette_random ], - [ "grayscale", palette_grayscale ], - [ "monochrome", palette_monochrome ], - [ "one spot", palette_one_spot ], - [ "triad", triad_saturated ], - [ "triad pastel", triad_pastel ], - [ "triad dusk", triad_dusk ], - [ "RGB", palette_rgb ], - [ "RBY", palette_rby ], - [ "CMY", palette_cmy ], -]); - - // two spot - // RGB - // CMY - // RYB - // triad - full saturation - // triad - pastel - // trial - dusk - // random HSV - // random RGB - -function palette_random() { - const u = random.uniform(0, 255); - return [1,2,3].map((x)=> d3.rgb(u(), u(), u())); -} - - -function palette_grayscale() { - const u = random.uniform(0, 1); - return [1,2,3].map((x)=> d3.hsl(0, 0, u())); -} - -function palette_monochrome() { - const u = random.uniform(0, 1); - const h = u() * 360; - return [1,2,3].map((x)=> d3.hsl(h, u(), u())); -} - -function palette_one_spot() { - const hue = random.uniform(0, 360); - const cols = [ d3.color("white"), d3.color("black"), d3.hsl(hue(), 1, 0.5) ] - return shuffle(cols); -} - -function triad_saturated() { - return triad(1, 0.5); -} - -function triad_pastel() { - return triad(0.6, 0.7); -} - -function triad_dusk() { - return triad(1, 0.25); -} - -function triad(s, l) { - const u = random.uniform(0, 360); - const h1 = u(); - const h2 = (h1 + 120) % 360; - const h3 = (h1 + 240) % 360; - const cols = [ h1, h2, h3 ].map((h) => d3.hsl(h, s, l)); - return shuffle(cols); -} - -function palette_rgb() { - const cols = [ d3.rgb(255, 0, 0), d3.rgb(0, 255, 0), d3.rgb(0, 0, 255) ]; - return shuffle(cols); -} - -function palette_rby() { - const cols = [ d3.rgb(255, 0, 0), d3.rgb(255, 255, 0), d3.rgb(0, 0, 255) ]; - return shuffle(cols); -} - -function palette_cmy() { - const cols = [ d3.rgb(0, 255, 255), d3.rgb(255, 255, 0), d3.rgb(255, 0, 255) ]; - return shuffle(cols); -} class DotControls { @@ -122,4 +38,4 @@ class DotControls { } -export { DotControls, PALETTES }; \ No newline at end of file +export { DotControls }; \ No newline at end of file diff --git a/src/components/palettes.js b/src/components/palettes.js new file mode 100644 index 0000000..9acdd11 --- /dev/null +++ b/src/components/palettes.js @@ -0,0 +1,78 @@ + +import * as d3 from "npm:d3-color"; +import shuffle from "npm:lodash.shuffle"; +import random from "npm:random"; + +const PALETTES = new Map([ + [ "random RGB", palette_random ], + [ "grayscale", palette_grayscale ], + [ "monochrome", palette_monochrome ], + [ "one spot", palette_one_spot ], + [ "triad", triad_saturated ], + [ "triad pastel", triad_pastel ], + [ "triad dusk", triad_dusk ], + [ "RGB", palette_rgb ], + [ "RBY", palette_rby ], + [ "CMY", palette_cmy ], +]); + +function palette_random() { + const u = random.uniform(0, 255); + return [1,2,3].map((x)=> d3.rgb(u(), u(), u())); +} + + +function palette_grayscale() { + const u = random.uniform(0, 1); + return [1,2,3].map((x)=> d3.hsl(0, 0, u())); +} + +function palette_monochrome() { + const u = random.uniform(0, 1); + const h = u() * 360; + return [1,2,3].map((x)=> d3.hsl(h, u(), u())); +} + +function palette_one_spot() { + const hue = random.uniform(0, 360); + const cols = [ d3.color("white"), d3.color("black"), d3.hsl(hue(), 1, 0.5) ] + return shuffle(cols); +} + +function triad_saturated() { + return triad(1, 0.5); +} + +function triad_pastel() { + return triad(0.6, 0.7); +} + +function triad_dusk() { + return triad(1, 0.25); +} + +function triad(s, l) { + const u = random.uniform(0, 360); + const h1 = u(); + const h2 = (h1 + 120) % 360; + const h3 = (h1 + 240) % 360; + const cols = [ h1, h2, h3 ].map((h) => d3.hsl(h, s, l)); + return shuffle(cols); +} + +function palette_rgb() { + const cols = [ d3.rgb(255, 0, 0), d3.rgb(0, 255, 0), d3.rgb(0, 0, 255) ]; + return shuffle(cols); +} + +function palette_rby() { + const cols = [ d3.rgb(255, 0, 0), d3.rgb(255, 255, 0), d3.rgb(0, 0, 255) ]; + return shuffle(cols); +} + +function palette_cmy() { + const cols = [ d3.rgb(0, 255, 255), d3.rgb(255, 255, 0), d3.rgb(255, 0, 255) ]; + return shuffle(cols); +} + +export { PALETTES } diff --git a/src/index.md b/src/index.md index 70d3203..732687e 100644 --- a/src/index.md +++ b/src/index.md @@ -15,7 +15,8 @@ toc: false ```js import {RADIUS_OPTS, DotMaker} from './components/dots.js'; -import {PALETTES, DotControls} from './components/controls.js'; +import {DotControls} from './components/controls.js'; +import {PALETTES} from './components/palettes.js'; import {download, download_as_svg, download_as_png} from './components/download.js'; import random from "npm:random";