zschuessler / DeltaE

CIE color difference formulas in JavaScript
http://zschuessler.github.io/DeltaE
The Unlicense
260 stars 25 forks source link

Should DeltaE return numbers over 100? #1

Closed jonjhiggins closed 7 years ago

jonjhiggins commented 7 years ago

Hi

Reading http://zschuessler.github.io/DeltaE/learn/ it states that "Delta E value will range from 0 to 100". If I compare an orange and black using the following the code:

// Create two test LAB color objects to compare!
var color1 = {L: 100, A: 110, B: 110};
var color2 = {L: 0, A: 0, B: 0};

// 1976 formula
console.log(DeltaE.getDeltaE76(color1, color2));

// 1994 formula
console.log(DeltaE.getDeltaE94(color1, color2));

// 2000 formula
console.log(DeltaE.getDeltaE00(color1, color2));

I get the following results:

184.9324200890693
101.87291711716631
105.80638169501458

i.e. over 100 - is this a bug or is it valid to return values over 100?

I need to convert the value returned by DeltaE to a decimal so need to know what it's upper limit is (currently I artificially cap it at 100).

Thanks Jon

zschuessler commented 7 years ago

Hi Jon,

I've noticed this too in working with every formula. Some polar opposite colors (often dealing with black) will rank higher than normal, especially with the earlier formulas that don't measure hue very well.

Which orange were you working with? I'll duplicate and check if any unforeseen issues are happening.

jonjhiggins commented 7 years ago

Thanks Zachary. I was using an orange of values L: 100, A: 110, B: 110 On a side note, I've had some success using your formula to knock out the green on a green screened car, however having some issues with green remaining in dark areas such as shadows. We weren't sure if that was due to my clamping of the values to 100 or if we needed to use the "L" value to do some more aggressive filtering of green in dark areas. Cheers Jon On 10 Nov 2016 1:30 a.m., Zachary Schuessler notifications@github.com wrote:Hi Jon,

I've noticed this too in working with every formula. Some polar opposite colors (often dealing with black) will rank higher than normal, especially with the earlier formulas that don't measure hue very well.

Which orange were you working with? I'll duplicate and check if any unforeseen issues are happening.

—You are receiving this because you authored the thread.Reply to this email directly, view it on GitHub, or mute the thread.

zschuessler commented 7 years ago

Using other third party tools confirms the dE value returned by DeltaE is correct. Clamping should be fine in this case, as anything >=100 is considered exact opposite by all formulas.

In addition to the normal check for pure green you may be doing already, you might have to custom tailor some logic for colors on the darker spectrum. I've noticed the same thing in the DeltaE demo for OK GO's video and had to custom tailor the values a bit. Also should note only dE00 will be accurate in that scenario (demo uses dE76)

If it's open source link me to it, I"ll throw a link to your project up in the demos area! :)

jonjhiggins commented 7 years ago

Thanks for clearing that up, I'll stick with the clamping at 100.

I'm currently stuck with the darker spectrum issue (purple edges on http://codepen.io/jonjhiggins/pen/vyGQzr), as I was hoping to get it to work for a screen of any colour, and just using once colour difference comparison but it looks like that might not be possible. My colleague suggested I used easing or weighted the de76 formula to eat more heavily in the screen colour in darker areas but I haven't had any luck yet.

Otherwise I might return to a WebGL version I got part way through (borrowing bits from Seriously.js)

zschuessler commented 7 years ago

Thanks for the demo Jon!

So I ran into that issue with this demo: http://zschuessler.github.io/DeltaE/demos/de76-chroma-key/

In the code you'll see that I'm doing three samples: one for light green, a normal green, and a darker green. That actually works pretty well (it could use some more fine tuning sure, but works as a demo) So instead of relying on one color, sample several (or more).

Having several samples does ramp up the amount of CPU resources required, which is why the demo is small (less pixels to traverse). Any much larger than the given resolution, I noticed stuttering.

GPU access will resolve your issues. I did look into Seriouslyjs a bit for another demo, but looked like it required a bit more rampup as I'm not familiar with the technologies involved.

Hope my information helps! Please do share anything you create and I'll link it!