ColorMatrix - For the colorblind... [Resolved]

[pax]

Hi Guy's and Gal's.

Does anyone have a link to a good tutorial about ColorMatrix?
I have tried to read about it on MSDN, but it went straight over my head. I need something for someone on the stage before beginners

It's my impression, that if one understands the colormatrix, one can do some very nice image manipulation.

Thank's in advance.

[pax]

Ok. I found this function on CodeProject by MrPolite (thank you MrPolite) to make an image greyscale.

And in my little test i set an image with RGB=30,130,170.
That ends up with RGB=105,105,105.

Can someone please explain the math behind this?

I can figure out that if a matrix look like this :
0.5 0.0 0.0
0.0 0.5 0.0
0.0 0.0 0.5

The RGB will just be multiplied by 0.5 each.

But in this example the matrix looks like this:
0.299 0.299 0.299
0.587 0.587 0.587
0.114 0.114 0.114

I can't, for the life of me, figure out how that is multiplied/diveded so each of my RGB values ends up with 105.

Any, and all help is greatly appreciated.

Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
        Dim B As New Bitmap(PictureBox1.Width, PictureBox1.Height)
        Dim G As Graphics = Graphics.FromImage(B)
        G.Clear(Color.FromArgb(30, 130, 170))
 
        PictureBox1.Image = B.Clone
 
        G.Dispose()
        B.Dispose()
 
    End Sub
 
    Public Shared Function MakeImageGrayscale(ByVal bmp As Bitmap) As Bitmap
        Dim B As New Bitmap(bmp.Width, bmp.Height)
 
        Dim cMatrix As New ColorMatrix(New Single()() _
                    {New Single() {0.299, 0.299, 0.299, 0, 0}, _
                    New Single() {0.587, 0.587, 0.587, 0, 0}, _
                    New Single() {0.114, 0.114, 0.114, 0, 0}, _
                    New Single() {0, 0, 0, 1, 0}, _
                    New Single() {0, 0, 0, 0, 1}})
 
        Dim imageAttrib As New ImageAttributes()
        imageAttrib.SetColorMatrix(cMatrix)
 
 
        Dim gr As Graphics = Graphics.FromImage(B)
        ' Apply the grayscale image attribute
        gr.DrawImage(bmp, New Rectangle(0, 0, bmp.Width, bmp.Height), _
          0, 0, bmp.Width, bmp.Height, GraphicsUnit.Pixel, imageAttrib)
        gr.Dispose()
 
        Return B
    End Function
 
    Private Sub PictureBox1_MouseUp(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles PictureBox1.MouseUp
        Dim B As Bitmap = PictureBox1.Image
 
        Dim C As Color = B.GetPixel(e.X, e.Y)
 
        Me.Text = C.ToString
 
    End Sub
 
    Private Sub Button2_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button2.Click
        PictureBox1.Image = MakeImageGrayscale(PictureBox1.Image)
 
    End Sub

[pax]

Hi

Never mind the previous posts. Right after i turned off my pc, I smacked my forehead at how obvious it were.

"Forest? What forest?...All I can see are trees!!!"

[jovton]

not as abvious to me yet

[pax]

Hi.

It's hard to explain in writing but I will give it a try...

But unfortunatly, noone can be told what The Matrix is...Morpheus

...So let's see how deep the rabit hole is.

The matrix is a grid of factor to multiply with (at least the first 4x4)

R R R R R
G G G G G
B B B B B
A A A A A
D D D D D

R,G,B is the RGB values, and A is the alpha channel, D is an offset you can apply afterwards.

So in the example above usin 30,130,170 as RGB will result in 105,105,105 like this :

The matrix looks like this :
0.299 0.299 0.299
0.587 0.587 0.587
0.114 0.114 0.114

So in the first row 30 will be multiplied by 0.299
130 will be multipied by 0.587
170 will be multiplied by 0.144
Adding these three results will return in a RED channel of 105 (104.66 to be exact)

The second row is identical, so the GREEN channel = 105

And the same for the BLUE.

So first you run the RGB values through the first column to get the RED channel.
then you run the RGB values through the second coloumn to get the GREEN channel, and finally you run the RGB values through the third column to get the BLUE channel.

The fourth column is the alphachannel.
So to make an image semi-transparent you would use a matrix like this :
1.0 0.0 0.0 0.0 0.0
0.0 1.0 0.0 0.0 0.0
0.0 0.0 1.0 0.0 0.0
0.0 0.0 0.0 0.5 0.0
0.0 0.0 0.0 0.0 1.0

This way only then Alphapart of the image is affected because the RED channel would be the same as R*1, then GB values would not be affected etc.

To invert an image you would use a matrix like this :

-1. 0.0 0.0 0.0 0.0
0.0 -1. 0.0 0.0 0.0
0.0 0.0 -1. 0.0 0.0
0.0 0.0 0.0 1.0 0.0
1.0 1.0 1.0 0.0 1.0

the last row of 1's means that a 100% percent will be added meaning that if R=30 then R=(30*-1)+255, meaing that R has been inverted. the same goes for G and B values.

As I said, it very hard to put in writing, but I really hope this have helped you out. A matrix isn't really that hard to use, once you understand the math behind it.

[jovton]

PAX, you're the one!