Edge Detection

Step 1 Here are 3 photos to try edge detection on:  house2.jpg, car-square.jpg and butterfly-2-square.jpg
Step 2 Version 2: Create controls to load these images, and active vertical and horizontal edge-detection processing (and one for the future) ...

Step 3 - Create the sketch with just the simple Vertical and Horizontal edge detection code installed (ignore the Omni-directional button). 

- Make sure that the threshold slider is "live", meaning that the image immediately responds to the slider's changes.

- That means that the "Vertical edges" and "Horizontal edges" buttons are state changers, each of them changing a state variable that controls edge detection from then on.
Step 4 - Do some research and find a simple (perhaps) edge detection algorithm that can handle edges in any direction.

- Implement it, and have it be triggered by the "Omni-directional" button.

 

Suggestions
- Make the sketch square (width = height).  The test images are square.

- When the "Load" button is pressed, load the image, resize it to the canvas, and display it. And also create an integer array (say, "gray") of the same size as the number of pixels. Immediately on loading, put the integer grayscale value (0 - 255) of each pixel into the "gray" array.

- Create a "state" variable indicating which edge detector is currently in effect: "vertical", "horizontal" or "omni". 

- When, for instance, the "Vertical edges" button is pressed, execute the vertical edge detection algorithm showing the edges (according of the threshold value).  But also set the "state" variable to "vertical".

- Then, whenever the threshold slider is changed, the "state" variable will indicate which algorithm to implement.

 

Here are sample results for simple vertical and horizontal edge detectors...
Vertical edges
Horizontal edges