Organize your Program by Grouping Statements

In this chapter, you will learn how to make your own functions to structure your program. Structuring a program is to divide a series of processes into meaningful groups and organize them as functions. Organizing a program by creating functions means you don't have to write the same thing many times. Therefore, you will be able to write a program that is easy to understand with a short description.

How to Create and Use Functions

So far you have used functions such as createCamvas, rect and print provided in p5.js to create your programs. Only very basic functions are provided by default, but you can define a complicated function by putting several statements together. The following program defines two functions, drawRoundFace and drawAngularFace. These functions are different in detail, but both are meaningful sequences of operations to "draw a face at specified coordinates".

[ Example 5-1. Create a function ]

function setup() {
    createCanvas(windowWidth, windowHeight);
}

function draw() {
    background(100);
    drawRoundFace(400, 100); // draw a round face at x = 400, y = 100
    drawAngularFace(50, 50); // draw a angular face at x = 50, y = 50
}

function drawRoundFace(x, y) {
    noStroke();

    fill(249,205,173);//rosy beige
    circle(x, y, 100);

    //Eye 1
    fill(30);//dark gray
    circle(x, y+10, 10);

    //Eye 2
    circle(x+20, y+10, 10);

    //Mouth
    fill(252,157,154);//light pink
    arc(x, y+25, 30, 30, 0, radians(180), PIE);
}

function drawAngularFace(x,y) {
    strokeWeight(5);  //line weight
    stroke(50, 200, 50);  //line color RGB
    fill(255);

    rect( x, y, 150, 125);
    rect( x+25, y+50, 15, 15);//left eye
    rect( x+110, y+50, 15, 15);//right eye
    rect( x+40, y+90, 75, 10);//mouth
}

Use arc to draw arcs and fans. https://p5js.org/reference/#/p5/arc

When giving an angle, use a value in radians, that you can convert from the degree system (°) with radians(degree).

To define a function, give a function name, arguments, and statements in the following format. Any number of arguments may be defined within the parentheses () and may be freely used within the block as variables representing the input at invocation.

function function_name (artument1, artument2, artument3, ...){
    statements...
}

Why Create a Function?

Let's look at the draw block in Example 5-1 above. You can easily read that there are three steps in draw: 1. fill the background, 2. draw a round face, and 3. draw a square face. Of course, you could create the same picture by writing all the shapes in a draw block without defining your own functions, as in the code shown next. However, it is difficult to tell which steps are for drawing round faces and which are for drawing square faces in the unstructured writing style. On the other hand, if you split the process into functions, you only have to think about where to place the faces when you are thinking about the draw block, and you don't have to worry about the details of what to do with each face part. And you can think inside the function as a separate problem, which makes it easier to figure out the problem. One reason to create functions is to make your programs easier to understand by properly separating your thoughts about processing.

[It is difficult to make sense of the process without structuring]

function setup() {
    createCanvas(windowWidth, windowHeight);
}

function draw() {
    background(100);

    noStroke();

    fill(249,205,173);//rosy beige
    circle(400, 100, 100);

    //Eye 1
    fill(30);//dark gray
    circle(400, 110, 10);

    //Eye 2
    circle(420, 110, 10);

    //Mouth
    fill(252,157,154);//light pink
    arc(400, 125, 30, 30, 0, radians(180), PIE);

    strokeWeight(5);  //line weight
    stroke(50, 200, 50);  //line color RGB
    fill(255);

    rect( 50, 50, 150, 125);
    rect( 75, 100, 15, 15);//left eye
    rect( 160, 100, 15, 15);//right eye
    rect( 90, 140, 75, 10);//mouth
}

It makes it easy to perform the same action with different arguments. The following example shows a program that uses a for statement to draw many faces. ( You may not be able to see the faces depending on the width of your browser.)

function setup() {
    createCanvas(windowWidth, windowHeight);
}

function draw() {
    background(100);

    for(let i=0; i<5; i++){
        drawRoundFace(i*160+125, 100);
        drawAngularFace(i*160+50, 200);
    }
}

function drawRoundFace(x, y) {
    noStroke();

    fill(249,205,173);//rosy beige
    circle(x, y, 100);

    //Eye 1
    fill(30);//dark gray
    circle(x, y+10, 10);

    //Eye 2
    circle(x+20, y+10, 10);

    //Mouth
    fill(252,157,154);//light pink
    arc(x, y+25, 30, 30, 0, radians(180), PIE);
}

function drawAngularFace(x,y) {
    strokeWeight(5);  //line weight
    stroke(50, 200, 50);  //line color RGB
    fill(255);

    rect( x, y, 150, 125);
    rect( x+25, y+50, 15, 15);//left eye
    rect( x+110, y+50, 15, 15);//right eye
    rect( x+40, y+90, 75, 10);//mouth
}

Function with Return Values

As in numerical computation, you assign a function to do something and receive the result of the operation. You have used this kind of functions, for example, to create and assign color to a variable like let c = color(200, 50, 50). To return the result of the operation to the caller, use return in the function. Note that only one variable can be returned from one function.

function setup() {
    createCanvas(windowWidth, windowHeight);
    background(50);
    noStroke();
}

function draw() {
    let c = createRandomColor(); // Receive color from a function
    fill(c);
    circle(random(windowWidth), random(windowHeight), 30);
}

function createRandomColor() {
    // Function that returns a random color
    colorMode(HSB);

    let h = random(360); // 0° - 360° All hues
    let s = random(60); // 0% - 60% Saturation (pale)
    let b = 80 + random(20); // 80% - 100% Brightness (light)

    return color(h, s, b); // return result
}

Exercises

Exercise 1

Create a function face(x, y, c) that draws a face with a specified color at specified coordinates. The arguments x, y are two-dimensional positions and c is a color. Use the face function in the following program to create an image of faces of random colors. You may use the following template and create only the face part.

function setup() {
    createCanvas(windowWidth, windowHeight);
    noLoop(); // call draw once
}

function draw() {
    background(100);

    for(let i=0; i<5; i++){
        c = createRandomColor();
        face(i*160 + 50, 50, c);
    }
}

// define `face` here
function face ...

function createRandomColor() {
    // Function that returns a random color
    colorMode(HSB);

    let h = random(360);
    let s = random(60);
    let b = 80 + random(20);

    return color(h, s, b);
}

Exercise 2

Create a function chooseRandomColor(c1, c2, c3, c4) that returns a random color among the four input colors. You can implement this function using random numbers random() and conditional branching. Once you have made it, check it works correctly by putting it in the following program.

function setup() {
    createCanvas(windowWidth, windowHeight);
    background(100);
    noLoop();
}

function draw() {
    background(100);

    let color_1 = color(240, 80, 80);
    let color_2 = color( 80,230, 80);
    let color_3 = color( 80, 80,240);
    let color_4 = color(240,240, 80);

    for(let i=0; i<10; i++){
        let color = chooseRandomColor(color_1, color_2, color_3, color_4);
        fill(color);
        rect(i*windowWidth/10, windowHeight/2, 40, 40);
    }
}

function chooseRandomColor(c1, c2, c3, c4){
    // Work on the program here
}