Functions

Now let's talk about something
you've been using

this whole time: Functions.

Whenever you've used commands
like rect() or fill() or text(),

you've been calling functions,
and those functions have drawn

what you've told them to do.

What is a function really?

It's a collection of code
that we've grouped together

and given a name
because we want to be able

to use that bit
of functionality many times.

Think about rect()?
What does a rect() do?

It just draws four lines, right?

We could just do that
using our line() function, right?

And here we have
what looks like a rectangle.

But we realize that we
kind of want to be able

to draw a rectangle a lot of times,

and it would be really annoying

to do the math every time
to try and figure out

how to draw a line
from one corner to the next

and next and next.

So instead, we just made
a rect() function,

and that function does exactly
the same thing

that those four lines of code did,
but in much less code.

So that's pretty cool,
and rect() is one of those functions

that we've made available
for ALL programs

to use here on Khan Academy.

But - you can also make up
your own functions

to use in each of your programs.

For example - let's say
we are making a program

and we want to draw Winston
multiple times -

maybe cause we're going to tell
the life story of Winston

and show him at every age
in his life.

So, here's what our Winston
drawing code might start off as:

We have 'faceX'
and 'faceY' variables

to store the center of the face,

and then we draw the eyes
and the mouth

relative to those variables.

Right now the program
sees the code,

and it's not inside any function,
so it just runs it,

and it only runs it once.

OK, let's turn this into a function.

To do that, we do it
very similarly to the way

we declare a variable,
because that's actually

what we are doing.

So we say 'var drawWinston'.

We give it a nice name,
very descriptive,

and then '=', but here,
instead of writing a number or a string,

we're going to write 'function'
(make sure you spell it right)

and then empty parentheses '()'
and then an open curly '{'

and then a close curly '}'
and our semicolon ';'

OK so what we need to do
is put everything

that we want inside our function
in between the start and end curly.

So we're going to take
all this code here,

put it in our function
(indent it nicely), and Ta Da!

So now what we have
is we have this variable

that is storing a function -
so basically we've given

a label to this block of code,
so that we'd be able to tell

our program at any time,

"Hey, find that block of code
with that label and run it!"

We we're making
this bit of code reusable.

But now notice, that we have
no Winston anymore!

We've lost Winston!
Where did he go?

OK - so what happened is
that once we put this inside a function,

we told our program
"hey here's a bunch of code

that I want to be able
to run later,

but only when I TELL you to run it."

So we have to tell it to run the code,
which means we need

to 'call' the function - just like we do
with ellipse() and rect() and line().

So we just write
the function name drawWinston

followed by our start
and end parentheses '()'

and, of course, our semicolon,
and Ta Da! --

We have a Winston!

OK! So I think it's cool,
but you might not think it's cool

because all we've done is made
our program do exactly

what it did before.
Kinda silly huh?

The whole point of functions
is we can reuse them.

So let's do that now.

We can just copy and paste this function
call... Ta da! Ta da! Over and over.

Hmmm, but it looks the same,
well, it worked -

it's drawing multiple Winstons,
but the problem

is they're all in the same place.

If we had x-ray vision,
we could x-ray the canvas

and see three Winstons,
but I don't have x-ray vision.

I don't know about you.

But, we can make a small change
to our function

that WILL make it obvious.

So you see faceX and faceY -
they're always 202 and 208?

We can change this
to using the random() function -

- let's say like random() from 50 to 350
and it'll generate

a random number between those two -
and we can do the same thing for here -

and so every time this function is called,
it generates this new random number,

and if we push restart,
we can keep getting random Winstons.

So cool!
Whoo!!

Alright - so I think this is cool
because it would have been

a lot of code to write this
if we didn't have it in a function.

It would have been
three times the amount of code.

But it's still not AS useful
as it could be,

because we probably
don't want random Winstons.

We probably want to be able
to position a Winston

at specific points on the screen.

So stay tuned, 'cause we'll talk
about how pass parameters

to our functions next,
and then you'll be able

to do exactly that.