Color to Black & White

[johnmiller1950]

Greetings All,

Is there a way to either . . .

. . . change an image from color to black & white within livCode or
. . . export a color image as a black and white image

Thanks in advance for any help you might offer.

Kind Regards To All,
John Miller

[richmond62]

No, I don't think that is possible.

Well, it might be if you are using an ancient machine that can only display a bit depth of 8 . . .

Code: Select all

put the screenDepth

If that is so, you can mess around with the colorMap.

[johnmiller1950]

I notice that there is a pallet attribute in the export command. If I define the pallet with monochrome values, do you think that would work?

[richmond62]

Code: Select all

on mouseUp
   export img "XYZ" to file "XYZbw.png" as PNG with 2 color palette
end mouseUp

-
That did not "Thrill my Gorilla":
-

-
BUT my question is, if you knew about that why did you wait for me to try it instead of doing it yourself?

[richmond62]

A 4 colour palette makes the image more discernable, but its does seem a bit blue in an odd sort of way:
-

[PBH]

John,

Check out this lesson from LiveCode;

https://lessons.livecode.com/m/4071/l/2 ... -grayscale

It looks like it should help you.

Paul

[johnmiller1950]

I didn’t try it myself because I don’t understand the concept of palettes and how they function. I have often used the forums to see if someone knows how to do something that I don’t understand. Thanks for the work you did. I will keep playing around with it.

[richmond62]

Well, I'd never heard about that color palette thingy until you mentioned it, and it took me about 2 minutes to understand what it DOES, even if NOT HOW it does it (not a clue).

SO, the problem is to do with attitude, nothing else.

[johnmiller1950]

After 73 years and a devastating head injury it may not have anything to do with attitude. Those days are long gone for me. Getting up each day and opening my computer to push into a new programming concept is about all the attitude I can muster these days. For me, finding something in the documentation and swallowing my pride and asking for help is how I continue to learn and fill my days.

Solving a programming problem that used to take me minutes now takes hours, days, and maybe weeks. Having a positive attitude helps me not to give up. Having friends in the forums who are willing to help without judgment is a godsend.

Thank the good Lord that you can still learn something new in a couple minutes. I’ll thank him for your willingness to share your insights with someone who is no longer as fortunate.

[johnmiller1950]

Paul, thanks for the link. I’m going to watch some of the other videos that are suggested. I’m trying to wrap my head around some of the algorithms in the code. Maybe I’ll catch on and maybe not, but figuring them out is a great mental workout.

[Newbie4]

If it helps, here is what little I understand about color palettes, images and pixels. I apologize if I am repeating some things that you already know but I do not want to skip anything

A color palette is a list of colors and the hex values to produce each unique color. The hex values are 3 numbers - one for each primary color: Red, Green and Blue. Each number ranges from 00 to FF - (which is 0 to 255 in decimal) (In the LiveCode color picker, you can switch between different palettes, some which have more colors in their palette e.g. the Crayons, Apple, WebSafeColors)

If you look closely at a picture you will see that it is made of many smaller squares. These are called "Pixels" which are short for "Picture elements" or "Picel" often pronounced "Pixel" Each pixel is a small square that shows a single color. If a picture is 1,000 pixels by 2,000 pixels, it has 1,000 x 2,000 = 2 million pixels. We call it a 2 MegaPixel photo ( 2MP)

Each pixel represents a single color consisting of the 3 primary colors Red, Green, and Blue (RGB) and is stored as 4 bytes. They are, in order, "Alpha","Red",Green","Blue". The first byte is the Alpha value which is used differently by different images (if, png, jpg, etc). We will ignore it since we do not need it. The other 3 will be converted into their number for each color (RGB).

So essentially, any color can be encoded as three numbers .. one each for red, green, and blue. These are the primary colors for lights. (TVs, Monitors internally have 3 color beams - RGB). (In LiveCode, you can look at the "Colors" of any object and see the RGB Sliders)

Here are some examples with the RGB numbers (in decimals which make it easier to understand):

• color = R,G,B
• red = 255,0,0
• purple = 255,0,255 (purple is red light + blue light)
• yellow = 255,255,0 (yellow is red light + green lights)
• dark yellow = 100,100,0
• white = 255,255,255 (all lights as bright as possible)
• black = 0,0,0 (no lights on at all)

