Time 45 mins

Difficulty Beginner
Prerequisites Algorithms
Departments Science
Authors Sandra Kuipers
Groupings Individual
Minimum Year Group None




This work is shared under the following license: Creative Commons BY-SA-NC


Learner Outcomes
Students will:
  • ...
Competency Focus
  • ...
Interdisciplinary Connections
  • ...
What was successful? What needs changing? Alternative Assessments and Lesson Ideas? What other Differentiation Ideas/Plans could be used?
  • ...
Any CC attribution, thanks, credit, etc.

This page requires you to be logged in to access it. Please login and try again.
10 mins
  • 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.

5 mins
Why use functions?
  • 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.

5 mins
  • 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);
  fill(204, 101, 192, 127);
  for (let i = 0; i < 10; i ++) {
    ellipse(0, 30, 20, 80);
  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() {
  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?
5 mins
  • 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.
10 mins
Drawing with Functions
  • 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);
  fill(255, 221, 51);
  ellipse(x, y, 120, 120);
  // Left Eye
  fill(122, 91, 58);
  ellipse(x-20, y-15, 15, 25);
  // Right Eye
  fill(122, 91, 58);
  ellipse(x+20, y-15, 15, 25);
  // Mouth
  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.
10 mins
Computing with Functions
  • 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:

Your Simple Calculator
  • 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.
There are no records to display.
Powered by Gibbon v27.0.00dev

Founded by Ross Parker at ICHK Secondary | Built by Ross Parker, Sandra Kuipers and the Gibbon community
Copyright © Gibbon Foundation 2010-2024 | Gibbon™ of Gibbon Education Ltd. (Hong Kong)
Created under the GNU GPL | Credits | Translators | Support