Tutorial for Processing: Animation using draw ...



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; //these will hold images

PFont font; // font will hold a font for displaying text

String str; // str will hold a character string

int headc,tailc; // 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 ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download