van an nguyen

Setting the frame rate

Using the time to set up the frame rate of the animation

Principle: even if the mainloop is called 60 times per second, ignore some frames in order to reach the desired frame rate

It is also possible to set the frame rate using time based animation: we can set a global variable that corresponds to the desired frame rate and compare the elapsed time between two executions of the animation loop:

    • If the time elapsed is too short for the target frame rate: do nothing,
    • If the time elapsed exceeds the delay corresponding to the chosen frame rate: draw the frame and reset this time to zero.

Here is the an online example at JSBin.

Try to change the parameter value of the call to: 

  1. setFrameRateInFramesPerSecond(5); // try other values!

Screenshot of a jsbin example with an animated curve, we can set the framerate in this example...

Source code of the example:

  1. <!DOCTYPE html>
  2. <html lang=“en”>
  3.  <head>
  4.  <meta charset=utf-8 />
  5.  <title>Set framerate using a high resolution timer</title>
  6.  </head>
  7.  <body>
  8.  <p>This example measures and sums deltas of time between consecutive frames of animation. It includes a <code>setFrameRateInFramesPerSecond</code> function you can use to reduce the number of frames per second of the main animation.</p>
  10.  <canvas id=“myCanvas” width=“700” height=“350”>
  11.  </canvas>
  12.  
  13.    var canvas = document.querySelector(“#myCanvas”);
  14.    var ctx = canvas.getContext(“2d”);
  15.    var width = canvas.width, height = canvas.height;
  16.    var lastX = width * Math.random();
  17.    var lastY = height * Math.random();
  18.    var hue = 0;
  20.    // Michel Buffa: set the target frame rate. TRY TO CHANGE THIS VALUE AND SEE
  21.    // THE RESULT. Try 2 frames/s, 10 frames/s, 60 frames/s Normally there
  22.    // should be a limit of 60 frames/s in the browser’s implementations.
  23.    setFrameRateInFramesPerSecond(60);
  25.   // for time based animation. DelayInMS corresponds to the target framerate
  26.   var now, delta, delayInMS, totalTimeSinceLastRedraw = 0;
  28.   // High resolution timer
  29.   var then = performance.now();
  31.   // start the animation
  32.   requestAnimationFrame(mainloop);
  34.   function setFrameRateInFramesPerSecond(frameRate) {
  35.     delayInMs = 1000 / frameRate;
  36.   }
  38.   // each function that is going to be run as an animation should end by
  39.   // asking again for a new frame of animation
  40.   function mainloop(time) {
  41.     // Here we will only redraw something if the time we want between frames has
  42.     // elapsed
  43.     // Measure time with high resolution timer
  44.     now = time;
  46.     // How long between the current frame and the previous one?
  47.     delta = now – then;
  48.     // TRY TO UNCOMMENT THIS LINE AND LOOK AT THE CONSOLE
  49.     // console.log(“delay = ” + delayInMs + ” delta = ” + delta + ” total time = ” +
  50.     // totalTimeSinceLastRedraw);
  52.     // If the total time since the last redraw is > delay corresponding to the wanted
  53.     // framerate, then redraw, else add the delta time between the last call to line()
  54.     // by requestAnimFrame to the total time..
  55.     if (totalTimeSinceLastRedraw > delayInMs) {
  56.        // if the time between the last frame and now is > delay then we
  57.        // clear the canvas and redraw
  59.        ctx.save();
  61.        // Trick to make a blur effect: instead of clearing the canvas
  62.        // we draw a rectangle with a transparent color. Changing the 0.1
  63.        // for a smaller value will increase the blur…
  64.        ctx.fillStyle = “rgba(0,0,0,0.1)”;
  65.        ctx.fillRect(0, 0, width, height);
  67.        ctx.translate(width / 2, height / 2);
  68.        ctx.scale(0.9, 0.9);
  69.        ctx.translate(-width / 2, –height / 2);
  71.        ctx.beginPath();
  72.        ctx.lineWidth = 5 + Math.random() * 10;
  73.        ctx.moveTo(lastX, lastY);
  74.        lastX = width * Math.random();
  75.        lastY = height * Math.random();
  77.        ctx.bezierCurveTo(width * Math.random(),
  78.                          height * Math.random(),
  79.                          width * Math.random(),
  80.                          height * Math.random(),
  81.                          lastX, lastY);
  83.        hue = hue + 10 * Math.random();
  84.        ctx.strokeStyle = “hsl(“ + hue + “, 50%, 50%)”;
  85.        ctx.shadowColor = “white”;
  86.        ctx.shadowBlur = 10;
  87.        ctx.stroke();
  89.        ctx.restore();
  91.        // reset the total time since last redraw
  92.        totalTimeSinceLastRedraw = 0;
  93.     } else {
  94.        // sum the total time since last redraw
  95.        totalTimeSinceLastRedraw += delta;
  96.     }
  98.     // Store time
  99.     then = now;
  101.     // request new frame
  102.     requestAnimationFrame(mainloop);
  103.   }
  104.  
  105.  </body>
  106. </html>

SAME TECHNIQUE WITH THE BOUNCING RECTANGLE. SEE HOW WE CAN set BOTH SPEED AND FRAME-RATE USING A HIGH-RESOLUTION TIME

Here is a modified version on JSBin of the example with the rectangle that also uses this technique. In this version, you can change both the speed in pixels/s and the frame rate.

Source code:

  1. <!DOCTYPE html>
  2. <html lang=“en”>
  3. <head>
  4. <meta charset=utf-8 />
  5. <title>Bouncing rectangle with high resolution timer and adjustable frame rate</title>
  6.  
  7.    var canvas, ctx;
  8.    var width, height;
  9.    var x, y, incX; // incX is the distance from the previously drawn rectangle
  10.                    // to the new one
  11.    var speedX; // speedX is the target speed of the rectangle in pixels/s
  13.    // for time based animation, DelayInMS corresponds to the target frame rate
  14.    var now, delta, delayInMS, totalTimeSinceLastRedraw=0;
  15.    // High resolution timer
  16.    var then = performance.now();
  18.    // Michel Buffa: set the target frame rate. TRY TO CHANGE THIS VALUE AND SEE
  19.    // THE RESULT. Try 2 frames/s, 10 frames/s, 60, 100 frames/s Normally there
  20.    // should be a limit of 60 frames/s in the browser’s implementations, but you can 
  21.    // try higher values
  22.    setFrameRateInFramesPerSecond(25);
  24.    function setFrameRateInFramesPerSecond(framerate) {
  25.      delayInMs = 1000 / framerate;
  26.    }
  28.    // Called after the DOM is ready (page loaded)
  29.    function init() {
  30.      // init the different variables
  31.      canvas = document.querySelector(“#mycanvas”);
  32.      ctx = canvas.getContext(‘2d’);
  33.      width = canvas.width;
  34.      height = canvas.height;
  36.      x=10; y = 10;
  37.      // Target speed in pixels/second, try with high values, 1000, 2000…
  38.      speedX = 2000;
  40.      // Start animation
  41.      requestAnimationFrame(animationLoop)
  42.    }
  44.    function animationLoop(time) {
  45.      // Measure time with high resolution timer
  46.      now = time;
  48.      // How long between the current frame and the previous one?
  49.      delta = now – then;
  51.      if(totalTimeSinceLastRedraw > delayInMs) {
  52.        // Compute the displacement in x (in pixels) in function of the time elapsed
  53.        // since the last draw and
  54.        // in function of the wanted speed. This time, instead of delta we
  55.        // use totalTimeSinceLastRedraw as we’re not always drawing at
  56.        // each execution of mainloop
  57.        incX = calcDistanceToMove(totalTimeSinceLastRedraw, speedX);
  59.        // an animation involves: 1) clear canvas and 2) draw shapes,
  60.        // 3) move shapes, 4) recall the loop with requestAnimationFrame
  62.        // clear canvas
  63.        ctx.clearRect(0, 0, width, height);
  65.        ctx.strokeRect(x, y, 10, 10);
  67.        // move rectangle
  68.        x += incX;
  70.       // check collision on left or right
  71.       if((x+10 >= width) || (x  0)) {
  72.         // cancel move + inverse speed
  73.         x -= incX;
  74.         speedX = –speedX;
  75.       }
  76.       // reset the total time since last redraw
  77.       totalTimeSinceLastRedraw = delta;
  78.    } else {
  79.      // sum the total time since last redraw
  80.      totalTimeSinceLastRedraw += delta;
  81.    }
  82.    // Store time
  83.    then = now;
  86.    // animate. 
  87.    requestAnimationFrame(animationLoop);
  88.  }
  90.  var calcDistanceToMove = function(delta, speed) {
  91.     return (speed * delta) / 1000;
  92.  }
  94.  
  95. </head>
  97. <body onload=“init();“>
  98.  <canvas id=“mycanvas” width=“200” height=“50” style=“border: 2px solid black“></canvas>
  99. </body>
  100. </html>

could we Use setInterval?

It’s quite possible to use setInterval(function, interval) if you do not need an accurate scheduling.

To animate a monster at 60 fps but blinking his eyes once per second, you would use a mainloop with requestAnimationFrame and target a 60 fps animation, but you would also have a call to setInterval(changeEyeColor, 1000); and the changeEyeColor function will update a global variable, eyeColor, every second, which will be taken into account within the drawMonster function, called 60 times/s from the mainloop.

Leave a comment