Codekids Lesson 5
Animation
So far, you have been learning how to make still pictures. But one of the very super cool things about Processing is that you can make your pictures move.
The key to movement is frames. Frames are individual pictures that can be played one after another.
Have you ever seen a flip book? We're going to look at one in class. A flip book has a picture on each page, and as you flip through the pages with your thumb, the pictures seem to move.
This is how TV and movies actually work--they show a bunch of pictures,one after the next, and it looks like they're moving. (Actually they aren't, but your eyes trick you into thinking they are.)
To do this in Processing, we need to learn two new bits of code:
void setup(){
}
void draw(){
}
Each of these bits above is called a "procedure." There are two procedures there, called setup() and draw(). During the setup() part of your program is where you get everything ready. Then, during the draw() part, Processing does its animation magic. (In case you were wondering..."Void" is a mysterious word that we will learn about later as we learn more programming.)
Your Eighth Program
Start up Processing and copy this code into the program:
void setup(){
size(400, 400);
background(0);
stroke(100,50,255);
strokeWeight(20);
smooth();}
int mrX = 0;
void draw(){
background(0);
point(mrX, 200);
mrX = mrX + 1;
if (mrX > 400){mrX = 0;
}
}
You should see a little purple dot like this:
EXCEPT...THE DOT SHOULD BE MOVING!
How does it work?
We'll learn about that in class.
Hack your Program
Now that you've got your eighth program running, do these things:
- change the background and stroke colours
- change strokeWeight
- change the speed by changing mrX = mrX + 1;
- try to add a new variable, mrY to make the dot move up or down
- try to add more dots moving at different speeds and in different directions
If you create something cool, copy it out of Processing and email it to me!