Functions of your own

Students turn ten lines that draw a flower into a function with parameters, call it with different values, find a call whose capitals do not match, draw a garden with a loop, write a function that returns true or false, and make a drawing function of their own.

Drawing and animation with p5.js · Building blocks · about 55 minutes · Open the student lesson

Classroom resources

Load these into Waypoints Prepare: choose Load URL and paste the copied address, or download the file and import it. In Prepare, the worksheet's Teacher edition shows the answers; the student copy hides them.

Slides Download Present from the browser, or export to PowerPoint or PDF.
Worksheet Download Print the student copy; the Teacher edition has the answers.

Students will be able to

I can write a function and call it more than once.
I can use parameters to make each call different.
I can write a function that returns an answer and use it in an if.

Timing

Predict and Run 10 min · Investigate 15 min · Modify 15 min · Make 15 min

Before class

Read the unit primer first. This is the Python functions, parameters and returns units in one lesson, in JavaScript, so go gently on the third idea: the Modify task on isNear is the first time students write return. Predict is the key idea (a definition draws nothing). Names must match exactly; the playground hint for "is not defined" mentions capitals. Parameters take values in order, so a call with the arguments swapped moves the flower, not the size.

Running the lesson

Predict: ask 'does writing the recipe cook the meal?'
Run: ask students to say each call aloud as 'a flower at x, y, this big'.
Investigate: for the bug, read the call and the definition aloud next to each other.
Modify: for isNear, ask what the function answers when the mouse is far away.
Make: choose the drawing and list its parameters first.

The hard part (on purpose)

Names must match exactly, and parameters fill in order. Read the call and the definition aloud side by side.

When students get stuck

What you will see	A question to ask	The fix
A red line: drawflower is not defined.	Does the call spell the name exactly like the definition?	Match the capitals.
The flower is in the wrong place or the wrong size.	Are the values in the same order as the parameters?	Put the arguments in the order x, y, size.
isNear seems to do nothing.	Does the function use return, and is it used inside an if?	Add return before the comparison, and call it in the if brackets.
Nothing is drawn.	Is the function called anywhere?	Add a call in setup() or draw().

Answers to the checks

Predict: How many flowers does this sketch draw?
2. Defining drawFlower draws nothing by itself. setup() calls it twice, once at (80, 100) and once at (200, 60).
Which part is which?: Match each piece with what it is.
function drawFlower(x, y, size) { → B. the definition: the recipe, with three parameters; drawFlower(70, 100, 20); → D. a call: uses the recipe with these values; size → A. a parameter: it is 20 in the first call and 12 in the second; return n * 2; → C. hands an answer back to the line that called
Values in order: In the call drawFlower(180, 60, 12), what is y inside the function?
60
The values go to the parameters in order: x is 180, y is 60 and size is 12.
Spot the bug: This stops with an error: drawflower is not defined. Click the line that causes it.
line 12
The function is called drawFlower with a capital F. JavaScript treats drawflower as a different, unknown name.
Where this leads: You want the game to restart a ball in one place, whichever ball it is. What do you write?
A function that takes the ball as a parameter
A function with a parameter works on whatever you hand it: restart(ball) for any ball in the list.

Solutions

One possible solution for each task. Other correct programs are fine.

Modify › A garden

function drawFlower(x, y, size) {
  fill(255, 120, 160);
  circle(x - size, y, size);
  circle(x + size, y, size);
  circle(x, y - size, size);
  circle(x, y + size, size);
  fill(255, 210, 0);
  circle(x, y, size);
}

function setup() {
  createCanvas(300, 200);
  background(120, 200, 140);
  for (let i = 0; i < 5; i++) {
    drawFlower(40 + i * 55, 60 + (i % 2) * 70, 14);
  }
}

Modify › Say hello

function drawFlower(x, y, size) {
  fill(255, 120, 160);
  circle(x - size, y, size);
  circle(x + size, y, size);
  circle(x, y - size, size);
  circle(x, y + size, size);
  fill(255, 210, 0);
  circle(x, y, size);
}

function isNear(x1, y1, x2, y2) {
  return dist(x1, y1, x2, y2) < 30;
}

function setup() {
  createCanvas(300, 200);
}

function draw() {
  background(120, 200, 140);
  drawFlower(150, 100, 16);
  if (isNear(mouseX, mouseY, 150, 100)) {
    fill(255);
    text("Hello!", 120, 30);
  }
}

your own drawing function

function drawTree(x, y, height) {
  fill(120, 80, 50);
  rect(x - 5, y - height, 10, height);
  fill(40, 130, 60);
  circle(x, y - height, height);
}

function setup() {
  createCanvas(300, 200);
  background(150, 210, 255);
  fill(90, 170, 90);
  rect(0, 150, 300, 50);
  drawTree(60, 160, 60);
  drawTree(150, 150, 40);
  drawTree(240, 170, 80);
}

Stretch and support

Stretch: Give the flower a colour parameter, or make drawFlower return the width it used.

Support: Give the definition of the drawing function and ask only for the three calls.

Exit ticket

What is the difference between defining a function and calling it?

Defining writes the recipe and draws nothing; calling uses it with values and does the work.

What each step is for

Investigate: A definition is a recipe and a call is cooking it; parameters carry the values from the call into the function.
Modify: A loop can call a function many times; a function that returns a value can sit inside an if.
your own drawing function: Goals only: a drawing of your own as a function with parameters, used at least three times.

Where it leads

Next lesson: the final challenge puts lists, objects, decisions and functions together in a click-to-catch game.