##### Actions

Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

# Gaussian Blur Filter Effect

Code Example
Source file: [1]
Tested with
SDK: Windows Phone 8.1
Devices(s): lumia 920, 820
Compatibility
Platform(s):
Windows Phone 8
Article
Created: summeli (26 Jun 2014)
Last edited: Loukt (28 Jun 2014)

## Introduction

Gaussian blur is a widely used effect in computer graphics. It can be used for reducing image noise and reducing image details. However this article only focuses on the blur effect, which can be used by itself too. For more information about Gaussian function see the Wikipedia page

 Image without Gaussian blurring Image with Gaussian blurring

## Creating the effect

This article will cover implementing the 2D Gaussian Blur effect by multiplying two 1D gaussian functions in y- and x-directions.

### Pre-calculating the kernel

In this article we'll be using an online tool to calculate the kernel for our gaussing blur effect. I used gausian filter calculator to calculate a kernel for me. I made a 1 x 5 matrix with sigma 20 to get nice big blur into the image.

`protected double[] gausianKernel = { 0.1900801279413907, 0.2048843573061478, 0.21007102950492296, 0.2048843573061478, 0.1900801279413907, };`

### 1D Convolution

`public uint[] Filter1DSymmetric(uint[] source, int height, int width){	uint[] ret = new uint[height * width];  	for (int y = 0; y < height; y++)	{		int index = y;		int ioffset = y * width;		for (int x = 0; x < width; x++)		{			double r = 0, g = 0, b = 0, a = 0;			int moffset = 2;			for (int col = -2; col <= 2; col++)			{				double f = gausianKernel[moffset + col];				int ix = x + col;				ix = clampEdges(width, ix);				uint rgb = source[ioffset + ix];				r += f * ((rgb >> 16) & 0xff);				g += f * ((rgb >> 8) & 0xff);				b += f * (rgb & 0xff); 			}			//convoluted pixel values			uint ca = 0;			uint cr = clamp((int)(r + 0.5));			uint cg = clamp((int)(g + 0.5));			uint cb = clamp((int)(b + 0.5));			ret[index] = (ca << 24) | (cr << 16) | (cg << 8) | cb;			index += height;		}	}	return ret;}`

### Calculating the Gaussian Blur

Now we have the 1D convolution function for the Gaussian blur, so we're going to run it twice once for Y-direction and second time for X-direction to have 2D Gaussian Blur.

`protected override void OnProcess(PixelRegion sourcePixelRegion, PixelRegion targetPixelRegion){	int height = Convert.ToInt32(sourcePixelRegion.ImageSize.Height);	int width = Convert.ToInt32(sourcePixelRegion.ImageSize.Width);	uint[] src = sourcePixelRegion.ImagePixels; 	//calculate the 1D symmetric conviolution twice for gausian blur	uint[] res1 = Filter1DSymmetric(src, height, width);	uint[] res2 = Filter1DSymmetric(res1, width, height); 	//copy the result into targetPixelRegion	uint[] target = targetPixelRegion.ImagePixels;	Buffer.BlockCopy(res2, 0, target, 0, target.Length * sizeof(uint));}`

### Performance Considerations

In this example we're making few copy operations to keep the code a bit easier to read. This is causing some hit in performance, so it's only rendering at about 2FPS with real time filter example. You could make it faster by reducing the copy operations, and writing directly into target buffer instead.

## Using the Gausian Blur Effect

You can use the filter in many ways. But perhaps the easiest way to enable it is to take it as a part of the realtime-filter-demo project.

It's recommended to read the walk-through of the solution available here too).

Just add the following code into your NokiaImagingSDKEffects.cs, and you can launch the new effect from there.

`case xx: //replace xx with a number according the effectCount in your list  {  EffectName = String.Format(nameFormat, (_effectIndex + 1), "Gaussian Blur");  _customEffect = new GausianBlurEffect(_cameraPreviewImageSource);   }  break;`

### Using the Gaussian filtger as base

You can also make new effects by using the Gaussian filter as a base for your new Filter class. You can easily do the gaussian blur just by running the Filter1DSymmetric function twice, and do noise reduction by removing the blurred image from the original image. This sounds like magic, but it should work.

This code was based on this blog post from Bibek Subedi and Java Imaging processing tutorial by Jh Labs
Gaussian Blur in Wikipedia .