Vision: How do I Threshold an Image?

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.

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:

on mouseUp
    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
        else
            put 255 into tPixelValue
        end if
        // 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
    end repeat
    // assign the updated image data back to the displayed image
    set the imageData of image "Image" to tImage
end mouseUp

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.

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.

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.

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.