0:00:00.877,0:00:06.001
We're back to our Winston drawing program,[br]but I've added some text to it.

0:00:06.001,0:00:11.072
See, what I wanna do is position a Winston[br]underneath each of these labels,

0:00:11.072,0:00:13.210
to show him at each point in life.

0:00:13.210,0:00:16.437
Right now he's all over the place.[br]That's because we are setting the

0:00:16.437,0:00:20.449
faceX and the faceY to [br]random numbers inside the function.

0:00:20.449,0:00:26.714
What we wanna say is, "Here's the exact [br]position I want you to draw this Winston"

0:00:26.714,0:00:30.316
I wanna be able to specify that position [br]every time I call the function, [br]

0:00:30.316,0:00:32.648
the same way we do with ellipse() and rect().

0:00:34.048,0:00:40.460
I wanna put a Winston here,here, [br]and a Winston here, and a Winston here,

0:00:40.460,0:00:43.623
and I don't want just random places[br]every time I call the function.

0:00:43.623,0:00:48.882
In order to do that, we have to specify [br]"parameters" for the function,

0:00:48.882,0:00:52.811
both in our function definition[br]-- at the top here --

0:00:52.811,0:00:57.302
and in our function call, down here,[br]when we actually call it.

0:00:57.302,0:01:02.210
For drawWinston(), [br]we pass it faceX and faceY,

0:01:02.210,0:01:09.058
and have it use those values that we pass[br]in instead of generating them randomly.

0:01:09.058,0:01:14.657
Let's by thinking about what we'd [br]pass into these function calls down here.

0:01:14.657,0:01:20.071
We position the Winstons under each text, [br]so we'd probably want the x and y of each

0:01:20.071,0:01:24.491
Winston to be similar to the numbers [br]we passed into the text() functions.

0:01:24.491,0:01:32.166
Maybe,10 pixels lower in the y. [br]The first one would be 10 and 30,

0:01:32.166,0:01:40.891
and then maybe 200, 230...[br]10, 230... 200, 230.

0:01:40.891,0:01:44.863
It's the same as the text coordinates,[br]I'm just adding 10 to each y, '

0:01:44.863,0:01:47.405
cause I want it just a little bit lower.

0:01:49.985,0:01:55.301
Winston hasn't moved. [br]We haven't told our function up here that

0:01:55.301,0:01:59.177
we're passing it parameters,[br]so it's still using these random values.

0:01:59.177,0:02:03.603
In order to tell this function,"We're [br]gonna give you this information instead,"

0:02:03.603,0:02:08.398
we have to give the parameters[br]names inside these parentheses.

0:02:08.398,0:02:14.106
We'll call it faceX and faceY,[br]separate them by a comma,

0:02:14.106,0:02:20.704
We're calling it that since we're using [br]it to refer to them inside the function

0:02:20.704,0:02:23.472
That way we don't have to [br]rewrite the rest of our code.

0:02:23.472,0:02:28.813
But still, nothing has happened; [br]Winston is still all over the place.

0:02:28.813,0:02:31.353
If you look at the very top [br]of our function,

0:02:31.353,0:02:35.263
we're overwriting faceX and faceY [br]with random values, still.

0:02:35.263,0:02:38.793
So, all we have to do[br]is delete these lines...

0:02:38.793,0:02:45.457
Now, faceX and faceY are getting[br]passed into the function,

0:02:45.457,0:02:49.581
and it's using the values [br]that we're calling it with here.

0:02:49.581,0:02:55.311
I didn't quite position Winston correctly,[br]because I forgot that text gets positioned

0:02:55.311,0:03:01.041
according to the upper left,and the face [br]gets positioned according to the center.

0:03:01.041,0:03:06.383
I need to go and tinker with my [br]numbers a little bit here, right?

0:03:06.383,0:03:12.608
I need to move the x over a lot, and move [br]this over, okay... so that's our toddler..

0:03:12.608,0:03:18.028
We'll go through, and change [br]what I'm passing into the function,[br]

0:03:18.028,0:03:22.518
I don't have to change [br]the function definition at all,

0:03:22.518,0:03:25.758
It's always gonna take [br]whatever values we pass in.

0:03:25.758,0:03:28.388
Just like with ellipse() and rect().

0:03:28.388,0:03:33.348
I've positioned it, but[br]I've noticed is that Winston is too big.

0:03:33.348,0:03:35.756
He's overlapping, he doesn't fit.

0:03:35.756,0:03:39.019
I've put the code to [br]draw him in a function,

0:03:39.019,0:03:42.374
I can change the size [br]of all of them at once

0:03:42.374,0:03:45.439
by changing one line [br]of code that draws the ellipse.

0:03:45.439,0:03:50.626
If we make him like 190, [br]Winston's going on a diet, by 190.

0:03:50.626,0:03:55.964
Now he's gonna fit better and [br]then ya know I could keep tweaking

0:03:55.964,0:04:01.902
so I could actually get him[br]inside there, right? Cool.

0:04:01.902,0:04:08.531
Let's do a review of what this code does.[br]It defines a function called drawWinston()

0:04:08.531,0:04:14.673
and says this function takes two values, [br]and it labels them faceX and faceY,

0:04:14.673,0:04:19.949
these values come in as variables that[br]we can use anywhere inside our function,

0:04:19.949,0:04:23.055
just like we used to use the variables [br]that we declared at the top

0:04:23.055,0:04:29.113
And then we can call this function [br]whenever we want after we declare it,

0:04:29.113,0:04:33.711
we can pass in different values, [br]so it'll use those new values each time.

0:04:33.711,0:04:38.110
You've seen what's cool about functions. [br]We can come up with code that

0:04:38.110,0:04:42.509
we think would be really useful to reuse,[br]but we can also use parameters to say

0:04:42.509,0:04:46.460
"Hey, here's a little something you can [br]change about this code, to customize it."

0:04:46.460,0:04:49.405
It's like a recipe. [br]You write down the general instructions,

0:04:49.405,0:04:52.810
and if you realize you suddenly [br]need to feed 4 Winstons instead of 1,

0:04:52.810,0:04:55.941
you don't have to start all over, [br]you just modify the original instructions

0:04:55.941,0:04:57.632
and multiply everything by 4.

0:04:57.632,0:05:02.205
Now you can start thinking about the[br]recipes in your code! Yummy.