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.