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

Instant beer goggles for your images.
Mar 27 2008 by James Craig

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:

 /// <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);
}

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.