Comments (4)
Test
I did a quick logging test on my browser.
function dE94(x1, x2, weights) {
this.x1 = x1;
this.x2 = x2;
this.weights = weights || {};
this.weights.lightness = this.weights.lightness || 1;
this.weights.chroma = this.weights.chroma || 1;
this.weights.hue = this.weights.hue || 1;
if (1 === this.weights.lightness) {
this.weights.K1 = 0.045;
this.weights.K2 = 0.015;
} else {
this.weights.K1 = 0.048;
this.weights.K2 = 0.014;
}
}
/**
* Returns the dE94 value.
* @method
* @returns {number}
*/
dE94.prototype.getDeltaE = function() {
var x1 = this.x1;
var x2 = this.x2;
var sqrt = Math.sqrt;
var pow = Math.pow;
console.log(this.calculateL(x1, x2), this.calculateA(x1, x2), this.calculateB(x1, x2));
return sqrt(
pow(this.calculateL(x1, x2), 2) +
pow(this.calculateA(x1, x2), 2) +
pow(this.calculateB(x1, x2), 2)
);
};
/**
* Calculates the lightness value.
* @method
* @returns {number}
*/
dE94.prototype.calculateL = function(x1, x2) {
return (x1.L - x2.L) / this.weights.lightness;
};
/**
* Calculates the chroma value.
* @method
* @returns {number}
*/
dE94.prototype.calculateA = function(x1, x2) {
var sqrt = Math.sqrt;
var pow = Math.pow;
//top
var c1 = sqrt(pow(x1.A, 2) + pow(x1.B, 2));
var c2 = sqrt(pow(x2.A, 2) + pow(x2.B, 2));
var cab = c1 - c2;
// bottom
var sc = 1 + (this.weights.K1 * c1);
return cab / (this.weights.chroma * sc);
};
/**
* Calculates the hue value.
* @method
* @returns {number}
*/
dE94.prototype.calculateB = function(x1, x2) {
var sqrt = Math.sqrt;
var pow = Math.pow;
// cab
var c1 = sqrt(pow(x1.A, 2) + pow(x1.B, 2));
var c2 = sqrt(pow(x2.A, 2) + pow(x2.B, 2));
var cab = c1 - c2;
// top
var a = x1.A - x2.A;
var b = x1.B - x2.B;
var hab = sqrt(
pow(a, 2) +
pow(b, 2) -
pow(cab, 2)
);
console.log("HAB", pow(a, 2) +
pow(b, 2) -
pow(cab, 2), hab, pow(a, 2) +
pow(b, 2),
pow(cab, 2));
// bottom
var c1 = sqrt(pow(x1.A, 2) + pow(x1.B, 2));
var sh = 1 + (this.weights.K2 * c1);
console.log(hab, sh);
return hab / sh;
};
(new dE94({
L: 53.23288178584245,
A: 80.10930952982204,
B: 67.22006831026425
},
{
L: 50.9588099835815,
A: 77.47798295202801,
B: 65.01211079141827
})).getDeltaE()
HAB -6.394884621840902e-14 NaN 11.798955964033755 11.79895596403382
NaN 2.568632776599043
2.2740718022609485 0.6020017603282479 NaN
HAB -6.394884621840902e-14 NaN 11.798955964033755 11.79895596403382
NaN 2.568632776599043
NaN
Problem
And it turned out to be due to floating-point errors in the calculation. What was supposed to be 0 couldn’t but -0.00000000000006394884621840902
, which caused Math.sqrt
to return a NaN
.
Solution
I suggest an error-tolerant square-rooting static method value => (Math.sqrt(value) || 0)
.
from deltae.
Wow, thanks for doing that. Great work!
I'm in the process of moving across the country so I don't have much time to review this for a couple weeks. I'll take a look as soon as I can though!
from deltae.
Thanks again for the detailed explanation, that was helpful! I pushed an update to handle the sqrt issue in eE94 and also added a Mocha test to test for the issue. New release in 0.0.8 is live.
I also toyed around with using a couple workarounds to make floating-point safe calculations, but all of the options were convoluted and impacted performance. I'm not opposed to addressing that again but it seems out of scope for the common use case of this package.
Btw: the move across the country went great. The east coast is wonderful 👍
from deltae.
I took a brief look, the A calculation specifically is causing the issue:
https://github.com/zschuessler/DeltaE/blob/master/src/dE94.js#L79
When I clamp the number of your colors by a tenths position it works correctly. I would assume a rounding problem. If you find out let me know, if not I'll come back to this when I have free time.
from deltae.
Related Issues (8)
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from deltae.