Compare commits
No commits in common. "main" and "feature-better-colour-names" have entirely different histories.
main
...
feature-be
96
package-lock.json
generated
96
package-lock.json
generated
@ -7,7 +7,6 @@
|
||||
"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",
|
||||
@ -1444,17 +1443,6 @@
|
||||
"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",
|
||||
@ -1471,25 +1459,6 @@
|
||||
"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",
|
||||
@ -1498,29 +1467,6 @@
|
||||
"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",
|
||||
@ -1529,29 +1475,6 @@
|
||||
"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",
|
||||
@ -2649,25 +2572,6 @@
|
||||
"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",
|
||||
|
||||
@ -11,7 +11,6 @@
|
||||
"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",
|
||||
|
||||
86
poptimal.js
86
poptimal.js
@ -4,22 +4,20 @@ 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, RADIUS_DESC, DotMaker} from './src/components/dots.js';
|
||||
import {PALETTES} from './src/components/palettes.js';
|
||||
import {ColourNamer} from './src/components/colour_namer.js';
|
||||
import {RADIUS_OPTS, 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()));
|
||||
@ -41,66 +39,12 @@ function randomise_params() {
|
||||
}
|
||||
|
||||
|
||||
// lol the best way I found to to this was imagemagick!
|
||||
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`;
|
||||
|
||||
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 "";
|
||||
}
|
||||
|
||||
|
||||
@ -125,7 +69,7 @@ function poptimal_svg(params) {
|
||||
|
||||
|
||||
params.patterns.map((p) => {
|
||||
const dots = dm.dots(1 / p.m, p.n, false);
|
||||
const dots = dm.dots(1 / p.m, p.n);
|
||||
const dots_g = svg.append("g")
|
||||
.attr("id", `dots${p.i}`);
|
||||
|
||||
@ -180,7 +124,6 @@ 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")
|
||||
@ -197,11 +140,13 @@ 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 = {
|
||||
@ -216,16 +161,9 @@ 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);
|
||||
|
||||
console.log(alt_text);
|
||||
console.log(imgfile);
|
||||
console.log(alt_text);
|
||||
if( cf['base_url'] ) {
|
||||
await post_image(imgfile, alt_text, cf);
|
||||
}
|
||||
|
||||
@ -1,39 +0,0 @@
|
||||
|
||||
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}
|
||||
@ -16,21 +16,6 @@ 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);
|
||||
}
|
||||
@ -38,8 +23,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] - 1);
|
||||
const high = Math.ceil(vs[1] + 1);
|
||||
const low = Math.floor(vs[0]);
|
||||
const high = Math.ceil(vs[1]);
|
||||
return [...Array(high - low + 1).keys()].map((i) => i + low);
|
||||
}
|
||||
|
||||
@ -50,7 +35,7 @@ class DotMaker {
|
||||
this.cy = 0.5 * width;
|
||||
}
|
||||
|
||||
dots(m, n, clip) {
|
||||
dots(m, n) {
|
||||
if( m - n === 0 ) {
|
||||
return [];
|
||||
}
|
||||
@ -61,7 +46,7 @@ class DotMaker {
|
||||
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( x > 0 && y > 0 && x < this.width && y < this.width ) {
|
||||
ps.push({i:i, j:j, x:x, y:y});
|
||||
}
|
||||
});
|
||||
@ -107,6 +92,6 @@ class DotMaker {
|
||||
}
|
||||
}
|
||||
|
||||
export { RADIUS_OPTS, RADIUS_DESC, DotMaker };
|
||||
export { RADIUS_OPTS, DotMaker };
|
||||
|
||||
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -2,7 +2,9 @@
|
||||
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 ],
|
||||
@ -76,6 +78,36 @@ 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 }
|
||||
export { PALETTES, ColourNamer }
|
||||
|
||||
21
src/index.md
21
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);
|
||||
const dots2 = dm.dots(1 / m2, n2);
|
||||
|
||||
|
||||
```
|
||||
@ -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)
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user