How to Change a Bitmap to another random color?

Question

I'm tyring to add points to a a map. And regardless of how many pins are on this map, each pin will get its own color. I want to only change the hue

I'm using a template png that looks like this

enter image description here

I want to create function that when a new point occurs this file will get randomly colored.

How would I do this?

Code below I'm working with - I am unable to figure out how to throw random values in the matrix to output any good colors that are spaced far enough in the color palate

 private Bitmap ColorMyPin()
{
    Image imgPicture = Properties.Resources.green_MarkerBlank;

    Bitmap bmp = new Bitmap(imgPicture.Width, imgPicture.Height);


    ImageAttributes iaPicture = new ImageAttributes();
    ColorMatrix cmPicture = new ColorMatrix(new float[][]
    {
        new float[] {0, 0, 0, 0, 0},
        new float[] {0, 0, 0, 0, 0},
        new float[] {0, 0, 0, 0, 0},  <-- //Hard part where do i throw random() values at
        new float[] {0, 0, 0, 0, 0},
        new float[] {0, 0, 0, 0, 0}
    });


    // Set the new color matrix
    iaPicture.SetColorMatrix(cmPicture);

    // Set the Graphics object from the bitmap
    Graphics gfxPicture = Graphics.FromImage(bmp);

    // New rectangle for the picture, same size as the original picture
    Rectangle rctPicture = new Rectangle(0, 0, imgPicture.Width, imgPicture.Height);

    // Draw the new image
    gfxPicture.DrawImage(imgPicture, rctPicture, 0, 0, imgPicture.Width, imgPicture.Height, GraphicsUnit.Pixel, iaPicture);

    return bmp;
}

After

enter image description here

So what's your question? It looks like you're getting the results you need? — Rowland Shaw, Mar 19 '13 at 21:10
@RowlandShaw I used gimp to do that. I'm trying to do this programmatically in c#. I have no clue how to change the color yet alone the hue only — stackoverflow, Mar 19 '13 at 21:12
Take a look at the code in this answer, http://stackoverflow.com/a/383305/525138, they are changing a jpg, but should be along the same lines — Dutts, Mar 19 '13 at 21:14

score 2 · Answer 1 · answered Mar 19 '13 at 21:20

It's pretty well documented that when it comes to distinguishing between colors on a chart, graph, grid or map, the human eye doesn't do so well. I've seen recommended upper limits as low as 8 and as high as 15 unique colors (and that assumes the viewer is not color blind). You will probably be better off using a palette.

If you want to increase the number of possible pins, you could multiply the number of colors in your palette by some number of easily distinguished shapes (circle, triangle, square, etc.). You could even use a two-tone approach (a thick border and an inner color), which would raise your total number (colors * shapes) to the second power.

So, assuming 8 colors, 4 shapes and a two-tone coloring scheme, you would be able to represent 1,024 unqiue pins.

For further reading, check out this excellent article on colors and the visual representation of data: http://www.perceptualedge.com/articles/visual_business_intelligence/rules_for_using_color.pdf

score 2 · Answer 2 · edited May 23 '17 at 12:21

I believe you're looking for the ColorMatrix class...I admit I'm not a wizard with image manipulation, but here are some references:

And here is a quick and ugly blob of sample code I put together:

void Main()
{
        var redPinPath = @"c:\temp\pin.png";
        var redPin = Bitmap.FromFile(redPinPath);

        var window1 = new Form();
        window1.BackgroundImage = redPin;
        window1.Show();

        for(var hue = 0.01f; hue < Math.PI; hue += 0.01f)
        {
            var pinCopy = Bitmap.FromFile(redPinPath);
            AlterHue(hue, pinCopy);
            window1.BackgroundImage = pinCopy;
            window1.Invalidate();
            Application.DoEvents();
        }
}

// Define other methods and classes here
public void AlterHue(float newHue, Image image)
{
    var lumR = 0.213f;
    var lumG = 0.715f;
    var lumB = 0.072f;
    var cosVal = (float) Math.Cos(newHue);
    var sinVal = (float) Math.Sin(newHue);
    var imgGraphics = Graphics.FromImage(image);
    var pinAttributes = new ImageAttributes();
    var colorMatrix = new ColorMatrix(new float[][]
    {
        new float[] {lumR + cosVal * (1 - lumR) + sinVal * (-lumR),     lumG + cosVal * (-lumG) + sinVal * (-lumG),         lumB + cosVal * (-lumB) + sinVal * (1 - lumB), 0, 0},
        new float[] {lumR + cosVal * (-lumR) + sinVal * (0.143f),         lumG + cosVal * (1 - lumG) + sinVal * (0.140f),     lumB + cosVal * (-lumB) + sinVal * (-0.283f), 0, 0},
        new float[] {lumR + cosVal * (-lumR) + sinVal * (-(1 - lumR)),     lumG + cosVal * (-lumG) + sinVal * (lumG),             lumB + cosVal * (1 - lumB) + sinVal * (lumB), 0, 0},
        new float[] {0, 0, 0, 1, 0},
        new float[] {0, 0, 0, 0, 1}
    });

    var sizeRect = new Rectangle(0, 0, image.Width, image.Height);
    pinAttributes.SetColorMatrix(colorMatrix);
    imgGraphics.DrawImage(image, sizeRect, 0, 0, image.Width, image.Height, GraphicsUnit.Pixel, pinAttributes);
}

How to Change a Bitmap to another random color?

2 Answers2