Can now load params from the JSON

poptimal.js

@@ -2,6 +2,7 @@ import {  Resvg } from "@resvg/resvg-js";
 import { promises } from "fs";
 import { JSDOM } from "jsdom";
 import * as d3 from "d3";
+import * as d3c from "d3-color";
 import yargs from "yargs/yargs";
 import { hideBin } from "yargs/helpers";
 import spawn from "await-spawn";
@@ -19,7 +20,9 @@ const CELL = 10;
 const MAG = 2;
 const WIDTH = 20;
 const HEIGHT = WIDTH;
-const VISIBLE_DOG = 1000;
+// number of pixels which have to be visible for a colour to be
+// mentioned in the alt text
+const VISIBLE_DOG = 400;
 
 function randomise_params() {
 	const palette_name = random.choice(Array.from(PALETTES.keys()));
@@ -40,6 +43,28 @@ function randomise_params() {
 	}
 }
 
+async function load_or_random_params(paramf) {
+	if( paramf ) {
+		const pjson = await promises.readFile(paramf);
+  		const params = JSON.parse(pjson);
+		params.background = d3c.color(params.background);
+		params.patterns.forEach((p) => {
+			p.colour = d3c.color(p.colour);
+		});	
+		return params;
+	}
+	return randomise_params();
+}
+
+async function save_params(paramf, params) {
+	params.background = params.background.formatHex();
+	params.patterns.forEach((p) => {
+		p.colour = p.colour.formatHex();
+	});
+	await promises.writeFile(paramf, JSON.stringify(params));
+}
+
+
 
 // lol the best way I found to to this was imagemagick!
 
@@ -183,23 +208,26 @@ 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")
+		.usage("Usage: -s SIZE [-o output] -c config.json [-p params.json]")
 		.default('s', 1200)
 		.default('c', 'config.json').argv;
 
 	const cfjson = await promises.readFile(argv.c);
   	const cf = JSON.parse(cfjson);
 
+        const ts = String(Date.now());
 
-
-  	const fn = argv.o || String(Date.now()) + '.png';
+  	const fn = (argv.o || ts) + '.png';
+	const jsfn = (argv.o || ts) + '.json';
 
   	const imgfile = cf['working_dir'] + '/' + fn;
+	const paramsfile = cf['working_dir'] + '/' + jsfn;
 
-	const params = randomise_params();
+	const params = await load_or_random_params(argv.p);
 	const colourf = params.palette === 'grayscale' ? cf['grayscale'] : cf['colour'];
 
 	const namer = new ColourNamer();
+	console.log(`Loading colours ${colourf}`);
 	await namer.load_colours(colourf);
 
 
@@ -216,7 +244,6 @@ async function main() {
  	const pngData = resvg.render();
   	const pngBuffer = pngData.asPng();
 
-
   	await promises.writeFile(imgfile, pngBuffer);
 
   	// generate the alt_text last to check the image file histogram
@@ -224,6 +251,7 @@ async function main() {
   	const hist = await get_histogram(imgfile);
 	const alt_text = image_description(namer, params, hist);
 
+	await save_params(paramsfile, params);
 	console.log(alt_text);
 	console.log(imgfile);
   	if( cf['base_url'] ) {

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: 1200,
+        value: 400,
       }
     };
   const resvgJS = new resvg.Resvg(svgstr, opts)

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.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>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>
 
 <div class="grid grid-cols-2">
 
@@ -118,8 +118,8 @@ if( palette_fn ) {
 
 ```js
 
-const dots1 = dm.dots(1 / m1, n1, false);
-const dots2 = dm.dots(1 / m2, n2, false);
+const dots1 = dm.dots(1 / m1, n1, true);
+const dots2 = dm.dots(1 / m2, n2, true);
 
 
 ```
@@ -134,15 +134,6 @@ 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
 
@@ -167,8 +158,7 @@ bg_g.selectAll("rect")
 
 
 const dots_g1 = svg.append("g")
-  .attr("id", "dots1")
-  .attr("clip-path", "url(#clipRect)");
+  .attr("id", "dots1");
 
 dots_g1.selectAll("circle")
   .data(dots1)
@@ -178,8 +168,7 @@ dots_g1.selectAll("circle")
   .attr("fill", fg1);
 
 const dots_g2 = svg.append("g")
-  .attr("id", "dots2")
-  .attr("clip-path", "url(#clipRect)");
+  .attr("id", "dots2");
 
 dots_g2.selectAll("circle")
   .data(dots2)