Gaussian Blur

Gaussian Blur

Back then when i built ASCII Render Program a video from Computerphile Video give a recommended that if you want to use Edge Detection in Image you should add Gaussian blur into the image.

So what is Gaussian Blur, Is a blur using Gaussian function by using this function we can create blur image. It will create nice blur color but the information color are still intact. So how does Gaussian Blur work, the word "Gaussian" stand for bell curve or normal distribution, so yes we use normal distribution sample for blurring an image instead of average sample.

Image source: Wikimedia Commons

You can see image above the value focus on center while the further you are from the center became small. The image below are comparison between Gaussian Blur and Box Blur

Generate Gaussian Blur Image

Above picture are the result blur image. Well it kind hard to tell but if zoom in to single pixel you scan see there's a blurring that happening

Small Image of Gaussian Blur

Compare to Box Blur

Small Image of Box Blur

Of course if we zoom out both we can't tell the difference if both have been blur or not since i only use small number to blur.

Formula

This function below are used to create Kernel Convolution (for you who don't know what is kernel convolution mean, you can see a video explanation here it's a good video) to generate blur image like below. The Gaussian function below are used to generate Kernel Convolution where if we sum all value in kernel it should give us approx of 1 an never more than 1.

Why is 1? because number 1 represent as 100% so if you sum all and the result are 0.6 it mean 60% from original image.

$$G(x, y) = \frac{1}{2\pi\sigma^2} \, e^{ -\frac{x^2 + y^2}{2\sigma^2} }$$

Where
x,y = pixel coordinate (as programmer i called index instead)
σ = sigma
e = Euler's number
π = pi number

As a self learner, learning about math is very difficult. Let's hope this blog will simplify your learning.

The math contain 2 thing:

Normalization Factor

$$\frac{1}{2\pi\sigma^2} \$$

what is Normalization Factor, and why does Normalization Factor exists?

As you can see it's a function to normalize the number among kernel. This function is making sure if sum the value in kernel it will give nice 1 value. Without it the image will be either too bright or too dark, stray away from their original image color.

Exponential Decay

$$e^{ -\frac{x^2 + y^2}{2\sigma^2} }$$

What does this function do?

Exponential Decay is the function which determine how much influence the color in the specific kernel. Remember people "Gaussian" it's called bell curve or normal distribution where center it's the focus. So this function is generate number where the further you are from the center the smaller the distribution are.

This function exists because when we try to create blur we don't want the neighboring color influence too much in the center of color, so the center of the color are still strong. So if we compared with Box Blur, the Box Blur it just sum all pixel and divide by number of kernel. It mean neighbor color can give strong influence color which give different result

What is σ

Sigma (σ) is where blur come to play, this particular symbol play an important role. it determine how strong and wide the blur are in the kernel. And of course the σ are used for how big the kernel. The bigger the number are the blurred the image will be.

How it Works

First set sigma (σ) value let's says 3 than, set how much n x n kernel size let's says 5. You can use something like math below to get n size

$$\text{n} \approx 2 \times \lceil 3\sigma \rceil + 1$$

But for a sake of education we set kernel size to 5, so we can get interesting edge case.

Let's says i have kernel of 5 x 5 kernel with sigma (σ) of 3

$$\begin{bmatrix} 0 & 0 & 0 & 0 & 0 \\ 0 & 0 & 0 & 0 & 0 \\ 0 & 0 & 0 & 0 & 0 \\ 0 & 0 & 0 & 0 & 0 \\ 0 & 0 & 0 & 0 & 0 \\ \end{bmatrix}$$

below are our initial kernel, this is multi-array dimensional with x, y. And remember "Gaussian" mean normal distribution the center or should i call index 2,2 is the highest distribution number (because it located in the center from 5x5 array).

But for this specific kernel the center value for x,y should be 0,0 not 2,2. That means for position index of 0,0 (in most top left) it should be -2,-2. You should figure how to do that in the program.

Logic

Loop x:
    Loop y:
        x, y = figuring out how to present 0 index value to -2 x,y point
        apply gaussian function with x, y
    End Loop
End Loop

Example

let's write an example with example above 5 x 5 kernel and sigma 3

let start with center

where x, y is 0,0 and pi is 3.1416 and e is 2.718281828459045

