Movement and Animation
Computer graphics (and all animations) trick your mind into thinking there is movement when in fact a new sketch is drawn every frame. For example, here is a sequence of still images of a horse.
When sequenced together, and with enough frames of animation, this creates the illusion of movement.
Here's an example in Processing: draw a new circle, one every frame, moving it to the right at a regular interval every frame.
Let's take a look at the code that does it. Remember, the draw function is an infinite loop, so this code sets a circle at (0,200) and then increments the x-value 10 pixels every frame.
You can see that a new circle is drawn at a new location every frame.
Add Background to Draw
But if you set the background color to black (or any color) at the beginning of the draw function, it'll cover up all the previous circles and it'll look like it's one single circle moving to the right:
DIY: Falling Ball
In the previous example, the ball moves from left to right across the screen. Change the code to make the ball move down the screen from top to bottom.
Bouncing Off The Walls
In some games you want to make the ball bounce off the walls and reverse direction. Think about a game of billiards, or a classic arcade game like Pong. How could you achieve this effect?
For this you have to think in terms of velocity. For a ball going right, its x-velocity is positive, say positive 10, and in order to "bounce" and go in the opposite direction, its x-velocity will change to negative 10. The y-velocity doesn't change. So the idea is to check whether the ball is going off the screen to the right, for example. If it is (if its x-value is greater than the width of the screen) we should change the x-velocity to its negative.
DIY: More Walls
To check whether it's going off the screen to the left, you have to check if the x-value is less than 0.
The top and bottom "walls" are defined by y-values, so to check whether the ball is going off the bottom of the screen, you check whether the y-coordinate of the ball is greater than 400. If it is, you change the y-velocity, not the x-velocity. The y-value of the top wall is y = 0. Add the code to make the ball bounce off all four walls.
Wrapping Around Edges
In some games, like Asteroids, when the ship flies off the screen to the right it pops up on the left side of the screen. The same thing happens for the top and bottom. This is called wrapping , and it's not much different from bouncing.
You check if the ship (or circle) has reached a wall. If so, reset the x- or y-value to that of the opposite edge of the screen.
Example: This code will wrap the circle around the screen when moving left to right.
DIY: Wrap Everything
Add the code that will make the circle wrap around all 4 edges.