If statement for Colour

[Dan Ebberts]

Like this maybe:


c1 = "292B2B";
c2 = "FFFFFF";
v = value;
c = ((Math.round(v[0]*255)*256 + Math.round(v[1]*255))*256 + Math.round(v[2]*255)).toString(16);
if (c == c1.toLowerCase())
hexToRgb(c2)
else if (c == c2.toLowerCase())
hexToRgb(c1)
else
value


Dan

[Alan Boro]

Thank you for the help.

I am trying to understand how color is managed by After Effects when used in expressions.

When I paste that code in my colour parameter, it doesn’t work, I’m trying to understand why that is.

Is, the value return of the hexToRgb function, already between 0 and 1? or I have to further divide the return value by /255 in order to get its correspondent floating point?

[Alan Boro]

[Dan Ebberts]

Ah. That would be more like this:


c1 = "292B2B";
c2 = "FFFFFF";
v = thisComp.layer("Shape Layer 1").content("Rectangle 1").content("Fill 1").color;
c = ((Math.round(v[0]*255)*256 + Math.round(v[1]*255))*256 + Math.round(v[2]*255)).toString(16);
if (c == c1.toLowerCase())
hexToRgb(c2)
else if (c == c2.toLowerCase())
hexToRgb(c1)
else
value


Dan

[Alan Boro]

Thank you for your time DAN.

I’m struggling a bit trying to understand what the C variable does.

I gather that the result of the V variable is an array of 4 values [x,x,x,x].

then the C grabs each “position” (leaving the last one out, the alpha) and multiplies 255 times and then 256 times. I don’t understand this step.

Then it converts the output to a string of 16 characters?

How would the expression be, if I used rgb arrays instead of Hex colour?
c1 being [0.2,0.2,0.2,1] and
c2 being [1,1,1,1] ?

[Dan Ebberts]

The v variable is the shape’s rgba color array where each color channel is a value between 0 and 1. In the c variable calculation, each color channel value is converted to an integer value between 0 and 255 (by multiplying by 255 and rounding) the red channel is essentially moved 16 bits to the left (by multiplying by 256 twice), the green channel moved 8 bits to the left and the blue channel is left in the right-most 8 bits, then the whole thing is converted to hex so it can be compared to your hex values.

Specifying your colors as rgba arrays would completely change the calculation because you would then be comparing arrays of floating point values rather than hex integers so you might run into issues where the values don’t quite match exactly, so you might have check for values being within a certain range of each other (like .001 or .0001).

Dan

[Alan Boro]

Wow, very clever solution Dan. I’ve also noticed how you take your time to help a lot of people around here, so thank you!
at least it is to my newbie eyes!

I write your expression inside the color parameter of the fill efect on my text layer, but it doesn’t seem to recognize it.

I made sure that the box layer has the same name and everything.

It outputs this:

[Dan Ebberts]

What version of After Effects are you using? I don’t remember when hexToRgb() came in, but I think it’s fairly recent.

Dan

[Alan Boro]

If that function is not available in my version, then I guess I’ll have to work somehow with the RGB arrays o the HSL values?

Its incredible how after effects allows the user to do incredible things with one button, but when trying to compare two colours for an “if” statement is somehow so complex!

[Dan Ebberts]

I guess you could create your own conversion function:


function hexToRgb(theHex){
var r = parseInt(theHex.substr(0,2),16);
var g = parseInt(theHex.substr(2,2),16);
var b = parseInt(theHex.substr(4,2),16);
return [r/255,g/255,b/255,1];
}
c1 = "292B2B";
c2 = "FFFFFF";
v = thisComp.layer("Shape Layer 1").content("Rectangle 1").content("Fill 1").color;
c = ((Math.round(v[0]*255)*256 + Math.round(v[1]*255))*256 + Math.round(v[2]*255)).toString(16);
if (c == c1.toLowerCase())
hexToRgb(c2)
else if (c == c2.toLowerCase())
hexToRgb(c1)
else
value


Dan