Vision: How do I Threshold an Image?
This lesson describes how to threshold an image. Sample code and example screen captures are provided.
The lesson continues the theme of image processing and introduces image thresholding that creates a binary image display, revealing clearly defined image objects and their boundaries as either white or black. In conjunction with other image processing steps, this process can often be used to break down an image into regions of interest that can then be analyzed further.
The code in this lesson should only be used with grayscale images, even though the algorithm may give the impression that it works with color images. The algorithm only uses one color chanel to calculate the threshold values, resulting in errors, if the colors are not balanced equally.
Note: The examples shown here access the Stack Script of lesson Vision: How do I Edge Detect an Image?. It is assumed that you have a working LiveCode stack that implements the code shown in that lesson, and that you are familiar with the way that stack works.
Creating the Threshold Slider
Drag a slider onto the stack. Then open the Property Inspector and set the Start value and the Current value to 0 and the End value to 255. You also have to set the orientation to Vertical. This ensures that the slider appears from top to bottom, rather than from left to right. Then add the following code to the slider script:
local tPixel, tImgPosition, tImage, tPixelValue, tThreshold
put the cHiddenImageData of image "Image" into tImage
// get the scroll bar value
put thumbPosition of scrollbar the "Scrollbar" into tThreshold
// 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
// threshold on boundaries
if (charToNum (char (tImgPosition + 2) of tImage) <= tThreshold) then
put 0 into tPixelValue
put 255 into tPixelValue
// set the RGB of the pixel to the same value
put numToChar (tPixelValue) into char (tImgPosition + 2) of tImage
put numToChar (tPixelValue) into char (tImgPosition + 3) of tImage
put numToChar (tPixelValue) into char (tImgPosition + 4) of tImage
// assign the updated image data back to the displayed image
set the imageData of image "Image" to tImage
This code uses the value of the red color channel to determine the threshold value of a particular pixel. Depending on the value set by the slider, if the red color value is smaller or equal to the value set by the slider, then the pixel value is set to 0 for the red, green and blue channels. If the red color value is greater than the value set by the slider, then the pixel value is set to 255 for the red, green and blue channels.
This algorithm uses the red color channel to test the value of a particular pixel, rather than the average of all red, green and blue values. This increases performance when moving the slider and assumes that images to be thresholded are grayscale, in which the red green and blue channels of a particular pixel are set to the same value.
Image thresholding is now ready to be applied and can be used in conjunction with other masks.
Loading an Image
Grayscale the Image
Detecting Center Surround Differences
Center surround differences are detected by selecting the XY-Edge Detect button.
In this image, both horizontal and vertical differences are visible. Outlines of the entire fire surround are now visible.
Note: Depending on the size of the image and the processing power of your computer, this may take a few seconds.
Thresholding to Highlight Object Boundaries
The thresholding algorithm is applied by sliding the slider on the right hand side of the image up or down. Depending on where the slider is positioned, the image will show either more or less light regions.
In this example, you can see that the regions emphasized by the center surround differencing are especially predominant, in some areas even forming long uninterrupted lines in the image.