Writing my own colour name picker
This commit is contained in:
parent
6395ea973d
commit
88755feac4
20
package-lock.json
generated
20
package-lock.json
generated
@ -9,9 +9,9 @@
|
||||
"@resvg/resvg-js": "^2.6.2",
|
||||
"d3": "^7.9.0",
|
||||
"d3-color": "^3.1.0",
|
||||
"d3-color-difference": "^0.1.3",
|
||||
"d3-dsv": "^3.0.1",
|
||||
"d3-time-format": "^4.1.0",
|
||||
"hex-color-to-color-name": "^1.0.2",
|
||||
"jsdom": "^26.0.0",
|
||||
"lodash.shuffle": "^4.2.0",
|
||||
"random": "^5.1.1",
|
||||
@ -1766,6 +1766,19 @@
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-color-difference": {
|
||||
"version": "0.1.3",
|
||||
"resolved": "https://registry.npmjs.org/d3-color-difference/-/d3-color-difference-0.1.3.tgz",
|
||||
"integrity": "sha512-yAGiVdTZR/wpI66n85xvkTvjxFth0IuGrEeX/anl1Q5rzNc2/V7oOjoJdqQnahOuS+SgbAR0zu8T0SYY7hGTtw==",
|
||||
"dependencies": {
|
||||
"d3-color": "^1.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-color-difference/node_modules/d3-color": {
|
||||
"version": "1.4.1",
|
||||
"resolved": "https://registry.npmjs.org/d3-color/-/d3-color-1.4.1.tgz",
|
||||
"integrity": "sha512-p2sTHSLCJI2QKunbGb7ocOh7DgTAn8IrLx21QRc/BSnodXM4sv6aLQlnfpvehFMLZEfBc6g9pH9SWQccFYfJ9Q=="
|
||||
},
|
||||
"node_modules/d3-contour": {
|
||||
"version": "4.0.2",
|
||||
"resolved": "https://registry.npmjs.org/d3-contour/-/d3-contour-4.0.2.tgz",
|
||||
@ -2482,11 +2495,6 @@
|
||||
"he": "bin/he"
|
||||
}
|
||||
},
|
||||
"node_modules/hex-color-to-color-name": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/hex-color-to-color-name/-/hex-color-to-color-name-1.0.2.tgz",
|
||||
"integrity": "sha512-YKPBFTSbYIHH8YKcJB4Q5PV+Tr+kvDXpV60BcPMUu5CSZUcc/qOOx7lkr7luk6MSXKd5A82yfPGZTgedIdQ+aA=="
|
||||
},
|
||||
"node_modules/highlight.js": {
|
||||
"version": "11.11.1",
|
||||
"resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.11.1.tgz",
|
||||
|
@ -13,9 +13,9 @@
|
||||
"@resvg/resvg-js": "^2.6.2",
|
||||
"d3": "^7.9.0",
|
||||
"d3-color": "^3.1.0",
|
||||
"d3-color-difference": "^0.1.3",
|
||||
"d3-dsv": "^3.0.1",
|
||||
"d3-time-format": "^4.1.0",
|
||||
"hex-color-to-color-name": "^1.0.2",
|
||||
"jsdom": "^26.0.0",
|
||||
"lodash.shuffle": "^4.2.0",
|
||||
"random": "^5.1.1",
|
||||
|
17
poptimal.js
17
poptimal.js
@ -12,9 +12,7 @@ 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} from './src/components/palettes.js';
|
||||
|
||||
import { GetColorName } from "hex-color-to-color-name";
|
||||
import {PALETTES, colour_to_text} from './src/components/palettes.js';
|
||||
|
||||
const CELL = 10;
|
||||
const MAG = 2;
|
||||
@ -40,12 +38,6 @@ function randomise_params() {
|
||||
}
|
||||
}
|
||||
|
||||
function colour_to_text(d3color) {
|
||||
const rawname = GetColorName(d3color.formatHex()).toLowerCase();
|
||||
// some return values are things like "cyan / aqua": take the first
|
||||
const parts = rawname.split(/\//);
|
||||
return parts[0].trim();
|
||||
}
|
||||
|
||||
function image_description(params) {
|
||||
const bgc = colour_to_text(params.background);
|
||||
@ -138,6 +130,13 @@ async function main() {
|
||||
.default('s', 1200)
|
||||
.default('c', 'config.json').argv;
|
||||
|
||||
if( argv.t ) {
|
||||
const blue = d3.rgb(0, 0, 255);
|
||||
const name = await colour_to_text(blue, "./rgb.txt");
|
||||
console.log(name);
|
||||
process.exit();
|
||||
}
|
||||
|
||||
const cfjson = await promises.readFile(argv.c);
|
||||
const cf = JSON.parse(cfjson);
|
||||
|
||||
|
@ -2,6 +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 ],
|
||||
@ -75,4 +78,33 @@ function palette_cmy() {
|
||||
return shuffle(cols);
|
||||
}
|
||||
|
||||
export { PALETTES }
|
||||
async function parse_colours(colourfile) {
|
||||
const colourBuff = await promises.readFile(colourfile);
|
||||
const colours = colourBuff.toString();
|
||||
const colmap = new Map();
|
||||
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) ) {
|
||||
colmap.set(m[4], d3.rgb(m[1], m[2], m[3]));
|
||||
seen.add(sig);
|
||||
}
|
||||
}
|
||||
});
|
||||
return colmap;
|
||||
}
|
||||
|
||||
async function colour_to_text(d3color, colourfile) {
|
||||
const colours = await parse_colours(colourfile);
|
||||
const diffs = []
|
||||
for( const [ name, colour] of colours) {
|
||||
diffs.push({name: name, dist: d3cd.differenceCie76(colour, d3color)});
|
||||
}
|
||||
diffs.sort((a, b) => a.dist - b.dist);
|
||||
return diffs[0].name;
|
||||
}
|
||||
|
||||
|
||||
export { PALETTES, colour_to_text }
|
||||
|
Loading…
x
Reference in New Issue
Block a user