van an nguyen

Measuring time between frames

Measuring time between frames to achieve a constant speed on screen, even when the frame rate changes

Method 1 – Using the JavaScript Date object

Let’s modify the example from the previous lesson slightly by adding a time-based animation.  Here we use the “standard JavaScript” way for measuring time, using JavaScript’s Date object:

  1. var time = new Date().getTime();

The getTime() method returns the number of milliseconds since midnight on January 1, 1970. This is the number of milliseconds that have elapsed during the Unix epoch (!).

There is an alternative. We could have called:

  1. var time = Date.now();

So, if we measure the time at the beginning of each animation loop, and store it, we can then compute the delta of times elapsed between two consecutive loops.

We then apply some simple maths to compute the number of pixels we need to move the shape to achieve a given speed (in pixels/s).

First example that uses time based animation: the bouncing square

Online example at JSBin:

Bouncing square with time bases animation

Source code from the example:

  1. <!DOCTYPE html>
  2. <html lang=“en”>
  3. <head>
  4.   <meta charset=utf-8 />
  5.   <title>Move rectangle using time based animation</title>
  6.   
  7.     var canvas, ctx;
  8.     var width, height;
  9.     var x, y, incX; // incX is the distance from the previously drawn
  10.                     // rectangle to the new one
  11.     var speedX; // speedX is the target speed of the rectangle, in pixels/s
  13.     // for time based animation
  14.     var now, delta;
  15.     var then = new Date().getTime();
  17.     // Called after the DOM is ready (page loaded)
  18.     function init() {
  19.       // Init the different variables
  20.       canvas = document.querySelector(“#mycanvas”);
  21.       ctx = canvas.getContext(‘2d’);
  22.       width = canvas.width;
  23.       height = canvas.height;
  25.       x=10; y = 10;
  26.       // Target speed in pixels/second, try with high values, 1000, 2000…
  27.       speedX = 200;
  29.       // Start animation
  30.      animationLoop();
  31.    }
  33.    function animationLoop() {
  34.      // Measure time
  35.      now = new Date().getTime();
  37.      // How long between the current frame and the previous one?
  38.      delta = now – then;
  39.      //console.log(delta);
  40.      // Compute the displacement in x (in pixels) in function of the time elapsed and
  41.      // in function of the wanted speed
  42.      incX = calcDistanceToMove(delta, speedX);
  44.      // an animation involves: 1) clear canvas and 2) draw shapes,
  45.      // 3) move shapes, 4) recall the loop with requestAnimationFrame
  47.      // clear canvas
  48.      ctx.clearRect(0, 0, width, height);
  50.      ctx.strokeRect(x, y, 10, 10);
  52.      // move rectangle
  53.      x += incX;
  55.      // check collision on left or right
  56.      if((x+10 >= width) || (x  0)) {
  57.         // cancel move + inverse speed
  58.         x -= incX;
  59.         speedX = –speedX;
  60.      }
  62.      // Store time
  63.      then = now;
  65.      requestAnimationFrame(animationLoop);
  66.  }
  70.  // We want the rectangle to move at a speed given in pixels/second
  71.  // (there are 60 frames in a second)
  72.  // If we are really running at 60 frames/s, the delay between
  73.  // frames should be 1/60
  74.  // = 16.66 ms, so the number of pixels to move = (speed * del)/1000.
  75.  // If the delay is twice as
  76.  // long, the formula works: let’s move the rectangle for twice as long!
  77.  var calcDistanceToMove = function(delta, speed) {
  78.      return (speed * delta) / 1000;
  79.  }
  81.  
  82. </head>
  84. <body onload=“init();“>
  85.  <canvas id=“mycanvas” width=“200” height=“50” style=“border: 2px solid black“></canvas>
  86. </body>
  87. </html>

In this example, we only added a few lines of code for measuring the time and computing the time elapsed between two consecutive frames (see line 38). Normally, requestAnimationFrame(callback) tries to call the callback function every 16.66 ms (this corresponds to 60 frames/s)… but this is never exactly the case. If you do a console.log(delta)in the animation loop, you will see that even on a very powerful computer, the delta is “very close” to 16.6666 ms, but 99% of the time it will be slightly different.

The function calcDistanceToMove(delta, speed) takes two parameters: 1) the time elapsed in ms, and 2) the target speed in pixels/s. 

