Explanation
In this requirement, two canvases were used where one served
as a back-canvas to draw the image and perform calculations, and the other
canvas is used to display the final output. Using the back-canvas, the
convolution algorithm is applied using the Laplacian filter to detect edges in
the image. The filter is basically an array of 9 elements, but the algorithm
reads it as a 3x3 neighborhood operation.
When applied, the algorithm traverses through each pixel in
the image. For each pixel, the neighbor pixels are calculated and then the
filter is applied according to the given values. The alpha value is always set
to 255 so that the output will be visible. At the end, the output is drawn onto
the front canvas.
The expected output is a semi black-and-white image with
edges making out the shape of the ‘objects’ present in the image. Below is the
result:
Reflection
The challenge in this requirement is huge to me. The convolution algorithm is difficult to understand with examples in the tutorial having little to no notes attached. It was difficult trying to search on Google, but eventually I stumbled upon html5rocks and learned from there. As soon as I saw that website, I was in awe at the power of HTML 5 and how much technology has developed over the years. A few years back, I still remember doing web programming as a subject. Ah, the nostalgia...
No comments:
Post a Comment