functions

A function is a named sequence of code which performs a specific task as part of a larger program. Functions are also called subroutines, procedures, or, in object-oriented languages, methods. Functions serve several purposes:

A function can be seen as a box, which takes several inputs (parameters or arguments) and produces a single output (return value). It always performs the same operation, but since the arguments can change, the output is not always the same.

You create a function by declaring it; you use a function by calling it.

using functions

declaration

To declare or define a function in Processing, you use the following format: 

returnType functionName(argType argument1, argType argument2) {
  // local variables
  // body
  return value;
}

where (reading left to right)

Here is an example of a function that adds its two parameters and returns the result: 

// function declaration
int add(int one, int two) {
  int sum = one + two;
  return sum;
}

call

To use, or call, this function, you write the following: 

functionName(varOne, varTwo);

The function call consists of the function name, and, in parentheses, the arguments. The arguments must meet the following criteria:

When the program runs and the function is called, the program looks up the function declaration. It then passes the value of the arguments to the function definition. Using the example above, argument1 gets initialized to the value of varOne, and argument2 gets initialized to the value of varTwo. You can then use argument1 and argument2 in your function. 

                    functionName(varOne,           varTwo);
                                   |                  |
                                   |                  |
                                   V                  V
returnType functionName(argType argument1, argType argument2) {
  // declare local variables
  // what your function does
  // use argument1
  // use argument2

  return value;
}

Here are example calls of the add() function created earlier: 

add(5, 4);          // returns 9

int two = 2;
add(two, 9);        // returns 11

int three = 3
add(width, three);  // returns the value of width + three

variable scope

The scope refers to the extent of the program in which a variable is defined. If a variable is declared in the main program body it is global. This means that the declaration is valid for all parts of the program. If it is declared inside of a function definition, then it is local. This means that the declaration is valid for only as long as that function is executing. 

// global variables, accessible throughout the program
int circleSize = 25; 

void setup() {
  size(400, 400);
  smooth();
  background(255);
  stroke(0);

  // xPos and yPos are local variables
  int xPos = 200;
  int yPos = 100;
  circle(xPos, yPos);

  fill(255, 0, 0);
  ellipse(width/2, height/2, circleSize, circleSize);
}

void draw() {
  // mouseX and mouseY are global built-in variables
  circle(mouseX, mouseY);
}

// x and y are local variables passed as parameters
void circle(int x, int y) {
  // fillColor is a local variable
  int fillColor = 255;

  fill(fillColor);
  ellipse(x, y, circleSize, circleSize);
}

In that last example,

In general, you should try to break large pieces of code into shorter functions that are small enough to be understood easily. By keeping the use of global variables to a minimum, passing variables between functions and making each function as simple as is reasonable, you can make your code easier to manage and understand.

built-in functions

Processing includes many built-in functions covering a wide range of topics such as drawing shapes, loading files, calculating time, ... This is one of the major strengths in Processing as all these functions are already declared and ready for use. A complete list of these functions, including parameter descriptions and usage examples, can be found in the Reference section of the website.

shapes

Drawing basic shapes is straightforward. 

// draw a line from (200,10) to (210,380)
line(200, 10, 210, 380);

// use fill() to specify what color should be inside the shape
fill(100, 100, 200);  // blue
// draw a rectangle with the upper left-hand corner at (25,50)
// and its width and height both equal to 100
rect(25, 50, 100, 100); 

// use fill() to specify what color should be inside the shape
fill(255, 100, 0);  // orange
// use stroke() to specify the color of the outline
stroke(100, 100, 255);  // blue
// draw an ellipse centered at (280,150), with
// its width equal to 100, and its height equal to 75
ellipse(280, 150, 100, 75);

// use strokeWeight() to specify the width of the outline
strokeWeight(3);
// draw a triangle with points at (30,275), (58,225), and (186,350)
triangle(30, 275, 58, 225, 186, 350);

// use noStroke() to not draw an outline
noStroke();
// use fill() to specify what color should be inside the shape
fill(185, 17, 39);  // red
// draw a quad with points at (240,240), (390,320), 
// (360,380), and (220,350)
quad(240, 240, 390, 320, 360, 380, 220, 350);

Drawing custom shapes is also quite easy. You just need to create points using vertex() and place them between beginShape() and endShape() calls. This will "connect the dots" to build your shape. Here is an example where we build a star using this method. 

void setup() {
  size(400, 400);
  smooth();
  noStroke();
}

void draw() {
  background(0);

  // draw a star at the current mouse position
  fill(216, 61, 4);
  drawStar(mouseX, mouseY, 100); 
}

void drawStar(int xPos, int yPos, int starSize) {
  beginShape();
  vertex(xPos, yPos-starSize/2);
  vertex(xPos-starSize/3, yPos+starSize/2);
  vertex(xPos+starSize/2, yPos-starSize/8);
  vertex(xPos-starSize/2, yPos-starSize/8);
  vertex(xPos+starSize/3, yPos+starSize/2);
  vertex(xPos, yPos-starSize/2);
  endShape();
}

Processing Workshop

Elie Zananiri
Alberta College of Art + Design
3-5 April 2008