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.
To fulfill the demand for quickly locating and searching documents.
It is intelligent file search solution for home and business.
Related download
- curricular archdiocese of glasgowreligious education
- international online high school
- evaluating dementia services and supports
- edu
- insults and folk humor rabelaisian parodies and sheng s
- tutorial for processing animation using draw
- while teaching i have generally used the same structure
- rochester institute of technology
- what would they think a computational model of attitudes
- stewardship of life institute
Related searches
- salesforce lightning tutorial for beginners
- onenote tutorial for beginners
- free excel tutorial for beginners
- excel tutorial for beginners pdf
- onenote 2016 tutorial for beginners
- minecraft tutorial for beginners
- fractions tutorial for adults
- email tutorial for beginners pdf
- onenote 2010 tutorial for beginners
- network tutorial for beginners pdf
- networking tutorial for beginners
- computer tutorial for beginners