the further the pi and e number is, it will give different result (it doesn't mean wrong it will give different result from below if you use like pi 3.14 two number behind decimal)

$$G(0, 0) = \frac{1}{2\pi 3^2} \, e^{ -\frac{(0)^2 + (0)^2}{2 (3^2)} }$$

let's start from Normalization Factor

$$\frac{1}{2pi 3^2} = 0.017683 \$$

next is Exponential Decay

$$e^{ -\frac{(0)^2 + (0)^2}{2 (3^2)} } = 1$$

we multiple and we get 0.01768

how about the top left side the x, y should be -2, -2 where pi and e same as above

lets do the step again

first normalization format

$$\frac{1}{2pi 3^2} = 0.017683 \$$

next is Exponential Decay

$$e^{ -\frac{(-2)^2 + (-2)^2}{2 (3^2)} } = 0.68$$

we multiple and we get 0.01134

and the final result are below

$$\begin{bmatrix} 0.01134 & 0.01365 & 0.01416 & 0.01365 & 0.01134 \\ 0.01365 & 0.01582 & 0.01672 & 0.01582 & 0.01365 \\ 0.01416 & 0.01672 & 0.01768 & 0.01672 & 0.01416 \\ 0.01365 & 0.01582 & 0.01672 & 0.01582 & 0.01365 \\ 0.01134 & 0.01365 & 0.01416 & 0.01365 & 0.01134 \\ \end{bmatrix}$$

as you can above example the value are going further from center. The further x,y from center the smaller the number is, and that's way they called Gaussian blur.

The thing about this kernel convolution are if you sum all number above it will not give you close to 1. It give you around 0.3465 which is opposite of what normalization are suppose to do where if we sum all value in kernel the value should be 1.

Why is that? Well, since we don't use those equation above to get validate kernel size we got hit by interesting edge case, the sum value of inside kernel is not even close to 1. 0.3 it mean the result will give as 30% from the original image. It's distributed but not normal.

How we tackle this? we have the sum it's 0.3465, if you get hit by this un-normalization situation you should normalization it. A-ah but not through above where you calculate the kernel again. No-no-no we can use the sum value to normalize the kernel by dividing each value in kernel with sum value and replace those value with new value. Did you get it?

let see the kernel value

$$\begin{bmatrix} 0.01134 & 0.01365 & 0.01416 & 0.01365 & 0.01134 \\ 0.01365 & 0.01582 & 0.01672 & 0.01582 & 0.01365 \\ 0.01416 & 0.01672 & 0.01768 & 0.01672 & 0.01416 \\ 0.01365 & 0.01582 & 0.01672 & 0.01582 & 0.01365 \\ 0.01134 & 0.01365 & 0.01416 & 0.01365 & 0.01134 \\ \end{bmatrix}$$

Sum = 0.3465

let's pick the center 0.01768. we divide the center

$$G(0,0) = 0.01768 / 0.3465 = 0.0510$$

do that every single value in kernel and replace it with new value and we get

$$\begin{bmatrix} 0.0327 & 0.0394 & 0.0409 & 0.0394 & 0.0327 \\ 0.0394 & 0.0456 & 0.0482 & 0.0456 & 0.0394 \\ 0.0409 & 0.0482 & 0.0510 & 0.0482 & 0.0409 \\ 0.0394 & 0.0456 & 0.0482 & 0.0456 & 0.0394 \\ 0.0327 & 0.0394 & 0.0409 & 0.0394 & 0.0327 \\ \end{bmatrix}$$

it distributed and normalize and we get 1.0358. Hmm... above 1, well for practical purpose stopping from here it's ok i guess, BUT if you a developer you should normalize it again (same as above use the sum and divide replace) so it can get value of 1 or close to 1 like 0.999999 since in computer we always get hit by floating precision problem.

The step above is just to create kernel convolution to blur an image. The rest are how you apply the filter in the image.

Here are gist code that i have to extend your understanding gist

How to apply the kernel in the image it's basically the same like most of filter or blur.

Create new empty image with w x h size, loop every pixel in the old image, in each pixel apply kernel and calculate the neighborhood pixel after that you get new pixel and apply those new pixel into new image.

When apply filter you should think about edge in image like 0,0 pixel since we try to apply n x n kernel (5x5) you cannot apply the kernel in the top left image since there is not -1,0 pixel image. You need to extend your image to handle such edge case, there are few like zero padding (the easiest one) basically for pixel like -1, 0 just set to pixel color to 0.

Hmm... maybe i should explain how to apply blur next time.