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 401a34e..8d8166e 100644
--- a/src/components/controls.js
+++ b/src/components/controls.js
@@ -2,25 +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 ],
+]);
-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() {
-
- // monochrome
- // one spot
// two spot
// RGB
// CMY
@@ -30,10 +27,69 @@ 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()));
+}
+
+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 {
-//
+
constructor(fg, radius_opts) {
this.radius_opts = radius_opts;
this.fg = Inputs.color({label: "colour", value: fg});
@@ -55,11 +111,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..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
@@ -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"});
+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());
+}
+
+```