There exists various software for detecting edges. With one notable exception this tends to make edges with floating lines, i.e. not suitable for filling with colour as the lines don’t join up. The obvious exception is Image Trace on the wonderful Adobe Illustrator, however that tends to make so many edges, so many shapes, that it is not particularly useful for making simplified graphics. There may be ways round this with Illustrator but I have not yet found it.

The software on this page looks at detecting edges from an image.

Different images and parts of images are different. Some have very stong contrast in brightnesses and others less so, some are more delineable from their contrasting hues, some from a contrast in colour saturation. The classic edge detection software such as the formulas devised by J.F Canny in 1986 work by detecting levels of brightness of adjoining pixels. This is undoubtedly a very strong factor in identifying an edge, but it isn’t the only one, we see an edge if there is contrast in hue, too, even two hues of the same brightness, provided that is that the brightness is quite high, though not too high. We won’t detect an edge if the adjoining hues are very dark, nor if they are very bright.

And while we can detect an edge if two adjoining pixels are of different brightness, the edge detection wil be more apparent with a greater difference in brightness.

Unlike the classic edge software my edge detection by averages software does not work on gradients. Instead it looks at a specified number of pixels verically above, horizontally to the left, and diagonally north-west and takes an average of the difference in that number of pixels to calculate relative brightness, as regards hue it similarly works on average difference, using perceptual hue name, rather than numeric value on the colour circle.

This page’s script can produce lines using the Canny formula or by my edge detect by averages, or it can take a .png with lines produced by other software, e.g. Illustrator, and a transparent background and will work on that.

Whichever methodology is used to define the edges painting a result can produce a lot of lines. Parameters on this page help to minimise extraneous lines, or make more if there are too few. Parameters are set on the page.

The coding scripts used by this page are all client-side Javascript. It works reasonably fast, I am optimising all the time, could be faster though because of the volume of data being handled. Pushing the processing to the server does not seem helpful, too much data to bat back and forth, though as with all my software I am constantly experimenting.

The rationale for the edge detection by averages approach this page takes is elaborated on Edge Detection Scripts.