It is currently July 19th, 2019, 3:29 pm

ColorMatrix setting method and some usage examples

Tips and Tricks from the Rainmeter Community
User avatar
kenz0
Developer
Posts: 264
Joined: July 31st, 2009, 2:23 pm
Location: Tokyo, JPN

ColorMatrix setting method and some usage examples

kenz0 » March 3rd, 2010, 4:29 am

The following shows the actual matrix values of the brightness, contrast, and saturation.

Code: Select all

Brightness Matrix    Contrast Matrix         Saturation Matrix

     R G B A W           R G B A W            R   G   B   A   W

 R  [1 0 0 0 0]      R  [c 0 0 0 0]      R  [sr+s sr  sr  0   0]
 G  [0 1 0 0 0]      G  [0 c 0 0 0]      G  [ sg sg+s sg  0   0]
 B  [0 0 1 0 0]      B  [0 0 c 0 0]      B  [ sb  sb sb+s 0   0]
 A  [0 0 0 1 0]      A  [0 0 0 1 0]      A  [ 0   0   0   1   0]
 W  [b b b 0 1]      W  [t t t 0 1]      W  [ 0   0   0   0   1]

 b = brightness      c = contrast         s  = saturation
                     t = (1.0 - c) / 2.0  sr = (1 - s) * lumR
 Legend                                   sg = (1 - s) * lumG
 R = red                                  sb = (1 - s) * lumB
 G = green
 B = blue                                 lumR = 0.3086  or  0.2125
 A = alpha                                lumG = 0.6094  or  0.7154
 W = white                                lumB = 0.0820  or  0.0721
  • The brightness matrix is a simple translation matrix on the RGB elements.
  • The contrast matrix is a scaling matrix on the RGB elements. The extra translation parameters in the contrast matrix is used for shifting the base color (when c = 0)from black to gray.
  • The saturation matrix re-adjust the RGB color distribution so that at s = 0, R = G = B = luminance brightness in grayscale).
From the above information, we can calculate the proper color matrix to transform a given image. To use all three matrices, we need to multiply them together into one single transformation matrix (using matrix multiplication). The result of multiplication is as follows:

Code: Select all

     R G B A W            R G B A W             R   G   B   A   W

 R  [1 0 0 0 0]       R  [c 0 0 0 0]       R  [sr+s sr  sr  0   0]
 G  [0 1 0 0 0]       G  [0 c 0 0 0]       G  [ sg sg+s sg  0   0]
 B  [0 0 1 0 0]    X  B  [0 0 c 0 0]    X  B  [ sb  sb sb+s 0   0]
 A  [0 0 0 1 0]       A  [0 0 0 1 0]       A  [ 0   0   0   1   0]
 W  [b b b 0 1]       W  [t t t 0 1]       W  [ 0   0   0   0   1]

Brightness Matrix     Contrast Matrix          Saturation Matrix


                        R      G      B      A      W

                 R  [c(sr+s) c(sr)  c(sr)    0      0   ]
                 G  [ c(sg) c(sg+s) c(sg)    0      0   ]
         ===>    B  [ c(sb)  c(sb) c(sb+s)   0      0   ]
                 A  [   0      0      0      1      0   ]
                 W  [  t+b    t+b    t+b     0      1   ]

                           Transformation Matrix
If you want to know more about it, you can check out the MSDN Site for an excellent explanation on this topic in relation to the usage of the ColorMatrix object.

[Source from Code Project]


Applies above method to actual Rainmeter config:
You can set the value in [Variables] arbitrarily.
  • Default value:
  • Brightness = 0
  • Contrast = 1
  • Saturation = 1

Code: Select all

[Variables]
Brightness=-0.2
Contrast=1.2
Saturation=1.5

[b]
Measure=Calc
Formula=#Brightness#

[c]
Measure=Calc
Formula=#Contrast#

[s]
Measure=Calc
Formula=#Saturation#

[t+b]
Measure=Calc
Formula=((1.0-c)/2)+b

[c(sr)]
Measure=Calc
Formula=c*((1-s)*0.3086)

[c(sg)]
Measure=Calc
Formula=c*((1-s)*0.6094)

[c(sb)]
Measure=Calc
Formula=c*((1-s)*0.0820)

[c(sr+s)]
Measure=Calc
Formula=c*(((1-s)*0.3086)+s)

[c(sg+s)]
Measure=Calc
Formula=c*(((1-s)*0.6094)+s)

[c(sb+s)]
Measure=Calc
Formula=c*(((1-s)*0.0820)+s)

[Image]
Meter=IMAGE
ImageName=cats.jpg
ColorMatrix1=[c(sr+s)];[c(sr)];[c(sr)];0;0
ColorMatrix2=[c(sg)];[c(sg+s)];[c(sg)];0;0
ColorMatrix3=[c(sb)];[c(sb)];[c(sb+s)];0;0
ColorMatrix4=0;0;0;1;0
ColorMatrix5=[t+b];[t+b];[t+b];0;1
DynamicVariables=1
______________________________________________

Some examples of matrix values as color filter:

[Original]
Image

[Grayscale]
Image

Code: Select all

ColorMatrix1=0.33;0.33;0.33;0;0
ColorMatrix2=0.59;0.59;0.59;0;0
ColorMatrix3=0.11;0.11;0.11;0;0
[Invert]
Image

Code: Select all

ColorMatrix1=-1;0;0;0;0
ColorMatrix2=0;-1;0;0;0
ColorMatrix3=0;0;-1;0;0
ColorMatrix5=1;1;1;0;1
[Swap RGB to BGR]
Image

Code: Select all

ColorMatrix1=0;0;1;0;0
ColorMatrix2=0;1;0;0;0
ColorMatrix3=1;0;0;0;0
[Sepia Color]
Image

