diff --git a/package-lock.json b/package-lock.json index 7e6b89a..9051999 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index 58600cf..3fb1144 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/poptimal.js b/poptimal.js index 187517c..a98fcf1 100644 --- a/poptimal.js +++ b/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); diff --git a/src/components/palettes.js b/src/components/palettes.js index 7d01ac5..3b0db99 100644 --- a/src/components/palettes.js +++ b/src/components/palettes.js @@ -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 }