Movement

Movement, motion or animation, involves changing the position of an object - usually by changing its x and y co-ordinates. In this example, the x and y position (sometimes known as left and top properties, e.g. on web pages or in Visual Basic) of the football are changed to create the impression of movement.

The trick to creating smooth motion of the right speed is get the right balance of the following two things:

• how far do you move the object in each step?
• how often do you move the object?

Using the controls at the top of the page, you can adjust the size of the horizontal and vertical steps, and also the time period (or interval) between movements. The horizontal and vertical speeds are in pixels, and the interval is in milliseconds. For example, if you set the speeds to 5 and the interval to 10, that means that the ball will move 5 pixels in each direction every 10 milliseconds.

The tricky party is finding a set of values that will work equally well on all computers. Try it - adjust the controls to get a smooth motion, and then try the same settings on a different PC, or maybe an iPad, tablet, or mobile phone. Or even just in a different browser on the same computer!

If you would like to know about circular motion, have a look at the circles page in the Mathematics section. There is also a page on animation in web-pages.

Bouncing

The speeds that you select above are both positive, so if you add them to the x and y co-ordinates of the ball, it will move up and down (on a web page, y = 0 is at the top!). What about when the ball hits the edge and bounces back the other way? You could work out which way the ball should be going and then add the speed if the ball is going right, and subtract it if the ball is going left, but that would require a check every time the ball moves, which is a waste of processing power. An easier way is to multiply the speed by -1 when the ball hits the edge. Multiplying by -1 flips a number from positive to negative, or vice versa. Adding -10 is the same as subtracting 10, but you only do the calculation when the ball hits the edge, and not every time the ball moves.

To make them easier to change, the speeds shown at the top of the page are always positive. The actual horizontal speed is