Overview

Welcome back for the second installment in this series. This installment serves as an introduction to the world of convolution filters. It is also the first version of our program that offers one level of undo. We'll build on that later, but for now I thought it mandatory that you be able to undo your experiments without having to reload the image every time.

So what is a convolution filter ? Essentially, it's a matrix, as follows:

The idea is that the pixel we are processing, and the eight that surround it, are each given a weight. The total value of the matrix is divided by a factor, and optionally an offset is added to the end value. The matrix above is called an identity matrix, because the image is not changed by passing through it. Usually the factor is the value derived from adding all the values in the matrix together, which ensures the end value will be in the range 0-255. Where this is not the case, for example, in an embossing filter where the values add up to 0, an offet of 127 is common. I should also mention that convolution filters come in a variety of sizes, 7x7 is not unheard of, and edge detection filters in particular are not symmetrical. Also, the bigger the filter, the more pixels we cannot process, as we cannot process pixels that do not have the number of surrounding pixels our matrix requires. In our case, the outer edges of the image to a depth of one pixel will go unprocessed.

A Framework

First of all we need to establish a framework from which to write these filters, otherwise we'll find ourselves writing the same code over and again. As our filter now relies on surrounding values to get a result, we are going to need a source and a destination bitmap. I tend to create a copy of the bitmap coming in and use the copy as the source, as it is the one getting discarded in the end. To facilitate this, I define a matrix class as follows:

I'm sure you noticed that it is an identity matrix by default. I also define a method that sets all the elements of the matrix to the same value.

The pixel processing code is more complex than our last article, because we need to access nine pixels, and two bitmaps. I do this by defining constants for jumping one and two rows ( because we want to avoid calculations as much as possible in the main loop, we define both instead of adding one to itself, or multiplying it by 2 ). We can then use these values to write our code. As our initial offset into the different color is 0, 1, and 2, we end up with 3 and 6 added to each of those values to create indices for three pixels across, and use our constants to add the rows. In order to ensure we don't have any values jumping from the bottom of the image to the top, we need to create one int, which is used to calculate each pixel value, then clamped and stored. Here is the entire function:

Not the sort of thing you want to have to write over and over, is it ? Now we can use our ConvMatrix class to define filters, and just pass them into this function, which does all the gruesome stuff for us.

Smoothing

Given what I've told you about the mechanics of this filter, it is obvious how we create a smoothing effect. We ascribe values to all our pixels, so that the weight of each pixel is spread over the surrounding area. The code looks like this:

As you can see, it's simple to write the filters in the context of our framework. Most of these filters have at least one parameter, unfortunately C# does not have default values, so I put them in a comment for you. The net result of apply this filter several times is as follows:

Gaussian Blur

Gaussian Blur filters locate significant color transitions in an image, then create intermediary colors to soften the edges. The filter looks like this:

Gaussian Blur

1

2

1

2

4

2

1

2

1

/16+0

The middle value is the one you can alter with the filter provided, you can see that the default value especially makes for a circular effect, with pixels given less weight the further they go from the edge. In fact, this sort of smoothing generates an image not unlike an out of focus lens.

Sharpen

On the other end of the scale, a sharpen filter looks like this:

Sharpen

0

-2

0

-2

11

-2

0

-2

0

/3+0

If you compare this to the gaussian blur you'll note it's almost an exact opposite. It sharpens an image by enhancing the difference between pixels. The greater the difference between the pixels that are given a negative weight and the pixel being modified, the greater the change in the main pixel value. The degree of sharpening can be adjusted by changing the centre weight. To show the effect better I have started with a blurred picture for this example.

Mean Removal

The Mean Removal filter is also a sharpen filter, it looks like this:

Mean Removal

-1

-1

-1

-1

9

-1

-1

-1

-1

/1+0

Unlike the previous filter, which only worked in the horizontal and vertical directions, this one spreads it's influence diagonally as well, with the following result on the same source image. Once again, the central value is the one to change in order to change the degree of the effect.

Embossing

Probably the most spectacular filter you can do with a convolution filter is embossing. Embossing is really just an edge detection filter. I'll cover another simple edge detection filter after this and you'll notice it's quite similar. Edge detection generally works by offsetting a positive and a negative value across an axis, so that the greater the difference between the two pixels, the higher the value returned. With an emboss filter, because our filter values add to 0 instead of 1, we use an offset of 127 to brighten the image, otherwise much of it would clamp to black.

The filter I have implemented looks like this:

Emboss Laplascian

-1

0

-1

0

4

0

-1

0

-1

/1+127

and it looks like this:

As you might have noticed, this emboss works in both diagonal directions. I've also included a custom dialog where you can enter your own filters, you might like to try some of these for embossing:

Horz/Vertical

0

-1

0

-1

4

-1

0

-1

0

/1+127

All Directions

-1

-1

-1

-1

8

-1

-1

-1

-1

/1+127

Lossy

1

-2

1

-2

4

-2

-2

1

-2

/1+127

Horizontal Only

0

0

0

-1

2

-1

0

0

0

/1+127

Vertical Only

0

-1

0

0

0

0

0

1

0

/1+127

