Animation

Although writing an animation is a topic of JavaScript itself (rather than a topic of Kontrast), it may be useful for many users of Kontrast.

There are several ways to write an animation with JavaScript. We show two typical methods here. Both ways have in common an update() function that is repeatedly called. Within the update function, you can, for example, increment a value, recalculate data and update plotted data.

Animation with setInterval()

By using setInterval() you can call a function periodically.

The code structure is like this:

In this example, the function update() is called (approximately) every 10 ms.

Animation with requestAnimationFrame()

Writing animations using requestAnimationFrame() is a modern way to realize such a visualisation. The key difference to setInterval() is that requestAnimationFrame allows to call a function within the next render of your screen. Calling requestAnimationFrame repeatedly allows to run an animation at exactly the same frequency in which your screen is updated (typical screen update frequencies are 60 Hz).

We recommend using requestAnimationFrame() for fast, smooth animations and the setInterval() method for performing less-frequent updates.

Examples

The following examples use setInterval() and requestAnimationFrame(), respectively.

Advanced animation

It may be more attractive, for example, if the trace of the points is also drawn (and fades out, the older the data gets).

By utilizing an opacity axis you can realize such a visualisation. Please refer to the source code of this page for more details.