From 2b839fdbee6e126988d71febc67abdefc21edf2b Mon Sep 17 00:00:00 2001 From: Mike Lynch Date: Wed, 8 Jan 2025 14:02:47 +1100 Subject: [PATCH 1/2] Palettes are working with three basic kinds --- src/components/controls.js | 46 +++++++++++++++++++------------ src/index.md | 56 ++++++++++++++++++++++++-------------- 2 files changed, 65 insertions(+), 37 deletions(-) diff --git a/src/components/controls.js b/src/components/controls.js index 401a34e..b6f768a 100644 --- a/src/components/controls.js +++ b/src/components/controls.js @@ -4,20 +4,11 @@ import * as Inputs from "npm:@observablehq/inputs"; import random from "npm:random"; import * as d3 from "npm:d3-color"; - -console.log("Hi there"); -console.log(d3); -console.log(d3.rgb(1, 0, 0)); - -function random_colour() { - const r = random.float(0, 1) * 255; - const g = random.float(0, 1) * 255; - const b = random.float(0, 1) * 255; - return d3.rgb(r, g, b).formatHex(); -} - - -function random_palette() { +const PALETTES = new Map([ + [ "random RGB", palette_random ], + [ "grayscale", palette_grayscale ], + [ "monochrome", palette_monochrome ], +]); // monochrome // one spot @@ -30,10 +21,27 @@ function random_palette() { // 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())); +} + + class DotControls { -// + constructor(fg, radius_opts) { this.radius_opts = radius_opts; this.fg = Inputs.color({label: "colour", value: fg}); @@ -55,11 +63,15 @@ class DotControls { } random_colours() { - this.fg.value = random_colour(); + this.set_colour(random_colour()); + } + + set_colour(c) { + this.fg.value = c; this.fg.dispatchEvent(new Event("input")); } } -export { DotControls, random_colour }; \ No newline at end of file +export { DotControls, PALETTES }; \ No newline at end of file diff --git a/src/index.md b/src/index.md index ea77ce0..c65052a 100644 --- a/src/index.md +++ b/src/index.md @@ -13,7 +13,8 @@ toc: false ```js import {RADIUS_OPTS, DotMaker} from './components/dots.js'; -import {DotControls, random_colour} from './components/controls.js'; +import {PALETTES, DotControls} from './components/controls.js'; +import random from "npm:random"; const CELL = 10; const MAG = 2; @@ -29,22 +30,29 @@ const ctrl1 = new DotControls(d3.color("red").formatHex(), RADIUS_OPTS); const ctrl2 = new DotControls(d3.color("blue").formatHex(), RADIUS_OPTS); -const fg1 = view(ctrl1.fg) +const fg1 = view(ctrl1.fg); const m1 = view(ctrl1.m); const n1 = view(ctrl1.n); const r1 = view(ctrl1.r); const f1 = view(ctrl1.f); -const fg2 = view(ctrl2.fg) +const fg2 = view(ctrl2.fg); const m2 = view(ctrl2.m); const n2 = view(ctrl2.n); const r2 = view(ctrl2.r); const f2 = view(ctrl2.f); -const randomise_pattern = view(Inputs.button("Random dots")); -const randomise_colours = view(Inputs.button("Random colours")); -const randomise_all = view(Inputs.button("Random all")); +const palette_input = Inputs.select(PALETTES, {label: "Palette type"}); +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"})); + + + ``` @@ -57,28 +65,36 @@ ctrl2.random_grid(); ``` -```js - -randomise_colours; -bg_input.value = random_colour(); -bg_input.dispatchEvent(new Event("input")); -ctrl1.random_colours(); -ctrl2.random_colours(); - -``` ```js - randomise_all; ctrl1.random_grid(); ctrl2.random_grid(); -bg_input.value = random_colour(); -bg_input.dispatchEvent(new Event("input")); -ctrl1.random_colours(); -ctrl2.random_colours(); +const rpalette = random.choice(Array.from(PALETTES.keys())); +palette_input.value = PALETTES.get(rpalette); +palette_input.dispatchEvent(new Event("input")); ``` +```js +randomise_palette +const rpalette = random.choice(Array.from(PALETTES.keys())); +palette_input.value = PALETTES.get(rpalette); +palette_input.dispatchEvent(new Event("input")); + +``` + +```js +randomise_colours; +if( palette_fn ) { + const palette = palette_fn(); + bg_input.value = palette[0].formatHex(); + bg_input.dispatchEvent(new Event("input")); + ctrl1.set_colour(palette[1].formatHex()); + ctrl2.set_colour(palette[2].formatHex()); +} + +```
From 36c26e7cac3443e2e60fc5d191735822d629e59b Mon Sep 17 00:00:00 2001 From: Mike Lynch Date: Thu, 9 Jan 2025 11:33:13 +1100 Subject: [PATCH 2/2] 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"}));