Giter VIP home page Giter VIP logo

Comments (4)

issuefiler avatar issuefiler commented on July 17, 2024 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).

The visualized problem

from deltae.

zschuessler avatar zschuessler commented on July 17, 2024 1

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.

zschuessler avatar zschuessler commented on July 17, 2024 1

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.

zschuessler avatar zschuessler commented on July 17, 2024

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 photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.