poptimal.js

@@ -2,7 +2,6 @@ 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";
@@ -18,11 +17,9 @@ import {ColourNamer} from './src/components/colour_namer.js';
 
 const CELL = 10;
 const MAG = 2;
-const WIDTH = 200;
+const WIDTH = 20;
 const HEIGHT = WIDTH;
-// number of pixels which have to be visible for a colour to be
+const VISIBLE_DOG = 1000;
-// mentioned in the alt text
-const VISIBLE_DOG = 400;
 
 function randomise_params() {
 	const palette_name = random.choice(Array.from(PALETTES.keys()));
@@ -36,37 +33,13 @@ 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,
 	}
 }
 
-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!
 
@@ -136,21 +109,18 @@ function poptimal_svg(params) {
 	const document = window.document;
 	const container = d3.select(document.body).append("div");
 
-	const width = WIDTH / params.cell;
+	const dm = new DotMaker(WIDTH);
-	const height = WIDTH / params.cell;
-
-	const dm = new DotMaker(width, height);
 
 	const svg = container.append("svg")
-	  .attr("width", WIDTH * MAG)
+	  .attr("width", WIDTH * CELL * MAG)
-	  .attr("height", HEIGHT * MAG)
+	  .attr("height", HEIGHT * CELL * 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", height)
+	  .attr("height", WIDTH)
 	  .attr("fill", params.background);
 
 
@@ -213,22 +183,20 @@ async function post_image(image, alt_text, cf) {
 
 async function main() {
 	const argv = yargs(hideBin(process.argv))
-		.usage("Usage: -s SIZE [-o output] -c config.json [-p params.json]")
+		.usage("Usage: -s SIZE -o output.png -c config.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 || ts) + '.png';
+
-	const jsfn = (argv.o || ts) + '.json';
+  	const fn = argv.o || String(Date.now()) + '.png';
 
   	const imgfile = cf['working_dir'] + '/' + fn;
-	const paramsfile = cf['working_dir'] + '/' + jsfn;
 
-	const params = await load_or_random_params(argv.p);
+	const params = randomise_params();
 	const colourf = params.palette === 'grayscale' ? cf['grayscale'] : cf['colour'];
 
 	const namer = new ColourNamer();
@@ -248,14 +216,14 @@ 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
   	// 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);
   	if( cf['base_url'] ) {

src/components/dots.js

@@ -45,6 +45,7 @@ function int_range(v1, v2) {
 
 class DotMaker {
 	constructor(width, height) {
+		console.log(width, height);
 		this.width = width;
 		this.height = height;
 		this.wh = 0.5 * (width + height);

src/index.md

@@ -144,8 +144,8 @@ const dots2 = dm.dots(1 / m2, n2, false);
 
 
 const svg = d3.create("svg")
-  .attr("width", WIDTH * MAG)
+  .attr("width", width * cell * MAG)
-  .attr("height", HEIGHT * MAG)
+  .attr("height", height * cell * MAG)
   .attr("viewBox", [ 0, 0, width, height ]);