---
marp: true
theme: default
html: true
---
# Functions of your own
Drawing and animation with p5.js ยท Building blocks
---
## Today
**We are learning to** give a piece of code a name, hand it values with parameters, and get an answer back with return.
- 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.
---
## Why it matters
> One flower took ten lines. A function turns those lines into a single word, so a whole garden is three short lines.
---
๐ฌ Discussion
## Predict
```javascript
function drawFlower(x, y) {
fill(255, 120, 160);
circle(x - 14, y, 18);
circle(x + 14, y, 18);
circle(x, y - 14, 18);
circle(x, y + 14, 18);
fill(255, 210, 0);
circle(x, y, 18);
}
function setup() {
createCanvas(300, 200);
background(120, 200, 140);
drawFlower(80, 100);
drawFlower(200, 60);
}
```
**How many flowers does this sketch draw?**
- 0
- 1
- 2
- 10
---
โ
Check
## What happened?
* 2. Defining drawFlower draws nothing by itself. setup() calls it twice, once at (80, 100) and once at (200, 60).
---
โ๏ธ Activity
## Run it
Open the lesson at this step and try it together.
[studio.learningwaypoints.com/tutorials/code/p5/p5-functions/?full=step-2#step-2](https://studio.learningwaypoints.com/tutorials/code/p5/p5-functions/?full=step-2#step-2)
---
๐ฌ Discussion
## Investigate
```javascript
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);
drawFlower(70, 100, 20);
drawFlower(180, 60, 12);
drawFlower(230, 140, 16);
}
```
---
โ
Check
## Which part is which?
**Match each piece with what it is.**
| | |
|---|---|
| `function drawFlower(x, y, size) {` | A. a call: uses the recipe with these values |
| `drawFlower(70, 100, 20);` | B. hands an answer back to the line that called |
| `size` | C. a parameter: it is 20 in the first call and 12 in the second |
| `return n * 2;` | D. the definition: the recipe, with three parameters |
* Answer: function drawFlower(x, y, size) { โ D. the definition: the recipe, with three parameters; drawFlower(70, 100, 20); โ A. a call: uses the recipe with these values; size โ C. a parameter: it is 20 in the first call and 12 in the second; return n * 2; โ B. hands an answer back to the line that called
---
โ
Check
## Values in order
**In the call drawFlower(180, 60, 12), what is y inside the function?**
- 60
- 12
- It has no value
- 180
* Answer: 60
---
โ
Check
## Spot the bug
**This stops with an error: drawflower is not defined. Click the line that causes it.**
```
1 function drawFlower(x, y) {
2 fill(255, 120, 160);
3 circle(x - 14, y, 18);
4 circle(x + 14, y, 18);
5 fill(255, 210, 0);
6 circle(x, y, 18);
7 }
8
9 function setup() {
10 createCanvas(300, 200);
11 background(120, 200, 140);
12 drawflower(80, 100);
13 }
```
* Answer: line 12
---
โ๏ธ Activity
## Modify
- **A garden:** Use a loop to draw **five flowers** with one call.
- **Say hello:** Make the flower say hello when the mouse is near it, using a function of your own that **returns** true or false.
[Open this step](https://studio.learningwaypoints.com/tutorials/code/p5/p5-functions/?full=step-4#step-4)
---
โ๏ธ Activity
## Make: your own drawing function
Write a function that draws something of your own (a tree, a house, a robot, a face) with at least a position as parameters. Then call it **three times**. The sketch on this page draws trees of different heights.
[Open this step](https://studio.learningwaypoints.com/tutorials/code/p5/p5-functions/?full=step-5#step-5)
---
## Where this leads
You can now name your own code. Next: put lists, objects, decisions and functions together in a game.
---
โ
Check
## 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.