Color to Black & White

[jacque]

Cyril, thanks for the great explanation. I knew most of it but wasn't aware of the averaging methods. Very helpful. It's also clear you've been a good teacher. I had a high school teacher once who droned through his prepared lecture for an hour and never looked up once all semester. I never remembered anything he said.

[Newbie4]

You are welcome and thanks to you for all I have learned from your posts on this forum. It is a very good resource for learning about LiveCode and more.

We all had teachers like you described.

Its interesting. When I taught at a prestigious university, the discussion often came up as to our role there. Many of us were committed to our teaching and reaching as many students as possible. Others felt their role was to graduate only the top students in order to maintain the high reputation of the institution.

It is simpler at the high school level. Some teachers want to graduate as many students as possible, others want to maintain their standards (reputation?) and there are those who do not necessarily care, they show up every day. Luckily most of them care and do try to do their best.

Like it or not, doesn't it prepare us for real life?

[bn]

Cyril's explanations are very helpful in understanding what the conversion from RGB to B/W needs.

Here is a short snippet that lets you do it in Livecode without having to touch every pixel.

Make a stack with two images. The first is your color image the second will be your B/W image.

A button with this script.

Code: Select all

on mouseUp
   repeat with i = 0 to 255
      put i & comma & i & comma & i & return after tColorList
   end repeat
   delete char -1 of tColorList
   export image "Original" to image "fff" as png with palette tColorList
end mouseUp

It sure beats accessing every pixel and translate it to greyscale.

Kind regards
Bernd

[dunbarx]

Bernd.

Nice way to assemble

"1,1,1"
"2,2,2"
"3,3,3"
...

[Newbie4]

Bern,

It may be faster but not better. Compare the results and you will see the difference.

I have a stack to demonstrate but it is too large to load. LiveCode really generates large files. My test program with only 30 lines of code total on 3 buttons ended up 5MB. Even the zip file is too large to include as an attachment (1.5MB)

You lose a lot of brightness and detail using the Palette method.

Thanks,

[bn]

Cyril,

Thanks for testing.
I repeated my tests using an image with more dynamic light/dark ranges and I agree that your method produces better black/white dynamic than the palette method.

Before I tested with an image that had a lower dynamic range and could not see a difference.

Kind regards
Bernd

[jiml]

There is also TinyColor for LiveCode by Ferruslogic.

https://github.com/Ferruslogic/TinyColo ... ag/v1.0.0b

Post by andresdt » Fri Jan 21, 2022 5:08 pm

TinyColor is a popular JavaScript library. With a 4.1k star rating on GitHub. https://github.com/bgrins/TinyColor
Image
We now have a version of this popular library for LiveCode. Written 100% in LiveCodeScript.

Jim Lambert

[bn]

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;

Cyril,

please note that numToChar, charToNum, and "char" in this context has been deprecated.

We are advised to use numToByte, byteToNum, and byte in this context. This was introduced with the advent of unicode.

Your code adapted to the current recommendation:

Code: Select all

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

This version is a lot faster than the deprecated notation.

Kind regards
Bernd

[stam]

please note that numToChar, charToNum, and "char" in this context has been deprecated.

We are advised to use numToByte, byteToNum, and byte in this context. This was introduced with the advent of unicode.

hasn't numToChar been replaced with numToCodepoint and charToNum been replaced with codepointToNum? (I believe this change was brought in for unicode?)
Obviously if working with actual bytes neither of these should be used...

[bn]

please note that numToChar, charToNum, and "char" in this context has been deprecated.

We are advised to use numToByte, byteToNum, and byte in this context. This was introduced with the advent of unicode.

hasn't numToChar been replaced with numToCodepoint and charToNum been replaced with codepointToNum?
Obviously if working with actual bytes neither of these should be used...

In the context of images one operates on actual bytes and hence numToByte, byteToNum, and byte which are in the range of 0 to 255.
codepoint is used for unicode text and goes up to 0x10FFFF = decimal 1114111 (I looked that up...)

Kind regards
Bernd

[Newbie4]

Thanks Bernd, that is good to know.

LiveCode has gotten too complicated and harder. There is not enough documentation and examples. What documentation that is out there is slowly becoming incorrect and obsolete.