Converting a picture to black and white is more difficult. The RGB scale is calibrated so that when all three red/green/blue numbers of a pixel are equal, the pixel is a shade of gray. Making all the numbers equal, like red=50 green=50 blue=50 drains any bias towards red, green, or blue. If a pixel were red=50 green=75 blue=50 it would be a bit greenish, but making them all equal, it's not towards any particular hue. This works because the displays and other systems using RGB are calibrated so that the all-equal cases are on the black..gray..white spectrum.

Examples of gray colors in RGB:

• R,G,B = shade of gray
• 50,50,50 = dark gray
• 120,120,120 = medium gray
  200,200,200 = light gray
  In fact, the original pure black/white colors fit this all-equal pattern too, just using the values 0 and 255.
• 0,0,0 = pure black
• 255,255,255 = pure white

So to set a color pixel to a shade of gray, we have to set all the colors (RGB) to the same number. The problem is figuring out what number to use - to represent the brightness of gray. It turns out that if we use the average of all three numbers, that works. So we can add R+G+B and divide by three to get the proper shade of gray.

Here would be the code using the "average" strategy: for each pixel - compute the average of its red/green/blue values. This average number represents the brightness of the pixel 0..255 and you set the red, green, and blue values of the pixel to be that average number. The result is a grayscale version of the original color image. (one slight glitch: the pixel numbers are stored as a character not a simple number. So we have to convert back and forth - char to num, do our calculations then back to char)

Code: Select all

 repeat with tPixel = 0 to (origHeight  * origWidth ) - 1
                  put tPixel * 4 into pixelStart
      
                  // get the color values
                  put  charToNum (char (pixelStart + 2) of image1) into tRed
                  put charToNum (char (pixelStart + 3) of image1) into tGreen
                  put charToNum (char (pixelStart + 4) of image1) into tBlue
      
                  put (  (tRed + tGreen + tBlue) / 3  ) into tAvg
                  put numToChar (tAvg ) into char (pixelStart + 2) of image1     // Red
                  put numToChar (tAvg) into char (pixelStart + 3) of image1      // Green
                  put numToChar (tAvg) into char (pixelStart + 4) of image1     // Blue       
           end repeat;

Now you can see in the earlier post why a simple export image to a 2 color palette did not quite do the job we wanted. For best results, convert your picture to grayscale, then export. Incidentally, there are many tools on the Internet that will generate a palette of all the colors in a picture much better.

In the other post that referenced the LiveCode lesson: "Vision: How do I Convert a Color Image to Grayscale?", that just shows another way to calculate the grayscale values.

I hope this helps some.

[johnmiller1950]

Cyril, thank you so much for the thorough explanation. It was very well done. I especially appreciated your explanation of the averaging technique of getting the grayscale value. - John

[richmond62]

"attitude"

I am sorry, I did not really set out to offend you, and I am embarrassed that was the result.

Richmond.

[stam]

The problem is figuring out what number to use - to represent the brightness of gray. It turns out that if we use the average of all three numbers, that works. So we can add R+G+B and divide by three to get the proper shade of gray.

Thanks Cyril, very well written and clear explanation.

However I would like to ask a question on this: it is well known that the brightness of each channel is perceived differently - for example when determining how “bright” a color is to determine if I should use a light or dark color for text in front of this, I have used the following formula, since the perceived “brightness” of the R, G and B channels is different:

Code: Select all

0.299*R + 0.587*G + 0.114*B

I couldn’t remember the exact source of this but a quick google shows this interesting discussion on the topic:
https://stackoverflow.com/questions/596 ... -rgb-color


Question: is this approach be better than averaging the RGB values in choosing an RGB level?

Asking out of idle interest as I have no direct use of this at present…

Stam

[Newbie4]

Stam:
Yes, you are right. Thanks for pointing that out.

I was wondering if someone would ask that question. I debated at the time how far to take my explanation. It was late at night and the post was getting long. I should have least acknowledged the numbers in the LiveCode lesson.

I used the "averaging" strategy to explain the concept of shades of gray. I did not want to over complicate it. It does work and is what I used in teaching high school students. We also dealt with modifying individual pixels i.e. adding/removing people from photos, etc

As your link shows, there are better strategies and it can get very involved and complex. I do thank you for that link. That discussion is very interesting to read and offers better numbers to use when weighting the different colors. It is a good reference for anyone using this forum and learning about graphics.

I like one of the last posts on that page by Ronen:

My SIMPLE conclusion based on all these answers, for most practical use cases, you only need:

brightness = 0.2*r + 0.7*g + 0.1*b
When r,g,b values are between 0 to 255, then the brightness scale is also between 0 (=black) to 255 (=white).

It can be fine tuned, but, there's usually no need.

Thanks