Cleaned up styles

README.md

@@ -1,5 +1,12 @@
 # poptimal
 
+An experiment in using Observable to generate colourful SVG patterns 
+reminiscent of op art or halftone dots.
+
+Comments, feedback via Mastodon: [Mike Lynch](https://aus.social/@mikelynch)
+
+## Observable
+
 This is an [Observable Framework](https://observablehq.com/framework/) app. To install the required dependencies, run:
 
 ```

src/components/controls.js

@@ -16,6 +16,22 @@ function random_colour() {
 	return d3.rgb(r, g, b).formatHex();
 }
 
+
+function random_palette() {
+
+	// monochrome
+	// one spot
+	// two spot
+ 	// RGB
+ 	// CMY
+ 	// RYB
+ 	// triad - full saturation
+ 	// triad - pastel
+ 	// trial - dusk
+ 	// random HSV
+ 	// random RGB
+}
+
 class DotControls {
 //
 	constructor(fg, radius_opts) {	
@@ -23,14 +39,14 @@ class DotControls {
 		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]});
+		this.r = Inputs.range([0, 0.4], {value: 0.2, step: 0.01, label: "radius"});
+		this.f = Inputs.select(radius_opts, {label: "gradient", 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.r.value = random.float(0, 0.4);
 		this.f.value = random.choice(this.radius_opts);
 		this.m.dispatchEvent(new Event("input"));
 		this.n.dispatchEvent(new Event("input"));

src/components/dots.js

@@ -6,10 +6,10 @@ const RADIUS_OPTS = [
 	"left",
 	"up",
 	"down",
-	"RU",
-	"RD",
-	"LU",
-	"LD",
+	"right-up",
+	"right-down",
+	"left-up",
+	"left-down",
 	"in",
 	"out",
 ];
@@ -58,13 +58,13 @@ class DotMaker {
 	      		return maxr * d.y / this.width;
 	    	case "up":
 	      		return maxr * (this.width - d.y) / this.width;
-	      	case "RU":
+	      	case "right-up":
 	      		return 0.5 * maxr * (d.x + this.width - d.y) / this.width;
-	      	case "LU":
+	      	case "left-up":
 	      		return 0.5 * maxr * (this.width - d.x + this.width - d.y) / this.width;
-	      	case "RD":
+	      	case "right-down":
 	      		return 0.5 * maxr * (d.x + d.y) / this.width;
-	      	case "LD":
+	      	case "left-down":
 	      		return 0.5 * maxr * (this.width - d.x + d.y) / this.width;
 	      	case "out":
 	      		return 2 * maxr * distance((d.x - this.cx), (d.y - this.cy)) / this.width;

src/index.md

@@ -4,6 +4,8 @@ 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>
+
 <div class="grid grid-cols-2">
 
   <div class="card">
@@ -20,27 +22,27 @@ const HEIGHT = WIDTH;
 
 const dm = new DotMaker(WIDTH);
 
-
 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 randomise_pattern = view(Inputs.button("Random grids"));
+const randomise_pattern = view(Inputs.button("Random dots"));
 const randomise_colours = view(Inputs.button("Random colours"));
 const randomise_all = view(Inputs.button("Random all"));
 
@@ -138,6 +140,15 @@ display(svg.node());
 </div>
 
 <style>
+h1 {
+  font-family: helvetica, arial, sans-serif;
+  font-weight: bold;
+}
+
+p {
+  font-family: helvetica, arial, sans-serif;
+  font-size: 9pt
+}
 
 
 </style>