Chapter 5
The primary function for animation is: requestAnimationFrame(function)
Calls the function during the next screen refresh ▪ If our tab/window goes into the background then our
function will stop being called temporarily
By calling this in render() giving it render
(without the ()) then it forms an infinite loop of rendering every 1/60 of a second (or however fast the screen is refreshing)
▪ Our render() function better not take longer than 1/60 of a second to run!
▪ Must only call render() once or it will create multiple, simultaneous, infinite loops
The function called is also passed an argument for the number of milliseconds since some arbitrary time in the past for when the screen refresh is occurring
▪ This allows us to modify our display based on the total time passed
First time function is called we can check that the argument is undefined and in that case use performance.now() to get an approximate value for the time
In animation make it so all of the models are translated based on the sine curve and complete an entire there-and-back in 2 seconds
▪ Then update it so it just does a constant speed back and forward instantly switching directions
We can directly use the number of milliseconds when the rate stays constant – but if it is changing then we need to always base this off of the elapsed time since the last render
▪ How to compute the elapsed time since the call to render()?
In variable-animation there is a slider that dictates the speed of the translation and it can be changed at any time
▪ Make it work
Animation can be used both for ongoing (not user driven) transformations and showing results of user interactions
▪ User interactions can happen faster than the refresh rate
▪ Also decoupling the user controls from the rendering is good from a programmatic style thing
▪ Goes towards MVC design pattern