2-3 Creating Simple Functions

What is a Function?

A function is a named { block } of code that performs a particular task in our program. You already have a lot of experience with various functions in p5.js. We started by writing two special functions called setup() and draw(), then learned how to call many other built-in functions in p5.js; for example, ellipse(), dist(), and random().

One of the best ways to solve a complex problem is to break it down into smaller problems and then solve those simpler problems to solve the overall problem. We call this approach “Divide and Conquer” – this is a hugely important idea in Computer Science! Functions are perfectly suited for this because they support the idea of breaking a program down into smaller parts to make them more manageable and readable. Writing our own functions becomes more and more critical as our programs get larger and more complex.

Defining a Basic Function

We have already had experience defining the setup(), draw(), mousePressed(), and keyPressed() functions. These functions are special and need to be named exactly as they are for p5.js to work correctly. However, it’s also possible to define (and name) your own custom functions. Here’s an example:

function setup() {
  createCanvas(400, 400)
}

function draw() {
  background(220)
  drawRedCircle()
  fill(255)
  rect(width/2-40,height/2-10,80,20)
}

// This function draws the red circle for our sign
function drawRedCircle() {
  fill(255,0,0)
  noStroke()
  ellipse(width/2,height/2,100,100)
}

function setup() {

createCanvas(400, 400)

}

function draw() {

background(220)

drawRedCircle()

fill(255)

rect(width/2-40,height/2-10,80,20)

}

// This function draws the red circle for our sign

function drawRedCircle() {

fill(255,0,0)

noStroke()

ellipse(width/2,height/2,100,100)

}

On lines 13 to 17, I have defined a function called drawRedCircle(). It’s good practice to provide a comment (as on line 12) describing what a custom function does. On line 13 is the keyword function then the name of our function followed by empty (). Within the { body } of the function, I have added lines of code to draw a red circle in the center of the canvas.

To run my function, it needs to be called from another function, this happens on line 7 in the draw() function. Once the code in drawRedCircle() has finished, p5.js goes back to where the function was called and will run the next line of code, in this case the fill() function on line 8.

Proper Function Naming

The same naming conventions that apply to variables also apply to functions, here’s a quick reminder:

1. Always make your function names meaningful and descriptive.
2. Always start your function names with a lowercase letter and join words using capital letters.
3. Never name your functions using existing p5.js keywords or function names.

Another Example

Let’s look at the Edge Detection example again from 1-11:

let circleX = 0
let circleY = 200
let speed = 2

function setup() {
  createCanvas(400, 400)  
}

function draw() {
  background(220)
  
  // Draw a circle using our coordinate variables
  fill(255, 255, 0)
  ellipse(circleX, circleY, 40, 40)

  // If we've reached an edge, reverse direction
  if (circleX > width || circleX < 0) {
    speed = speed * -1 
  }
  
  // Increase the value of circleX using speed variable
  circleX = circleX + speed
}

let circleX = 0

let circleY = 200

let speed = 2

function setup() {

createCanvas(400, 400)

}

function draw() {

background(220)

// Draw a circle using our coordinate variables

fill(255, 255, 0)

ellipse(circleX, circleY, 40, 40)

// If we've reached an edge, reverse direction

if (circleX > width || circleX < 0) {

speed = speed * -1

}

// Increase the value of circleX using speed variable

circleX = circleX + speed

}

The draw() function above performs 3 different tasks: displaying, bouncing, and moving a ball. Instead of putting all of that code in one function, let’s break it down into several functions, each performing a specific task:

let circleX = 0
let circleY = 200
let speed = 2

function setup() {
  createCanvas(400, 400)  
}

function draw() {
  background(220)
  
  display()
  bounce()
  move()
}

// This function draws a yellow ball
function display() {
  fill(255, 255, 0)
  ellipse(circleX, circleY, 40, 40)  
}

// This function reverses the ball direction if we hit an edge
function bounce() {
  if (circleX > width || circleX < 0) {
    speed = speed * -1 
  }
}

// This function changes the x location of the ball
function move() {
  circleX = circleX + speed
}

let circleX = 0

let circleY = 200

let speed = 2

function setup() {

createCanvas(400, 400)

}

function draw() {

background(220)

display()

bounce()

move()

}

// This function draws a yellow ball

function display() {

fill(255, 255, 0)

ellipse(circleX, circleY, 40, 40)

}

// This function reverses the ball direction if we hit an edge

function bounce() {

if (circleX > width || circleX < 0) {

speed = speed * -1

}

// This function changes the x location of the ball

function move() {

circleX = circleX + speed

}

Notice in the draw() function I now simply call the 3 custom functions that I created. I hope you agree on how much clearer and shorter that function has become. Technically, the order of the functions in a p5.js program doesn’t matter. But in terms of readability, it’s best to define them after setup() and draw(), as shown.

Each custom function performs one specific task in my overall program. Yes, the code is a little longer but it is also much better organized. For example, if I need to change how the ball moves, I can focus on the move() function code only and ignore everything else. This makes reading, changing, and fixing code much easier.

Three Benefits of Functions

There are 3 main benefits to writing your own functions:

1. Easier to Read: Shorter, simpler, more focused functions are easier to read and understand. This makes code much easier to maintain in the future.
2. Easier to Reuse: A function can be easily taken from one program and reused in another without having to reinvent the wheel. This can be a great time saver! After all, p5.js wouldn’t be much fun without all of the built-in drawing functions that we can reuse without having to create them from scratch.
3. Easier to Debug: When each function performs a specific, focused task it becomes much easier to find the source of logic bugs. For example, if the ball is not rendering properly, it must be the display() function. You can even use // to comment out function calls to help isolate bugs. For example:

function draw() {
  background(220)
  
  display()
  //bounce()
  //move()
}

function draw() {

background(220)

display()

//bounce()

//move()

}

You Try!

Write a program with a custom drawHappyFace() function that draws a happy face at the center of the canvas. Within the function, pick a random colour for the eyes of your happy face character so that they change colour each time drawHappyFace() is called from the draw() function.
Pick one of your past exercises and break it down using your own custom functions.