Reusing Code with Functions

Functions can also be useful, and should be used, to reduce repetitions in code. That is, if you are repeating lines of code, you should likely encapsulate it in a single function that can be called.

For example, back in Week 4, the following code was used to demonstrate that use of the scale() function. This code draws four smiley faces with various scale factors.

As you can see in the above code, each time the smiley face was drawn, the code to do so had to be repeated.

With functions, we can refactor our code by encapsulating the repeated portions in a function. This new function would then be called instead. This will greatly shorten our code, and increase its readability.

Breaking This Process Down

Function Namespace

The first step to refactor the above code, might be to define the function’s namespace.

In this case, we can stick with something simple like;

function smileyFace() {

}

Function Outline

The next step might be to outline the function and identify steps it must complete.

As we can see from the above code, each smiley block (lines 9-19, 21-32, 32-45, and 47-58) performs two basic tasks, to position and scale the smiley face, and to actually draw a smiley face. So our function might need the following steps;

function smileyFace() {
    // 1. scale and position smiley face

    // 2. draw smiley face

}

Fill in the Outline

To write the code specified in the outline, in this case at least, we can copy and paste from our previous code. We know we want to draw the same smiley face, so I will move lines 11-19, from the code above into our new smileyFace() function.

function smileyFace() {
    // 1. scale and position smiley face

    // 2. draw smiley face
    stroke( 0 );
    fill('rgba(234, 255, 61, 1.0)');
    ellipse( 0, 0, 100 );
    noStroke();
    fill( 40, 255 );
    arc( 0, 15, 75, 50, 0, PI );
    ellipse( -20, -15, 20 );
    ellipse( 20, -15, 20 );
}

We also know we want this function to handle the positioning and scaling of the smiley face. Let’s start by adding translate, and scale functions to outline #1.

function smileyFace() {
    // 1. scale and position smiley face
    translate(  );
    scale( );

    // 2. draw smiley face
    stroke( 0 );
    fill('rgba(234, 255, 61, 1.0)');
    ellipse( 0, 0, 100 );
    noStroke();
    fill( 40, 255 );
    arc( 0, 15, 75, 50, 0, PI );
    ellipse( -20, -15, 20 );
    ellipse( 20, -15, 20 );
}

Also, since we know we are handling translate and scale in the function, we should consider creating a push/pop sandbox, so that the functions execution will not effect other drawing statements.

function smileyFace() {
    push(); // <- Begin sandbox

    // 1. scale and position smiley face
    translate(  );
    scale( );

    // 2. draw smiley face
    stroke( 0 );
    fill('rgba(234, 255, 61, 1.0)');
    ellipse( 0, 0, 100 );
    noStroke();
    fill( 40, 255 );
    arc( 0, 15, 75, 50, 0, PI );
    ellipse( -20, -15, 20 );
    ellipse( 20, -15, 20 );

    pop(); // <- End sandbox
}

Finally, we need to be able to specify the translate and scale parameter values. We could do this through random number generators within the function. However, let’s be more purposeful with this example. This means we need to pass in values which can be used for translate and scale. This also means we need to include input parameters to the function we are building. These parameter names should be something like;

• pos_x
• pos_y
• scale_x
• scale_y

Incorporating these into our function would cause it to look like;

function smileyFace( pos_x, pos_y, scale_x, scale_y ) {
    push(); // <- Begin sandbox

    // 1. scale and position smiley face
    translate( pos_x, pos_y );
    scale( scale_x, scale_y );

    // 2. draw smiley face
    stroke( 0 );
    fill('rgba(234, 255, 61, 1.0)');
    ellipse( 0, 0, 100 );
    noStroke();
    fill( 40, 255 );
    arc( 0, 15, 75, 50, 0, PI );
    ellipse( -20, -15, 20 );
    ellipse( 20, -15, 20 );

    pop(); // <- End sandbox
}

We can then use our function by calling something like;

smileyFace( 40, 100, 1.5, 1.0 );

The above, would call the smileyFace function, which would draw a smiley face at x:40, y:40, with scale factors of width:1.5, height:1.0.

We could then also call lots of these smiley faces. In the below example we call four, just like the original.