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.