revUp - Updates and news for the LiveCode community
Issue 108 | April 7th 2011 Contact the Editor | How to Contribute

Convert a Color Image to Grayscale
Manipulate images for business or pleasure effortlessly with LiveCode

By Hanson Schmidt-Cornelius

This lesson describes how to convert a color image into grayscale using widely accepted conversion constants. Sample code and example screen captures are provided.

Introduction

Vision is possibly the most important human sense. It allows us to observe and assess the environment around us with a wealth of color, texture and depth information. We can act upon this information in a seemingly effortless fashion, but the processes that underlie human vision and visual perception are in fact far from fully researched or understood.
A lot of computer image processing can and is conducted on gray level pictures as this simplifies the implementation of many algorithms. Gray level images provide a wealth of information but at the same time eliminate the need to handle color channels. Of course there are a number of applications that do utilize color in images.
The algorithm described in this lesson converts color images to grayscale by calculating a gray level for each pixel and setting the three color channels for that pixel to the value calculated. This effectively converts a color image to grayscale, but it also allows us to add color to image regions, if we wish to do so in the future.

Creating the Image Area

Create a New Mainstack and drag an Image Area onto it. This is the location in which the image will be displayed. Then open the Property Inspector and set the name of the Image Area to Image.
You also have to create the custom property cHiddenImageData for the Image Area. This is used in a subsequent lessons in which it is necessary to have a copy of the image that is being updated.

Creating the Load Image Button

Drag a button onto the new stack. Then open the Property Inspector and change the name of the button to Load Image. Next, open the Script Editor for this button and insert the following code:

on mouseUp
    answer files "Select the image you wish to load:" with type "JPEG Images|jpg|JPEG"
    set the filename of image "Image" to it
    set the cHiddenImageData of image "Image" to the imageData of image "Image"
end mouseUp

This button allows you to open Joint Photographic Experts Group images for processing.

Note: Update the type information in the code if you would like to be able to load other image types too.

Creating the Convert to Grayscale Button

Drag a button onto the new stack. Then open the Property Inspector and change the name of the button to Grayscale. Next, open the Script Editor for this button and insert the following code:

on mouseUp
    local tPixel, tImgPosition, tGray, tImage
    put the imageData of image "Image" into tImage
    # repeat for all the pixels in the image
    repeat with tPixel = 0 to (height of image "Image" * width of image "Image") - 1
        # multiply the image pixel position by 4 (Alpha + Red + Green + Blue)
        put tPixel * 4 into tImgPosition
        # calculate the gray level - we are using typical weights here
        put 0.30 * charToNum (char (tImgPosition + 2) of tImage) + \
            0.59 * charToNum (char (tImgPosition + 3) of tImage) + \
            0.11 * charToNum (char (tImgPosition + 4) of tImage) into tGray
        # set the RGB of the pixel to the same value this gives us the gray level
        put numToChar (tGray) into char (tImgPosition + 2) of tImage
        put numToChar (tGray) into char (tImgPosition + 3) of tImage
        put numToChar (tGray) into char (tImgPosition + 4) of tImage
    end repeat
    # assign the updated image data back to the displayed image
    set the imageData of image "Image" to tImage
    set the cHiddenImageData of image "Image" to tImage
end mouseUp

Loading an Image

People01_display

Your application may look something like the one shown in this example. After selecting the Load Image button you should get a file selection dialog that allows you to select an image from your file system. The image is then displayed in the Image Area.

Processing an Image

People02_display

The color image is converted from color to grayscale by selecting the Grayscale button.

Note: Depending on the size of the image and the processing power of your computer, this may take a few seconds.

This is part one of a three part series on Vision. At the end of the series, we will publish a sample stack for you to take apart.

Hanson Schmidt-Cornelius

About the Author

Hanson Schmidt-Cornelius is an experienced software developer with an interest in artificial intelligence.

 

Main Menu

What's New

sanjose