0:00:01.383,0:00:03.649
Now let's talk about something [br]you've been using

0:00:03.649,0:00:05.685
this whole time: Functions.

0:00:05.685,0:00:09.140
Whenever you've used commands [br]like rect() or fill() or text(),

0:00:09.140,0:00:12.376
you've been calling functions, [br]and those functions have drawn

0:00:12.376,0:00:15.132
what you've told them to do.

0:00:15.132,0:00:16.806
What is a function really?

0:00:16.806,0:00:19.483
It's a collection of code[br]that we've grouped together

0:00:19.483,0:00:21.240
and given a name[br]because we want to be able

0:00:21.240,0:00:23.168
to use that bit [br]of functionality many times.

0:00:23.368,0:00:25.981
Think about rect()? [br]What does a rect() do?

0:00:25.981,0:00:28.551
It just draws four lines, right?

0:00:28.551,0:00:31.141
We could just do that [br]using our line() function, right?

0:00:31.141,0:00:33.847
And here we have [br]what looks like a rectangle.

0:00:33.847,0:00:36.751
But we realize that we [br]kind of want to be able

0:00:36.751,0:00:39.322
to draw a rectangle a lot of times,

0:00:39.322,0:00:40.773
and it would be really annoying

0:00:40.773,0:00:42.784
to do the math every time[br]to try and figure out

0:00:42.784,0:00:44.282
how to draw a line[br]from one corner to the next

0:00:44.282,0:00:45.818
and next and next.

0:00:45.818,0:00:48.538
So instead, we just made [br]a rect() function,

0:00:48.538,0:00:50.858
and that function does exactly [br]the same thing

0:00:50.858,0:00:55.148
that those four lines of code did,[br]but in much less code.

0:00:55.148,0:00:58.399
So that's pretty cool, [br]and rect() is one of those functions

0:00:58.399,0:01:00.519
that we've made available[br]for ALL programs

0:01:00.519,0:01:02.729
to use here on Khan Academy.

0:01:02.729,0:01:05.339
But - you can also make up [br]your own functions

0:01:05.339,0:01:08.409
to use in each of your programs.

0:01:08.409,0:01:11.430
For example - let's say [br]we are making a program

0:01:11.430,0:01:14.434
and we want to draw Winston[br]multiple times -

0:01:14.434,0:01:17.017
maybe cause we're going to tell[br]the life story of Winston

0:01:17.017,0:01:20.190
and show him at every age[br]in his life.

0:01:20.190,0:01:24.243
So, here's what our Winston [br]drawing code might start off as:

0:01:24.243,0:01:27.106
We have 'faceX' [br]and 'faceY' variables [br]

0:01:27.106,0:01:29.029
to store the center of the face,

0:01:29.029,0:01:31.243
and then we draw the eyes[br]and the mouth

0:01:31.243,0:01:33.039
relative to those variables.

0:01:33.039,0:01:34.732
Right now the program [br]sees the code,

0:01:34.732,0:01:37.325
and it's not inside any function,[br]so it just runs it,

0:01:37.325,0:01:39.739
and it only runs it once.

0:01:39.739,0:01:43.717
OK, let's turn this into a function.

0:01:43.717,0:01:46.439
To do that, we do it [br]very similarly to the way

0:01:46.439,0:01:48.487
we declare a variable,[br]because that's actually

0:01:48.487,0:01:50.245
what we are doing.

0:01:50.245,0:01:52.077
So we say 'var drawWinston'.

0:01:52.077,0:01:54.551
We give it a nice name,[br]very descriptive,

0:01:54.551,0:01:59.037
and then '=', but here,[br]instead of writing a number or a string,

0:01:59.037,0:02:02.721
we're going to write 'function'[br](make sure you spell it right)

0:02:02.721,0:02:08.357
and then empty parentheses '()' [br]and then an open curly '{' [br]

0:02:08.357,0:02:11.563
and then a close curly '}' [br]and our semicolon ';'

0:02:11.563,0:02:14.490
OK so what we need to do[br]is put everything

0:02:14.490,0:02:19.454
that we want inside our function[br]in between the start and end curly.

0:02:19.454,0:02:22.130
So we're going to take [br]all this code here,

0:02:22.130,0:02:26.816
put it in our function[br](indent it nicely), and Ta Da!

