How does Khan Academy do filter(BLUR); so fast?

რით შეგვიძლია დახმარება?

‮leinad‬

April 16, 2023 18:08

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

New post

1 comment

Willard

April 19, 2023 14:43
3

Comment actions Permalink
It's definitely not fast. It's called a Guassian blur. If you want to read their source code for it, it's at https://github.com/Khan/processing-js/blob/master/processing.js#L15725

The browser has a built-in Guassian blur function, so I don't know know why PJS doesn't use it, but it's many many times faster than the PJS version. The documentation is at https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/filter

To use it in a PJS program, you can get access to the rendering context like this:
```
var img = getImage("avatars/avatar-team");
textAlign(LEFT, TOP);
fill(0);
draw = function() {
    background(255, 255, 255);

    // Blur everything drawn after this
    this.externals.context.filter = "blur(3px)";
    image(img, 0, 0, 400, 400);

    // Now stop blurring everything
    this.externals.context.filter = "none";
    text(this.__frameRate, 10, 10);
};
```
However I'd suggest using the HTML environment instead, and just learning to use the Canvas API if you're concerned about performance. A vast majority of PJS functions are several orders of magnitude slower than they need to be, for no apparent reason.

კომენტარის დასატოვებლად გთხოვთ გაიაროთ ავტორიზაცია.

How does Khan Academy do filter(BLUR); so fast?

Didn't find what you were looking for?

1 comment

Didn't find what you were looking for?