Tutorial Ten - Animation
Do you know how movies and cartoons work? Have you ever made a "flipbook?" Well, before we get into how to do animation using a computer, it helps to understand how animation really works.
When we see moving pictures on a screen, they're not really moving. What actually happens is that a sequence of still pictures -- like photographs -- are flashed on the screen so quickly that you can't tell how fast it's happening. About 30 times every second, the screen is cleared and a new picture takes the place of the old one. If we were to slow it down it would look like this:
This animation shows a ball "moving" across the screen, but it's really just five different pictures of the same ball in different places. If we play it back fast enough it really looks like the ball is moving:
This is the same animation as the one above it, but it's being played back faster, so it looks more like the ball is moving.
The same idea is applied in BASIC-256. In order to make a ball "move" across the screen, we'll have to paint a circle over and over again, really fast. Fortunately, computers are very good at doing things really fast, as you have seen from the previous lessons.
The first step is to clear the graphics output window. This is done with the CLG command, like this:
When you type that in and press Run, you probably won't notice anything happening. The computer just clears the graphics screen. In order to start animating the ball, we'll need to first draw one.
clg circle 20,20,8
There, now we have a circle. In order to make it move though, we have to draw it again in a different place. But first we'll have to erase this circle completely, so we have to use CLG again. Let's do this five times:
clg circle 20,20,8 clg circle 30,20,8 clg circle 40,20,8 clg circle 50,20,8 clg circle 60,20,8
Now when you run the program, you should see the ball move. It's really quick, so watch closely. If you'd like, you can take out the CLG commands to see what happens when you don't clear the graphics every time you draw a new ball.
Now, what if we want the ball to move more than that? It will take a lot of typing to draw the ball that many times. But if you remember the lesson on variables, you might see a solution to our problem.
If we make a variable called X that holds the horizontal position of the ball, then we can use the same CLG and CIRCLE command over and over and just change X. It will look something like this:
x = 10 drawloop: x = x + 1 clg circle x,20,8 goto drawloop
Now when you run that program, the ball will move all the way across the screen until it goes completely out of the window. (You'll have to click "STOP" to get the program to stop running.)
What's happening here is that "x = x + 1" line adds one to X every time the computer goes through that loop, which changes where the ball is drawn. If you want the ball to move faster, then you can add more to X each time. Try adding 2, 3, or 5, to see what happens.
It would be nice to have the program stop before the ball moves completely off the screen. To do this, we'll have to add a line that checks the position of the ball and stops the program before the ball goes too far.
x = 10 drawloop: x = x + 1 clg circle x,20,8 if x > 290 then end goto drawloop
That IF line check every single time to see if X is greater than 290. If it is, then it ends the program. Otherwise, the program just continues.
Now you've learned how to move a circle around the screen. Now try a few other things, like making the circle move up and down instead of left to right, or making the circle move in the opposite direction. (You might be interested in looking at ballanim.kbs in the Examples directory.)