Code: Select all

ColorMatrix1=0.393;0.349;0.272;0;0
ColorMatrix2=0.769;0.686;0.534;0;0
ColorMatrix3=0.189;0.168;0.131;0;0
[B/W]
Image

Code: Select all

ColorMatrix1=1.5;1.5;1.5;0;0
ColorMatrix2=1.5;1.5;1.5;0;0
ColorMatrix3=1.5;1.5;1.5;0;0
ColorMatrix5=-1;-1;-1;0;1
[Polaroid Color]
Image

Code: Select all

ColorMatrix1=1.438;-0.062;-0.062;0;0
ColorMatrix2=-0.122;1.378;-0.122;0;0
ColorMatrix3=-0.016;-0.016;1.483;0;0
ColorMatrix5=-0.03;0.05;-0.02;0;1
[White to Alpha]
Image

Code: Select all

ColorMatrix1=1;0;0;-1;0
ColorMatrix2=0;1;0;-1;0
ColorMatrix3=0;0;1;-1;0
_________________________________________________

Additional Tips:

Now, I attempt to create a realistic old photo using ColorMatrix.

First, adjust each RGB matrix values and increase contrast slightly like this.

Image

Code: Select all

ColorMatrix1=0.25;0.25;0.25;0;0
ColorMatrix2=0.5;0.5;0.5;0;0
ColorMatrix3=0.125;0.125;0.125;0;0
ColorMatrix5=0.2;0.2;0.2;0;1
Next, find the image of such old paper and overlays it on the original image.

Image

Then, increase contrast of the old paper, and set alpha value of the whole image to 50%.

Code: Select all

ColorMatrix1=2;0;0;0;0
ColorMatrix2=0;2;0;0;0
ColorMatrix3=0;0;2;0;0
ColorMatrix4=0;0;0;0.5;0
ColorMatrix5=-0.1;-0.1;-0.1;0;1
Result,

Image

Full code is here:

Code: Select all

[Original]
Meter=IMAGE
ImageName=cats.jpg
X=0
Y=0
W=380
H=300
ColorMatrix1=0.25;0.25;0.25;0;0
ColorMatrix2=0.5;0.5;0.5;0;0
ColorMatrix3=0.125;0.125;0.125;0;0
ColorMatrix5=0.2;0.2;0.2;0;1

[OldPaper]
Meter=IMAGE
ImageName=oldpaper.jpg
X=0r
Y=0r
W=380
H=300
ColorMatrix1=2;0;0;0;0
ColorMatrix2=0;2;0;0;0
ColorMatrix3=0;0;2;0;0
ColorMatrix4=0;0;0;0.5;0
ColorMatrix5=-0.1;-0.1;-0.1;0;1
Last edited by kenz0 on March 4th, 2010, 12:16 am, edited 1 time in total.
.
Image
User avatar
maminscris
Posts: 522
Joined: April 24th, 2009, 3:17 pm
Location: Bucharest, Romania Lat 44,43° Lon 26,1°

Re: ColorMatrix setting method and some usage example

maminscris » March 3rd, 2010, 8:21 am

:shock: wow this should be in the manual
Zero at programing, zero at writing codes, so far 2 at making images
But I'm good at copy/paste, and I not always like this
Image
User avatar
jsmorley
Developer
Posts: 19294
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

Re: ColorMatrix setting method and some usage example

jsmorley » March 3rd, 2010, 1:37 pm

I will be adding this to tips and tricks on the main site as soon as I get a chance.
User avatar
killall-q
Posts: 285
Joined: August 14th, 2009, 8:04 am

Re: ColorMatrix setting method and some usage examples

killall-q » March 4th, 2010, 3:24 pm

Wow, now ColorMatrix is... easy.
User avatar
jsmorley
Developer
Posts: 19294
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

Re: ColorMatrix setting method and some usage examples

jsmorley » March 5th, 2010, 2:16 pm

User avatar
UNleash
Posts: 51
Joined: December 13th, 2009, 4:28 am
Location: North-West Germany

Re: ColorMatrix setting method and some usage examples

UNleash » March 6th, 2010, 1:29 am

You kidding, right? This isn't live and already implemeted?
:ugeek: :ugeek:

Nice, really. :thumbsu:
Image
burnwell88
Posts: 92
Joined: August 13th, 2009, 8:37 am

Re: ColorMatrix setting method and some usage examples

burnwell88 » June 13th, 2010, 10:34 am

WOW.....you got skills:D ... i have a question do ..... in adobe photoshop you have an efect on the layer called OVERLAY if you now about it .... is there any way to make that posible?

normal

overlay


this will defenetly improve the looks for the next generation skins :D .....
User avatar
kenz0
Developer
Posts: 264
Joined: July 31st, 2009, 2:23 pm
Location: Tokyo, JPN

Re: ColorMatrix setting method and some usage examples

kenz0 » June 13th, 2010, 10:54 am

Unfortunately, the effect like "blend mode" cannot be realized with ColorMatrix.
.
Image
User avatar
Chewtoy
Moderator
Posts: 1012
Joined: June 10th, 2009, 12:44 pm
Location: Sweden

Re: ColorMatrix setting method and some usage examples

Chewtoy » June 13th, 2010, 3:52 pm

If it's white, wouldn't you just have to turn down the alpha value to get an effect sort of like the blend effect?
I don't think, therefore I'm not.
User avatar
220v110
Posts: 26
Joined: February 17th, 2014, 1:33 pm

Re: ColorMatrix setting method and some usage examples

220v110 » November 20th, 2014, 5:48 pm

I found a great app to play with matrices:
http://arcanesanctum.net/colormatrix-viewer/