This forum is one of the few places to get help and I have noticed the decrease of activity over the years. I think they are putting all of their eggs in the wrong basket.

Anyway, this topic would make the start of a good chapter on manipulating images.

[jiml]

As Bernd noted export with palette is very quick.
And you can do wacky color palettes.

Convert an image to greyscale using a colorlist.livecode.zip

(101.2 KiB) Downloaded 78 times

Jim Lambert

[bn]

Jim,

thanks for posting this stack. While the greyscale is faster using "palette" it is also not as nice as doing the math on the pixels.

Make a new button on your stack and set the script of it to

Code: Select all

on mouseUp
   put the milliseconds into t1
   put 1 into tImgName
   put 2 into tImgName2
   put the height of image tImgName into origHeight
   put the width of image tImgName into origWidth
   put the imageData of image tImgName into tImgData
   
   put numToByte(0) into tNullByte -- for alphavalue which is not used but needed
   
   repeat with tPixel = 0 to (origHeight  * origWidth ) - 1
      put tPixel * 4 into pixelStart
      
      // get the color values
      put byteToNum (byte (pixelStart + 2) of tImgData) into tRed
      put byteToNum (byte (pixelStart + 3) of tImgData) into tGreen
      put byteToNum (byte (pixelStart + 4) of tImgData) into tBlue
      
      if the optionKey is down then
         put trunc((tRed + tGreen + tBlue) / 3 ) into tAvg -- unadjusted average
      else
         put trunc(0.299*tRed + 0.587*tGreen + 0.114*tBlue) into tAvg -- adjusted average
      end if
      
      put tNullByte into byte(pixelStart + 1) of tImgData2
      put numToByte(tAvg) into byte (pixelStart + 2) of tImgData2
      put numToByte(tAvg) into byte (pixelStart + 3) of tImgData2
      put numToByte(tAvg) into byte (pixelStart + 4) of tImgData2
      
   end repeat
   set the width of image tImgName2 to origWidth
   set the height of image tImgName2 to origHeight
   set the imageData of image tImgName2 to tImgData2
   put the milliseconds - t1 && "milliseconds"
end mouseUp

if you hold down the option key it uses the sum of RGB values diveded by 3, without the option key down it uses an adjusted factor for RGB values.
-- 0.299*R + 0.587*G + 0.114*B

Especially in the yellow and green colors of the flowers you will notice the difference.

Kind regards
Bernd

[Newbie4]

Yes, good Jim. Thanks for the nice example

Thanks Bernd for the post. (You beat me to it)
I was going to suggest adding a 3rd image (image 3) and a button with the following code:

Code: Select all

on mouseUp
   put image 1 into image 3
   wait 30 ticks
   put the imageData of image 1 into tImage
   put (the Height of image 3 * the width of image 3)-1 into tSize
   
   repeat with tPixel = 0 to tSize
      put tPixel * 4 into pixelStart
      
      // get the color values
      put byteToNum (byte (pixelStart + 2) of tImage) into tRed
      put byteToNum (byte (pixelStart + 3) of tImage) into tGreen
      put byteToNum (byte (pixelStart + 4) of tImage) into tBlue
      
      // average and replace      
      put (  (tRed + tGreen + tBlue) / 3  ) into tAvg
      
      put numToByte (tAvg) into byte (pixelStart + 2) of tImage    // Red
      put numToByte (tAvg) into byte (pixelStart + 3) of tImage    // Green
      put numToByte (tAvg) into byte (pixelStart + 4) of tImage     // Blue       
   end repeat
   
   set the imageData of image 3 to tImage   
end mouseUp

With the extra image field, you can see the difference in a side-by-side comparison. I took the size calculation out of the Repeat loop.

I like your use of the option key to see the difference weighting makes. Thanks

What is surprising is that adding this code bumped up the size of the stack from 104 K to 2.4 MB. That is a lot of LiveCode engine code to support that little code.

[richmond62]

What not many people hereabouts may have noticed in their attempts to outdo each other and scramble for their spot in the sunlight is that the original point about a palette of a very few colours produces interesting graphic effects that other people are paying for by buying fancy filters for Photoshop:
-