Javascript Graph Animation

Javascript - Graph Animation

Another page explains the basics of creating a graph - this page explains how to animate a graph.

In principle, animation is simply showing one graph (one frame) after another. Unfortunately, the technique to show the new image is compiler/interpreter dependent.

In general, you want to draw the new image off screen and then switch to it.

With javascript, changes to the canvas are not displayed until all your code completes. This means that you can not write a loop to animate the image. Instead, you must use a timer to call an update function.

Timers | w3schools Examples | setInterval vs setTimeout | requestAnimationFramerequestAnimationFrame | Other techniques

Timers

The Javascript timer components can be configured

With setInterval to call a function every n-milliseconds
With setTimeout to call a function once after n-milliseconds

Both functions

Require the name of a callback function that takes no arguments
Require the number on milliseconds
Return objects that can be used to stop their associated timer

timer_1 = setInterval(Timer_callback_function, 100); // calls the function every 100 milliseconds

timer_2 = setTimeout(Another_function, 200);    // calls the function once after 200 milliseconds

clearInterval(timer_1); // stops the specified timer

For additional notes on timers, and how to solve some specific problems, see - Understanding timers: setTimeout and setInterval

w3schools Examples

w3schools provides two examples on how to animate (update) an image on a canvas.

In both cases, the technique that makes it happen is based on using a timer.

setInterval(drawClock, 1000);                    // used for the clock

this.interval = setInterval(updateGameArea, 20); // used in the Default Gravity game

In both cases, the timer runs forever - which is appropriate for the clock, but not for the game.

In the Game Obstacles example, the following stops the timer.

  start : function() {
    // setup code here
    this.interval = setInterval(updateGameArea, 20);
  },
  stop : function() {
    clearInterval(this.interval);
  }

Far more complex examples are provided in this Animation Tutorial.

setInterval vs setTimeout

If you want something slow and regular, like a clock, then setInterval is the logical choice. For instance, in the Clock Example, the update function is called once per second via

setInterval(drawNextFrame, 1000); // 1000 ms = 1 second

Object motions will look smooth if the screen is updated at 24 frames/sec or faster.

setInterval(drawNextFrame, 1000/24); // 24 frames/sec

However, for some animations, the maximum update speed is dependent on the speed of the code. In those cases, you want to make sure that

The delay between frames is as short as possible, and
That the timer isn't called before your code completes the last update.

In that case, I prefer to use setTimeout (with a timeout value of only one millisecond) and to call it each time the image is created, as shown below. The following example runs for a fixed number of steps and then quits.

// define the global variables here, outside all the functions

function Graph_setup() {
  // set the global variables here

  window.setTimeout(Graph_Update_loop, 1);
}

function Graph_Update_loop() {
  // draw new image here

  count += 1 ; // this is used to know which frame to draw

  if (count <= stop){
    window.setTimeout(Graph_Update_loop, 1);
  } else {
    window.setTimeout(Graph_Update_complete, 1);
  }

  // the new image is shown when this function terminates
}

function Graph_Update_complete() {
  // This executes after the animation is complete

  // to repeat the animation, simply call Graph_setup 
}

requestAnimationFrame

window.requestAnimationFrame(callbackFunction) instructs the browser to call the callbackFunction before the next window repaint - about 60 times a second.

This is all w3schools says about it.

"Requests the browser to call a function to update an animation before the next repaint"

Other techniques

Numerous comments state that javascript code can force a screen refresh by changing (or simply reading) various style parameters. I tried many suggestions - none worked. It is possible that those techniques work for some html components, but I never got them to work with canvas.

As a result, you will have to use one of the timer-based techniques described above to animate an image.

Author: Robert Clemenzi