Gaussian Blur

Gaussian Blur

Back then while building my side project (ASCII Render Program), i stumbled upon Gaussian Blur while experimenting with edge detection in images. In a video from Computerphile the Video give a recommendation 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, so yes we use bell-curve 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 (i test using small σ number) but if we 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

As 2 above picture first one use Gaussian Blur and second Box Blur. As you can see the Box Blur give use multiple gray color, this happen because because use Average Sample to calculate pixel, so when computer calculate pixel it using Average value, let says computer calculate pixel located in 4,4 in x,y coordinate it will look their neighborhood pixel (included center pixel) and sum all value and then divide the value to get the average value.

While Gaussian Blur it's using bell-curve so when the computer calculate want to calculate pixel located in 4,4 in x,y coordinate. It almost the same calculate pixel with their neighborhood pixel, the difference are instead sum all and divide to get average value, Gaussian use distribution technique where the Gaussian will decide how much each pixel contribute to get pixel value among their neighborhood (included center pixel). And like the word "Gaussian" the center pixel will contribute the most instead the neighborhood. Below are the explanation for how it works.

Let's just says, Box Blur creates a convolution kernel that’s very simple a n × n matrix where every value is the same (start from 0 when create kernel). This makes it fast and easy to compute, but the blur can look harsh at the edges.

A Gaussian Blur, on the other hand, builds its kernel using the bell curve (Gaussian function). Instead of every value being identical, the numbers in the kernel vary depending on their distance from the center. This produces a smoother, more natural blur that blends edges more gently.

Formula

The function below is used to create Convolution Kernel (for you who don't know what is Convolution Kernel 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 Convolution Kernel where if we sum all value in kernel it should give us approx of 1 and 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.

That’s why we normalize, so the total sum of the kernel equals 1, keeping the image brightness consistent after convolution.

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 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 distribution from 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 where x, y is -2, -2 and pi and e same as previous

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.

The thing about this Convolution Kernel 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 equation above or below to get validate kernel size

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

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 Convolution Kernel 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 size (5x5) you cannot apply the kernel in the top left image since there is no -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 located in -1, 0 just set to pixel color to 0.

Hmm... maybe i should explain how to apply blur next time. The blog become too long. Probably next is how apply Gaussian so it's will technical

Anyway Closing

Gaussian Blur is a great example of how mathematical functions directly shape the way we process and see images. From here, it can be extended to edge detection, sharpening, and even deep learning filters.