Edge Detection: Gradient operators Demo

This online edge recognition app demonstrates how popular gradient operators work on a variety of images and videos.

With this tool you can test how the contours of objects are extracted from images using various algorithms and parameters. You can choose some of the most famous edge detectors like: Prewitt, Sobel-Feldman filter and Scharr.

Gradient operators Demo

User Interface

Generic option

See our online test gallery to learn how to use the generic options.

Configure the filter

This tool has the following UI controls to help configure the gradient detection filter:

  • Sigma – controls the standard deviation of the Gaussian kernels. The higher the value, the stronger the effect of the filter.
  • Filter – here you can switch and compare different gradient operators:
  • Mode – use this dropdown to select the edge detection configuration
    • Generic – this mode is the generic one – all gradient directions (horizontal and vertical) without NMS (edge non-maximum suppression)
    • Generic with NMS – this option also extracts edges in both directions, but as the next step makes NMS
    • Horizontal – extracts horizontal image gradient
    • Vertical – extracts vertical image gradient

How does the demo work?

The gradient filtering is a well-known contour image processing technique. These operators are fast and quite accurate and give good results for edge detection.

Our demo app performs the following steps to extract image edges using the selected filter:

var sigma = 2.0; // E.g. standard deviation = 2.0
var fivekogfx = new FivekoGFX();
fivekogfx.load(canvas);
fivekogfx.gauss(sigma);
fivekogfx.sobel();
fivekogfx.draw(canvas);
computer-vision-studio-thumb

computer-vision-tutorials-fivekogfx

See more online apps

How to implement Sobel filter with FivekoGFX API

Visit the detailed Sobel operator tutorial

fivekogfx-source-code-thumb

You can explore the API to read more details.