Performing Color Transformation Operations in C# GDI+ - Rotating Color Operation
(Page 3 of 4 )
In the preceding discussion, since we are always taking a four-dimensional color space to represent a color component, it is rather difficult to visualize the color rotating operation. However, suppose we put aside the alpha component (e.g. fully opaque); we can make it easier to visualize the color rotation with the three basic color components (R, G, B) left. In fact, we can visualize a three-dimensional color space with red, green, and blue axes as shown in Figure 7.
Figure 7-the color rotation in a three-dimensional color space
_html_35f50f65.png)
A color can be thought of as a point in 3-D space. For example, the point (1, 0, 0) in space represents the color red, the point (0, 1, 0) in space represents the color green, and point (0, 0, 1) stands for the blue.
The following illustration shows what it means to rotate the color (1, 0, 0) through an angle of 60 degrees in the Red-Green plane. Rotation in a plane parallel to the Red-Green plane can be thought of as rotation around the blue axis, as is shown in Figure 8.
Figure 8-rotate the color (1, 0, 0) through an angle of 60 degrees in the Red-Green plane
_html_m3259814a.png)
Next, let's take a look at a related example. In this example we are to perform three rotations: the red color rotation around the blue color, green around red, and blue around red, and all through the equal angle of 90 degree. Figure 9 illustrates the corresponding running-time snapshot.
Figure 9-one color rotates around another all through the equal angle of 90 degree
_html_62aca536.png)
Now, let's start to examine the programming behind this. First, draw the original image:
Graphics graphics=this.CreateGraphics();
graphics.Clear(Color.White);
//load the image
Bitmap image=new Bitmap("Colorinput.bmp");
int width = image.Width;
int height = image.Height;
float degrees = 90;
//change the angle into the radian
double r = degrees * Math.PI/ 180.0f;
ImageAttributes imageAttributes=new ImageAttributes();
//render the source image
graphics.DrawImage(image, 0, 0);
Next, we make the red color rotate around the blue color (the image at the top right corner), which is achieved through the code listed below:
//the red color rotates around the blue one
float[][] colorMatrixElements=
{
new float[]{(float)Math.Cos(r), (float)Math.Sin(r), 0.0f, 0.0f, 0.0f},
new float[]{-(float)Math.Sin(r), (float)Math.Cos(r), 0.0f, 0.0f, 0.0f},
new float[]{0.0f, 0.0f, 1.0f, 0.0f, 0.0f},
new float[]{0.0f, 0.0f, 0.0f, 1.0f, 0.0f},
new float[]{0.0f, 0.0f, 0.0f, 0.0f, 1.0f}
};
ColorMatrix colorMatrix=new ColorMatrix(colorMatrixElements);
//start to use the color transformation matrix to output the new image(R->B)
graphics.TranslateTransform(width+10,0);
//perform the R->B color transformation
imageAttributes.SetColorMatrix(
colorMatrix,
ColorMatrixFlag.Default,
ColorAdjustType.Bitmap);
graphics.DrawImage(
image,
new Rectangle(0, 10, width, height),
0, 0,width,height,
GraphicsUnit.Pixel,
imageAttributes);
Next, we make the green color rotate around the red color (the image at the bottom left corner), which is achieved in the following manner:
//first clear the previously used color matrix
imageAttributes.ClearColorMatrix(ColorAdjustType.Bitmap);
//reload another matrix Matrix2
//the green color rotates around the red one
float[][] colorMatrixElements2=
{
new float[]{1, 0, 0.0f, 0.0f, 0.0f},
new float[]{0, (float)Math.Cos(r), (float)Math.Sin(r), 0.0f, 0.0f},
new float[]{0.0f, -(float)Math.Sin(r), (float)Math.Cos(r), 0.0f, 0.0f},
new float[]{0.0f, 0.0f, 0.0f, 1.0f, 0.0f},
new float[]{0.0f, 0.0f, 0.0f, 0.0f, 1.0f}
};
ColorMatrix colorMatrix2=new ColorMatrix(colorMatrixElements2);
imageAttributes.SetColorMatrix(
colorMatrix2,
ColorMatrixFlag.Default,
ColorAdjustType.Bitmap);
//render on the second line
graphics.ResetTransform();
graphics.TranslateTransform(0,height+10);
graphics.DrawImage(image,
new Rectangle(0, 0, width, height),
0, 0,width, height,GraphicsUnit.Pixel,
imageAttributes);
Next, let's continue to take a look at the third case. The blue color rotates around the red color (the image at the bottom right corner), as is shown below:
//again first clear the already-used color matrix
imageAttributes.ClearColorMatrix(ColorAdjustType.Bitmap);
//the blue color rotates around the red one
//first define the related rotation matrix
float[][] colorMatrixElements3=
{
new float[]{(float)Math.Cos(r), 0, -(float)Math.Sin(r), 0.0f, 0.0f},
new float[]{0, 1, 0.0f, 0.0f, 0.0f},
new float[]{(float)Math.Sin(r), 0, (float)Math.Cos(r), 0.0f, 0.0f},
new float[]{0.0f, 0.0f, 0.0f, 1.0f, 0.0f},
new float[]{0.0f, 0.0f, 0.0f, 0.0f, 1.0f}
};
ColorMatrix colorMatrix3 =new ColorMatrix(colorMatrixElements3);
//reload another matrix Matrix3
imageAttributes.SetColorMatrix(
colorMatrix3,
ColorMatrixFlag.Default,
ColorAdjustType.Bitmap);
graphics.TranslateTransform(width+10,0);
graphics.DrawImage(
image,
new Rectangle(0, 0, width, height),
0, 0,
width, height,GraphicsUnit.Pixel,
imageAttributes);
As is illustrated in the above Figure 9, we can see distinct influences upon the color information with the three different color rotations. The background in Figure 9 is white, through which we can make certain the basic feature of the color rotation. When we make the red circle around the blue, the original background color (255, 255, 255) is changed into color (0, 255, 255), i.e. when rotating the red color the red component will change after the rotation. Take the above case for example, when the rotating angle equals 90 degrees, the rotated color after the rotation will disappear completely. With this logic in mind, you can make other adjustment to the rotating angle to see the corresponding different effects.
Finally, let's look into the last kind of color transformation-shearing color.
Next: Shearing Color Operation >>
More C# Articles
More By Xianzhong Zhu
