From db222246f233c99e197ca925c549dac68d11992e Mon Sep 17 00:00:00 2001
From: Mike Lynch <m.lynch@sydney.edu.au>
Date: Mon, 6 Jan 2025 12:28:13 +1100
Subject: [PATCH] Broke controls into a class and made everything randomisable

---
 src/components/controls.js | 49 ++++++++++++++++++++++++++
 src/index.md               | 71 +++++++++++++++++++++++++++-----------
 2 files changed, 100 insertions(+), 20 deletions(-)
 create mode 100644 src/components/controls.js

diff --git a/src/components/controls.js b/src/components/controls.js
new file mode 100644
index 0000000..2817e9a
--- /dev/null
+++ b/src/components/controls.js
@@ -0,0 +1,49 @@
+// controls
+
+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();
+}
+
+class DotControls {
+//
+	constructor(fg, radius_opts) {	
+		this.radius_opts = radius_opts;
+		this.fg = Inputs.color({label: "colour", value: fg});
+		this.m = Inputs.range([1, 5], {value: 2, step: 1, label:"m"});
+		this.n = Inputs.range([1, 5], {value: 2, step: 1, label:"n"});
+		this.r = Inputs.range([0, 0.5], {value: 0.3, step: 0.01, label: "radius"});
+		this.f = Inputs.select(radius_opts, {value: radius_opts[0]});
+	}
+
+	random_grid() {
+		this.m.value = random.choice([1, 2, 3, 4, 5]);	
+		this.n.value = random.choice([1, 2, 3, 4, 5]);
+		this.r.value = random.float(0, 0.5);
+		this.f.value = random.choice(this.radius_opts);
+		this.m.dispatchEvent(new Event("input"));
+		this.n.dispatchEvent(new Event("input"));
+		this.r.dispatchEvent(new Event("input"));
+		this.f.dispatchEvent(new Event("input"));
+	}
+
+	random_colours() {
+		this.fg.value = random_colour();
+		this.fg.dispatchEvent(new Event("input"));
+	}
+
+
+}
+
+export { DotControls, random_colour };
\ No newline at end of file
diff --git a/src/index.md b/src/index.md
index f472dd5..056494c 100644
--- a/src/index.md
+++ b/src/index.md
@@ -10,7 +10,8 @@ toc: false
 
 ```js
 
-import {RADIUS_OPTS, DotMaker} from './components/dots.js'
+import {RADIUS_OPTS, DotMaker} from './components/dots.js';
+import {DotControls, random_colour} from './components/controls.js';
 
 const CELL = 10;
 const MAG = 2;
@@ -20,41 +21,71 @@ const HEIGHT = WIDTH;
 const dm = new DotMaker(WIDTH);
 
 
-const bg = view(Inputs.color({label: "background", value: d3.color("yellow").formatHex()}))
-const fg1 = view(Inputs.color({label: "fg1", value: d3.color("red").formatHex()}))
-const m1 = view(Inputs.range([1, 5], {value: 2, step: 1, label:"m1"}));
-const n1 = view(Inputs.range([1, 5], {value: 2, step: 1, label:"n1"}));
-const r1 = view(Inputs.range([0, 0.5], {value: 0.3, step: 0.01, label: "radius"}));
-const f1 = view(Inputs.select(RADIUS_OPTS, {value: RADIUS_OPTS[0]}));
+const bg_input = Inputs.color({label: "background", value: d3.color("yellow").formatHex()});
+const bg = view(bg_input);
+
+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 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 m2 = view(ctrl2.m);
+const n2 = view(ctrl2.n);
+const r2 = view(ctrl2.r);
+const f2 = view(ctrl2.f);
 
 
-const v2 = view(Inputs.toggle({label: "Second grid", value:true}));
+const randomise_pattern = view(Inputs.button("Random grids"));
+const randomise_colours = view(Inputs.button("Random colours"));
+const randomise_all = view(Inputs.button("Random all"));
+
+```
+
+
+```js
+
+randomise_pattern;
+ctrl1.random_grid();
+ctrl2.random_grid();
 
 ```
 
 ```js
 
-const fg2 = view(Inputs.color({
-  label: "fg2", value: d3.color("blue").formatHex(),
-  disabled: !v2
-}));
-
-const m2 = view(Inputs.range([1, 5], {value: 1, step: 1, label:"m2", disabled: !v2}));
-const n2 = view(Inputs.range([1, 5], {value: 3, step: 1, label:"n2", disabled: !v2}));
-const r2 = view(Inputs.range([0, 0.5], {value: 0.2, step: 0.01, label: "radius"}));
-const f2 = view(Inputs.select(RADIUS_OPTS, {value: RADIUS_OPTS[0]}));
-
+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();
+
+```
+
+
 </div>
 <div>
 
 
 ```js
 
-const dots1 = dm.dots(1 / m1, n1)
-const dots2 = v2 ? dm.dots(1 / m2, n2) : []
+const dots1 = dm.dots(1 / m1, n1);
+const dots2 = dm.dots(1 / m2, n2);
 
 
 ```