0:02:26.816,0:02:28.970
So now what we have [br]is we have this variable

0:02:28.970,0:02:32.379
that is storing a function -[br]so basically we've given

0:02:32.379,0:02:35.759
a label to this block of code,[br]so that we'd be able to tell

0:02:35.759,0:02:37.859
our program at any time,[br]

0:02:37.859,0:02:40.765
"Hey, find that block of code[br]with that label and run it!"

0:02:40.765,0:02:43.551
We we're making[br]this bit of code reusable.

0:02:43.551,0:02:46.535
But now notice, that we have [br]no Winston anymore!

0:02:46.535,0:02:49.357
We've lost Winston![br]Where did he go?

0:02:49.357,0:02:53.025
OK - so what happened is [br]that once we put this inside a function,

0:02:53.025,0:02:55.907
we told our program [br]"hey here's a bunch of code

0:02:55.907,0:02:57.842
that I want to be able [br]to run later,

0:02:57.842,0:03:00.807
but only when I TELL you to run it."

0:03:00.807,0:03:04.288
So we have to tell it to run the code, [br]which means we need

0:03:04.288,0:03:09.110
to 'call' the function - just like we do[br]with ellipse() and rect() and line().

0:03:09.400,0:03:13.753
So we just write[br]the function name <i>drawWinston</i>

0:03:13.753,0:03:16.376
followed by our start [br]and end parentheses '()'

0:03:16.376,0:03:18.959
and, of course, our semicolon, [br]and Ta Da! --

0:03:18.959,0:03:20.942
We have a Winston!

0:03:20.942,0:03:24.237
OK! So I think it's cool, [br]but you might not think it's cool

0:03:24.237,0:03:27.373
because all we've done is made [br]our program do exactly

0:03:27.373,0:03:30.239
what it did before. [br]Kinda silly huh?

0:03:30.239,0:03:32.920
The whole point of functions [br]is we can reuse them.

0:03:32.920,0:03:34.957
So let's do that now.

0:03:34.957,0:03:41.162
We can just copy and paste this function [br]call... Ta da! Ta da! Over and over.

0:03:41.162,0:03:46.572
Hmmm, but it looks the same,[br]well, it worked -

0:03:46.572,0:03:48.998
it's drawing multiple Winstons, [br]but the problem

0:03:48.998,0:03:51.474
is they're all in the same place.

0:03:51.474,0:03:54.428
If we had x-ray vision,[br]we could x-ray the canvas

0:03:54.428,0:03:57.631
and see three Winstons, [br]but I don't have x-ray vision.

0:03:57.631,0:04:00.334
I don't know about you.

0:04:00.334,0:04:03.440
But, we can make a small change [br]to our function

0:04:03.440,0:04:05.486
that WILL make it obvious.

0:04:05.486,0:04:08.825
So you see faceX and faceY - [br]they're always 202 and 208?

0:04:08.825,0:04:11.587
We can change this [br]to using the random() function -

0:04:11.587,0:04:14.849
- let's say like random() from 50 to 350 [br]and it'll generate

0:04:14.849,0:04:19.183
a random number between those two - [br]and we can do the same thing for here -

0:04:19.183,0:04:23.023
and so every time this function is called,[br]it generates this new random number,

0:04:23.023,0:04:26.566
and if we push restart, [br]we can keep getting random Winstons.

0:04:26.566,0:04:29.359
So cool! [br]Whoo!!

0:04:29.359,0:04:32.095
Alright - so I think this is cool [br]because it would have been

0:04:32.095,0:04:34.916
a lot of code to write this [br]if we didn't have it in a function.

0:04:34.916,0:04:38.317
It would have been[br]three times the amount of code.

0:04:38.317,0:04:40.960
But it's still not AS useful [br]as it could be,

0:04:40.960,0:04:43.796
because we probably [br]don't want random Winstons.

0:04:43.796,0:04:45.736
We probably want to be able [br]to position a Winston

0:04:45.736,0:04:47.846
at specific points on the screen.

0:04:47.846,0:04:49.943
So stay tuned, 'cause we'll talk [br]about how pass parameters

0:04:49.943,0:04:52.483
to our functions next,[br]and then you'll be able

0:04:52.000,0:04:56.000
to do exactly that.