From cbfcb53a8ca575aaa7cbe6c47ffc854650b16727 Mon Sep 17 00:00:00 2001 From: Mike Lynch Date: Sun, 23 Mar 2025 13:00:41 +1100 Subject: [PATCH 1/2] Dammit I am reading colour histograms from ImageMagick like a daub --- package-lock.json | 97 +++++++++++++++++++++++++++++++++++++++++++++++ package.json | 1 + poptimal.js | 57 +++++++++++++++++++++++++++- 3 files changed, 153 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index 9051999..6fd86f8 100644 --- a/package-lock.json +++ b/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", @@ -79,6 +80,7 @@ }, "node_modules/@clack/prompts/node_modules/is-unicode-supported": { "version": "1.3.0", + "extraneous": true, "inBundle": true, "license": "MIT", "engines": { @@ -1443,6 +1445,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 +1472,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 +1499,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 +1530,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 +2650,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", diff --git a/package.json b/package.json index 3fb1144..109fca0 100644 --- a/package.json +++ b/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", diff --git a/poptimal.js b/poptimal.js index c065242..7a2f1a7 100644 --- a/poptimal.js +++ b/poptimal.js @@ -4,7 +4,7 @@ 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/"; @@ -39,6 +39,36 @@ function randomise_params() { } +// 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 ) { + console.log(m[1], m[2]); + const colour = m[2].substring(0, 6); + colours.set(colour, Number(m[1])); + } else { + console.log(`no match ${l}`); + } + }); + return new Map([...colours].sort((a, b) => b[1] - a[1])); +} + + + 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)); @@ -124,6 +154,22 @@ async function post_image(image, alt_text, cf) { } +function survey_pixels(pngData) { + const pixbuf = pngData.pixels; + const pixels = Array.from(pixbuf); + const colours = {}; + for( let i = 0; i += 3; i < pixels.length ) { + const hex = `${pixels[i]},${pixels[i + 1]},${pixels[i + 2]}`; + if( ! hex in colours ) { + colours[hex] = 0; + } + colours[hex]++; + } + console.log(colours); + +} + + async function main() { const argv = yargs(hideBin(process.argv)) .usage("Usage: -s SIZE -o output.png -c config.json") @@ -146,7 +192,6 @@ async function main() { const namer = new ColourNamer(); await namer.load_colours(colourf); - const alt_text = image_description(namer, params); const svg = poptimal_svg(params); const opts = { @@ -161,7 +206,15 @@ 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); + console.log(hist); + const alt_text = image_description(namer, params, imgfile); + console.log(imgfile); console.log(alt_text); if( cf['base_url'] ) { From 03c87f21de87da3291602d46fdf0db90b0cc639f Mon Sep 17 00:00:00 2001 From: Mike Lynch Date: Sun, 23 Mar 2025 17:33:04 +1100 Subject: [PATCH 2/2] Now describes the directions of the gradients --- poptimal.js | 69 ++++++++++++++++++++++++------------------ src/components/dots.js | 17 ++++++++++- 2 files changed, 55 insertions(+), 31 deletions(-) diff --git a/poptimal.js b/poptimal.js index 7a2f1a7..ff2a093 100644 --- a/poptimal.js +++ b/poptimal.js @@ -11,13 +11,14 @@ 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 {RADIUS_OPTS, RADIUS_DESC, DotMaker} from './src/components/dots.js'; import {PALETTES, ColourNamer} from './src/components/palettes.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())); @@ -52,29 +53,54 @@ async function get_histogram(imgfile) { function parse_histogram(convert_out) { - const colour_re = /(\d+): \(\d+,\d+,\d+,\d+\) #([A-F0-9]+) /; + 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 ) { - console.log(m[1], m[2]); - const colour = m[2].substring(0, 6); + const colour = m[2].substring(0, 7); colours.set(colour, Number(m[1])); - } else { - console.log(`no match ${l}`); } }); return new Map([...colours].sort((a, b) => b[1] - a[1])); } +function colour_visible(hist, colour) { + const hexcolour = colour.formatHex().toUpperCase(); + console.log(colour, hexcolour, hist.get(hexcolour)); + return hist.get(hexcolour) > VISIBLE_DOG; +} -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`; +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 ""; } @@ -154,21 +180,6 @@ async function post_image(image, alt_text, cf) { } -function survey_pixels(pngData) { - const pixbuf = pngData.pixels; - const pixels = Array.from(pixbuf); - const colours = {}; - for( let i = 0; i += 3; i < pixels.length ) { - const hex = `${pixels[i]},${pixels[i + 1]},${pixels[i + 2]}`; - if( ! hex in colours ) { - colours[hex] = 0; - } - colours[hex]++; - } - console.log(colours); - -} - async function main() { const argv = yargs(hideBin(process.argv)) @@ -186,7 +197,6 @@ 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(); @@ -212,11 +222,10 @@ async function main() { // generate the alt_text last to check the image file histogram // so we don't include obscured colours const hist = await get_histogram(imgfile); - console.log(hist); - const alt_text = image_description(namer, params, imgfile); + const alt_text = image_description(namer, params, hist); - console.log(imgfile); console.log(alt_text); + console.log(imgfile); if( cf['base_url'] ) { await post_image(imgfile, alt_text, cf); } diff --git a/src/components/dots.js b/src/components/dots.js index 03d2e9e..d767b6a 100644 --- a/src/components/dots.js +++ b/src/components/dots.js @@ -16,6 +16,21 @@ const RADIUS_OPTS = [ "noise", ]; +const RADIUS_DESC = { + "const": "of constant size", + "right": "getting larger towards the left", + "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); } @@ -92,6 +107,6 @@ class DotMaker { } } -export { RADIUS_OPTS, DotMaker }; +export { RADIUS_OPTS, RADIUS_DESC, DotMaker };