• Functions are awesome!
• They're like a building block that we can use to write more complex code.
• Check out the following video to learn more about functions in JavaScript.

• Reusability
• Functions help make our code reusable.
• Instead of copy-and-pasting code, we can write a function and then call that function as many times as we need to.
• Organization
• Functions help keep our code organized.
• By grouping similar sections of code together, we can tidy up our codebase and ensure it is easier to maintain.
• Readability
• Functions also make code more readable.
• Instead of long blocks of code that do complex things, we can move complex code into functions, and then compose a series of commands with a set of functions.

Check out the Mozilla docs for more in-depth info about functions.

• Functions can receive input.
• We can declare a function that takes input by defining a set of parameters.
• Parameters look like variables, and are defined inside the round brackets of a function.
• Each parameter becomes a local variable available only inside the scope of the function.
• Consider the following function:

function drawFlower(x, y) {
  
  translate(x, y);
  noStroke();
  fill(204, 101, 192, 127);
  
  for (let i = 0; i < 10; i ++) {
    ellipse(0, 30, 20, 80);
    rotate(PI/5);
  }
  
  translate(-x, -y);
}

• This function takes something complex and lets us now draw a flower with one line of code.
• When we pass values into a function, these are called arguments.
• Consider the following code:

function draw() {
  background(240);
  
  drawFlower(100, 100);
  
  drawFlower(300, 200);
  
  drawFlower(160, 300);
}

• We can now draw flowers easily by passing in arguments for the x and y position of the flower.
• Check out the code here and try modifying the function. What happens to each flower?

• Not only can functions have input, they can also have output.
• We can output a value from a function using a return statement.
• Usually, the return statement goes at the bottom of your function and returns a value, like this:

function getRandomNumber() {
    return 4; // chosen by a random dice roll.
              // guaranteed to be random.
}

• The return statement can be a powerful tool because it enables your code to process something and return the result, like a mini computer.
• Consider the following function

function addTwoNumbers(a, b) {
    return a + b;
}

• This function has two parameters, a and b, and it uses those parameters to compute a value to return.
• A function can also have more than one return statement. These are often inside conditionals, to return different values when different conditions are met.

• Functions can be useful when drawing by creating reusable shapes.
• Consider the following function:

function drawEmoji(x, y, width, height)
{
  // Body
  stroke(222, 192, 40);
  strokeWeight(2);
  fill(255, 221, 51);
  ellipse(x, y, 120, 120);
  
  // Left Eye
  strokeWeight(0);
  fill(122, 91, 58);
  ellipse(x-20, y-15, 15, 25);
  
  // Right Eye
  strokeWeight(0);
  fill(122, 91, 58);
  ellipse(x+20, y-15, 15, 25);
  
  // Mouth
  strokeWeight(6);
  stroke(122, 91, 58);
  line(x-30, y+20, x+30, y+20);
}

• This function enables us to draw an emoji anywhere we want, in any size, by passing in arguments.
• The position of each part of the emoji is drawn using an offset.
• The center of the emoji is at x, y and then everything else is either a positive or negative offset from the center.
• Check out the code here.

• Functions can do more than organize our code, they can also compute things.
• They do this by using the return statement.
• Check out the following video to lean how to write your own functions that return stuff:

• One of the most powerful features of functions is the ability to take input and return output.
• This means any function can work like a mini computer, or a calculator!

• For this unit, your task will be to create your own simple calculator.
• But, it doesn't have to compute numbers (although it can).
• Consider what you could compute using any input and an output (return statement).
• Your calculator might:
• Add colours together
• Add emoji?
• Calculate moods
• Be sure to check out the input function in p5js to capture input from your user. You can also use buttons, sliders, and other forms of input.
• Once you've created your simple calculator, submit a link to your p5js sketch as evidence of your learning in this unit.