Question

http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html

If I move the slider on this page, the blurring is very smooth.

But if I try and automate the animation:

var speed = 1250;
var blur = 100;
var interval = speed/blur;

setInterval(function(){
  blur--;
  stackBlurImage(image, canvas, blur);
}, interval);

The steps are very obvious and it doesn’t even work at high speed.

Could anyone suggest an alternative approach to this?

Answer 1

Pre-render the different blur levels, store them and cycle through them as frames. Its possible that whatever stackBlurImage does just can’t be done fast enough to look like an animation.

Edit: I take that back, exactly what you did: http://jsfiddle.net/nwellcome/27QUM/ that looks great to me in Chrome, what browser are you using?

Edit 2: Try the second approach in this fiddle: http://jsfiddle.net/nwellcome/27QUM/4/, rather than decreasing the blur radius by 1 each time, fix the fps at something setInterval can handle and manipulate the amount you decrease the blur radius each frame.

var fps = 30;
var blur = 100;
var blurTime = 0.5; // seconds
var interval = 1000 / fps; 
var step = blur/ (fps * blurTime);

var anim = setInterval(function(){
    blur-= step;
    if (blur < 0) {
        clearInterval(anim);
    }
    stackBlurImage(image, canvas, blur);
}, interval);

Edit 3: just for the fun of it, with the HTML5 file API, you can upload your own image to blur: http://jsfiddle.net/nwellcome/27QUM/12/