# Box Blur and Gaussian Blur... Sort of...

3/27/2008

I've shown a couple different methods for generating procedural textures, namely Perlin Noise, Cellular Textures, and Fault Formation. And while Perlin Noise and Cellular Textures generally look OK on their own, Fault Formations generally don't.  They tend to look harsh with drastic changes from dark to light areas (which actually can be good sometimes).  The best way to fight this though is to use some sort of image filtering on the image to soften it up a bit.

So I'm going to show you two methods for doing this... Well sort of and I'll explain later why I say that.

## Box Blur

A box blur is a technique where you simply take a "box" of pixels around a particular pixel, add up the sum of those pixels, then take that sum and divide it by the number of items in the box. That becomes the new value for the center pixel of that box. Really simple to do and rather fast at that. The best way to do this though is to set up what is called a matrix convolution filter. I would go to that page and copy that code as we'll be using it in this function:

`   1: /// <summary>`
`   2: /// Does smoothing using a box blur`
`   3: /// </summary>`
`   4: /// <param name="Image">Image to manipulate</param>`
`   5: /// <param name="Size">Size of the aperture</param>`
`   6: public static Bitmap BoxBlur(Bitmap Image, int Size)`
`   7: {`
`   8:     Filter TempFilter = new Filter(Size, Size);`
`   9:     for (int x = 0; x < Size; ++x)`
`  10:     {`
`  11:         for (int y = 0; y < Size; ++y)`
`  12:         {`
`  13:             TempFilter.MyFilter[x, y] = 1;`
`  14:         }`
`  15:     }`
`  16:     return TempFilter.ApplyFilter(Image);`
`  17: }`

Like I said, it's rather simple once you have a convolution filter class. All we do is set the weight of each item around a pixel to 1 (equal weight). The size variable is the size of the box to use around each pixel. The larger the box, the blurrier the resulting image. Also larger the box, the more time it takes to run. Another thing to note is that this function along with the matrix convolution filter class are a part of my utility library. You may wish to simply go there to download the code as that will be the most up to date.

## Gaussian Blur

Gaussian blurring is a technique similar to box blurring but uses a normal distribution to accomplish it's goal. Really if you want to know the math behind it, I suggest you click on the link.  It's pretty common in programs like Photoshop and GIMP. Anyway, I'm not going to show you any code to do this technique because you've already seen it.

See that code for box blurring? Guess what, we can accomplish a Gaussian blur with that.  There's no extra code for this method, all we do is run the box blur method three times and we basically accomplish a Gaussian blur (well -/+3% difference anyway). Rather cool, huh?

Anyway, download the code, take a look, leave feedback, etc. and happy coding.

Anonymous
April 27, 2010 4:16 AM

Okay.Thank you sir! it works well.

James Craig
April 26, 2010 7:28 PM

I wasn't suggesting the entire lib. There's one class and one function that you'd need:Function:/// <summary>/// Does smoothing using a box blur/// </summary>/// <param name="Image">Image to manipulate</param>/// <param name="Size">Size of the aperture</param>public static Bitmap BoxBlur(Bitmap Image, int Size){Filter TempFilter = new Filter(Size, Size);for (int x = 0; x < Size; ++x){for (int y = 0; y < Size; ++y){TempFilter.MyFilter[x, y] = 1;}}return TempFilter.ApplyFilter(Image);}Class:/// <summary>/// Used when applying convolution filters to an image/// </summary>public class Filter{#region Constructor/// <summary>

Anonymous
April 26, 2010 2:22 PM

All I need is a simple and fast blur effect.I need it for my newest Screensaver Project.Do you have any advice for me other than your utility lib?

James Craig
April 26, 2010 8:43 AM

To be honest, you should probably use the convolution filter code found here instead:http://www.gutgames.com/post/Matrix-Convolution-Filters-in-C.aspxEither that or the code in my utility library:http://cul.codeplex.com/The code on this page was more to show the concept before I gave up and just started giving away finished code.

Anonymous
April 25, 2010 5:58 PM

How am I supposed to turn the float array back to an image?I'm a little bit confused with that.