diff --git a/CHANGELOG.md b/CHANGELOG.md index dd7d673..14c23c4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,9 @@ # CHANGELOG.md +## v1.0.1 + +Added palettes + ## v1.0.0 First deployed version \ No newline at end of file diff --git a/src/components/controls.js b/src/components/controls.js index b6f768a..8d8166e 100644 --- a/src/components/controls.js +++ b/src/components/controls.js @@ -2,16 +2,22 @@ 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 ], ]); - // monochrome - // one spot // two spot // RGB // CMY @@ -39,6 +45,48 @@ function palette_monochrome() { 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 { diff --git a/src/index.md b/src/index.md index c65052a..a5ce615 100644 --- a/src/index.md +++ b/src/index.md @@ -4,7 +4,7 @@ toc: false
by mike lynch | @mikelynch@aus.social | source
+v1.0.1 | by mike lynch | @mikelynch@aus.social | source