Just wondering why in bouncing ball example at the end function loop() needs to be called, but in Graphics_loops_animation example, calling the function draw() is not needed at the end?
Bouncing ball example:
“https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/main-finished.js”
Graphics_loops_animation example:
“https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/loops_animation/7_canvas_walking_animation.html”
@laura In both cases, you have a function defined, which then needs to be called to start off the animation. At the end of the function, you have a requestAnimationFrame(function) call, which causes the function to run again, and again, and again … etc.
In the first example, the animation chain is started by simply calling loop() at the end of the code. In the second example, draw() is called via an event listener:
image.onload = draw;
So the animation only starts running once the image that it relies on is loaded into memory and available to use.