Blur

mrzl

Hey everybody, I'm checking out P5.js the first time now and I'm really impressed. Can somebody give me some feedback about if applying a blur filter to an image is possible in in P5.js at the moment?

Thanks already and holla!

KevinWorkman

Possible? Sure. You can do pretty much anything you want with images, since you can access the pixel array directly.

Check out the PImage reference: http://processingjs.org/reference/PImage/

I recommend just trying something out and posting an MCVE if you get stuck on something specific.

mrzl

Hi KevinWorkman. Cheers for the reference, but I'm talking about P5.js not Processing.js. I know it's confusing, so this is a link to the P5.js Image reference: http://p5js.org/reference/#/p5/filter

Unfortunately no Blur is listed in there..

KevinWorkman

Interesting, I don't really know much about P5.js.

But looking at their reference, they also have an Image API that gives you access to the pixels directly:

http://p5js.org/reference/#/p5.Image

Presumably you'd be able to take those pixels and do whatever you want with them, including applying whatever blur filter you want.

I'm not sure you'll find a basic blur() function, but it shouldn't be too hard to implement one.

PhiLho

There are several blur implementations in the forum, search from the main site to find more hits...
Of course, you will only find Java implementations, but adapting to JS shouldn't be too hard.

GoToLoop

• p5*js is a new framework project based on Processing.
• Thus it's not as mature &/or featureful as pjs framework.
• Of course all of those effects and webGL canvas is on its plans!
• If you prefer JS syntax and need those effects, you still can use pjs.
• Just create a tab w/ a ".js" suffixed name and you can write directly in JS rather than Java there.
• In short, both ".pde" & ".java" tabs use Java syntax. ".js" is JS syntax and ".coffee" is CS syntax. ;)

mrzl

It's implemented, but not in the reference yet. As it seems nobody has a clue here:

function setup() {
       createCanvas(1280, 600);

     loadImage("img.png", function(img){
        var clone;
        //Original

        clone = img.get();
        clone.filter("blur", 2);
        image(clone, 10, 130, 100, 100);

    });
    noLoop();
    }

GoToLoop

It's extremely more convenient relying on preload() to loadImage() than setting up a callback function: :D
http://p5js.org/reference/#/p5/preload