Merge pull request 'Better clipping for web' (#31) from feature-clip-web-version into main

Reviewed-on: #31

package-lock.json

@@ -7,6 +7,7 @@
       "dependencies": {
         "@observablehq/framework": "^1.13.0",
         "@resvg/resvg-js": "^2.6.2",
+        "await-spawn": "^4.0.2",
         "d3": "^7.9.0",
         "d3-color": "^3.1.0",
         "d3-color-difference": "^0.1.3",
@@ -1443,6 +1444,17 @@
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
       "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
     },
+    "node_modules/await-spawn": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/await-spawn/-/await-spawn-4.0.2.tgz",
+      "integrity": "sha512-GdADmeLJiMvGKJD3xWBcX40DMn07JNH1sqJYgYJZH7NTGJ3B1qDjKBKzxhhyR1hjIcnUGFUmE/+4D1HcHAJBAA==",
+      "dependencies": {
+        "bl": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/b4a": {
       "version": "1.6.7",
       "resolved": "https://registry.npmjs.org/b4a/-/b4a-1.6.7.tgz",
@@ -1459,6 +1471,25 @@
       "integrity": "sha512-Bw2PgKSrZ3uCuSV9WQ998c/GTJTd+9bWj97n7aDQMP8dP/exAZQlJeswPty0ISy+HZD+9Ex+C7CCnc9Q5QJFmQ==",
       "optional": true
     },
+    "node_modules/base64-js": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
     "node_modules/bidi-js": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/bidi-js/-/bidi-js-1.0.3.tgz",
@@ -1467,6 +1498,29 @@
         "require-from-string": "^2.0.2"
       }
     },
+    "node_modules/bl": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz",
+      "integrity": "sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==",
+      "dependencies": {
+        "buffer": "^5.5.0",
+        "inherits": "^2.0.4",
+        "readable-stream": "^3.4.0"
+      }
+    },
+    "node_modules/bl/node_modules/readable-stream": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
@@ -1475,6 +1529,29 @@
         "balanced-match": "^1.0.0"
       }
     },
+    "node_modules/buffer": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
+      "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "dependencies": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.1.13"
+      }
+    },
     "node_modules/bundle-name": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/bundle-name/-/bundle-name-4.1.0.tgz",
@@ -2572,6 +2649,25 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/ieee754": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
+      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
     "node_modules/immediate": {
       "version": "3.0.6",
       "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@observablehq/framework": "^1.13.0",
     "@resvg/resvg-js": "^2.6.2",
+    "await-spawn": "^4.0.2",
     "d3": "^7.9.0",
     "d3-color": "^3.1.0",
     "d3-color-difference": "^0.1.3",

poptimal.js

@@ -4,20 +4,22 @@ import { JSDOM } from "jsdom";
 import * as d3 from "d3";
 import yargs from "yargs/yargs";
 import { hideBin } from "yargs/helpers";
-
+import spawn from "await-spawn";
 import random from "random";
 
 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, DotMaker} from './src/components/dots.js';
