From 2b839fdbee6e126988d71febc67abdefc21edf2b Mon Sep 17 00:00:00 2001
From: Mike Lynch <m.lynch@sydney.edu.au>
Date: Wed, 8 Jan 2025 14:02:47 +1100
Subject: [PATCH] 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());
+}
+
+```
 
 </div>
 <div>