How high is an acceptable framerate for animation?

Question

I want to create a snow animation with javascript. With a framerate of 200ms it looks ok but is not 100% fluid. The following example uses 20ms is that ok, or totally inefficient and a waste of CPU?

window.setInterval(snow.draw, 20);

example

snow = {
count: 60,
delay: 20,
flutter: 0.2,
wind: 1.0,
w1: 1,
minSpeed: 0.3,
maxSpeed: 4,
cv: null,
flakes: [],
toggle: function() {
    if(window.snowtimer)
        snow.stop();
    else
        snow.start();
},
resize: function() {
    snow.cv.width = innerWidth;
    snow.cv.height = innerHeight;
    snow.gt = snow.ct.createLinearGradient(0,0,0,snow.cv.height);
    snow.gt.addColorStop(0.0, '#6666ff');
    snow.gt.addColorStop(1.0, '#ffffff');
    snow.ct.fillStyle = snow.gt;
},
start: function() {
    snow.cv = document.createElement('canvas');
    snow.cv.width = snow.cv.height = 10; // set initial size
    snow.cv.id = 'backgroundSnowCanvas';
    document.body.appendChild(snow.cv);
    snow.createFlake();
    snow.ct = snow.cv.getContext('2d'),
    snow.cv.style.position = 'absolute';
    snow.cv.style.top = 0;
    snow.cv.style.left = 0;
    snow.cv.style.zIndex = -1;
    snow.resize();
    var c = snow.count;
    snow.flakes = [];
    do {
        snow.flakes.push(new snow.flake());
    } while(--c);
    snow.ct.fillRect(0,0,snow.cv.width,snow.cv.height);
    window.snowtimer = window.setInterval(snow.draw, snow.delay);
    window.addEventListener('resize',snow.resize);
},
stop: function() {
    window.clearInterval(window.snowtimer);
    var c = document.getElementById('backgroundSnowCanvas');
    c.parentNode.removeChild(c);
    window.snowtimer=snow=null;
},
draw: function() {
    var ct = snow.ct, f = snow.flakes, c = snow.count;
    ct.fillRect(0,0,snow.cv.width,snow.cv.height);

    do {
        if(f[--c].draw(ct) && ++fdone) { };
    } while(c);
    snow.wind += Math.cos(snow.w1++ / 180.0);
},
flake: function() {
    this.draw = function(ct) {
        ct.drawImage(snow.flakeImage,this.x + snow.wind,this.y,this.sz,this.sz);
        this.animate();
    };
    this.animate = function() {
        this.y += this.speed;
        this.x += this.flutter * Math.cos(snow.flutter * snow.flutter * this.y);
        if(this.y > innerHeight)
            this.init(1);
    };
    this.init = function(f) {
        this.speed = snow.minSpeed + (Math.random() * (snow.maxSpeed - snow.minSpeed));
        this.sz = ~~(Math.random() * 40) + 20;
        this.flutter = ~~(Math.random() * snow.flutter * (60-this.sz));
        this.x = (Math.random() * (innerWidth + this.sz)) - this.sz;
        this.y = f ? -this.sz : Math.random() * innerHeight;
    };
    this.init();
},
createFlake: function() {
    snow.flakeImage = document.createElement('canvas');
    snow.flakeImage.width = snow.flakeImage.height = 40;
    var c = snow.flakeImage.getContext('2d');
    c.fillStyle = '#fff';
    c.translate(20,20);
    c.beginPath();
    c.rect(-5,-20,10,40);
    c.rotate(Math.PI / 3.0);
    c.rect(-5,-20,10,40);
    c.rotate(Math.PI / 3.0);
    c.rect(-5,-20,10,40);
    c.closePath();
    c.fill();
},

};

Answer 1

The average human can see 24-30 fps. 15 fps is typical in web animation. High quality movies use about 30 fps. High quality tv animation is around 24 fps.

So

window.setInterval(snow.draw,your choice);

There are a bunch if dependent functions so you may want to play around with your fps using the industry standards as your average and not deviating to greatly. 24 fps looks pretty good to me.

However, you could also use a multiple refresh rate like 48 fps, repeating frames 2 times, if you are displeased.

Still, the amount of processing that goes on can make a huge difference in a web browser where resources can vary greatly. In the old days, a few years ago, this could have a huge effect on how fluid anything was including animation. Its good to be as minimal as possible. Could you combine anything?

Wikipedia has a good article on frame rates and states the following.

The human eye and its brain interface, the human visual system, can process 10 to 12 separate images per second, perceiving them individually.

and Film and video makers use 24p even if their productions are not going to be transferred to film, simply because of the on-screen "look" of the (low) frame rate which matches native film.

Here is some information on animation fps.

Answer 2

One of the key things for an animation to look "smooth" is that the framerate is constant. For a computer, that means the framerate needs to be an even divisor of the monitor framerate: for the 60Hz monitors in common use these days, that means 60FPS, 30FPS, 15FPS, etc.

Most people can perceive the individual frames of a 15FPS framerate, and some people can perceive 30FPS. I'd go for 60FPS (16ms) if your program can manage to draw that fast (especially if it involves fast motion), and 30FPS (33ms) if it can't.

Answer 3

I think 30 frames per second is reasonable. Traditional film stock runs at about 24fps. Most modern video games are around 30fps (60 with higher end graphics cards).

The human eye actually processes around 20 frames per second on average, up to 60 when survival instincts or panic kick in.

1000/30ms is a little more than 30fps.

Answer 4

20ms is too fast. 50FPS is too much for snow effects. 20fps is the typical eye but 25fps, if you want to save on processing.

30FPS or higher for good quality.

Final answer: you should set it to 30ms. Its not a waste if you want the graphic to render close to the fastest human eye. Try it at 40ms (25fps), if you like it will save you on processes and not compromise the visual effect.