Image processing C# tutorial 2 – edge detection: derivation method

Image processing C# tutorial 2 – edge detection: derivation method

The math (simplified)
An edge on a grayscale image is defined as sudden change in pixel brightness. Imagine a picture of a black square on a white background – the pixel right to the edge of the square will be pure white and one of its neighbor pixels will be pure black. When this happens we mark the black pixel as one of the edge pixel.
Of course, a natural picture rarely has such distinct feature. The edge is usually blurred by gray pixels. However the idea of detect sudden change still applies in finding the edges.
To detect such sudden change we use “the rate of change”, which is to find out how much brightness changes over a small interval – say 1 pixel. Let’s assume A(x,y) is the brightness of pixel (x,y), then the bright change “rate” at pixel (x,y) can be calculated as:


When the rate of change G is greater than a threshold then we say the pixel is an edge pixel. The implementation doesn’t consider noise. The threshold should be adjusted based on the noise level of the image, however here we’ll just pick one. (The tool allows you to dynamically change the threshold manually). Also note that the pixel at (x,y) is actually not used during the calculation for (x,y). This is because we assume the brightness levels vary linearly between the pixels.
The code
The following is a simplified implementation that works on the R channel of the image only. Note the threshold is not adaptive (fixed to 50 in the code) – we’ll discuss that in later posts.

public override Bitmap FilterProcessImage(Bitmap image)
{
    Bitmap ret = new Bitmap(image.Width, image.Height);
   for (int i = 1; i < image.Width-1; i++)
   {
      for (int j = 1; j < image.Height-1; j++)
      {
         Color cr = image.GetPixel(i+1, j);
         Color cl = image.GetPixel(i-1, j);
         Color cu = image.GetPixel(i, j-1);
         Color cd = image.GetPixel(i, j+1);
         int dx = cr.R - cl.R;
         int dy = cd.R - cu.R;
         double power = Math.Sqrt(dx * dx / 4 + dy * dy / 4);
         if (power > 14)
            ret.SetPixel(i, j, Color.Yellow);
         else
            ret.SetPixel(i, j, Color.Black);
      }
   }
   return ret;
}

The result
I started writing a image processing tool that provide a single UI for testing different image filters. Version 0.1 of the image processing test tool can be downloaded here. Note that I just started with the tool so there were some simplification/shortcuts taken and the framework is rough. I’ll keep improving the tool overtime. Following is a sample result of using the tool:
Original image:

Detected edge on grayscale image using threshold 17:

Detected edge on Red channel only using threshold 17:

Interestingly, the R channel result is visually superior than the all-channel result for this particular picture.