The lines of code with names Line0001 to Line0009 are run in the order of those numbers. The first four lines set up the colour and style of the edge and interior of a shape. The fifth line states which shape is required and gives its location and dimentions. Lines six and seven change the colour and style a bit for the next shape, and then line eight and nine call for two more circles to be created. The smaller circles are drawn on top of the bigger one because the bigger one is drawn first.

Click on a button, then hold down the return key to repeat the action. Click on the refresh icon at the top to re-centre everything. When using "both+", half close your eyes to hide the stepped edge of the big circle - this will help you see it more like a wheel rolling along the ground, and it does rotate at exactly the right speed for this (and it is even possible to fit a .gif image of the spokes of a wheel on top of a circle so that it will look exactly like a wheel rolling along).

Unfortunately, you can't use JavaScript to create html-tagged codings for new shapes and post them into a document at all - they simply refuse to work unless they are already present in the body part of the document as html when the page is loaded, so every shape has to be coded for individually even if there are dozens of identical ones, and if you want your Javascript program to be able to create new shapes in response to input from visitors to your Web site, you will need to build them by creating a whole set of parts out of sight which can be moved into view and combined to make the required shapes (not an easy task, unless you only want to make graphs and pie charts which respond to changing data, though even then it can take a lot of html code).