Merge pull request 'Fixed flashing grids' (#37) from rc-1.2.2 into main

Reviewed-on: #37

poptimal.js

@@ -12,13 +12,13 @@ const xmlns = "http://www.w3.org/2000/xmlns/";
 const xlinkns = "http://www.w3.org/1999/xlink";
 const svgns = "http://www.w3.org/2000/svg";
 
-import {RADIUS_OPTS, RADIUS_DESC, DotMaker} from './src/components/dots.js';
+import {RADIUS_OPTS, RADIUS_DESC, radius_func, DotMaker} from './src/components/dots.js';
 import {PALETTES} from './src/components/palettes.js';
 import {ColourNamer} from './src/components/colour_namer.js';
 
 const CELL = 10;
 const MAG = 2;
-const WIDTH = 20;
+const WIDTH = 200;
 const HEIGHT = WIDTH;
 // number of pixels which have to be visible for a colour to be
 // mentioned in the alt text
@@ -36,10 +36,12 @@ function randomise_params() {
 		f: random.choice(RADIUS_OPTS),
 		r: random.float(0, 0.4),
 	}});
+	const cell = 5 + random.float() * random.float() * 55;
 	return {
 		background: palette[0],
 		palette: palette_name,
-		patterns: patterns
+		patterns: patterns,
+		cell: cell,
 	}
 }
 