Try this example on a smartphone, use this link: https://jsbin.com/jeribi to run the JSBin example in stand-alone mode. Normally you should see no difference in speed, but it may look a bit jerky on a low-end smartphone or on a slow computer. This is the correct behavior.

Or you can try the next example that simulates a complex animation loop that takes a long time to draw each frame…

A simulation that spends a lot of time in the animation loop, to compare with the previous example

Try it on JsBin:

We added a long loop in the middle of the animation loop. This time, the animation should be very jerky. However, notice that the apparent speed of the square is the same as in the previous example: the animation adapts itself!

  1. function animationLoop() {
  2.    // Measure time
  3.   now = new Date().getTime();
  5.   // How long between the current frame and the previous one ?
  6.   delta = now – then;
  7.   //console.log(delta);
  8.   // Compute the displacement in x (in pixels) in function of the time elapsed and
  9.   // in function of the wanted speed
  10.   incX = calcDistanceToMove(delta, speedX);
  12.   // an animation is : 1) clear canvas and 2) draw shapes,
  13.   // 3) move shapes, 4) recall the loop with requestAnimationFrame
  15.   // clear canvas
  16.   ctx.clearRect(0, 0, width, height);
  18.   for(var i = 0; i < 50000000; i++) {
  19.     // just to slow down the animation
  20.   }
  22.   ctx.strokeRect(x, y, 10, 10);
  24.   // move rectangle
  25.   x += incX;
  27.   // check collision on left or right
  28.   if((x+10 >= width) || (x <= 0)) {
  29.    // cancel move + inverse speed
  30.    x -= incX;
  31.    speedX = –speedX;
  32.   }
  34.   // Store time
  35.   then = now;
  37.   requestAnimationFrame(animationLoop);
  38. }

Method 2 –  USING THE NEW HTML5 HIGH-RESOLUTION TIMER

Since the beginning of HTML5, game developers, musicians, and others have asked for a sub-millisecond timer to be able to avoid some glitches that occur with the regular JavaScript timer. This API is called the “High Resolution Time API”.

This API is very simple to use – just do:

  1. var time = performance.now();

… to get a sub-millisecond time-stamp. It is similar to Date.now() except that the accuracy is much higher and that the result is not exactly the same. The value returned is a floating point number, not an integer value!

From this article that explains the High Resolution Time API:  “The only method exposed is now(), which returns a DOMHighResTimeStamp representing the current time in milliseconds. The timestamp is very accurate, with precision to a thousandth of a millisecond. Please note that while Date.now() returns the number of milliseconds elapsed since 1 January 1970 00:00:00 UTC, performance.now() returns the number of milliseconds, with microseconds in the fractional part, from performance.timing.navigationStart(), the start of navigation of the document, to the performance.now() call. Another important difference between Date.now() and performance.now() is that the latter is monotonically increasing, so the difference between two calls will never be negative.“

To sum up:

    • performance.now() returns the time since the load of the document (it is called a DOMHighResTimeStamp), with a sub mill-secondaccuracy, as a floating point value, with very high accuracy.
    • Date.now() returns the number of mill-seconds since the Unix epoch, as an integer value.

Support for this API is good as of October 2017 (check an up to date version) : 

High resolution time API support (caniuse.com table)

Here is a version on JSBin of the previous example with the bouncing rectangle, that uses the high resolution timer.

