The first (a tad larger) bit of JavaScript on this site

Up a level : Programming
Previous page : Previous Up Next - Pun
Next page : A bit of my calculator history

WordPress and animations

(This was done a few years ago. My programming skills in JavaScript have hopefully developed a bit since then. See for example this that was written less than a year later.)

I thought it would be useful, to have some add some animation to the explanations, so I added a bit of JavaScript to the page To throw a ball – an animation.  To be able to place the code in the page I use a plug-in, Shortcode Variables. Anyhow, you can try it here too:

Your browser does not support the HTML5 canvas tag.

To make animations work in a HTML Canvas using JavaScript, we must let the rendering happen. It will not work with an ordinary loop, because in such a loop the browser will be fully occupied with running the loop.  One can instead create a timed loop where drawing, and then the rendering happens with a set interval. In this code, this is done by the line

The function loop is called every 20 ms. This continues until x<0 (the ball is back) or t>4 (the time when the ball should be back) )(a little bit on the safe side here), when the endFlag is set. If so the trowLoop is stopped. This is done within the throwLoop.

I found that the yellow part of the graph was sometimes not completed. This if the system had other things to do at that time. To ensure that the graph will be complete I start the code that draws the green part with this:

The yellowNotDone flag is initially set. In this way, I am sure that the yellow part will be drawn.

The below code works as a stand alone HTML-page. The code inserted in the shortcode is the text between the <body> and </body>.

Up a level : Programming
Previous page : Previous Up Next - Pun
Next page : A bit of my calculator historyLast modified: Jan 6, 2024 @ 14:51