-import {PALETTES, ColourNamer} from './src/components/palettes.js';
+import {RADIUS_OPTS, RADIUS_DESC, 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 HEIGHT = WIDTH;
+const VISIBLE_DOG = 1000;
 
 function randomise_params() {
 	const palette_name = random.choice(Array.from(PALETTES.keys()));
@@ -39,12 +41,66 @@ function randomise_params() {
 }
 
 
-function image_description(namer, params) {
-	const bgc = namer.colour_to_text(params.background);
-	const dotc = params.patterns.map((p) => namer.colour_to_text(p.colour));
-	const a = bgc.match(/^[aeiou]/) ? 'an' : 'a';
-	return `A pattern of ${dotc[0]} and ${dotc[1]} dots on ${a} ${bgc} background`;
+// lol the best way I found to to this was imagemagick!
 
+async function get_histogram(imgfile) {
+	try {
+		const bl = await spawn('convert', [ imgfile, '-format', '%c', 'histogram:info:' ]);
+		return parse_histogram(bl.toString());
+	} catch (e) {
+		console.log(e);
+	}
+}
+
+
+function parse_histogram(convert_out) {
+	const colour_re = /(\d+): \(\d+,\d+,\d+,\d+\) (#[A-F0-9]+) /;
+	const colours = new Map();
+	convert_out.split("\n").forEach((l) => {
+		const m = l.match(colour_re);
+		if( m ) {
+			const colour = m[2].substring(0, 7);
+			colours.set(colour, Number(m[1]));
+		}
+	});
+	return new Map([...colours].sort((a, b) => b[1] - a[1]));
+}
+
+
+function colour_visible(hist, colour) {
+	const hexcolour = colour.formatHex().toUpperCase();
+	return hist.get(hexcolour) > VISIBLE_DOG;
+}
+
+
+function image_description(namer, params, histogram) {
+	const colours = [
+		params.background,
+		params.patterns[0].colour,
+		params.patterns[1].colour,
+	];
+	const i_vis = [0, 1, 2].filter((i) => colour_visible(histogram, colours[i]));
+	const named_colours = i_vis.map((i) => namer.colour_to_text(colours[i]));
+	const gradients = i_vis.map((i) => {
+		if( i > 0 ) {
+			return RADIUS_DESC[params.patterns[i - 1].f];
+		} else {
+			return '';
+		}
+	});
+	if( named_colours.length == 1 ) {
+		return `A solid field of ${named_colours[0]}`;
+	}
+	if( named_colours.length > 1 ) {
+		const bgc = named_colours[0];
+		const a = bgc.match(/^[aeiou]/) ? 'an' : 'a';
+		const dot_desc = named_colours.slice(1);
+		const gs = gradients.slice(1);
+		const pattern_desc = dot_desc.map((d, i) => `${d} dots ${gs[i]}`); 
+		const patterns = pattern_desc.join(' and ');
+		return `A pattern of ${patterns} on ${a} ${bgc} background`;
+	}
+	return "";
 }
 
 
@@ -69,7 +125,7 @@ function poptimal_svg(params) {
 
 
 	params.patterns.map((p) =>  {
-		const dots = dm.dots(1 / p.m, p.n);
+		const dots = dm.dots(1 / p.m, p.n, false);
 		const dots_g = svg.append("g")
 	  			.attr("id", `dots${p.i}`);
 	
@@ -124,6 +180,7 @@ async function post_image(image, alt_text, cf) {
 
 }
 
+
 async function main() {
 	const argv = yargs(hideBin(process.argv))
 		.usage("Usage: -s SIZE -o output.png -c config.json")
@@ -140,13 +197,11 @@ async function main() {
   	const imgfile = cf['working_dir'] + '/' + fn;
 
 	const params = randomise_params();
-	console.log(params.palette);
 	const colourf = params.palette === 'grayscale' ? cf['grayscale'] : cf['colour'];
 
 	const namer = new ColourNamer();
 	await namer.load_colours(colourf);
 
-	const alt_text = image_description(namer, params);
 
 	const svg = poptimal_svg(params);
 	const opts = {
@@ -161,9 +216,16 @@ async function main() {
  	const pngData = resvg.render();
   	const pngBuffer = pngData.asPng();
 
+
   	await promises.writeFile(imgfile, pngBuffer);
-	console.log(imgfile);
+
+  	// generate the alt_text last to check the image file histogram
+  	// so we don't include obscured colours
+  	const hist = await get_histogram(imgfile);
+	const alt_text = image_description(namer, params, hist);
+
 	console.log(alt_text);
+	console.log(imgfile);
   	if( cf['base_url'] ) {
   		await post_image(imgfile, alt_text, cf);
   	}

src/components/colour_namer.js

@@ -0,0 +1,39 @@
+
+import { promises } from "fs";
+import * as d3 from "d3-color";
+import * as d3cd from "d3-color-difference";
+
+
+class ColourNamer {
+	constructor() {
+		this.colmap = new Map();
+	}
+
+	async load_colours(colourfile) {
+		const colourBuff = await promises.readFile(colourfile);
+		const colours = colourBuff.toString();
+		const seen = new Set(); 
+		colours.split(/\n/).map((l) => {
+			const m = l.match(/(\d+)\s+(\d+)\s+(\d+)\s+(.*)/);
+			if( m ) {
+				const sig = `${m[1]},${m[2]},${m[3]}`;
+				if( !seen.has(sig) ) {
+					this.colmap.set(m[4], d3.rgb(m[1], m[2], m[3]));
+					seen.add(sig);
+				}
+			}
+		});
+	}
+
+	colour_to_text(d3color) {
+		const diffs = []
+		for( const [ name, colour] of this.colmap) {
+			diffs.push({name: name, dist: d3cd.differenceCie76(colour, d3color)});
+		}
+		diffs.sort((a, b) => a.dist - b.dist);
+		return diffs[0].name;
+	}
+}
+
+
+export { ColourNamer}

src/components/dots.js

@@ -16,6 +16,21 @@ const RADIUS_OPTS = [
 	"noise",
 ];
 
+const RADIUS_DESC = {
+	"const": "of constant size",
+	"right": "getting larger towards the right",
+	"left": "getting larger towards the left",
+	"up": "getting larger towards the top",
+	"down": "getting larger towards the bottom",
+	"right-up": "getting larger towards the upper right",
+	"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",
+	"out": "getting larger at the edges",
+	"noise": "of random sizes",
+}
+
 function distance(dx, dy) {
 	return Math.sqrt(dx ** 2 + dy ** 2);
 }
@@ -23,8 +38,8 @@ function distance(dx, dy) {
 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]);
+	const low = Math.floor(vs[0] - 1);
+	const high = Math.ceil(vs[1] + 1);
 	return [...Array(high - low + 1).keys()].map((i) => i + low);
 }
 
@@ -35,7 +50,7 @@ class DotMaker {
 		this.cy = 0.5 * width;
 	}
 
-	dots(m, n) {
+	dots(m, n, clip) {
 		if( m - n === 0 ) {
 			return [];
 		}
@@ -46,7 +61,7 @@ class DotMaker {
 			js.map((j) => {
 				const x = (j - m * i) / (m - n);
 				const y = m * (x + i);
-				if( x > 0 && y > 0 && x < this.width && y < this.width ) {
+				if( !clip || (x > 0 && y > 0 && x < this.width && y < this.width) ) {
 					ps.push({i:i, j:j, x:x, y:y});
 				}
 			});
@@ -92,6 +107,6 @@ class DotMaker {
 	}
 }
 
-export { RADIUS_OPTS, DotMaker };
+export { RADIUS_OPTS, RADIUS_DESC, DotMaker };
 
 

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/components/palettes.js

@@ -2,9 +2,7 @@
 import * as d3 from "d3-color";
 import shuffle from "lodash.shuffle";
 import random from "random";
-import { promises } from "fs";
 
-import * as d3cd from "d3-color-difference";
 
 const PALETTES = new Map([
 	[ "random RGB", palette_random ], 
@@ -78,36 +76,6 @@ function palette_cmy() {
 	return shuffle(cols);
 }
 
-class ColourNamer {
-	constructor() {
-		this.colmap = new Map();
-	}
-
-	async load_colours(colourfile) {
-		const colourBuff = await promises.readFile(colourfile);
-		const colours = colourBuff.toString();
-		const seen = new Set(); 
-		colours.split(/\n/).map((l) => {
-			const m = l.match(/(\d+)\s+(\d+)\s+(\d+)\s+(.*)/);
-			if( m ) {
-				const sig = `${m[1]},${m[2]},${m[3]}`;
-				if( !seen.has(sig) ) {
-					this.colmap.set(m[4], d3.rgb(m[1], m[2], m[3]));
-					seen.add(sig);
-				}
-			}
-		});
-	}
-
-	colour_to_text(d3color) {
-		const diffs = []
-		for( const [ name, colour] of this.colmap) {
-			diffs.push({name: name, dist: d3cd.differenceCie76(colour, d3color)});
-		}
-		diffs.sort((a, b) => a.dist - b.dist);
-		return diffs[0].name;
-	}
-}
 
 
-export { PALETTES, ColourNamer }
+export { PALETTES }

src/index.md

@@ -8,7 +8,7 @@ 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.1.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>
 
 <div class="grid grid-cols-2">
 
@@ -118,8 +118,8 @@ if( palette_fn ) {
 
 ```js
 
-const dots1 = dm.dots(1 / m1, n1);
-const dots2 = dm.dots(1 / m2, n2);
+const dots1 = dm.dots(1 / m1, n1, false);
+const dots2 = dm.dots(1 / m2, n2, false);
 
 
 ```
@@ -134,6 +134,15 @@ const svg = d3.create("svg")
   .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
 // grid, not via the sliders
 
@@ -158,7 +167,8 @@ bg_g.selectAll("rect")
 
 
 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 +178,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)