I spent the last two weeks on a project that I hoped would help me obtain a concrete understanding of how image kernels work. You know those image filters you have in Photoshop or your typical photo editor app that let you sharpen or blur an image? Those are implemented using image kernels. This blog post has by far the best explanation of image kernels I could find. For something a little more formal, here's Wikipedia.

The demo is online and I've given the link to it below. What you'll see is a simple page with some instructions at the top. Feel free to play around with the kernel and sample images.

The image is split into four partitions and each partition is passed to a web worker to be processed so we don't block the main thread. I found that four web workers are only a little over twice as fast as one web worker processing the entire image alone. I expected four times the speed, but I guess I got too optimistic, not considering the overhead in copying the pixel arrays, etc.

I can conclude that I now do have a better understanding of how image kernels work (aside from the fact that I ended up spending way more time working with web workers). If only this could get me extra credit for my image processing course.

Here's the demo and the repository: