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.

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.

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.

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

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.

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.