Gallery
Instagram
Flickr
Pinterest
DaveCOLLIER
DevelopmentPages
Edge Detect
by Averages
Description
My software for Edge Detect By Average
The rationale for the approach this page takes is elaborated on Edge Detection Scripts.
The software 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 detection software my 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.
You’ll see that painting a result from the default parameters on this page produces a lot of lines. This is on purpose. It is not to make a pretty image, it’s to try and isolate by edges the various different shapes in the original photo.
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 all that helpful, though as with all my software I am constantly experimenting.
or alternatively image url apply
  – see copyright notice
......
This page requires HTML5 – and Javascript your browser version is too old for this page to work for you or you have Javascript switched off.
line colour RGB        
set line colour:
Download Settings
Load Saved Settings File:
Include Gaussian Blur
Gaussian Kernel Matrix Width
Gaussian Kernel Matrix Height
Gaussian Kernel Standard Deviation x axis
Gaussian Kernel Standard Deviation y axis
Pixels each direction for calculating average
Include Brightness check
Lowest significant brightness difference 0–255
Include Hue check
Lowest significant saturation difference by hue
%
Clean to thin lines
Antialias after clean
Remove stubbies and spurs
maximum pixels considered a spur
Join up gaps
maximum rows and columns a join-up line
Antialias after joinup
Open up small rectangles
maximum pixels long side of small rectangle
Remove floaters
maximum pixels considered a floater
pixels spread on output
Antialias at end
Increase opacity of drawn pixels by %
Image Rendering:
Auto
Crisp Edges
Smooth
High Quality
Pixellated
Image rendering is controlled via CSS. The options are CSS image-rendering variables, some of them produce identical results to others in some cases.
Image Smoothing Enabled on Paint
Formula for calculating brightness:
......