Tutorial: Processing Continuous Mode



Tutorial for Processing: setup, function

The Processing language has 3 modes of programming: Basic, Continuous and Java. The Basic mode was demonstrated in the Processing 1 tutorial. In this mode, you write simple lines of code, using the built-in statements. In Continuous mode, you can define your own functions: a function is set of statements that can be invoked. Think of it as a way to extend the language. Another, important, feature of the Continuous mode is that it supports animation. This is done through the use of a setup function and, possibly, a draw function. The Java mode allows for the full use of the Java programming language. These notes describe the Continuous mode.

Function

You may recall functions from math classes. An example often used is the function for calculating the area of a rectangle. The function takes two input values, representing the width and height of the rectangle. The action of the function is to multiply these two values together and then produce or return the product as the output. All programming languages have one or more constructs that do this. A function is defined in Processing by specifying what the output is, the name of the function, the inputs and then the statements making up the function itself. The inputs are also termed parameters or arguments. It is possible for a function to return nothing and it is possible for the function to have no parameters.

Processing is a strongly typed language. This means that we need to specify the datatypes of the inputs and the output. The area function could be defined as follows:

int areaRectangle (int w, int h) {

return w*h;

}

The name of the function is areaRectangle. I made up this name. I could have done something else. The function will produce a whole number (integer) as indicated by the int at the start of the first line. The int is Processing's name for integers. This is termed the return value. The function takes two parameters, each of datatype int (same as the output). The w and the h are used inside the function to refer to the parameter values. Look at this from a practical point of view: the Processing system needs to know how much space to allocate for the w and h values. The function has 1 line of code, one statement. This statement does two things: perform the calculation of multiplying two values and then returning this result as the output for the function. Since the values have been specified to be of datatype int, doing multiplication is valid. Specifying datatypes means that error checking can be done. This won't catch all your errors, but it will catch many.

This is the function definition. If we placed it as is in a Processing sketch, nothing would appear on the display window or the output area below the editing space. The function has to be invoked or called for this to happen. This distinction is like the difference between giving someone directions to your house and telling them to follow the directions and go to your house.

After this quick introduction to functions, I will continue by describing a silly example for drawing smiley faces in the display window. It will demonstrate the use of the special function setup and other features of Processing.

Setup

The Continuous mode is specified in Processing by the definition of a setup function. That is, setup is a reserved name for a function defined by the programmer (that is, you or me) that will be called when a sketch is run. The purpose of the function is to SET UP the sketch. A typical use of the setup function is to specify the size of the display window and the background.

void setup() {

size(600,500);

background(240,0,100);

}

Comparing this to the areaRectangle example, the output for this function is void, meaning nothing is produced by the function. Similarly, there are no parameters. This does make sense since the function is invoked immediately by the Processing system so nothing can be used for parameters. The opening and closing parentheses are still required. The opening and closing curly brackets (also called braces) enclose two statements. One is a size statement and the other sets the background color. If you click on the run arrow, you will see this:

[pic]

You can take any of the sketches described in the first tutorial and put all the code inside a setup function and obtain the same results.

Ellipse and arc

My goal is to draw smiley faces. To do this, I will write a function for drawing a smiley face so I can include more than one smiley face in my sketch. Moreover, the smiley face code will be based on parameter values rather than numbers (that is, parameter values holding numbers, rather than constants) so I can vary the position, width and height of the faces.

An ellipse is drawn by specifying a position: horizontal and vertical values, and a width and a height. If the width and the height are the same, it is a circle. The position indicates the position of the center of the ellipse. Adding the statement ellipse(0,0,40,80); will produce a quarter of an ellipse in the upper left corner:

[pic]

Changing the statement to ellipse(150,100,40,80); produces an ellipse in the center of the display window (150 is half of 300, the width of the display window and 100 is half of 200, the height of the display window).

[pic]

An arc is a curve defined in terms of a portion of an ellipse. The parameters are the same as the ellipse: horizontal position, vertical position, width, height PLUS two more values indicating the start and the stop points. Think of a person running (a short distance) going clockwise on a track: where does the runner start and where does the runner end? These are specified as angles! There are different ways to set this up, but I will use the radian angle measurement. The radian system is based on the circle (ellipse) being made up of 2 times PI radians. Do not be concerned: PI is a built-in constant in Processing, so our code can refer to it. Here is a (crude) diagram indicating values along the ellipse.

Replacing the ellipse statement with arc(150,100,40,80,0,PI); produces

[pic]

To draw [what I would call] just the arc, you need to use the noFill(); statement. Before proceeding, experiment with ellipse and arc. Here is the result of changing the arc to be along a circle, using noFill and specifying a negative angle as the start.

[pic]

Exercises:

1. Replace the ellipse statement in the example just given with ellipse(150,100,80,40); Before clicking on run, see if you can predict what will appear.

2. Make a circle in the middle of the display screen with diameter 100.

3. Draw an arc showing the bottom half of a circle.

4. Draw an arc showing a piece of pie (no pun intended) that is 1/8 of the whole circle. Draw the same size slice at different positions.

5. Experiment with different colors using the fill command.

Smiley face

The smiley face will consist of an ellipse, an arc for the mouth and two small ellipses for the eyes. Remember that this is a general smiley face, defined in terms of parameters.

The smile on my smiley face will be from .25*PI to .75* PI and it will be defined in terms of an ellipse half the size in each dimension as the ellipse for the face. The arc will not be filled. The eyes and mouth will be black and the fill for the face will be white. The eyes will be 1/10 the dimensions of the face. Here is the definition of the smiley function. The text after the // are comments. They are ignored by Processing.

void smiley(int x,int y,int w,int h) {

fill(255,255,255); //white

ellipse(x,y,w,h); //outer face

noFill();

arc(x,y,w/2,h/2,.25*PI,PI*.75); //mouth

fill(0,0,0); //black

ellipse(x-w*.25,y-h*.25,w/10,h/10); //left eye

ellipse(x+w*.25,y-h*.25,w/10,h/10); //right eye

}

This is the function definition. To make a face, in fact two, appear in the display window, I put in two calls to the function in the setup function.

void setup() {

size(600,400);

smiley(100,200,100,50);

smiley(300,200,100,200);

}

This produced the following:

[pic]

You need to experiment!

Exercises:

1. Add one more statement to put a matching small, wide face on the right side of the tall, thin face.

2. Change the colors.

3. Define another function, call it sad, that makes a frowning face.

The Continuous mode in Processing provides a way to do animation through the use of a draw function, similar to the setup function. The next tutorial will make use of this feature AND build on this sketch to make a smiley face 'bounce' within the confines of the display window.

-----------------------

PI*(3/2) or

-PI/2

PI*.75

PI

PI*.5

PI*.25

0

................
................

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

Google Online Preview   Download