Tutorial for Processing: Animation using draw(),
assignment, and if statements
The Processing language supports animation through the definition of the setup function
(described in another tutorial) and the draw function. The draw function is defined by the
programmer. It is invoked automatically by the Processing system. The programmer can
specify how often by the frameRate command.
The sketch described in these notes shows a smiley face bouncing within the display
window. It makes use of setup and draw and also the same programmer defined function,
smiley, described in another tutorial. It also makes use of the following features of the
Processing language, also found in other programming languages:
 Variables
 Assignment statements and expressions
 Conditional (if) statements
I explain each of these concepts and then show the code for the bouncing face.
Variables
I want to draw the face at different positions in the display window. I do not want to
specify each position, but instead make the positions change as a result of calculations.
What I need are place holders for values. The solution to this problem is called a variable.
A variable in programming provides a place for a value. In Processing, a variable is set
up using what is called a declaration statement. It specifies the datatype for the variable
and indicates the variable name. A declaration statement also can assign an initial value.
Here are two declaration statements that will be used in the bouncing sketch:
int posx; //sets up posx to hold an integer. The default initial value is zero.
int xd = 10; //sets up xd to hold an integer and assigns a value of 10;
Just to show other declarations for comparison, the following will be used for another
application:
PImage coinh,coint;
PFont font;
String str;
int headc,tailc;
//these will hold images
// font will hold a font for displaying text
// str will hold a character string
// this demonstrates that declarations can be combined
As was said in the earlier tutorial, declaring the datatype means that the Processing
system can allocate the right amount of space for these values. It also can check for
certain errors.
Now the question you may have is, once a variable is declared, what can you do with it?
This requires explanation of assignment statements and expressions.
Assignment statements and expressions
An assignment statement sets the value of a variable. I have shown an assignment
statement in the declaration
int xd = 10;
This statement declares xd to be a variable for holding values of datatype int AND sets xd
to have the value 10. Notice the use of the = sign. You should think of this as "assign the
value" of the thing on the right hand side of the = sign to the thing on the left hand side.
[Note: if you need to do a logical test checking if two things are equal, you will use ==.]
The right hand side can be more complicated. In the smiley function defined in the
Processing 2 tutorial, the +, -,* and / symbols were used to represent arithmetic
operations. These, along with others, and also parentheses, can be used to express
(indicate/specify) simple to complex calculations. The name for such things is
expression. Clearly, expressions can be well-formed or not. For example,
posx*
is not well-formed.
There are rules for forming expressions and also rules for indicating what operations take
precedence over other operations. For example, does
A*B+C mean multiply A and B and then add the result to C or
Add B and C and multiply the result by A
[The answer is the first one, but a good practice is to write:
(A*B)+C
to leave no ambiguity.]
I chose not to spend much time on this. Use common sense. Don't make any one
statement too complicated. Use parentheses.
You can use assignment statements by themselves to set or re-set the values of variables.
In the bouncing example, to move the face over across the display window, the variable
posx, which will be used to specify the horizontal position, will be set using an
assignment statement
posx = posx +xd;
The xd variable holds the change amount. This will have the effect of re-positioning the
face when it is drawn using posx to indicate the horizontal coordinate.
In another place in the coding, you will see the statement
xd = -xd;
This will have the effect of changing the horizontal direction of motion. The next section
indicates when this will occur.
Conditional statement: if
For the bouncing face application, I want the face to move on the display window until it
hits an edge. When it does hit (I should say, appear to hit), I want it to bounce, that is,
change direction. When it is moving down and to the right, when it hits the bottom, I
want it to move up and still to the right. When it hits the right edge, say it is moving up
and to the right, I want it to continue moving up, but now to the left. What all this means
is that the code has to make the determination: what edge. This is done using an if
statement. The if statement is a compound statement. The format of an if statement in
Processing is
if (logical test0 {
code to be executed if the logical test is true}
If the logical test produces a value of false, then the flow of control goes to the statements
after the { }.
I will use the simple if in this application. However, there also is a if/else construct:
if (logical test) {
code for true}
else {
code for the test not being true}
The conditional tests for this application are
if the value of posx is more than width, where width is the built-in term for the width of
the display window
if the value of posy is more than height, where height is the built-in term for the height of
the display window
if the value of posx is less than zero
if the value of posy is less than zero
With this background, I can explain the coding for bouncing smiley faces.
Bouncing smiley faces
This application is built on where you have seen and hopefully worked with before. An
outline for the code is the following
Define setup function: sets size of display window and sets frame rate. This function is
called automatically by the Processing system.
Declare variables: posx, posy, xd, yd, wid (for the fixed width of the face) and ht (for the
fixed height of the face)
Define draw function: uses background to erase any previous drawings, draws a smiley
face by invoking the smiley function, change posx and posy, check if at (actually over)
any edge and make appropriate modification of the xd or yd variables. This function also
is called automatically by the Processing system. How often is dependent on the frame
rate.
Define smiley function: this draws a smiley face. You copy and paste code from the
previous application into this sketch.
This is the code
void setup() {
size(600,400);
frameRate(4);
}
int posx;
int posy;
int xd = 10;
int yd = 20;
int wid =50;
int ht = 80;
void draw() {
background(200,0,0);
smiley(posx,posy,wid,ht);
posx = posx + xd;
posy = posy + yd;
if (posx>width) {
xd = -xd;}
if (posy>height) {
yd = -yd;}
if (posx<0) {
xd = -xd;}
if (posy<0) {
yd = -yd;}
}
void smiley(int x,int y,int w,int h) {
fill(255,255,255); //white
ellipse(x,y,w,h);
noFill();
arc(x,y,w/2,h/2,.25*PI,PI*.75);
fill(0,0,0); //black
ellipse(x-w*.25,y-h*.25,w/10,h/10);
ellipse(x+w*.25,y-h*.25,w/10,h/10);
}
for the application. Please review it and see that it does do what the outline suggests.
A screen shot does not really show the application, but here is one:
In the interest of demonstrating the workings of the program, I removed (actually
commented out) the first line of the draw program
//background(200,0,0);
This meant that previous drawings were not over-written by a reddish background. I then
did a screen capture:
This sketch keeps going. Here is a screen capture when the faces become dots.
Exercises:
1. Change the xd to be 20 and the yd to be 10. What do you think will be the effect?
2. Change the start of the sketch to be the middle of the screen:
int posx = 300;
int posy = 200;
3. Make the smiling face fatter rather than taller by changing wid and ht.
4. Modify the sketch that draws two smiley faces to make one of them very small
and see what is displayed.
5. If you have a sad face, copy over that function definition and insert the
appropriate call.
6. [More difficult, requires an if statement]: if the face is moving down the screen,
indicated by yd being positive, draw a sad face; otherwise draw a happy face.
7. The wid and the ht variables do not vary. Change this by making them shrink each
time the face goes over an edge: for the vertical edges, insert the statement
wid = .9*wid;
and for the horizontal edges, insert the statement
ht = .9*ht;
You will insert each of these statements 2 times. Make sure you do it within the
braces of the if true clause. Try the program now and you will get an error (just
like I did)! That is because in this situation, the new values of wid and ht would
not necessarily be whole numbers. This means that the datatype indication must
be changed both in the declarations of wid and ht
float wid = 50;
float ht = 80;
and in the header line for the smiley function.
void smiley(int x,int y,float w,float h) {
This is a screen shot of the result: