Overlaying colors on images...

[IfYouSaySo]

I'm trying to create a chessboard control. The basic idea is:
1) use a set of B/W texture bitmaps to make the squares look like wood.
2) Draw over top of the texture image a rectangle with a color that is semi-transparent. I use two user defined colors; and this gives me the light and dark squares for the board.
3) Use freely available .png images for the chess-men. These already have the transparency built in. There is only one pawn, one rook, one bishop, one queen, one king. The image is white with black outline and black shading.
4) Create the "white" and "black" chess-men from these images by a similar technique to step (2) above.

So I've got step 1-3 done. I'm stuck on step 4. I think I need to be using the Image's Palette (maybe even in step 2 I should do that) but I'm not quite sure if that is even right, or if so how it works. The MSDN docs are very vague on explaining palettes as used with images). Or maybe there is some other technique that I'm not aware of.

Any help appreciated!

 

[IfYouSaySo]

Ok, I want to clarify what I'd like to do a bit. I have images that are black & white & shades of grey. And I want to be able to transform those colors based on a color gradient that I supply. For example if my color gradient was white and black, the image should not change. Or I could supply white and dark blue, and the image would transform to white, dark blue, and the greys would be on some gradient between white and dark blue.

Seems like that should be possible, using ImageAttributes or something like that...

 

[TBryce311]

I would download a trial of photoshop

 

[IfYouSaySo]

I want users to be able to customize the color settings. I already have photoshop.

 

[Blake81]

Declare an Image.FromFile(path to your file here) and use the SetPixel method to change that specific color to one chosen by the user (Color Picker dialog, maybe?).

 

[IfYouSaySo]

Blake,

Thanks for the reply. I have thought of this; and I may go down that path, but the problem is that the image is greyscale, which means I don't know *exactly* which pixels I want to change. I guess I want to change everything that is not complete black or complete white, but for example if the pixel is nearly white then I want the color that replaces it to be a very light shade of that particular color.

Probably there is some very easy way to transform colors in the way I am describing...I just don't know what it is yet!

 

[Blake81]

Yeah, working with colors in GDI+ is interesting to me, but the only attempt I made at doing it (a program to match a color in an image from a select list of colors) failed pretty miserably! Maybe you can find something using the HSB values of the colors, specifically B (Brightness). Might be worth a shot.

 

[JohnH]

IfYouSaySo, color-washing is perhaps what you seek, for example: http://www.codeproject.com/aspnet/colorwash.asp

 

[IfYouSaySo]

JohnH,

Looks very promising...I'll try it out tomorrow to see how it works. Thanks!

 

[IfYouSaySo]

Awesome, that was exactly what I wanted. Only problem now is, it takes a while to iterate over each pixel in the image (takes the app about 10 seconds to open). So now I'm wondering if the same thing could be done with a ColorMatrix...I'll have to experiment and see.

Anyway, thanks for the ideas. My app is shaping up very nicely thanks to you guys!

 

[JohnH]

Faster pixel manipulation than Get/SetPixel can be done with Lockbits, much info about this on the web, one example here: http://www.vbdotnetforums.com/showpost.php?p=44308&postcount=3

ColorMatrix is nice, both matrix scale and translate may be used, here methods for this:

Public Function translateMX(ByVal img As Image, ByVal col As Color) As Image
    Dim a As Single = 255 'col.A
    Dim r As Single = col.R / 255
    Dim g As Single = col.G / 255
    Dim b As Single = col.B / 255
    Dim cm As New Imaging.ColorMatrix(New Single()() _
        {New Single() {1, 0, 0, 0, 0}, _
        New Single() {0, 1, 0, 0, 0}, _
        New Single() {0, 0, 1, 0, 0}, _
        New Single() {0, 0, 0, 1, 0}, _
        New Single() {r, g, b, a, 1}})
    Return apply_cm(img, cm)
End Function
 
Public Function scaleMX(ByVal img As Image, ByVal col As Color) As Image
    Dim a As Single = 255 'col.A
    Dim r As Single = col.R / 255
    Dim g As Single = col.G / 255
    Dim b As Single = col.B / 255
    Dim cm As New Imaging.ColorMatrix(New Single()() _
        {New Single() {r, 0, 0, 0, 0}, _
        New Single() {0, g, 0, 0, 0}, _
        New Single() {0, 0, b, 0, 0}, _
        New Single() {0, 0, 0, a, 0}, _
        New Single() {0.001, 0.001, 0.001, 0, 1}})
    Return apply_cm(img, cm)
End Function
 
Public Function apply_cm(ByVal img As Image, ByVal cm As Imaging.ColorMatrix) As Image
    'return new image with given ImageAttributes set
    Dim bm As Bitmap = New Bitmap(img.Width, img.Height)
    Dim g As Graphics = Graphics.FromImage(bm)
    Dim ia As New Imaging.ImageAttributes
    ia.SetColorMatrix(cm)
    g.DrawImage(img, New Rectangle(0, 0, img.Width, img.Height), 0, 0, img.Width, img.Height, GraphicsUnit.Pixel, ia)
    g.Dispose()
    Return bm
End Function

Simple example use with a colordialog:

If ColorDialog1.ShowDialog = Windows.Forms.DialogResult.OK Then
    PictureBox1.Image = scaleMX(My.Resources.angelfish304, ColorDialog1.Color)
    'or
    'PictureBox1.Image = translateMX(My.Resources.angelfish304, ColorDialog1.Color)
End If