Lesson 4: Writing Your Own Functions

Syntax introduced: noLoop() triangle() color

We’ve already learned how to write a for loop to make a repetitive sequence of commands more compact to write. Another great utility that can save writing is a function.

You’ve already worked with some functions that are intrinsic to Processing, such as random() that you just learned.

Functions take arguments to control their behavior. For example, the ellipse() function draws an ellipse. ellipse() takes four arguments. They are: 1. the x-coordinate, 2. the y-coordinate, 3. the width of the ellipse, and 4. the height of the ellipse. So, when you want to draw an ellipse, you have to specify these four things in that order.

You can create your own functions and name them yourself. Here are some examples that show you why you’d want to do this and how to do it.

Example 4.5: The dumb house

This program draws a figure to the screen in a not-so-smart way by setting each shape explicitly with numbers. I included what the house looks like in the screenshot.

//draw a house in the dumbest possible way

void setup() {
   size(200,200);

   // We are just drawing a static figure.
   // Therefore, noLoop tells draw to just run once.
   noLoop();
}

void draw() {
   fill(46, 136, 242);
   rect(90, 100, 40, 40);
   fill(0);
   triangle(80, 100, 110, 70, 140, 100);
   fill(93, 50, 10);
   rect(100, 120, 10, 20);
   fill(242, 213, 46);
   rect(95, 105, 10, 10);
   rect(115, 105, 10, 10);
   line(100, 105, 100, 115);
   line(95, 110, 105, 110);
   line(120, 105, 120, 115);
   line(115, 110, 125, 110);
}

Code and image of a dumb way to draw a house.

E. Richardson

Example 4.6: The slightly smarter house

Now, let’s be a little smarter and use some variables to set the positions of the shapes that make up the figure relative to each other, like this:

// Draw a house. Use variables.

int x = 90;
int y = 100;

void setup() {
   size(200, 200);
   
   // We are just drawing a static figure.
   // Therefore, noLoop tells draw to just run once.
   noLoop();
}

void draw() {
   fill(46, 136, 242);
   rect(x, y, 40, 40);
   fill(0);
   triangle(x - 10, y, x + 20, y - 30, x + 50, y);
   fill(93, 50, 10);
   rect(x + 10, y + 20, 10, 20);
   fill(242, 213, 46)
   rect(x + 5, y + 5, 10, 10);
   rect(x + 25, y + 5, 10, 10);
   line(x + 10, y + 5, x + 10, y + 15);
   line(x + 5, y + 10, x + 15, y + 10);
   line(x + 30, y + 5, x + 30, y + 15);
   line(x + 25, y + 10, x + 35, y + 10);
}

Code and image of a slightly smarter way to draw a house.

E. Richardson

The example above draws the exact same house as before, but now we can control where the house goes just by changing x and y instead of going into each line and recalculating. (Recall this concept from Lesson 2.) There are 15 lines of code inside draw(). What if we wanted to draw two houses? We could declare two more variables and write those same 15 lines again, but then our code inside draw() will be 30 lines long. If we wanted ten houses our code would suddenly be 150 lines long. That would be really annoying. If we write a function that has the 15 lines needed to make the house inside it, then we can just call the function with one line of code, so we only have to write those 15 lines one time.

Example 4.7: The clever house

Here’s an example below in which I define the house() function. You can make up any name for your own functions but don’t make up a name that Processing already uses, such as ellipse() or something like that. My house() function will take two arguments: the x and y position.

// Draw a house using a function.

void setup() {
   size(200, 200);
   
   // We are just drawing a static figure.
   // Therefore, noLoop tells draw to just run once.
   noLoop();
}

void draw() {
   // The house function needs two arguments, x and y.
   house(90, 100);
}

// Here is the house function.
// It is written outside of draw.
// The two arguments it will take are written inside parentheses.
void house(int x, int y) {
   fill(46, 136, 242);
   rect(x, y, 40, 40);
   fill(0);
   triangle(x - 10, y, x + 20, y - 30, x + 50, y);
   fill(93, 50, 10);
   rect(x + 10, y + 20, 10, 20);
   fill(242, 213, 46)
   rect(x + 5, y + 5, 10, 10);
   rect(x + 25, y + 5, 10, 10);
   line(x + 10, y + 5, x + 10, y + 15);
   line(x + 5, y + 10, x + 15, y + 10);
   line(x + 30, y + 5, x + 30, y + 15);
   line(x + 25, y + 10, x + 35, y + 10);
}

Clever House drawn using a function.

E. Richardson

The program above draws the exact same house as in the previous two programs, and at first glance it doesn’t look like we have gained too much from creating a function. However, now we can make a bunch of houses very easily -- see below:

Example 4.8: The clever house easily makes friends nearby

The program below draws four houses in different places on the screen, but I only had to write the function containing the details of the house one time.

// Draw multiple houses using a function.

void setup() {
   size(200, 200);
   
   // We are just drawing a static figure.
   // Therefore, noLoop tells draw to just run once.
   noLoop();
}

void draw() {
   // I'm calling the house function four times with different x
   // and y values to make four houses.
   house(90, 100);
   house(40, 40);
   house(100, 150);
   house(10, 60);
}

// But down here I only have to write the house function once.

void house(int x, int y) {
   fill(46, 136, 242);
   rect(x, y, 40, 40);
   fill(0);
   triangle(x - 10, y, x + 20, y - 30, x + 50, y);
   fill(93, 50, 10);
   rect(x + 10, y + 20, 10, 20);
   fill(242, 213, 46)
   rect(x + 5, y + 5, 10, 10);
   rect(x + 25, y + 5, 10, 10);
   line(x + 10, y + 5, x + 10, y + 15);
   line(x + 5, y + 10, x + 15, y + 10);
   line(x + 30, y + 5, x + 30, y + 15);
   line(x + 25, y + 10, x + 35, y + 10);
}

Clever house gets friends nearby.

E. Richardson

Now that you’ve got the basic idea, it’s pretty easy to add something to your function. For example, what if we wanted to choose the color of each house, too? We can add that as an argument to the function, like this:

Example 4.9: The clever house gets new siding

// Draw a small neighborhood with variety in color

void setup() {
   size(200, 200);
   
   // We are just drawing a static figure.
   // Therefore, noLoop tells draw to just run once.
   noLoop();
}

void draw() {
   // The call to house() needs four arguments now.
   // The arguments are x position, y position, siding color, and roof color.
   house(90, 100, color(46, 136, 242), color(255));
   house(40, 40, color(250, 91, 221), color(200));
   house(100, 150, color(232, 192, 150), color(100));
   house(10, 60, color(148, 229, 149), color(0));
}

// See how I've added the third and fourth arguments at the beginning inside
// the parentheses where the arguments are listed?

void house(int x, int y, color c, color r) {
   fill(c);
   rect(x, y, 40, 40);
   fill(r);
   triangle(x - 10, y, x + 20, y - 30, x + 50, y);
   fill(93, 50, 10);
   rect(x + 10, y + 20, 10, 20);
   fill(242, 213, 46)
   rect(x + 5, y + 5, 10, 10);
   rect(x + 25, y + 5, 10, 10);
   line(x + 10, y + 5, x + 10, y + 15);
   line(x + 5, y + 10, x + 15, y + 10);
   line(x + 30, y + 5, x + 30, y + 15);
   line(x + 25, y + 10, x + 35, y + 10);
}

Clever house and friends get new siding.

E. Richardson

So now that we have made this function, if we ever want to draw some houses in another program, we can just copy and paste this function in without worrying about what each line does. All we have to think about is where to put the house and what color to make it.