C# - ColorMatrix v1.5

This C# application demonstrates the effect of using the ColorMatrix operator on an image. This program contains several sample matrix filters which you can select and modify. The top portion of the program interface contains three images. A background image, an overlay and the result of applying the color matrix on the overlay rendered on top of the background image. Each of the three panels display their image over a checkerboard background to make it easier to see partial transparent areas (alpha < 255). The bottom section of the interface shows the active color matrix filter on the left and a gallery of pre-built filters on the right.

Program Features include:

    float[][] dataArray;    // fill with filter values...
    float gamma = 1.0f;     // no change in gamma
    ImageAttributes imageAttributes = new ImageAttributes();
    imageAttributes.ClearColorMatrix();
    imageAttributes.SetColorMatrix(new ColorMatrix(dataArray), 
        ColorMatrixFlag.Default, ColorAdjustType.Bitmap);
    imageAttributes.SetGamma(gamma, ColorAdjustType.Bitmap);

    Rectangle rect = new Rectangle(Point.Empty, image.Size);
    g.DrawImage(image, rect, 0, 0, image.Width, image.Height, GraphicsUnit.Pixel, imageAttributes);

  

As an image is rendered using the color matrix, each pixel color channel (Red, Green, Blue, Alpha) is transformed by the color matrix. The color matrix transformation executes several math operations on the pixel color.

	out(r,g,b,a) = (in(r,g,b,a)/255 * matrix_scale + matrix_offset) * 255

The color matrix is applied to every pixel in the image as it is drawn into the graphics buffer. The following figure shows how a single source pixel is converted to a single destination pixel. Futher down I show specific sample matrix filters.

Modify Color Matrix

If you change cells, press the Apply button to apply the new matrix to the overlay image. If you use the slider bar, it will automatically apply the changes.

You can save your color matrix by pressing the Save... button. The matrix is saved as an XML file with a copy of the current result image. I provide a Filter directory where sample filters are stored.

Unit matrix which leaves the image with its original colors.

In all of these examples, the color matrix is only applied to the 2nd image (overlay). The first image is the background, second is the overlay, and third is the result of drawing the overlay with the color matrix over the background image.

The 4 numbers under the source column is a sample Red,Green,Blue,Alpha pixel value. The 4 numbers under the destination column is the result of applying the matrix to the sample source pixel.

Source		Matrix		Destination
10 20 30 40	*	1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0	=	10 20 30 40		Background Overlay Bg + Overlay(colorMatrix) + =

Example of the unit matrix which shifts colors.

Source		Matrix		Destination
10 20 30 40	*	0 1 0 0 0 0 0 1 0 0 1 0 0 0 0 0 0 0 1 0 0 0 0 0 0	=	30 10 20 40	Background Overlay Bg + Overlay(colorMatrix) + =

Example to exclude all colors but green and invert green magnitude.

Source		Matrix		Destination
10 20 30 40	*	0 0 0 0 0 0 -1 0 0 0 0 0 0 0 0 0 0 0 1 0 0 1 0 0 0	=	0 245 00 40	Background Overlay Bg + Overlay(colorMatrix) + =

Example matrix to blend 50% of overlay image using alpha.

destColor = overlayColor * alphaPercent + backgroundColr * (100% - alphaPercent)

Example with Alpha=60%:

	Overlay	Background	Equation	Result
Red	10	20	10*0.6 + 20*0.4	14
Green	20	20	20*0.6 + 20*0.4	20
Blue	30	20	30*0.6 + 20*0.4	26

An overlay color(10,20,30) blended at 60% on top of a gray color(20,20,20) becomes (14,20,26)

Source		Matrix		Destination
10 20 30 40	*	1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.5 0 0 0 0 0 0	=	10 20 30 20	Background Overlay Bg + Overlay(colorMatrix) + =

Grey scale

(Red * 1 + Blue * 1 + Green * 1) -0.5 * 256 = destination_color_channel
100 + 20 + 30 - 128 = 22

Source		Matrix		Destination
100 20 30 40	*	1 1 1 0 0 1 1 1 0 0 1 1 1 0 0 0 0 0 1 0 -0.5 -0.5 -0.5 0 0	=	22 22 22 40	Background Overlay Bg + Overlay(colorMatrix) + =