| 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 |
 |
