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!


  • 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:

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

  • edited February 2015

    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:

    Unfortunately no Blur is listed in there..

  • 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:

    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.

  • 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.

  • edited February 2015
    • 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. ;)
  • edited February 2015

    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;
            clone = img.get();
            clone.filter("blur", 2);
            image(clone, 10, 130, 100, 100);
  • edited February 2015

    It's extremely more convenient relying on preload() to loadImage() than setting up a callback function: :D

Sign In or Register to comment.