From 36c26e7cac3443e2e60fc5d191735822d629e59b Mon Sep 17 00:00:00 2001 From: Mike Lynch Date: Thu, 9 Jan 2025 11:33:13 +1100 Subject: [PATCH] Added changelog and version number --- CHANGELOG.md | 4 +++ src/components/controls.js | 52 ++++++++++++++++++++++++++++++++++++-- src/index.md | 12 ++++----- 3 files changed, 60 insertions(+), 8 deletions(-) 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

poptimal

-

by mike lynch | @mikelynch@aus.social | source

+

v1.0.1 | by mike lynch | @mikelynch@aus.social | source

@@ -43,13 +43,13 @@ const n2 = view(ctrl2.n); const r2 = view(ctrl2.r); const f2 = view(ctrl2.f); -const palette_input = Inputs.select(PALETTES, {label: "Palette type"}); +const palette_input = Inputs.select(PALETTES, {label: "palette"}); const palette_fn = view(palette_input); -const randomise_pattern = view(Inputs.button("Random", {label:"Grids"})); -const randomise_colours = view(Inputs.button("Random", {label:"Colours"})); -const randomise_palette = view(Inputs.button("Random", {label:"Palette"})); -const randomise_all = view(Inputs.button("Random", {label:"All"})); +const randomise_pattern = view(Inputs.button("Random", {label:"grids"})); +const randomise_colours = view(Inputs.button("Random", {label:"colours"})); +const randomise_palette = view(Inputs.button("Random", {label:"palette"})); +const randomise_all = view(Inputs.button("Random", {label:"all"}));