The horizontal and vertical only filters differ for no other reason than to show two variations. You can actually rotate these filters as well, by rotating the values around the central point. You'll notice the filter I have used is the horz/vertical filter rotated by one degree, for example.

Let's not get carried away

Although this is kinda cool, you will notice if you run Photoshop that it offers a lot more functionality than the emboss I've shown you here. Photoshop creates an emboss using a more specifically written filter, and only part of that functionality can be simulated using convolution filters. I have spent some time writing a more flexible emboss filter, once we've covered bilinear filtering and the like, I may write an article on a more complete emboss filter down the track.

Edge Detection

Finally, just a simple edge detection filter, as a foretaste of the next article, which will explore a number of ways to detect edges. The filter looks like this:

Edge Detect

1

1

1

0

0

0

-1

-1

-1

/1+127

Like all edge detection filters, this filter is not concerned with the value of the pixel being examined, but rather in the difference between the pixels surrounding it. As it stands it will detect a horizontal edge, and, like the embossing filters, can be rotated. As I said before, the embossing filters are essentially doing edge detection, this one just heightens the effect.

What's in store

The next article will be covering a variety of edge detection methods. I'd also encourage you to search the web for convolution filters. The comp.graphics.algorithms newsgroup tends to lean towards 3D graphics, but if you search an archive like google news for 'convolution' you'll find plenty more ideas to try in the custom dialog.

Share

About the Author

Programming computers ( self taught ) since about 1984 when I bought my first Apple ][. Was working on a GUI library to interface Win32 to Python, and writing graphics filters in my spare time, and then building n-tiered apps using asp, atl and asp.net in my job at Dytech. After 4 years there, I've started working from home, at first for Code Project and now for a vet telemedicine company. I owned part of a company that sells client education software in the vet market, but we sold that and I worked for the owners for five years before leaving to get away from the travel, and spend more time with my family. I now work for a company here in Hobart, doing all sorts of Microsoft based stuff in C++ and C#, with a lot of T-SQL in the mix.

Thanks again for sharing the code. I did finally convert the code to VB with alpha channel taken into consideration (thanks to some posts in the thread). Below is a VB function.

The problem I'm facing is grayish artifacts surrounding the text, when filter is applied to the transparent bitmap. Generating image with solid background does not produce artifacts – it is perfect even when compared to the same text image created in Photoshop. Zoomed clips can be seen HERE. The last image displays a problem.

So far I was not successful rectifying the problem and wonder how to modify algorithm to preserve the shade for transparent pixels, when the channel values are gathered and calculated from "neighbors". Thanks for any help!

hello i have to match two images and to check wether they are same
or not
i have converted my image to grayscale and binarization is also done
now plz guide me and refer some material to understand what to do next
waiting for reply
thanks

"also I don't think "TranslateOneToTwoBillion OneHundredAndFortySevenMillion FourHundredAndEightyThreeThousand SixHundredAndFortySeven()" is a very good choice for a function name" - SpacixOne ( offering help to someone who really needed it ) ( spaces added for the benefit of people running at < 1280x1024 )

For instance let's take an example of your Gaussian Blur filter. You have given a weight as 4 to the center pixel. And surrounding 8 pixels are also given 2's and 1's accordingly.
So my question is that is it necessary to have the pixel value to be 4 or is it fine to give any other weight. And if we give another weight say 13 then how about the surrounding pixel's . Would they change as well or not. And how to find out which weight would give the best result.
This question is valid for every convolution filter you implemented.

p is a pointer to a byte array which holds the actual bitmap data. Ditto for pSrc. Both arrays are 1D, so you can't access each pixel as you normally would using a 2D array (x, y). Instead, you need to keep a running total of where you are within the data.

This code supports 24-bit RGB bitmaps, so each colour is comprised of 3 pixels.

This code is assuming the 32bppARGB format, if you want to use it for ibPP first you have to modify that code , for grey scale images applies the same
U need to study the GDI Image format and how to use Scan & stride!! search on Google you will get the answer,
Vinayak
vinu_bharadi@rediffmail.com

So I realize this is an old tutorial, but if you are still answering questions related to it, do you have a suggestions as to how to do a smooth filter in realtime? Essentially, I want a user to be able to pan the image, and only have the image that is currently being viewed to be smoothed, but always maintaining the integrity of the tif file.

Thank you Mr. Graus for your tutorials and I'm currently using it for many different projects.

Although I was able to port your per pixel code for a 32Bit (Alpha Included) format, The complexity of "Conv3x3" method makes me unable to change the code. I tried converting my RGBa into a 3 byte system, neglecting the Alpha and use the normal Conv3x3 method. But this is Cpu consuming that I want to get rid of, since I have to port it back to the alpha (keeping the alpha).

Please if you could help me have the 32bit version or perhaps point me to the right direction?

I am doing exercise Image Processing using CSharp 2005 and input data bitmap but I can't correct exer. I need sourcecode SobelFilter and CannyFilter using CSharp2005. Thank you very much!!!!!!
See you soon

Sir
This tranformations are very good and its applying on image very well.
But for some security perpose I cant use this unsafe code and I will tried to made or transfer it to safe code but i didnt so please if it is possible can you provide safe code for same (Image Processing for Dummies with C# and GDI+ Part 2 - Convolution Filters) so its very helful for me.