Change the paramters and see how it modifies the edge detection results. Click to get a different image (images are 300 x 300 px).

This is a work in progress for a proposed implementation of an edge detection filter to add to the list of p5.js filters. The idea is to rely on existing filters. The standard method of doing edge detection is:

  1. Apply a gaussian smoothing (already implemented by img.filter(BLUR))
  2. Compute the intensity gradient using a convolution with a 3x3 kernel (Sobel / Prewitt). This is what I am implementing here.
  3. Perform edge thinning. I am not sure but I think this is similar to what img.filter(ERODE) does
  4. Apply threshold to have only white edges on black background (img.filter(THRESHOLD))

To discuss the implementation please take a look at the opened issue on github. and share your ideas. The current implementation is shown below in filter_sobel.js.

Show/hide code - filter_sobel.js

The actual sketch that is using this function:

Show/hide code - edge_detection_test.js