The dynamic coloring is one of the most obvious display of JavaZ’s permanent animation loop. It updates both the motion of the Eiffel Tower and the whole render, which includes the coloring. Frame after frame, all render settings depend on a single variable, the id returned from a Javascript Window Object and generated by JavaZ animation loop: setTimeout().

JavaZ animation loop

animate_canvas() is the function which runs the animation code. This function first updates the state of the canvas element. Then it confers this update to the canvas context in order to draw it. animate_canvas() then iterates its own first steps simply by calling itself back again, hence generating an infinite recursion [1].

function animate_canvas() {
if (clearRect){context.clearRect(0,0,width,height);}
	update_canvas();
	render_canvas(context);
	t = setTimeout(animate_canvas, 35);
}

1. JavaZ calls animate_canvas(), which in turn calls update_canvas(). This function updates the current state on the canvas. Meanwhile, if required by a "clearRect" boolean, the clearRect() method clears the whole canvas element or the specified pixels within a given rectangle [2].
2. once the update completed, render_canvas(context) draws the updated state of the canvas element.
3. Then, JavaZ calls the setTimeout() function. The setTimeout() method calls a function, namely its own calling function, after a lapsetime by default of 25 milliseconds (40 frames per second). The setTimeout() is normally executed only once. As it directly causes animate_canvas() to be carried out again, it generates a loop unless something ’s done to stop it.

If a repeated executions is needed, the setInterval() method ist normally used in Javascript. But JavaZ uses instead the id returned from the setTimeout() method as a time variable (t). This allows JavaZ to update the canvas according to time and to enjoy the benefit of it. The time variable allows to:

• indirectly set the number of frames per second through the setTimeout() method,
• pause or stop the animation by clearing out and reseting the id of the setTimeout() method,
• reset the canvas state on reload or resize of the window (responsiveness),
• trigger an event at some point. No need to code an additional stopwatch.