How to compare multiple colors to one another

[TK289]

Hi,
Im currently writing a script for Photoshop in Extendscript. Now Im trying to figure out, how to compare colors to each other. I've mostly tried to stick to wikipedias article about comparing colors and using a weighed eucledian algorithm to get a distance which indicates their difference. Comparing 2 colors is no problem with that.

But in my script I have 3 Inputs (Most common color, second most common color, and the third most common color). Now if I want to compare this to their aquivalent part, lets say I have a Main_tile with their 3 Inputs and a Tile_file with 3 Inputs, I can compare (Common to common, second common to second common..), which seems to work fine.

My question is what happens if my Tile_file has only 1 Input, how do I compare it to the Main_tile?

Example: 3 Main, 1 Tile color given. I could pick the most common main color only and compare most common to most common but this number would always be lower than comparing 3x3 colors to one another, so I would pick the lowest number, hence the lowest color difference, which is not really what I want. Any ideas on this topic?

I tried to make everything clear, but if theres something unclear just tell me!

Thanks in advance for the help!

[c.pfaffenbichler]

Quite frankly the math is beyond me but I do not even understand what you mean exactly by

Most common color, second most common color, and the third most common color

How do you determine those and do you factor in some tolerance?

And what do you mean when you say the tile may have only one color – is I really just a flat color or …?

Some screenshots might help illustrate.

[TK289]

Currently I cant provide screenshots, but I'll try to further elaborate what I mean:

Im using the Photoshop colorpicker to get the average colors from a picture. Then I sort them and I get returned the most common color from a picture and so on.
Now I can compare them with another picture and if theyre equal, I will paste them in (Im creating a Photomosaic).

But if the picture im providing is pure black (0,0,0), I wont get a second most common color.
My question is, how do I compare them with the other picture which might have (20,20,30, 40,30,20, 10,20,30) ?
Only comparing (20,20,30 to 0,0,0) doenst make any sense, right?

[Chuck Uebele]

As far as I can tell, if you have fewer colors, you need to include either an if statement or a switch to run code that only compares a certain number of colors.

[TK289]

Yes. Which certain colors do I compare?

[c.pfaffenbichler]

Im using the Photoshop colorpicker to get the average colors from a picture.

How do you do that exactly?

[TK289]

c.pfaffenbichler  schrieb

Im using the Photoshop colorpicker to get the average colors from a picture.

How do you do that exactly?

You simply add a colorsampler then use two for loops to move them in your desired x,y coordinates and then you sample the colors with colorsampler.color.rgb.red etc. and save them to an array.

