2-5 Returning a Value

Useful Built-in Math Functions

We’ve seen that p5.js has some useful functions related to mathematics; for example, dist(), constrain(), and map(). Here is a summary of the ones we’ve used so far, and a few new ones:

Function	Description	Example
abs(num)	Returns the absolute value of num; i.e., \| num \|	positiveX = abs(x)
dist(x1, y1, x2, y2)	Returns the distance between two points (x1, y1) and (x2, y2)	mouseSpeed = dist(mouseX, mouseY, pmouseX, pmouseY)
constrain(num, lo, hi)	Returns lo if num <= lo, or hi if num >= hi, or num otherwise.	red = constrain(red, 0, 255)
map(num, lo, hi, target_lo, target_hi)	Returns num converted from one range to a target range.	greyScale = map(mouseX, 0, width, 0, 255)
max(num1, num2)	Returns the larger value of num1 and num2	print(max(7, -3))
min(num1, num2)	Returns the smaller value of num1 and num2	smallest = min(7, -3)
pow(num, exp)	Returns num to the power of exp; i.e., num^pow	result = pow(num,3) + 2
sq(num)	Returns num squared; i.e., num²	numSquared = sq(num)
sqrt(num)	Returns the square root √ of num	root = sqrt(num)

If you compare these functions you’ll notice that they all take arguments, but they also all return some value that we either need to assign to a variable or use in a larger expression. There are often situations in programming where it can be handy to define our own value-returning function that performs a complicated calculation and that can be called multiple times throughout a program. To do this we need to learn a new keyword!

The return Keyword

So far, when the end of our functions is reached they simply end and execution continues from where the function was originally called. To return a value from a function, we need to include the keyword return followed by a literal value or a local (or parameter) variable in our function.

Here’s a simple function to add 3 numbers together (passed as parameters) and return their product:

// This function takes 3 parameters and returns their product
function product(num1, num2, num3) {
  let result = num1 * num2 * num3
  return result
}

// This function takes 3 parameters and returns their product

function product(num1, num2, num3) {

let result = num1 * num2 * num3

return result

}

On line 4 (above) is the keyword return followed by the local variable name result. The value stored in result is passed back to where the function was called (see line 4 below):

function setup() {
  createCanvas(400, 400)
  
  let answer = product(2, 3, 4)
  print(answer)
}

function setup() {

createCanvas(400, 400)

let answer = product(2, 3, 4)

print(answer)

}

Easy!

Code Efficiency / Reuse

As your functions become more complex you should always be on the lookout for ways to reuse existing functions and reduce redundant code. Consider this example that returns the largest of three values (received as parameters):

function setup() {
  createCanvas(400, 400)
  print(maximum(-3, 9, 7))
}

function maximum(num1, num2, num3) {
  if (num1 > num2 && num1 > num3) {
    return num1
  }
  else if (num2 > num1 && num2 > num3) {
    return num2
  }
  else {
    return num3    
  }
}

function setup() {

createCanvas(400, 400)

print(maximum(-3, 9, 7))

}

function maximum(num1, num2, num3) {

if (num1 > num2 && num1 > num3) {

return num1

}

else if (num2 > num1 && num2 > num3) {

return num2

}

else {

return num3

}

The first thing you should notice is that the maximum() function includes three return keywords — this is ok! As soon as one of the branches of the if statement is true, its respective return statement will cause the function to exit immediately and return a result. Having multiple ways to escape (return) from a function is quite common.

But we can do better! You know that there already exists a function called max() that does the same job as our maximum() function, the only limitation being that it accepts exactly 2 parameters. Rather than using an if statement with so many complicated conditions, we can accomplish the same job by reusing the existing max() function like so:

function maximum(num1, num2, num3) {
  let largest = max(num1, max(num2, num3))
  return largest
}

function maximum(num1, num2, num3) {

let largest = max(num1, max(num2, num3))

return largest

}

Wow, that’s code reuse in action! We don’t even need to declare the local variable largest. We can just write:

function maximum(num1, num2, num3) {
  return max(num1, max(num2, num3))
}

function maximum(num1, num2, num3) {

return max(num1, max(num2, num3))

}

It takes experience to see opportunities like this, but you’ll get there with practice.

You Try!

Try to figure out what each of these calculations will display in the console, then test them in p5.js to see if you are correct.
- print(sq(3) + pow(2,3))
- print(sq(8) – sqrt(16))
- print(max(min(4, 8), max(7, 2)))
- print(abs(min(2, -2) + max(-9, 7)))
- print(pow(sqrt(4), pow(2, 3)))
- print(sq(dist(min(0, 7), 0, abs(-4), 3)))
- print(constrain(pow(3,3), 15, sq(5)))
- print(constrain(min(-1,-5), -3, 3))
Write a function called circumference() that takes radius as a parameter and returns the circumference of a circle. Call your function from setup() and print() the result in the console area. Don’t forget: Circumference = 2πr
Write a function called distance() that works exactly like the p5.js built-in dist() function (but don’t use dist() in your solution!). Return to your solution for 1-10 Q4 and use your distance() function instead of dist(). The formula for the distance between 2 points is:
Create a function to draw a single flower. Include parameters to vary the flower’s appearance (location, height, colour, number of petals, etc.) — make it as customizable as possible. Try using a for loop to fill the canvas with hundreds of different flowers!