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.