Animation

Nothing is more fun than creating programs in which something moves. In this lesson we will lead you through the different (easy) steps to create an animated program with Drape. After this you are ready to make much more complicated programs yourself.

You can find all examples in this lesson here.

A simple animation

The basic idea of animation is that you repeatedly draw something at a slightly different place. The person looking at the screen experiences these drawings as a movement. Two things are important here:

Here is the first trivial animation program (ANIMATION1.DRP):

It repeatedly draws a square, sleeps a bit (a good value is 100 milliseconds), moves a little bit, and clear the screen to erase the old square. The move was done such that the square moves in a circle. (Note that, to move the square only a little bit, we had to reduce the step size quite a bit, after which we increased it again. (This can be done a lot easier using the advance move command, specifying a value of e.g. 0.15.)

Moving an image

As you will have noticed in the previous example, the square will flicker a bit. This is due to the fact that first the whole screen is erased, making the square disappear, after which the square reappears at the slightly moved spot. It would be better to make the disappearing and reappearing of the moving object happening at the same time. This is easier to achieve when using an image as the moving object. If you make the image large enough and give the outside area in the image the same color as the background, then drawing the image at the new location automatically erases the old image. Here is an example, which is bassically the same as the previous program, except that we create a green background and draw an image rather than a square (ANIMATION2.DRP):

The image contains a ball on a green background:

By also making the background of our picture green, you get a much smoother motion, without flicker. (Whether it is smooth depends a bit on the speed of your machine.) It is important the the image is large enough and the stepsize is small enough such that the new image completely erases the old one.

Changing the image while moving

Moving objects often also change shape. For example, legs move, and a bird flaps its wings. This can be achieved rather easily by using two (or more) images rather than just one. For example, to make a bird we need two images of the bird against a blue sky: one with its wings up and one with its wings down:

 

Now we can repeatedly draw one after the other to make the bird fly (ANIMATION3.DRP):

This program is build up as follows: The third (light blue) procedure simply moves a little bit to the left. The second (green) procedure first draws the bird with wings up, waits a bit, moves a bit by calling the third procedure, and repeats this with the wings down. The main program colors the background and then repeatedly moves the bird from the right to the left over the screen, calling the second procedure all the time.

This program can easily be extended further. The example BIRD.DRP adds a background and changes the path of the bird a bit, but uses the same technique.

Bouncing ball

Let us go one step further and create a bouncing ball. Here we must detect whether the ball hits a wall and change the direction accordingly. Detection can be done by looking at the color of a position in front of the ball. In the example below this is done in the third procedure. If the color is black we reverse the direction and make a boink sound. (Note that both when the color is black and when the color is green we must move back to the old position.) Now after each motion step we simply check for collision. Here is the program (ANIMATION4.DRP):

The main procedure first draws the background and then repeatedly calls the green procedure to move the ball. The green procedure moves it a bit and then checks for collision by calling the blue procedure.

It is easy to variate on this theme.

More moving objects

To make our animations more interesting it would be nice to have multiple moving objects. To move two objects we have to give both of them a new position in each cycle. This means that we have to "remember" the position of the objects. This can be achieved using the commands to save and restore environments. For each moving object we create a different environment with its own name, and we save all of them. Next, whenever we want to move a particular object we restore its environment, make the movement, and save the environment again. Let us demonstrate this with an easy example. Here are three birds that fly from right to left over the screen (ANIMATION5.DRP):

The main procedure fills the background and next 10 times moves the birds from right to left. For this it first calls the green procedure that initialises the positions and orientations. Next is repeatedly calls the the blue procedure to draw all three birds using one image, and then the yellow procedure to draw them with the other image.

It is easy to extend this to many more moving objects. A problem though is that the objects might collide with each other. In such a case they should either stop or change their direction. This can be achieved in the same way as we detected walls in the example above. Here are two balls that bounce back and forth in a corridor (ANIMATION6.DRP):

The main procedure creates the background, initializes the environments for the balls by calling the green procedure, and next repeatedly calls the blue and yellow procedures to move the balls and check for collisions.

You are now ready to make your own animated Drape programs. Please don’t forget to mail your creations to markov@cs.ruu.nl.

Back to the Lessons Page