Rainbowize an image in C#


This example extends the post Use an ImageAttributes object to apply general color tones to an image in C# to rainbowize an image. It chops an image into pieces and then uses the previous example’s techniques to convert the pieces into different color tones to produce a rainbow effect.

The following code shows how the program colors its image.

// Process the image.
private void Form1_Load(object sender, EventArgs e)
    // Create the output image.
    Image original = picImage.Image;
    int wid = original.Width;
    int hgt = original.Height;
    Bitmap bm = new Bitmap(wid, hgt);
    using (Graphics gr = Graphics.FromImage(bm))
        // Define target colors.
        Color[] color =
            //Color.Red, Color.Orange, Color.Yellow,
            //Color.Green, Color.Blue, Color.Indigo,

            Color.Red, Color.OrangeRed, Color.Yellow,
            Color.Green, Color.Blue, Color.Indigo,
        const float scale = 2.0f;

        // Draw.
        for (int i = 0; i < color.Length; i++)
            // Create the ColorMatrix.
            ColorMatrix cm = new ColorMatrix(new float[][]
                new float[] {color[i].R / 255f * scale, 0, 0, 0, 0},
                new float[] {0, color[i].G / 255f * scale, 0, 0, 0},
                new float[] {0, 0, color[i].B / 255f * scale, 0, 0},
                new float[] {0, 0, 0, 1, 0},
                new float[] {0, 0, 0, 0, 1},
            ImageAttributes attr = new ImageAttributes();

            // Draw the next part of the image.
            int x = (int)(i * original.Width / color.Length);
            Point[] points =
                new Point(x, 0),
                new Point(wid, 0),
                new Point(x, hgt),
            Rectangle rect = new Rectangle(x, 0, wid - x, hgt);
            gr.DrawImage(original, points, rect,
                GraphicsUnit.Pixel, attr);

    // Display the result.
    picImage.Image = bm;

    // Save the result.
    bm.Save("Rainbow.png", ImageFormat.Png);

The program starts by creating a Bitmap the same size as the original image, and by making a Graphics object to work with the Bitmap. It defines an array containing the colors it will use to tone the image and then enters a loop that executes once for each of the colors.

For each color, the program makes a ColorMatrix that uses the red, green, and blue color components of the color to scale the output color in the image. For example, suppose one of the colors in the array is yellow, which has large red and green components and a small blue component. The program initializes the ColorMatrix so it increases the result’s red and green components and reduces the blue component. When the code applies this matrix to a pixel in the image, the result is shifted toward a yellow tone.

After it creates the ColorMatrix, the program makes an ImageAttributes object and sets its ColorMatrix to the one it created.

Next the program defines an array of points representing the next piece of the image to draw. If this is color number i, the program draws the ith part of the image. It draws all the way to the right edge of the image so the colored pieces of image overlap. That prevents any pixels between slices from being omitted by rounding errors. (This is a little inefficient because the program recolors the rightmost pixels once for each color. The method is quite fast, however, so I’m not going to worry about it.)

The program creates a Rectangle to define the area in the original image that should be drawn into the new Bitmap. It then uses the DrawImage method to draw the selected part of the image into the Bitmap while applying the ColorMatrix to its pixels.

After it finishes drawing each color, the program displays the result and saves it into a PNG file.

Download Example   Follow me on Twitter   RSS feed   Donate

This entry was posted in graphics, image processing and tagged , , , , , , , , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.