From 547baa958618a00a1ff57bba3e0ce31aff6bbaff Mon Sep 17 00:00:00 2001 From: Mike Lynch Date: Wed, 26 Mar 2025 18:32:26 +1100 Subject: [PATCH 1/2] Moved ColourNamer to its own file as it was breaking the web version --- poptimal.js | 6 +++--- src/components/colour_namer.js | 39 ++++++++++++++++++++++++++++++++++ src/components/palettes.js | 34 +---------------------------- 3 files changed, 43 insertions(+), 36 deletions(-) create mode 100644 src/components/colour_namer.js diff --git a/poptimal.js b/poptimal.js index ff2a093..80b7414 100644 --- a/poptimal.js +++ b/poptimal.js @@ -12,7 +12,8 @@ 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, ColourNamer} from './src/components/palettes.js'; +import {PALETTES} from './src/components/palettes.js'; +import {ColourNamer} from './src/components/colour_namer.js'; const CELL = 10; const MAG = 2; @@ -68,7 +69,6 @@ function parse_histogram(convert_out) { function colour_visible(hist, colour) { const hexcolour = colour.formatHex().toUpperCase(); - console.log(colour, hexcolour, hist.get(hexcolour)); return hist.get(hexcolour) > VISIBLE_DOG; } @@ -125,7 +125,7 @@ function poptimal_svg(params) { params.patterns.map((p) => { - const dots = dm.dots(1 / p.m, p.n); + const dots = dm.dots(1 / p.m, p.n, false); const dots_g = svg.append("g") .attr("id", `dots${p.i}`); diff --git a/src/components/colour_namer.js b/src/components/colour_namer.js new file mode 100644 index 0000000..9b9561d --- /dev/null +++ b/src/components/colour_namer.js @@ -0,0 +1,39 @@ + +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} \ No newline at end of file diff --git a/src/components/palettes.js b/src/components/palettes.js index e9a2c27..a10a6fa 100644 --- a/src/components/palettes.js +++ b/src/components/palettes.js @@ -2,9 +2,7 @@ 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 ], @@ -78,36 +76,6 @@ 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, ColourNamer } +export { PALETTES } From b789f4fd993f8ac00da57f2b5cb3739d1ca261dc Mon Sep 17 00:00:00 2001 From: Mike Lynch Date: Wed, 26 Mar 2025 18:32:54 +1100 Subject: [PATCH 2/2] Now patterns in the bot version go all the way to the edges --- src/components/dots.js | 8 ++++---- src/index.md | 4 ++-- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/dots.js b/src/components/dots.js index 3a066d3..5372353 100644 --- a/src/components/dots.js +++ b/src/components/dots.js @@ -38,8 +38,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]); - const high = Math.ceil(vs[1]); + const low = Math.floor(vs[0] - 1); + const high = Math.ceil(vs[1] + 1); return [...Array(high - low + 1).keys()].map((i) => i + low); } @@ -50,7 +50,7 @@ class DotMaker { this.cy = 0.5 * width; } - dots(m, n) { + dots(m, n, clip) { if( m - n === 0 ) { return []; } @@ -61,7 +61,7 @@ class DotMaker { js.map((j) => { const x = (j - m * i) / (m - n); const y = m * (x + i); - if( x > 0 && y > 0 && x < this.width && y < this.width ) { + if( !clip || (x > 0 && y > 0 && x < this.width && y < this.width) ) { ps.push({i:i, j:j, x:x, y:y}); } }); diff --git a/src/index.md b/src/index.md index df8d3ae..133451b 100644 --- a/src/index.md +++ b/src/index.md @@ -118,8 +118,8 @@ if( palette_fn ) { ```js -const dots1 = dm.dots(1 / m1, n1); -const dots2 = dm.dots(1 / m2, n2); +const dots1 = dm.dots(1 / m1, n1, true); +const dots2 = dm.dots(1 / m2, n2, true); ```