6a – Functions

As we move forward to looking at more complex projects, such as network applications or image processing programs, we will start to have hundreds of lines of code. We will be writing essays, not paragraphs. And these large amounts of code can prove to be unwieldy inside of our two main blocks—setup( ) and draw( ).

Functions are a means of taking the parts of our program and separating them out into modular pieces, making our code easier to read, as well as to revise. Let’s consider the video game Space Invaders. Our steps for draw( ) might look something like:
• Erase background.
• Draw spaceship.
• Draw enemies.
• Move spaceship according to user keyboard interaction.
• Move enemies.

Functions are often called other things, such as “Procedures” or “Methods” or “Subroutines.” They enable modularity and reusability.

  • What functions might you write in order to program the game Pong?

In Processing, we have been using functions all along. When we say “line(0,0,200,200);” we are calling the function line( ), a built-in function of the Processing environment. The ability to draw a line by calling the function line( ) does not magically exist. Someone, somewhere defined (i.e., wrote the underlying code for) how Processing should display a line.

Now it is time for us to write our own functions.


returnType functionName (arguments) {
// Code body of function
}

Note this module of code will site by itself outside of draw, wrapped up in its set of curly brackets.
Here’s a simple function for drawing a star:

void drawStar() {
  rectMode(CENTER); 
  pushMatrix(); 
  translate( width/2, height/2);
  fill(200, 100, 100); 
  rect( 0, 0, 60, 60); 
  rotate(QUARTER_PI); 
  fill(200, 200, 60, 80); 
  rect( 0, 0, 60, 60); 
  popMatrix();      
}

We use the function type void because the function doesn’t return a value, it just draws something.

We would call our function like this:

void draw() {
   background(255);
   drawStar();
}

EXERCISE: Write a function that draws a black circle.

Now let’s look at the code that bounces a ball.

// Declare global variables
int x = 0;
int speed = 1;
 
void setup() {
  size(200,200);
  smooth();
}
 
void draw() {
  background(255);
 
  // Change x by speed
  x = x + speed;
 
  // If we’ve reached an edge, reverse speed
  if ((x > width) || (x < 0)) {
  speed = speed *-1;
  }
 
  // Draw black circle at x location
  stroke(0);
  fill(0);
  ellipse(x,100,32,32);
}

EXERCISE: Restructure this code so that it has 3 functions, one to move the ball (changing the speed), one to bounce the ball (changing the direction at the edge) and one to draw the ball.

HINT: Your first function will be something like this:

void move(){
  // Change x by speed
  x = x + speed;
}

And then you would call it in void draw like this:

void draw() {
   background(0);
   move();
}

If we want to change the size of the ball, this is where we’d pass the function an argument. So as the size of the ball is determined by the drawBlackCircle part of the code (or whatever you have called your function that draws), so this is where we will work. Rewriting it with an argument for its size would look like this:

void drawBlackCircle(int diameter) {
  fill(0);
  ellipse(50,50, diameter, diameter);
}

An argument is simply a variable declaration inside the parentheses in the function definition.
This variable is a local variable (Remember our discussion in Chapter 6?) to be used in that function (and only in that function). The white circle will be sized according to the value placed in parentheses.
Calling the function in void draw then looks like this:

drawBlackCircle(16); // Draw the circle with a diameter of 16 
drawBlackCircle(32); // Draw the circle with a diameter of 32

EXERCISE:

  • Introduce an argument into your ball function so that you can set the x coordinate or y coordinate when you call the function.

EXERCISE:

    • Rearrange the following code so that it has a carDisplay() function
int x = 100;
int y = 100;
int thesize = 64;
int offset = thesize/4; // position of wheels relative to car
// draw main car body (i.e. a rect)
 
void setup() {
  size(200, 200);
  background(255);
  rectMode(CENTER);
  stroke(0);
}
 
void draw() {
 
  fill(175);
  rect(x, y, thesize, thesize/2);
  // draw four wheels relative to center
  fill(0);
  rect(x-offset, y-offset, offset, offset/2);
  rect(x+offset, y-offset, offset, offset/2);
  rect(x-offset, y+offset, offset, offset/2);
  rect(x+offset, y+offset, offset, offset/2);
 
}
  • Introduce arguments: int x, int y, int thesize, color c for your function
  • Write a sketch with 5 different cars using your function

VIDEO TUTORIALS ON FUNCTIONS:

'+
1
'+
2 - 3
4 - 5
6 - 7
8 - 9
10 - 11
12 - 13
13 - 14
[x]