Clarification about how ColorMatrix transformations work

Question

I'm doing some work on an image processing app (for fun) and am struggling to fully understand how ColorMatrix transformations work. I get the basics of linear/affine transformations, and can get by just fine by replicating examples online, but I'd like to fully grasp why something works instead of just being satisfied that it works.

For example, doing a simple transformation on an image to produce its negative (each color is converted to its respective complimentary) uses the following matrix:

[-1, 0, 0, 0, 0]
[0, -1, 0, 0, 0]
[0, 0, -1, 0, 0]
[0, 0, 0, 1, 0]
[1, 1, 1, 0, 1]

I understand that -1 is the cosine of 180degrees, which is the rotation needed to "flip" a color to it's complementary, but what I don't understand is how a color vector can be multiplied against the above matrix and produce the correct complementary vector.

For instance, if a pixel has the color vector of [247, 255, 0, 255, 1] (using the RGBAW space), performing the multiplication against the above matrix produces [-247, -255, 0, 255, 1], but that isn't correct since the real complementary color of the above is [8, 0, 255, 255, 1].

I'm missing something obvious here and am happy to admit that I'm not completely sure what I'm doing :) Is the color vector being transformed represented in some other coordinate system? (e.g. not 0-255)

If anyone could help provide the "missing link" of my understanding, I'd be really appreciative.

Edit

I just discovered that the following matrix also works and is actually mathemtically intuitive (it produces the correct vector).

-1  0  0  0  0
 0 -1  0  0  0
 0  0 -1  0  0
 1  1  1  1  0
 0  0  0  0  1

So my new question is: why do both of these matrices work? The latter one provides me with the more satisfying solution since I can grasp why it works from an algebraic perspective. Is the four row used for scaling? And if so, why does scaling add 255? Where does it get that value from?

Sorry if these are really stupid questions, I'm trying to get this down pat.

Knickerbockers

You are forgetting then 1-s in the bottom row. They get added (scaled 255). 255 + -247 = 8. – Clavicytherium

Really? I thought the bottom row was for translation not scaling? – Knickerbockers

I don't understand why that would work since the actual matrix algebra wouldn't produce 8. Is the ColorMatrix class applying special rules to certain bits in the matrix? – Knickerbockers

Answer 1

You are correct that the bottom line is for translation. What Hans is saying in his comment is that there's a scaling factor of 255 involved, which is probably what's confusing you. One way to look at this is that all ARGB values are first divided by 255, then the matrix multiplication is applied and then all values are multiplied back by 255 to give the correct ARGB values. Another way to look at it is to think of the translation values being 255 as big. You will arrive at the same result both ways.

((247/255) * -1 + 1) * 255 = 8
or
247 * -1 + 255 = 8

Apposition

Does that scaling happen to keep the value between 0 and 1? – Knickerbockers

One other question: why does the second matrix in my post (added via edit) also work? Does the 4th row do translation as well? – Knickerbockers

1) Yes. 2) It adds the value of the alpha channel multiplied by 1. And since your alpha channel is (in the case) 255, then you happen to get the same behaviour. :-) – Valdavaldas