Added changelog and version number

CHANGELOG.md

@@ -1,5 +1,9 @@
 # CHANGELOG.md
 
+## v1.0.1
+
+Added palettes
+
 ## v1.0.0
 
 First deployed version

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 {
 

src/index.md

@@ -4,7 +4,7 @@ toc: false
 
 <h1>poptimal</h1>
 
-<p>by <a href="https://mikelynch.org">mike lynch</a> | <a href="https://aus.social/@mikelynch">@mikelynch@aus.social</a> | <a href="https://git.tilde.town/bombinans/poptimal">source</a></p>
+<p>v1.0.1 | by <a href="https://mikelynch.org">mike lynch</a> | <a href="https://aus.social/@mikelynch">@mikelynch@aus.social</a> | <a href="https://git.tilde.town/bombinans/poptimal">source</a></p>
 
 <div class="grid grid-cols-2">
 
@@ -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_pattern = view(Inputs.button("Random", {label:"grids"}));
-const randomise_colours = view(Inputs.button("Random", {label:"Colours"}));
+const randomise_colours = view(Inputs.button("Random", {label:"colours"}));
-const randomise_palette = view(Inputs.button("Random", {label:"Palette"}));
+const randomise_palette = view(Inputs.button("Random", {label:"palette"}));
-const randomise_all = view(Inputs.button("Random", {label:"All"}));
+const randomise_all = view(Inputs.button("Random", {label:"all"}));