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.