An easy to use BASIC language
and IDE for education.

Tutorial Ten

Russian Translation Coming Soon.

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:

Image

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:

Image

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:

clg

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.)

Find us on Facebook.    So You Want to Learn to Program?

GPL
BASIC-256 is licensed under the GNU General Public License.
Last modified: 2010-06-10, 10:46

© 2010 Contributors to the BASIC-256 Project

powered by phpSQLiteCMS

Warning: Cannot modify header information - headers already sent by (output started at /home/content/17/4039117/html/basic256/templates/b256.tpl:2) in /home/content/17/4039117/html/basic256/cms/includes/exception.inc.php on line 12

Warning: Cannot modify header information - headers already sent by (output started at /home/content/17/4039117/html/basic256/templates/b256.tpl:2) in /home/content/17/4039117/html/basic256/cms/includes/exception.inc.php on line 13

Warning: Cannot modify header information - headers already sent by (output started at /home/content/17/4039117/html/basic256/templates/b256.tpl:2) in /home/content/17/4039117/html/basic256/cms/includes/exception.inc.php on line 14
BASIC-256 - Error

BASIC-256

Error

An error occurred while processing this directive.

Message: SQLSTATE[HY000]: General error: 11 database disk image is malformed
Code: HY000
File: /home/content/17/4039117/html/basic256/templates/renejm_accesslog.inc.php
Line: 20