Blur Show Effect - Html5 Canvas

I want to create a blur show effect like : http://www.flasheff.com/patternsshowcase/ (FESBlur). I've tried to use http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html us

Solution 1:

I'm no expert at any of this, but some very obvious things come to mind:

Method 1: Buffering. Buffering is probably the single most effective way to stop stutters. If you could delay the initiation of the animation by .25 seconds before actually outputting it, you could probably get half of the calculations done before the animation even starts.

Method 2: Caching. The time that a blur takes to process usually grows as the radius of the blur grows. Let's say you have 20 frames in your animation. If you can cache frame 5, 10, 15, and 20 (unblurred image) then you can get frames 1-4 from blurring 5 with a small radius, and you'll get frame 5 for free, then you can get frames 6-9 from blurring 10 with a small radius, and you'll get frame 10 for free, and so on.

Method 3: Interpolation/Blending of Coarse Blurs. Blending two images should be quicker than blurring one image. If you make your animation 21 frames (1-21), then you should be able to calculate frames 1, 5, 9, 13, 17, and 21. Those frames would be free, and you'd the other frames by blending them: frame 2 (F2) would be 75% F1 and 25% F5, F3 would be 50% F1 and 50% F5, and so on.

---

My guess is that this would take a decent amount of tinkering on your part. None of these are going to fix your problem by simply changing a parameter or two to some magic numbers.

Realize this, however: javascript doesn't really get to pick and choose when it will or will not get the attention of the processor, and it's not exactly high on the processor's list of priorities. If the processor decides to go on vacation for 1/10th of a second, there's probably nothing that you can do to stop the stutter.

Solution 2:

Use requestAnimFrame instead of setInterval. More info on http://paulirish.com/2011/requestanimationframe-for-smart-animating/

I tested this with faster blur reduction on my FF5 and it seems to perform fine.

(function animloop(){
  blurImage();
  requestAnimFrame(animloop);
})();

function blurImage(){
    stackBlurImage( "image1", "output", amount, true );
    amount=amount-4;
}