-
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.