CSE 564

Visualization

Lab Assignment 3

submitted by

Nafees Uddin Ahmed

107403294

Lab Purpose

Local Image Processing

Overview

Following additional features and functionality were added with the version from Lab 2.

1. New UI that provides a panel to apply newly added filters and modifier with their respective customizations.

2. Standard image processing filters like Box , Sobel , Median and Gaussian.

3. User now has the option to select between Bi-Linear and Nearest Neighbor texture filtering.

4. Sub-sampling of image given a sampling factor.

5. Undo feature for any operation provided by this application.

6. The toggle button 'GPU' is ignored and everything now runs on GPU.

Task 1

GUI Extension

A new tabbed panel is introduced to provided easy accessibility to the users for setting options and applying different

image filters. The 'Filters' tab contains the newly introduced filters. Each sub tab under 'Filters' tab provides required UI

items to tweak filter parameters and also a button to apply the given settings.

Figure 1 New UI Items, Left shows the whole window , while the right shows the Image Process Tab.

Task 2

Box Filtering

Box or Mean filtering is the most basic image processing filter that takes the average of the neighboring pixels and assigns that

value to the pixel under consideration. This effectively smoothes out the whole image. The level of smoothing depends upon

number of pixels that are counted as neighbors.

Averaging of neighboring pixels is done by convolving the image with a kernel that has equal weights in all of its entries. As

for example , a 3x3 Box filter kernel would look like,

Figure 2 : (Top-Left) Actual Image (Top-Right) Box Filter Size 3x3 (Bottom-Left) Box Filter Size 5x5 (Bottom-Right) Box Filter Size 7x7

Figure 2 shows the properties of box-filter. From the images it is evident that applying box filter provides smoothing effect to

the image (even though application of smoothing is quite flat). Application of a bigger filter (size 5x5, 7x7) introduces more

smoothing. And since the filter is applied to R,G,B channels separately, it also introduces some color distortion and it

increases with the size of the kernel.

Task 3

Sobel Filtering

Sobel filter utilizes the concept of Sobel operator to find edges in a given image. Sobel operator calculates the gradient of the

image intensity at each point, giving the direction of the largest possible increase from light to dark and the rate of change in

that direction. The result therefore shows how "abruptly" or "smoothly" the image changes at that point, and therefore how

likely it is that that part of the image represents an edge, as well as how that edge is likely to be oriented.

Mathematically, the operator uses two 3×3 kernels which are convolved with the original image to calculate approximations of

the derivatives - one for horizontal changes, and one for vertical. If we define A as the source image, and Gx and Gy are two

images which at each point contain the horizontal and vertical derivative approximations, the computations are as follows:

where * here denotes the 2-dimensional convolution operation.

At each point in the image, the resulting gradient approximations can be combined to give the gradient magnitude, using:

In our implementation, user has option between choosing RGB or HSV based edge detection.

Figure 3 : (Top) Actual Picture (Left) Sobel in RGB (Right) Sobel in HSV

Figure 3 shows outputs from applying two different flavors of Sobel filter. In terms of edge detection, applying Sobel kernel

on V channel seems more appropriate. Because, applying Sobel on RGB channel detects edges on all channels and eventually

distorts the final image when all the channels are combined.

Task 4

Median Filter

Median filter is a non-linear image filter with a purpose to remove noise from images. The basic idea behind median filter is to

calculate median of neighboring pixel and replace the pixel under consideration with that value. With this approach, any pixel

that has abruptly different value than its neighboring ones, is replaced by a more suitable one. Hence it greatly reduces noises

like 'salt and pepper'

Figure 4: : (Top) Original Noisy Image (Left) 1x Median Filter (Right) 2x Median Filter

Task 5

Sub-Sampling

The sub-sampling tab provides user with option to select a sub-sample factor and then reduce the image dimension with that

factor keeping the aspect ratio intact. For reduction by a factor by p, every pixel at a interval p was selected for the new image.

Since we are sampling from larger space into a smaller space, images with higher details tend to introduce artifacts or

distortions in high-details like edges. This is known as aliasing.

Figure 5: (Left) Image with high detail (Right) Aliasing after sub-sampling by factor 2

Figure 5 shows the aliasing effect due to sub-sampling. (Jpeg compression in PDF distorts the original image, but the

introduction of aliasing should still be evident).

Task 6

Smoothing and Aliasing

From task 5 it is evident that applying sub-sampling directly introduces aliasing effect. But if we smooth out the image using

some low-pass filter, we can first reduce the high-frequency component of the image, and hence reduce the presence of

aliasing due to sampling.

Figure 6 : (Left) Original Image (Right) Aliasing due to sub-sample by factor 4

From figure 6 we can see the aliasing effect on the test image when sub-sampled by factor 4.

Figure 7 (Left) 2x Box Filter and 4x Sub-sampling (middle) 2x Gaussian Filter and 4x Sub-sampling (Right) Median and 4x Sub-sampling

In figure 7, we can see how this aliasing is reduce by applying low pass filters first. In both cases , for a sub-sampling by factor

p, a prior smoothing of p/2 time was done. We can see here smoothing by both mean and gaussian filter. And since median

filter doesn't perform the operation of low pass-filtering, it has little effect in reducing aliasing.

Extra Credit

Task 1

Bi-Linear Filter

Bilinear filtering is a texture filtering method used to smooth textures when displayed larger or smaller than they actually are.

Most of the time, when drawing a textured shape on the screen, the texture is not displayed exactly as it is stored, without any

distortion. Because of this, most pixels will end up needing to use a point on the texture that's 'between' texels. Bilinear

filtering performs bilinear interpolation between the four texels nearest to the point that the pixel represents to estimate the

color value at that point.

Figure 8 Highly zoomed image (Left) Nearest Neighbor Filter (Right) Bi-Linear Filter

Figure 8 shows the effect of introduction of bi-linear texture sampling. We can see that, with nearest neighbor approach, we

can definitely point out each individual pixel as we zoom in closely. But with Bi-Linear approaximation, image becomes

smoother even at this zoom level.

Task 2

Gaussian FIlter

In 2D space gaussian filter is defined by the following equation,

Where � is the standard deviation of samples. In our implementation, user is allowed to input the value of �. Then a gaussian

kernel of size 5x5 is produced by sampling discrete values from the above equation. This kernel is then convolved over the

image.

Figure 2 (Left) Original Image (Right) After applying gaussian with � = 1.0

Application of gaussian filter has a smoothing/blurring effect on the image, and unlike mean filter it doesn't distort the color.