[HN Gopher] Transforming Colors with Matrices
___________________________________________________________________
Transforming Colors with Matrices
Author : ibobev
Score : 88 points
Date : 2024-10-11 09:56 UTC (3 days ago)
(HTM) web link (lisyarus.github.io)
(TXT) w3m dump (lisyarus.github.io)
| Retr0id wrote:
| See also: Matrix Operations for Image Processing, Paul Haeberli,
| 1993
|
| https://graficaobscura.com/matrix/
| zeroq wrote:
| 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.
| kevingadd wrote:
| For hue operations you could always apply the matrix in okhsl
| space and then convert back, at least.
| pornel wrote:
| 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.
| creata wrote:
| If you store the image in Lab coordinates, then converting
| back to RGB is two 3x3 matrix-vector multiplications and
| three cubes. The hue shift would be another 2x2 matrix-vector
| multiplication if you have (cos th, sin th). Is that _that_
| expensive?
|
| (Obviously preprocessing would be a lot better if you can get
| away with it.)
| zokier wrote:
| 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
| woolion wrote:
| 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.
| creata wrote:
| Tangent: To simulate color blindness in a webpage or image, you
| can also open it in Chrome or Firefox, and use the devtools.
| amelius wrote:
| Is this how the cinematic color effects work?
| rectalogic wrote:
| 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
___________________________________________________________________
(page generated 2024-10-14 23:02 UTC)