Other Posts in Image Editing

  1. Perlin Noise
  2. Fault Formation
  3. Cellular Textures
  4. Resizing an Image in C#
  5. Box Blur and Gaussian Blur... Sort of...
  6. Thermal Erosion
  7. Using Mid Point Displacement to Create Cracks
  8. Fluvial Erosion
  9. Creating Marble Like Textures Procedurally
  10. Procedural Textures and Dilation
  11. Converting Image to Black and White in C#
  12. Getting an HTML Based Color Palette from an Image in C#
  13. Adding Noise/Jitter to an Image in C#
  14. Creating Pixelated Images in C#
  15. Edge detection in C#
  16. Using Sin to Get What You Want... In C#...
  17. Noise Reduction of an Image in C# using Median Filters
  18. Image Dilation in C#
  19. Sepia Tone in C#
  20. Kuwahara Filter in C#
  21. Matrix Convolution Filters in C#
  22. Symmetric Nearest Neighbor in C#
  23. Bump Map Creation Using C#
  24. Normal Map Creation Using C#
  25. Creating Negative Images using C#
  26. Red, Blue, and Green Filters in C#
  27. Converting an Image to ASCII Art in C#
  28. Adjusting Brightness of an Image in C#
  29. Adding Noise to an Image in C#
  30. Adjusting the Gamma of an Image Using C#
  31. Adjusting Contrast of an Image in C#
  32. Drawing a Box With Rounded Corners in C#
  33. Anding Two Images Together Using C#
  34. Motion Detection in C#
  35. Creating Thermometer Chart in C#
  36. Colorizing a Black and White Image in C#
  37. Extracting an Icon From a File
  38. Setting the Pixel Format and Image Format of an Image in .Net
  39. Using Unsafe Code for Faster Image Manipulation
  40. Sobel Edge Detection and Laplace Edge Detection in C#

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.



Comments

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.