Programming Basics: A website for teaching people how to program
 
Do your programming with [jsbin] or [Orion]

Computer Animation with HTML5 Canvas and JavaScript: Bonus Topic: Advanced Animation

So now I'll cover how to do more complex animations. This is an optional topic again, so you won't need it for topics I'll cover later on. So far I've shown you how to do a simple animation where you take an image and move it across the screen. So now I'll show you how to do more flexible type of animation. I'll show you how to take an image and move it in more complex paths around the screen.

So here's a program that moves a person from the left side of the screen to the right side of the screen.

One thing that's a little bit different from the program before is that we have two variables: a variable x for how far the person is to the right and variable y for how far down the person should be. But because we only change x, the person stays at the same position vertically but moves horizontally across the screen.

Now in order to do more advanced animation, we need to have this concept of time because you want to do different things at different times. So to keep track of what time it is, we need to use a variable. We'll use a variable called time, and we'll set it to 1. So basically at the beginning, time is 1.

Now each time the program repeats, we want time to move forward, so we'll add one to time using time=time+1. So in our current program that we keep repeating, you'll see that we have this command here x=x+1, which makes the person move to the right.

So now let's bring in the concept of time. So let's say we want the person to move to the right, but stop moving to the right at a certain point in time. So let's say when time is fifty, the person should stop. Now we do that by adding these lines of code here. So we still have this x=x+1, but we'll add this if time is greater than 1 and time is less than 50.

So basically, the person will only move to the right when time is between 1 and 50.

Now let's say after moving to the right, we want the person to move diagonally down and to the right. So to do that, we write these lines of code here.

Basically what these lines of code say is that when the time is between 50 and 100, move to the right and down. So you can see that in the lines of code here. So when time is greater than 50 and time is less than 100 (when time is between 50 and 100), run these lines of code. And these lines say x=x+1, so the person should move to the right, and y=y+1, so the person should also move down. So when time is between 50 and 100, the person should move down and to the right. And once time is 100, the person doesn't move any more because there's no commands to tell the person to move when time is greater than 100.

So here's the complete program for moving the person to the right and then down and to the right. So now you can build on this to build more complicated programs for moving images in more complicated and interesting ways. Go give it a try.

Do your programming with [jsbin] or [Orion]

Programming Basics

E-mail | About | Privacy Policy