Added choice of colour space for colour matching

This commit is contained in:
Lucas Dower 2022-02-24 22:16:49 +00:00
parent 4f1975ccfe
commit 1818ab383a
3 changed files with 21 additions and 4 deletions

View File

@ -45,6 +45,7 @@
},
"dependencies": {
"@popperjs/core": "^2.9.3",
"color-convert": "^2.0.1",
"eslint-config-google": "^0.14.0",
"expand-vertex-data": "^1.1.2",
"jpeg-js": "^0.4.3",

View File

@ -75,8 +75,12 @@ export class UI {
{ id: 'on', displayText: 'On (recommended)' },
{ id: 'off', displayText: 'Off' },
]),
'colourSpace': new ComboBoxElement('Colour space', [
{ id: 'lab', displayText: 'LAB (recommended)' },
{ id: 'rgb', displayText: 'RGB' },
]),
},
elementsOrder: ['textureAtlas', 'blockPalette', 'dithering'],
elementsOrder: ['textureAtlas', 'blockPalette', 'dithering', 'colourSpace'],
submitButton: new ButtonElement('Assign blocks', () => {
AppContext.Get.do(Action.Palette);
}),

View File

@ -1,7 +1,10 @@
import { AppConfig } from './config';
import { Vector3 } from './vector';
const convert = require('color-convert');
import fs from 'fs';
import { UI } from './ui/layout';
export class UV {
public u: number;
@ -47,9 +50,18 @@ export class RGB {
}
public static distance(a: RGB, b: RGB): number {
const _a = a.toVector3();
const _b = b.toVector3();
return _a.sub(_b).magnitude();
const useLAB = UI.Get.layout.palette.elements.colourSpace.getCachedValue() === 'lab';
if (useLAB) {
const aLAB = convert.rgb.lab(a.r * 255, a.g * 255, a.b * 255);
const bLAB = convert.rgb.lab(b.r * 255, b.g * 255, b.b * 255);
const _a = Vector3.fromArray(aLAB);
const _b = Vector3.fromArray(bLAB);
return _a.sub(_b).magnitude();
} else {
const _a = a.toVector3();
const _b = b.toVector3();
return _a.sub(_b).magnitude();
}
}
public static get white(): RGB {