So now let's cover how to do animation on a computer. So basically we're going to look at how to move things around on your computer screen.
So here's a program for drawing a person on the computer screen. It's basically the same program I've shown you earlier.
Here in the first part of the program, we load a person image.
And here we draw that person image on the screen.
Now if we want to do an animation, the first thing we have to do it we have to go to this wait(function() { line...
And we get rid of the wait.
And we change it to a new command repeat().
Now with this repeat() command, your main program, which draws this person image on the screen, instead of just drawing the image once, will draw the image again and again and again. It's repeated.
Now if you keep drawing the same person image in the same place again and again and again, the image always looks the same, so nothing changes. So that's not interesting. So in order to change things, we're going to use something called a variable. So let's take our command here for drawing the person image on the screen. We draw our person image at position 50, 50.
So let's take the first 50 and cross it out.
Instead of drawing the image at position fifty, we'll draw the person at position x. So we'll replace the 50 with an x. Then, earlier in the program we'll say that x is 50. So basically we're still saying that you should draw the person at position 50, 50 because we're drawing the person at x,50, but the x gets replaced by 50.
Now the interesting thing happens when we start changing this x. So below here, we'll add the line x=x+1. What this does is when your program runs, everytime your program is repeated, it will increase x by 1. So if x is 50 at the beginning, after it runs through this command, x will be 51. And when you repeat this part of the program a second time, x is 51, so 51+1=52, so x will be 52 the next time you run the program.
So what happens is as the program is run again and again and again, x will keep increasing, and it will draw a picture of the person at a different position each time. So, the first time it will draw the person at position 50,50. Then it will draw the person at position 51,50. Then at 52,50. And again and again and again. Now this is sort of cool but it ends up with you having lots of pictures of this person. But you don't want to have a million pictures of this person. What you want is to have a person who looks like it's moving across the screen.
So what we're going to use, is we're going use this new command c.clear(). What this does is it clears the screen.
So when you run this program, the first time program runs, it will clear the screen...
and then draw the person at position 50,50 and increase x to 51.
Next it will clear the screen,
And then draw the person again further to the right at position 51,50. Then it will increase x again to 52.
It will clear the screen again,
and draw the person at the new position further to the right. And then again and again. And basically by doing this really, really quickly, it looks like the person is sliding across the screen to the right.
So here I've shown you how to write a program that moves something across the screen. So why don't you go try making your own programs for making other things move across the screen? For example, you can go on the Internet and find a picture of a horse, and have the horse move across the screen or have a car move across the screen, or some other interesting animations.
