1
00:00:00,877 --> 00:00:06,001
We're back to our Winston drawing program,
but I've added some text to it.

2
00:00:06,001 --> 00:00:11,072
See, what I wanna do is position a Winston
underneath each of these labels,

3
00:00:11,072 --> 00:00:13,210
to show him at each point in life.

4
00:00:13,210 --> 00:00:16,437
Right now he's all over the place.
That's because we are setting the

5
00:00:16,437 --> 00:00:20,449
faceX and the faceY to 
random numbers inside the function.

6
00:00:20,449 --> 00:00:26,714
What we wanna say is, "Here's the exact 
position I want you to draw this Winston"

7
00:00:26,714 --> 00:00:30,316
I wanna be able to specify that position 
every time I call the function, 


8
00:00:30,316 --> 00:00:32,648
the same way we do with ellipse() and rect().

9
00:00:34,048 --> 00:00:40,460
I wanna put a Winston here,here, 
and a Winston here, and a Winston here,

10
00:00:40,460 --> 00:00:43,623
and I don't want just random places
every time I call the function.

11
00:00:43,623 --> 00:00:48,882
In order to do that, we have to specify 
"parameters" for the function,

12
00:00:48,882 --> 00:00:52,811
both in our function definition
-- at the top here --

13
00:00:52,811 --> 00:00:57,302
and in our function call, down here,
when we actually call it.

14
00:00:57,302 --> 00:01:02,210
For drawWinston(), 
we pass it faceX and faceY,

15
00:01:02,210 --> 00:01:09,058
and have it use those values that we pass
in instead of generating them randomly.

16
00:01:09,058 --> 00:01:14,657
Let's by thinking about what we'd 
pass into these function calls down here.

17
00:01:14,657 --> 00:01:20,071
We position the Winstons under each text, 
so we'd probably want the x and y of each

18
00:01:20,071 --> 00:01:24,491
Winston to be similar to the numbers 
we passed into the text() functions.

19
00:01:24,491 --> 00:01:32,166
Maybe,10 pixels lower in the y. 
The first one would be 10 and 30,

20
00:01:32,166 --> 00:01:40,891
and then maybe 200, 230...
10, 230... 200, 230.

21
00:01:40,891 --> 00:01:44,863
It's the same as the text coordinates,
I'm just adding 10 to each y, '

22
00:01:44,863 --> 00:01:47,405
cause I want it just a little bit lower.

23
00:01:49,985 --> 00:01:55,301
Winston hasn't moved. 
We haven't told our function up here that

24
00:01:55,301 --> 00:01:59,177
we're passing it parameters,
so it's still using these random values.

25
00:01:59,177 --> 00:02:03,603
In order to tell this function,"We're 
gonna give you this information instead,"

26
00:02:03,603 --> 00:02:08,398
we have to give the parameters
names inside these parentheses.

27
00:02:08,398 --> 00:02:14,106
We'll call it faceX and faceY,
separate them by a comma,

28
00:02:14,106 --> 00:02:20,704
We're calling it that since we're using 
it to refer to them inside the function

29
00:02:20,704 --> 00:02:23,472
That way we don't have to 
rewrite the rest of our code.

30
00:02:23,472 --> 00:02:28,813
But still, nothing has happened; 
Winston is still all over the place.

31
00:02:28,813 --> 00:02:31,353
If you look at the very top 
of our function,

32
00:02:31,353 --> 00:02:35,263
we're overwriting faceX and faceY 
with random values, still.

33
00:02:35,263 --> 00:02:38,793
So, all we have to do
is delete these lines...

34
00:02:38,793 --> 00:02:45,457
Now, faceX and faceY are getting
passed into the function,

35
00:02:45,457 --> 00:02:49,581
and it's using the values 
that we're calling it with here.

36
00:02:49,581 --> 00:02:55,311
I didn't quite position Winston correctly,
because I forgot that text gets positioned

37
00:02:55,311 --> 00:03:01,041
according to the upper left,and the face 
gets positioned according to the center.

38
00:03:01,041 --> 00:03:06,383
I need to go and tinker with my 
numbers a little bit here, right?

39
00:03:06,383 --> 00:03:12,608
I need to move the x over a lot, and move 
this over, okay... so that's our toddler..

40
00:03:12,608 --> 00:03:18,028
We'll go through, and change 
what I'm passing into the function,


41
00:03:18,028 --> 00:03:22,518
I don't have to change 
the function definition at all,

42
00:03:22,518 --> 00:03:25,758
It's always gonna take 
whatever values we pass in.

43
00:03:25,758 --> 00:03:28,388
Just like with ellipse() and rect().

44
00:03:28,388 --> 00:03:33,348
I've positioned it, but
I've noticed is that Winston is too big.

45
00:03:33,348 --> 00:03:35,756
He's overlapping, he doesn't fit.

46
00:03:35,756 --> 00:03:39,019
I've put the code to 
draw him in a function,

47
00:03:39,019 --> 00:03:42,374
I can change the size 
of all of them at once

48
00:03:42,374 --> 00:03:45,439
by changing one line 
of code that draws the ellipse.

49
00:03:45,439 --> 00:03:50,626
If we make him like 190, 
Winston's going on a diet, by 190.

50
00:03:50,626 --> 00:03:55,964
Now he's gonna fit better and 
then ya know I could keep tweaking

51
00:03:55,964 --> 00:04:01,902
so I could actually get him
inside there, right? Cool.

52
00:04:01,902 --> 00:04:08,531
Let's do a review of what this code does.
It defines a function called drawWinston()

53
00:04:08,531 --> 00:04:14,673
and says this function takes two values, 
and it labels them faceX and faceY,

54
00:04:14,673 --> 00:04:19,949
these values come in as variables that
we can use anywhere inside our function,

55
00:04:19,949 --> 00:04:23,055
just like we used to use the variables 
that we declared at the top

56
00:04:23,055 --> 00:04:29,113
And then we can call this function 
whenever we want after we declare it,

57
00:04:29,113 --> 00:04:33,711
we can pass in different values, 
so it'll use those new values each time.

58
00:04:33,711 --> 00:04:38,110
You've seen what's cool about functions. 
We can come up with code that

59
00:04:38,110 --> 00:04:42,509
we think would be really useful to reuse,
but we can also use parameters to say

60
00:04:42,509 --> 00:04:46,460
"Hey, here's a little something you can 
change about this code, to customize it."

61
00:04:46,460 --> 00:04:49,405
It's like a recipe. 
You write down the general instructions,

62
00:04:49,405 --> 00:04:52,810
and if you realize you suddenly 
need to feed 4 Winstons instead of 1,

63
00:04:52,810 --> 00:04:55,941
you don't have to start all over, 
you just modify the original instructions

64
00:04:55,941 --> 00:04:57,632
and multiply everything by 4.

65
00:04:57,632 --> 00:05:02,205
Now you can start thinking about the
recipes in your code! Yummy.