|
Vision: Blur This lesson describes how to blur an image, using a smoothing mask. Sample code and example screen captures are provided. IntroductionThe lesson continues along the theme of image processing and introduces an algorithm that can be used to smooth images in order to remove fine detail texture or noise. This is often useful when applying image processing algorithms that look at larger detail objects in an image. Note: The examples shown here assume that you are familiar with lesson Vision: How do I Convert a Color Image to Grayscale?, and that you have a working LiveCode stack that implements the code shown there. The smoothing process discussed here uses a configurable mask to perform operations on a number of neighboring pixels in an image. The generic image processing code is stored in the Stack Script, rather than a Button Script, making the architecture more hierarchical and relevant code segments easier to access from other buttons that may also want to use a mask for image processing. Adding Stack Code VariablesOpen the stack you created under lesson Vision: How do I Convert a Color Image to Grayscale? and add the following variables to the Stack Script: local sXsize, sYsize, sImage These variables hold the dimensions of the image to be processed and a copy of the image data itself. Adding Stack Code Functions and CommandsFirst add the command convolve that sits at the upper most level and takes two parameters: the image to be processed and the mask that is be applied to the image. command convolve xImage pMask Add the function applyMask that applies the mask to a number of neighboring pixels. This function takes the mask, the image X and Y coordinates and the color channel as arguments. function applyMask pMask pX pY pChannel Add the function that returns an image index, calculated from X and Y coordinates. function getImagePosition pX pY Creating the Smoothing ButtonDrag a button onto the stack. Then open the Property Inspector and change the name of the button to Smoothing. Next, open the Script Editor for this button and insert the following code: on mouseUp This code sets up a smoothing mask in the shape of a 3x3 array with values of 0.111 in each array entry. This effectively allows each pixel that lies under the mask to contribute roughly 1/9 to the overall value of the pixel entry that is being updated. Loading an ImageYour 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 a Color ImageA color image is smoothed by selecting the Smoothing button. Note: Smoothing color images can take a long time, as the smoothing mask is applied to each color channel of each pixel of the image. Processing a Grayscale ImageThe performance of the smoothing process can be improved by processing grayscale images. You can do this by using the Grayscale button before you use the Smoothing button. Note: In order to get the performance increase, you have to comment out two lines of code in the Stack Script, as highlighted by comments under step: Adding Stack Code Functions and Commands.
Tweet |
|