function mostDominantColor() {
theString = new String;
var customHeight = Math.round(app.activeDocument.height / 10);
var customWidth = Math.round(app.activeDocument.width / 10);
var theSampler = app.activeDocument.colorSamplers.add([0.0, 0.0]);
// Move color sampler
for (var y = 0; y < app.activeDocument.height; y += customHeight) {
for (var x = 0; x < app.activeDocument.width; x += customWidth) {
theSampler.move([x, y]);
theString = theString + String(Math.round(theSampler.color.rgb.red)) + "," + String(Math.round(theSampler.color.rgb.green)) + "," + String(Math.round(theSampler.color.rgb.blue)) + ";";
}
}
app.activeDocument.colorSamplers.removeAll();
// Collect values, from string   
while (theString.length > 1) {
var theNumber = 0;
var theValue = theString.slice(0, theString.indexOf(";") + 1);
while (theString.indexOf(theValue) != -1) {
theString = theString.replace(theValue, "");
theNumber++;
}
theResult.push([theValue.slice(0, -1), theNumber])
}
// Sort a double array
function sortArrayByIndexedItem(a, b) {
var theIndex = 1;
if (a[theIndex] > b[theIndex]) return -1;
if (a[theIndex] < b[theIndex]) return 1;
return 0;
}
// Final results
theResult.sort(sortArrayByIndexedItem);
theResult.join("\n");
// Take best three colors only
colorComb = new Array;
for (var i = 0; i < 3; i++) {
colorComb.push(theResult);
}
theResult = [];

Here's the code, if you need it!

[c.pfaffenbichler]

Isn’t that fairly slow with images that are not extremely small themselves?

If you are willing to use Lab values one one Paul Riggott’s Scripts might help sopped up the process;

Easy way to extract all pixel Lab values - plea... | Adobe Community

And you are actually looking for the colors of individual pixels, not for hue »fields« or some such?

[TK289]

Not particulary! I didn't measure it but I would say less then a second for analyzing the tiles. So it seems fine for the moment. Paul Riggott's Script looks really interesting, I'll look deeper into it later, thank you!

I've tested the photomosaic with a few small pictures and the color analyzing and comparison seem to work fine, but not for every tile:

(Please dont mind the black frame)

As you can see most of the sample images are placed properly in their tile (there's a resize function missing, so it's not stretched to the tile size yet).

Two things which seem to be kinda off:
1. Analyzing the blue tiles give me more than one most dominant color, theyre both pretty close though. I was thinking that it was because the function mostDominantColor gets too close to the edge and thus gets a brighter color from yellow or a darker from green?

2. Using the weigthed eucledian algorithm puts the pink doc image over the blue tile on the top right. Any ideas why? The distance is about 20 off to the blue clock, could that be the cause from the problem mentioned above?

I would appreciate your thoughts on this!
The full code is kinda long, so I dont think posting everything in here makes sense. I hope I could make it understandable, if not feel free to tell me!

PS: Using Lab makes sense I guess, but If possible I'd really like to stick to my rgb functions.

Edit:Individual pixels: Yes. The script looks for individual pixels only. I was thinking of using the color sampler with a sample size of 10x10, but I havent figured out how to do so yet. I'd like to try that, if any of you have a hint for me how to do it in Extendscript!

[c.pfaffenbichler]

Another thing: I think the Sampler should be at (0.5, 0.5).

Does it make a difference in your measurements?

2. Using the weigthed eucledian algorithm puts the pink doc image over the blue tile on the top right. Any ideas why? The distance is about 20 off to the blue clock, could that be the cause from the problem mentioned above?

I am unsure what you mean by »puts the pink doc image over the blue tile on the top right« as I don’t know the listing parameters and the intended order.

1. Analyzing the blue tiles give me more than one most dominant color, theyre both pretty close though.

What is »dominant« exactly – more than a certain percentage of the total number of pixels, simply the most numerous RGB value combination, …?

[TK289]

"I think the Sampler should be at (0.5, 0.5)." - I tried changing it, but that doesnt change anything. It is the first color Sampler added, so this position is only concerning the very first one (I cant move the sampler, without adding one colorSampler first).

"I am unsure what you mean by »puts the pink doc image over the blue tile on the top right« as I don’t know the listing parameters and the intended order." - If you look at the blue buttom tiles (the two in the background, the sample image with the blue clock) is properly placed on the blue tile. But if you look on the top right blue tile, the pink DOC picture got placed in there, which should be the blue clock.

"What is »dominant« exactly – more than a certain percentage of the total number of pixels, simply the most numerous RGB value combination, …?" - Yes exactly! As you can see I divded the picture in customHeight = doc.height / 10 and the customWidth = doc.width / 10. Which means 10 pixel per line * 10 pixel per column. So from 100 colorsamplers im taking the one rgb value which appears the most. (I guess I really need a way to implement using 10x10 average pixels as one colorsampler, but I havent figured out how to do that just yet).

Thank you for the link, I'll definetely look into it!
Im terribly sorry for only being able to provide the information part per part. I hope my intention is not too confusing though, really appreciate the help!!

[Chuck Uebele]

I don't know about that.

[c.pfaffenbichler]

Maybe you should check out this thread:

https://www.ps-scripts.com/viewtopic.php?t=7743&start=10