@@ -134,30 +136,34 @@ function poptimal_svg(params) {
 	const document = window.document;
 	const container = d3.select(document.body).append("div");
 
-	const dm = new DotMaker(WIDTH);
+	const width = WIDTH / params.cell;
+	const height = WIDTH / params.cell;
+
+	const dm = new DotMaker(width, height);
 
 	const svg = container.append("svg")
-	  .attr("width", WIDTH * CELL * MAG)
+	  .attr("width", WIDTH * MAG)
-	  .attr("height", HEIGHT * CELL * MAG)
+	  .attr("height", HEIGHT * MAG)
-	  .attr("viewBox", [ 0, 0, WIDTH, HEIGHT ]);
+	  .attr("viewBox", [ 0, 0, width, height ]);
 
 	const background = svg.append("rect")
 	  .attr("x", 0)
 	  .attr("y", 0)
-	  .attr("width", WIDTH)
+	  .attr("width", width)
-	  .attr("height", WIDTH)
+	  .attr("height", height)
 	  .attr("fill", params.background);
 
 
 	params.patterns.map((p) =>  {
 		const dots = dm.dots(1 / p.m, p.n, false);
+		const rfunc = radius_func(p.f);
 		const dots_g = svg.append("g")
 	  			.attr("id", `dots${p.i}`);
 	
 		dots_g.selectAll("circle")
 		  .data(dots)
 		  .join("circle")
-		  .attr("r", (d) => dm.radius(d, p.f, p.r))
+		  .attr("r", (d) => rfunc(d, p.r, width, height))
 		  .attr("fill", p.colour)
 		  .attr("cx", (d) => d.x)
 		  .attr("cy", (d) => d.y);
@@ -227,7 +233,6 @@ async function main() {
 	const colourf = params.palette === 'grayscale' ? cf['grayscale'] : cf['colour'];
 
 	const namer = new ColourNamer();
-	console.log(`Loading colours ${colourf}`);
 	await namer.load_colours(colourf);
 
 
@@ -250,7 +255,7 @@ async function main() {
   	// so we don't include obscured colours
   	const hist = await get_histogram(imgfile);
 	const alt_text = image_description(namer, params, hist);
-
+	params.alt_text = alt_text;
 	await save_params(paramsfile, params);
 	console.log(alt_text);
 	console.log(imgfile);

src/components/dots.js

@@ -11,8 +11,11 @@ const RADIUS_OPTS = [
 	"right-down",
 	"left-up",
 	"left-down",
-	"in",
+	"circle-in",
-	"out",
+	"circle-out",
+	"hyper-in",
+	"hyper-out",
+	"grid",
 	"noise",
 ];
 
@@ -26,15 +29,19 @@ const RADIUS_DESC = {
 	"right-down": "getting larger towards the lower right",
 	"left-up": "getting larger towards the upper left",
 	"left-down": "getting larger towards the lower left",
-	"in": "getting larger in the centre",
+	"circle-in": "forming a circle at the centre",
-	"out": "getting larger at the edges",
+	"circle-out": "leaving a circular gap at the centre",
+	"hyper-in": "forming a starlike pattern at the centre",
+	"hyper-out": "leaving a starlike gap in the centre",
 	"noise": "of random sizes",
+	"grid": "forming a grid pattern",
 }
 
 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);
@@ -43,11 +50,17 @@ function int_range(v1, v2) {
 	return [...Array(high - low + 1).keys()].map((i) => i + low);
 }
 
+function randint(min, max) {
+	return min + Math.floor(Math.random() * (max + 1));
+}
+
 class DotMaker {
-	constructor(width) {
+	constructor(width, height) {
 		this.width = width;
+		this.height = height;
+		this.wh = 0.5 * (width + height);
 		this.cx = 0.5 * width;
-		this.cy = 0.5 * width;
+		this.cy = 0.5 * height;
 	}
 
 	dots(m, n, clip) {
@@ -55,58 +68,61 @@ class DotMaker {
 			return [];
 		}
 		const ps = [];
-		const is = int_range(-this.width, this.width / m)
+		const is = int_range(-this.width, this.height / m)
 		is.map((i) => {
 			const js = int_range(m * i + (m - n) * this.width, m * i)
 			js.map((j) => {
 				const x = (j - m * i) / (m - n);
 				const y = m * (x + i);
-				if( !clip || (x > 0 && y > 0 && x < this.width && y < this.width) ) {
+				if( !clip || (x > 0 && y > 0 && x < this.width && y < this.height) ) {
 					ps.push({i:i, j:j, x:x, y:y});
 				}
 			});
 		});
 		return ps;
 	}
-
-	radius(d, func, maxr) {
-	  	switch (func) {
-	    	case "const":
-	      		return maxr;
-	    	case "right":
-	      		return maxr * d.x / this.width;
-	    	case "left":
-	      		return maxr * (this.width - d.x) / this.width;
-	    	case "down":
-	      		return maxr * d.y / this.width;
-	    	case "up":
-	      		return maxr * (this.width - d.y) / this.width;
-	      	case "right-up":
-	      		return 0.5 * maxr * (d.x + this.width - d.y) / this.width;
-	      	case "left-up":
-	      		return 0.5 * maxr * (this.width - d.x + this.width - d.y) / this.width;
-	      	case "right-down":
-	      		return 0.5 * maxr * (d.x + d.y) / this.width;
-	      	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;
-	      	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;
-	  }
-	}
 }
 
-export { RADIUS_OPTS, RADIUS_DESC, DotMaker };
+
+function radius_func(func) {
+  	switch (func) {
+    	case "const":
+      		return (d, r, w, h) => r;
+    	case "right":
+      		return (d, r, w, h) => r * d.x / w;
+    	case "left":
+      		return (d, r, w, h) => r * (w - d.x) / w;
+    	case "down":
+      		return (d, r, w, h) => r * d.y / h;
+    	case "up":
+      		return (d, r, w, h) => r * (h - d.y) / h;
+      	case "right-up":
+      		return (d, r, w, h) => r * (d.x + h - d.y) / (w + h);
+      	case "left-up":
+      		return (d, r, w, h) => r * (w - d.x + h - d.y) / (w + h);
+      	case "right-down":
+      		return (d, r, w, h) => r * (d.x + d.y) / (w + h);
+      	case "left-down":
+      		return (d, r, w, h) => r * (w - d.x + d.y) / (w + h);
+      	case "circle-out":
+      		return (d, r, w, h) => 4 * r * distance((d.x - w / 2), (d.y - h / 2)) / (w + h);
+      	case "circle-in":
+      		return (d, r, w, h) => 4 * r * (0.5 * (w + h) - distance((d.x - w / 2), (d.y - h / 2))) / (w + h);
+      	case "hyper-in":
+      		return (d, r, w, h) => 2 * r * (1 - Math.abs((d.x - w / 2) * (d.y - h / 2)) / (w + h));
+      	case "hyper-out":
+      		return (d, r, w, h) => 2 * r * Math.abs((d.x - w / 2) * (d.y - h / 2)) / (w + h);
+      	case "noise":
+      		return (d, r, w, h) => r * Math.random();
+      	case "grid":
+      		const xk = Math.PI * (2 * randint(1, 10) - 1);
+      		const yk = Math.PI * (2 * randint(1, 10) - 1);
+      		return (d, r, w, h) => r * (0.5 + 0.5 * (Math.sin(xk * d.x / w) + Math.sin(yk * d.y / h)));
+    	default:
+      		return (d, r, w, h) => r;
+  	}
+}
+
+export { RADIUS_OPTS, RADIUS_DESC, DotMaker, radius_func };
 
 

src/components/download.js

@@ -73,7 +73,7 @@ export async function download_as_png (svg) {
   const opts = {
       fitTo: {
         mode: 'width', // If you need to change the size
-        value: 400,
+        value: 1200,
       }
     };
   const resvgJS = new resvg.Resvg(svgstr, opts)

src/index.md

@@ -8,15 +8,15 @@ toc: false
 
 colourful generative patterns using [d3](https://d3js.org/) and [Observable Framework](https://observablehq.com/framework/)
 
-<p>v1.1.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>
+<p>v1.2.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> | <a href="https://mikelynch.org/2025/Mar/09/poptimal/">about</a></p>
 
-<div class="grid grid-cols-2">
+<div class="grid grid-cols-3">
 
-  <div class="card">
+  <div class="card grid-colspan-1">
 
 ```js
 
-import {RADIUS_OPTS, DotMaker} from './components/dots.js';
+import {RADIUS_OPTS, DotMaker, radius_func} from './components/dots.js';
 import {DotControls} from './components/controls.js';
 import {PALETTES} from './components/palettes.js';
 import {download, download_as_svg, download_as_png} from './components/download.js';
@@ -24,18 +24,26 @@ import random from "npm:random";
 
 import * as resvg from 'npm:@resvg/resvg-wasm';
 
-const CELL = 10;
 const MAG = 2;
-const WIDTH = 20;
+const WIDTH = 200;
-const HEIGHT = WIDTH;
+const HEIGHT = 200;
 
-const dm = new DotMaker(WIDTH);
+const cell_input = Inputs.range([5,60], {value: 10,  label: "cell size"});
+const cell = view(cell_input);
 
-const bg_input = Inputs.color({label: "background", value: d3.color("yellow").formatHex()});
+
+```
+
+
+```js
+
+const bg_input = Inputs.color({
+  label: "background", value: d3.color("white").formatHex()
+});
 const bg = view(bg_input);
 
-const ctrl1 = new DotControls(d3.color("red").formatHex(), RADIUS_OPTS);
+const ctrl1 = new DotControls(d3.color("white").formatHex(), RADIUS_OPTS);
-const ctrl2 = new DotControls(d3.color("blue").formatHex(), RADIUS_OPTS);
+const ctrl2 = new DotControls(d3.color("white").formatHex(), RADIUS_OPTS);
 
 
 const fg1 = view(ctrl1.fg);
@@ -87,6 +95,8 @@ ctrl1.null_grid();
 ctrl2.null_grid();
 palette_input.value = PALETTES.get(rpalette);
 palette_input.dispatchEvent(new Event("input"));
+cell_input.value = 5 + random.float() * random.float() * 55;
+cell_input.dispatchEvent(new Event("input"));
 ctrl1.random_grid();
 ctrl2.random_grid();
 
@@ -113,14 +123,26 @@ if( palette_fn ) {
 ```
 
 </div>
-<div>
+<div class="card grid-colspan-2">
 
 
 ```js
 
-const dots1 = dm.dots(1 / m1, n1, true);
+const width = WIDTH / cell;
-const dots2 = dm.dots(1 / m2, n2, true);
+const height = HEIGHT / cell;
 
+const dm = new DotMaker(width, height);
+
+const dots1 = dm.dots(1 / m1, n1, false);
+const dots2 = dm.dots(1 / m2, n2, false);
+
+
+```
+
+```js
+
+const rfunc1 = radius_func(f1);
+const rfunc2 = radius_func(f2);
 
 ```
   
@@ -129,9 +151,18 @@ const dots2 = dm.dots(1 / m2, n2, true);
 
 
 const svg = d3.create("svg")
-  .attr("width", WIDTH * CELL * MAG)
+  .attr("width", WIDTH * MAG)
-  .attr("height", HEIGHT * CELL * MAG)
+  .attr("height", HEIGHT * MAG)
-  .attr("viewBox", [ 0, 0, WIDTH, HEIGHT ]);
+  .attr("viewBox", [ 0, 0, width, height ]);
+
+
+svg.append("clipPath")
+    .attr("id", "clipRect")
+    .append("rect")
+    .attr("x", 0)
+    .attr("y", 0)
+    .attr("width", width)
+    .attr("height", height);
 
 
 // re transitions: they should only run when updating the palette and
@@ -151,14 +182,15 @@ bg_g.selectAll("rect")
   .join("rect")
   .attr("x", 0)
   .attr("y", 0)
-  .attr("width", WIDTH)
+  .attr("width", width)
-  .attr("height", WIDTH)
+  .attr("height", height)
   .attr("fill", (d) => d.bg)
 ;
 
 
 const dots_g1 = svg.append("g")
-  .attr("id", "dots1");
+  .attr("id", "dots1")
+  .attr("clip-path", "url(#clipRect)");
 
 dots_g1.selectAll("circle")
   .data(dots1)
@@ -168,7 +200,8 @@ dots_g1.selectAll("circle")
   .attr("fill", fg1);
 
 const dots_g2 = svg.append("g")
-  .attr("id", "dots2");
+  .attr("id", "dots2")
+  .attr("clip-path", "url(#clipRect)");
 
 dots_g2.selectAll("circle")
   .data(dots2)
@@ -184,8 +217,8 @@ display(svg.node());
 ```js
   // separate code block for when I understand transitions better
   
-  dots_g1.selectAll("circle").attr("r", (d) => dm.radius(d, f1, r1));
+  dots_g1.selectAll("circle").attr("r", (d) => rfunc1(d, r1, width, height));
-  dots_g2.selectAll("circle").attr("r", (d) => dm.radius(d, f2, r2));
+  dots_g2.selectAll("circle").attr("r", (d) => rfunc2(d, r2, width, height));
 
 ```
 
@@ -211,6 +244,7 @@ display(download(() => {
 ```
 (PNGs made with <a href="https://github.com/thx/resvg-js">resvg-wasm</a> in-browser)
 
+</div>
 </div>
 
 <style>