Function Parameters (Video Version)

This is just a screen grab of our interactive coding talk-through, prepared to make captioning and translation easier. It is better to watch our talk-throughs here:
https://www.khanacademy.org/cs/programming/

We're back to our Winston drawing program,
but I've added some text to it.

See, what I wanna do is position a Winston
underneath each of these labels,

to show him at each point in life.

Right now he's all over the place.
That's because we are setting the

faceX and the faceY to
random numbers inside the function.

What we wanna say is, "Here's the exact
position I want you to draw this Winston"

I wanna be able to specify that position
every time I call the function,

the same way we do with ellipse() and rect().

I wanna put a Winston here,here,
and a Winston here, and a Winston here,

and I don't want just random places
every time I call the function.

In order to do that, we have to specify
"parameters" for the function,

both in our function definition
-- at the top here --

and in our function call, down here,
when we actually call it.

For drawWinston(),
we pass it faceX and faceY,

and have it use those values that we pass
in instead of generating them randomly.

Let's by thinking about what we'd
pass into these function calls down here.

We position the Winstons under each text,
so we'd probably want the x and y of each

Winston to be similar to the numbers
we passed into the text() functions.

Maybe,10 pixels lower in the y.
The first one would be 10 and 30,

and then maybe 200, 230...
10, 230... 200, 230.

It's the same as the text coordinates,
I'm just adding 10 to each y, '

cause I want it just a little bit lower.

Winston hasn't moved.
We haven't told our function up here that

we're passing it parameters,
so it's still using these random values.

In order to tell this function,"We're
gonna give you this information instead,"

we have to give the parameters
names inside these parentheses.

We'll call it faceX and faceY,
separate them by a comma,

We're calling it that since we're using
it to refer to them inside the function

That way we don't have to
rewrite the rest of our code.

But still, nothing has happened;
Winston is still all over the place.

If you look at the very top
of our function,

we're overwriting faceX and faceY
with random values, still.

So, all we have to do
is delete these lines...

Now, faceX and faceY are getting
passed into the function,

and it's using the values
that we're calling it with here.

I didn't quite position Winston correctly,
because I forgot that text gets positioned

according to the upper left,and the face
gets positioned according to the center.

I need to go and tinker with my
numbers a little bit here, right?

I need to move the x over a lot, and move
this over, okay... so that's our toddler..

We'll go through, and change
what I'm passing into the function,

I don't have to change
the function definition at all,

It's always gonna take
whatever values we pass in.

Just like with ellipse() and rect().

I've positioned it, but
I've noticed is that Winston is too big.

He's overlapping, he doesn't fit.

I've put the code to
draw him in a function,

I can change the size
of all of them at once

by changing one line
of code that draws the ellipse.

If we make him like 190,
Winston's going on a diet, by 190.

Now he's gonna fit better and
then ya know I could keep tweaking

so I could actually get him
inside there, right? Cool.

Let's do a review of what this code does.
It defines a function called drawWinston()

and says this function takes two values,
and it labels them faceX and faceY,

these values come in as variables that
we can use anywhere inside our function,

just like we used to use the variables
that we declared at the top

And then we can call this function
whenever we want after we declare it,

we can pass in different values,
so it'll use those new values each time.

You've seen what's cool about functions.
We can come up with code that

we think would be really useful to reuse,
but we can also use parameters to say

"Hey, here's a little something you can
change about this code, to customize it."

It's like a recipe.
You write down the general instructions,

and if you realize you suddenly
need to feed 4 Winstons instead of 1,

you don't have to start all over,
you just modify the original instructions

and multiply everything by 4.

Now you can start thinking about the
recipes in your code! Yummy.