Transforming Colors with Matrices(lisyarus.github.io)

92 pointsby ibobevvor 2 Jahren11 comments

lisyarus.github.io

https://lisyarus.github.io/blog/posts/transforming-colors-with-matrices.html

12 comments

woolionvor 2 Jahren

You can use matrix multiplications through the CLI with Imagemagick, and it works pretty well. The only caveat is that intermediary number precision is low, so if you need multiple operations (like convert to one space, transform, convert back) you need to pre-compute the resulting matrix and apply that in one operation. It works well if you have only a definite number of transforms.

For example, the article "Computerized simulation of color appearance for dichromats" gives the matrix transforms to simulate "color-blindness". This gives this command:

`convert $input -color-matrix '0.11238 0.88759 0 0.11238 0.88762 0 0.004 -0.004 1' $input_dichrom.jpg`

With which one can quickly check if a map or graph would be readable by a color-blind person.

creatavor 2 Jahren

Tangent: To simulate color blindness in a webpage or image, you can also open it in Chrome or Firefox, and use the devtools.

zeroqvor 2 Jahren

When I started working with Flash and learned about color and transformation matrices I was blown away by how clever it is.

At a surface level you may think that having to use advanced mathemathics to change something as trivial as position or adding a tint might be an overkill. But matrix math isn't that complicated, been highly optimized and can be relegated to the CPU since forever.

The most illustrative use would be a model of a 3D tank. You want the whole tank to turn itself 30 degrees to the left, now you want the turret to turn 40 degrees right and you want the gun to be facing 20 degrees upwards. With matrices being applied on every level it's dead simple to calculate what's the actual bearing of the gun in world coordinates.

Same applies to graphics. You have a game character that's been hit. You want to make it flash to indicate the hit by changing it's brightness, but at the same time you want to turn it's eyes to red by adding a tint. Oh, and the whole screen is changing it's saturation during the process. Again, by using matrices, it's really easy to figure out what's the color of the eyes at any given moment of the animation thanks to matrices.

rectalogicvor 2 Jahren

You can apply color matrices to HTML elements by referencing an SVG feColorMatrix [1] from the filter [2] CSS property.

[1] https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feC...

[2] https://developer.mozilla.org/en-US/docs/Web/CSS/filter

Retr0idvor 2 Jahren

See also: Matrix Operations for Image Processing, Paul Haeberli, 1993

https://graficaobscura.com/matrix/

kevingaddvor 2 Jahren

For hue operations you could always apply the matrix in okhsl space and then convert back, at least.

pornelvor 2 Jahren

The conversion is pretty expensive, and very sensitive to numerical errors. Okay as a preprocessing step, but I'd strongly advise against doing it in a shader.

creatavor 2 Jahren

If you store the image in Lab coordinates, then converting back to RGB is two 3×3 matrix-vector multiplications and three cubes. The hue shift would be another 2×2 matrix-vector multiplication if you have (cos θ, sin θ). Is that that expensive?

(Obviously preprocessing would be a lot better if you can get away with it.)

pornelvor 2 Jahren

I think it changes the nature of this technique from a cheap simple trick – just one low-precision matmul – to a less general, many times more expensive, more complex computation.

To me that starts to feel wasteful, even if GPUs can churn through that anyway. If you're merely implementing a color tweak in a game you can come up with plenty of simpler formulas that look nice.

I've written oklab and okhsl implementations — that cube amplifies errors greatly. The full-precision cbrt makes it definitely a one-way thing for real-time graphics.

zokiervor 2 Jahren

I have a feeling that it would be good to these sort of transformations in perceptually uniform colorspace anyways. Ottosson has some examples of color blending in different color spaces: https://bottosson.github.io/posts/colorwrong/#comparisons

ameliusvor 2 Jahren

Is this how the cinematic color effects work?

arnab20kvor 2 Jahren