Functions
Time 45 mins

Difficulty Module 3
Prerequisites Algorithms
Departments Career & Technology Studies
Authors Sandra Kuipers
Groupings Individual
Minimum Year Group None

Blurb

Functions

License

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

Outline

Learner Outcomes
Students will:
  • ...
Competency Focus
  • ...
Interdisciplinary Connections
  • ...
Reflection
What was successful? What needs changing? Alternative Assessments and Lesson Ideas? What other Differentiation Ideas/Plans could be used?
  • ...
Credits
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
Intro
  • 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?
Theory
  • 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
Input
Theory
  • 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?
5 mins
Output
Theory
  • 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
Example
  • 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.
10 mins
Computing with Functions
Example
  • 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
Evidence
  • 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.
There are no records to display.
Powered by Gibbon v28.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