CHANGELOG.md

@@ -1,14 +1,5 @@
 # CHANGELOG.md
 
-## v1.0.2
-
-* Fixed bug which was stopping slanted grids
-* Added noise
-
-## v1.0.1
-
-Added palettes
-
 ## v1.0.0
 
 First deployed version

src/components/controls.js

@@ -2,22 +2,25 @@
 
 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
@@ -27,69 +30,10 @@ const PALETTES = new Map([
  	// 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});
@@ -111,15 +55,11 @@ class DotControls {
 	}
 
 	random_colours() {
-		this.set_colour(random_colour());
+		this.fg.value = random_colour();
-	}
-
-	set_colour(c) {
-		this.fg.value = c;
 		this.fg.dispatchEvent(new Event("input"));
 	}
 
 
 }
 
-export { DotControls, PALETTES };
+export { DotControls, random_colour };

src/components/dots.js

@@ -1,6 +1,5 @@
 // calculate tiles
 
-
 const RADIUS_OPTS = [ 
 	"const",
 	"right",
@@ -13,21 +12,12 @@ const RADIUS_OPTS = [
 	"left-down",
 	"in",
 	"out",
-	"noise",
 ];
 
 function distance(dx, dy) {
 	return Math.sqrt(dx ** 2 + dy ** 2);
 }
 
-function int_range(v1, v2) {
-	const vs = [v1, v2];
-	vs.sort((a, b) => a - b);
-	const low = Math.floor(vs[0]);
-	const high = Math.ceil(vs[1]);
-	return [...Array(high - low + 1).keys()].map((i) => i + low);
-}
-
 class DotMaker {
 	constructor(width) {
 		this.width = width;
@@ -40,17 +30,19 @@ class DotMaker {
 			return [];
 		}
 		const ps = [];
-		const is = int_range(-this.width, this.width / m)
+		const imin = -this.width;
-		is.map((i) => {
+		const imax = this.width / m;
-			const js = int_range(m * i + (m - n) * this.width, m * i)
+		for( let i = imin; i <= imax; i++ ) {
-			js.map((j) => {
+			const jmin = m * i + (m - n) * this.width;
+			const jmax = m * i;
+			for( let j = jmin; j <= jmax; j++ ) {
 				const x = (j - m * i) / (m - n);
 				const y = m * (x + i);
 				if( x > 0 && y > 0 && x < this.width && y < this.width ) {
 					ps.push({i:i, j:j, x:x, y:y});
 				}
-			});
+			}
-		});
+		}
 		return ps;
 	}
 
@@ -78,14 +70,6 @@ class DotMaker {
 	      		return 2 * maxr * distance((d.x - this.cx), (d.y - this.cy)) / this.width;
 	      	case "in":
 	      		return 2 * maxr * (0.5 * this.width - distance((d.x - this.cx), (d.y - this.cy))) / this.width;
-
-	      	// case "hyper-out":
-	      	// 	return 2 * maxr * Math.abs(d.x - this.cx) (d.y - this.cy)) / this.width;
-	      	// case "hyoer-in":
-	      	// 	return 2 * maxr * (0.5 * this.width - distance((d.x - this.cx), (d.y - this.cy))) / this.width;
-
-	      	case "noise":
-	      		return maxr * Math.random();
 	    	default:
 	      		return maxr;
 	  }

src/index.md

@@ -4,7 +4,7 @@ toc: false
 
 <h1>poptimal</h1>
 
-<p>v1.0.2 | 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>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">
 
@@ -13,8 +13,7 @@ toc: false
 ```js
 
 import {RADIUS_OPTS, DotMaker} from './components/dots.js';
-import {PALETTES, DotControls} from './components/controls.js';
+import {DotControls, random_colour} from './components/controls.js';
-import random from "npm:random";
 
 const CELL = 10;
 const MAG = 2;
@@ -30,29 +29,22 @@ 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 palette_input = Inputs.select(PALETTES, {label: "palette"});
+const randomise_pattern = view(Inputs.button("Random dots"));
-const palette_fn = view(palette_input);
+const randomise_colours = view(Inputs.button("Random colours"));
-
+const randomise_all = view(Inputs.button("Random 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"}));
-
-
-
 
 ```
 
@@ -65,37 +57,29 @@ 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();
-const rpalette = random.choice(Array.from(PALETTES.keys()));
+bg_input.value = random_colour();
-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());
+ctrl1.random_colours();
-  ctrl2.set_colour(palette[2].formatHex());
+ctrl2.random_colours();
-}
 
 ```
 
+
 </div>
 <div>