How does Khan Academy do filter(BLUR); so fast?
Hello Khan Academy computer programmers,
How does a function such as filter(BLUR); blur an image at the incredible speed it does?
I guess this should be a question for Processing.js, but I'm curious if anyone here already knows this. I've recently begun researching image convolutions. Based on what I have learned, a convolution has to do lots of logic for every pixel in an image before the result is finished. For example, a blur convolution would look at a pixel, do some math involving the color of the pixel as well as the pixels around it while referencing the kernel (a matrix), and then move on to the next pixel.
From what I understand, this process should be extremely slow... right? My question involves the
filter(kind, param);
function native to Processing.js. If a user wanted to blur an image without building the convolution themselves, they could run filter(BLUR, 3); to achieve the same result. My question is, how is this function so fast?? I made this program, that blurs an image every frame and prints out the framerate:
https://www.khanacademy.org/computer-programming/why-is-filterblur-fast/5778245942558720
How is it possible for the sandbox to look at every pixel and do lots of math logic every single frame while still running at 15 fps? Is it using a different method than image convolutions?
Thanks for taking the time to read this,
Daniel Eppley
Please sign in to leave a comment.