Color to Black & White
Moderators: FourthWorld, heatherlaine, Klaus, kevinmiller, robinmiller
-
- Posts: 113
- Joined: Mon Apr 30, 2007 3:33 pm
- Location: Dalton, Ohio
Color to Black & White
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
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
-
- Livecode Opensource Backer
- Posts: 9444
- Joined: Fri Feb 19, 2010 10:17 am
- Location: Bulgaria
Re: Color to Black & White
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 . . .
If that is so, you can mess around with the colorMap.
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
-
- Posts: 113
- Joined: Mon Apr 30, 2007 3:33 pm
- Location: Dalton, Ohio
Re: Color to Black & White
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?
-
- Livecode Opensource Backer
- Posts: 9444
- Joined: Fri Feb 19, 2010 10:17 am
- Location: Bulgaria
Re: Color to Black & White
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?
-
- Livecode Opensource Backer
- Posts: 9444
- Joined: Fri Feb 19, 2010 10:17 am
- Location: Bulgaria
Re: Color to Black & White
A 4 colour palette makes the image more discernable, but its does seem a bit blue in an odd sort of way:
-
-
-
- VIP Livecode Opensource Backer
- Posts: 129
- Joined: Sun Feb 20, 2011 4:26 pm
- Location: Vancouver Island, BC, Canada. ex.UK
- Contact:
Re: Color to Black & White
John,
Check out this lesson from LiveCode;
https://lessons.livecode.com/m/4071/l/2 ... -grayscale
It looks like it should help you.
Paul
Check out this lesson from LiveCode;
https://lessons.livecode.com/m/4071/l/2 ... -grayscale
It looks like it should help you.
Paul
-
- Posts: 113
- Joined: Mon Apr 30, 2007 3:33 pm
- Location: Dalton, Ohio
Re: Color to Black & White
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.
-
- Livecode Opensource Backer
- Posts: 9444
- Joined: Fri Feb 19, 2010 10:17 am
- Location: Bulgaria
Re: Color to Black & White
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.
SO, the problem is to do with attitude, nothing else.
Last edited by richmond62 on Mon Dec 04, 2023 10:17 am, edited 1 time in total.
-
- Posts: 113
- Joined: Mon Apr 30, 2007 3:33 pm
- Location: Dalton, Ohio
Re: Color to Black & White
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.
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.
-
- Posts: 113
- Joined: Mon Apr 30, 2007 3:33 pm
- Location: Dalton, Ohio
Re: Color to Black & White
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.
-
- VIP Livecode Opensource Backer
- Posts: 327
- Joined: Sun Apr 15, 2012 1:17 am
- Location: USA
- Contact:
Re: Color to Black & White
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):
Examples of gray colors in RGB:
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)
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.
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)
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
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;
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.
Cyril Pruszko
https://sites.google.com/a/pgcps.org/livecode/
https://sites.google.com/a/setonhs.org/app-and-game-workshop/home
https://learntolivecode.com/
https://sites.google.com/a/pgcps.org/livecode/
https://sites.google.com/a/setonhs.org/app-and-game-workshop/home
https://learntolivecode.com/
-
- Posts: 113
- Joined: Mon Apr 30, 2007 3:33 pm
- Location: Dalton, Ohio
Re: Color to Black & White
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
-
- Livecode Opensource Backer
- Posts: 9444
- Joined: Fri Feb 19, 2010 10:17 am
- Location: Bulgaria
Re: Color to Black & White
"attitude"
I am sorry, I did not really set out to offend you, and I am embarrassed that was the result.
Richmond.
I am sorry, I did not really set out to offend you, and I am embarrassed that was the result.
Richmond.
Re: Color to Black & White
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
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
Last edited by stam on Mon Dec 04, 2023 2:39 pm, edited 1 time in total.
-
- VIP Livecode Opensource Backer
- Posts: 327
- Joined: Sun Apr 15, 2012 1:17 am
- Location: USA
- Contact:
Re: Color to Black & White
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:
Thanks
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
Cyril Pruszko
https://sites.google.com/a/pgcps.org/livecode/
https://sites.google.com/a/setonhs.org/app-and-game-workshop/home
https://learntolivecode.com/
https://sites.google.com/a/pgcps.org/livecode/
https://sites.google.com/a/setonhs.org/app-and-game-workshop/home
https://learntolivecode.com/