Processing.js BLUR filter() bug

This post started as an attempt to create a demo of the blur feature in Processing. I wanted to blur a photo, but discovered after some pain that the image must be loaded from the directory (or a subdirectory) of this page ( if I want to use the canvas element in this page. So I settled for an iframe, which you can see at the bottom of this post.

But in the process of studying this problem, I played with using a drawn image, and discovered that although image blurring works fine in Processing, the image gets shifted up and left in Processing.js. Moreover, the blurred image is not correct. In the sketch below, the original image is vertically symmetric, but the blurring is not. To change blur, move the pointer. Blurring increases as you move your pointer from left to right across the image.


And in color:


Reflections on my experience:

  • Read the Friendly Manual, a good summary of how to write Processing code that works under Processing.js.
  • I found other references to this bug from 2011. This suggests investigating how well Processing.js is being maintained.
  • I like being able to embed dynamic (and ideally interactive) content in web pages. But that is not the design goal of Processing. The really awesome stuff you can see that uses Processing may be a static image, or a video, but not interactive. Complex scenes have long render times. Interactive scripts should usually be simple. And if interaction is not necessary, consider Vimeo.
  • When you find a bug, it's good to produce a minimalist example. The source for these is tidied up so that it isn't showing features that aren't part relevant to the bug.
  • A blur filter is actually pretty simple to write, and would make a good student exercise.
  • It is good practice to check whether Processing's draw() method needs to do anything. You'll note from the source linked above that it returns early if the blur has not changed from the previous call. Without this check, the webpage gets sluggish as it calls the blur filter 30 times a second.