Program 1.2: Bouncing Ball

I am surprised that the original value for a works so well. The original ran as fast as it could on the Apple II and it produced similar-looking results.

This version uses windown.requestAnimationFrame to make the animation smooth (and to let the browser's event loop run). It does not use the time argument because precision is not important here. This will probably make the ball bounce comically fast on high-refresh displays.

Another change from the original is that the ball is re-launched with enough velocity that it comes close to its starting height, which allows for it to still be interesting on variable sized canvases.

One puzzle with this program is why the height of the bounces decreases with time. There is nothing in the program that does that explicitly, so why does it happen? It's pretty subtle.

There are a few ways that we can be more precise about the boundary checks, like in the original. Can you find one?

Another interesting artifact is that, at least on Chrome 89, painting a circle black does not erase the ball completely, unlike the original Apple II. This means that as the program runs, a faint green mist is left behind.