Source code of the example:

  1.  …
  2.  
  3.    …
  4.    var speedX; // speedX is the target speed of the rectangle in pixels/s
  6.    // for time based animation
  7.    var now, delta;
  8.    // High resolution timer
  9.    var then = performance.now();
  11.    // Called after the DOM is ready (page loaded)
  12.    function init() {
  13.      …
  14.    }
  16.    function animationLoop() {
  17.      // Measure time, with high resolution timer
  18.      now = performance.now();
  20.      // How long between the current frame and the previous one?
  21.     delta = now – then;
  22.     //console.log(delta);
  23.     // Compute the displacement in x (in pixels) in function
  24.     // of the time elapsed and
  25.     // in function of the wanted speed
  26.     incX = calcDistanceToMove(delta, speedX);
  27.     //console.log(“dist = ” + incX);
  28.     // an animation involves: 1) clear canvas and 2) draw shapes,
  29.     // 3) move shapes, 4) recall the loop with requestAnimationFrame
  31.     // clear canvas
  32.    ctx.clearRect(0, 0, width, height);
  34.    ctx.strokeRect(x, y, 10, 10);
  36.    // move rectangle
  37.    x += incX;
  39.    // check collision on left or right
  40.    if((x+10 >= width) || (x  0)) {
  41.       // cancel move + inverse speed
  42.       x -= incX;
  43.       speedX = –speedX;
  44.    }
  46.    // Store time
  47.    then = now;
  49.    // call the animation loop again
  50.    requestAnimationFrame(animationLoop);
  51.  }
  52.  …
  54.  script>

Only two lines have changed but the accuracy is much higher, if you uncomment the console.log(…) calls in the main loop. You will see the difference.

Method 3 – using the optional timestamp parameter of the callback function of requestAnimationFrame

This is the recommended method!

There is an optional parameter that is passed to the callback function called by requestAnimationFrame: a timestamp!

The requestAnimationFrame API specification  says that this timestamp corresponds to the time elapsed since the page has been loaded.

It is similar to the value sent by the high resolution timer using performance.now().

Here is a running example  of the animated rectangle, that uses this timestamp parameter.

Online example at JSBin:

Source code of the example:

  2.  lang=“en”>
  4.  charset=utf-8 />
  5. Time based animation using the parameter of the requestAnimationFrame callback
  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
  14.    var now, delta=0;
  15.    // High resolution timer
  16.    var oldTime = 0;
  18.    // Called after the DOM is ready (page loaded)
  19.    function init() {
  20.      // init the different variables
  21.      canvas = document.querySelector(“#mycanvas”);
  22.      ctx = canvas.getContext(‘2d’);
  23.      width = canvas.width;
  24.      height = canvas.height;
  26.      x=10; y = 10;
  27.      // Target speed in pixels/second, try with high values, 1000, 2000…
  28.      speedX = 200;
  30.      // Start animation
  31.      requestAnimationFrame(animationLoop);
  32.    }
  34.    function animationLoop(currentTime) {
  35.      // How long between the current frame and the previous one?
  36.      delta = currentTime – oldTime;
  38.      // Compute the displacement in x (in pixels) in function of the time elapsed and
  39.      // in function of the wanted speed
  40.      incX = calcDistanceToMove(delta, speedX);
  42.      // clear canvas
  43.      ctx.clearRect(0, 0, width, height);
  45.      ctx.strokeRect(x, y, 10, 10);
  47.      // move rectangle
  48.      x += incX;
  50.      // check collision on left or right
  51.      if(((x+10) > width) || (x  0)) {
  52.        // inverse speed
  53.        x -= incX;
  54.        speedX = –speedX;
  55.      }
  57.      // Store time
  58.      oldTime = currentTime;
  60.      // asks for next frame
  61.      requestAnimationFrame(animationLoop);
  62.    }
  64.    var calcDistanceToMove = function(delta, speed) {
  65.      return (speed * delta) / 1000;
  66.    }
  68.  
  69. </head>
  71. <body onload=“init();“>
  72.  <canvas id=“mycanvas” width=“200” height=“50” style=“border: 2px solid black“></canvas>
  73. </body>
  74. </html>


Leave a comment