WEBVTT 00:00:00.877 --> 00:00:06.001 We're back to our Winston drawing program, but I've added some text to it. 00:00:06.001 --> 00:00:11.072 See, what I wanna do is position a Winston underneath each of these labels, 00:00:11.072 --> 00:00:13.210 to show him at each point in life. 00:00:13.210 --> 00:00:16.437 Right now he's all over the place. That's because we are setting the 00:00:16.437 --> 00:00:20.449 faceX and the faceY to random numbers inside the function. 00:00:20.449 --> 00:00:26.714 What we wanna say is, "Here's the exact position I want you to draw this Winston" 00:00:26.714 --> 00:00:30.316 I wanna be able to specify that position every time I call the function, 00:00:30.316 --> 00:00:32.648 the same way we do with ellipse() and rect(). 00:00:34.048 --> 00:00:40.460 I wanna put a Winston here,here, and a Winston here, and a Winston here, 00:00:40.460 --> 00:00:43.623 and I don't want just random places every time I call the function. 00:00:43.623 --> 00:00:48.882 In order to do that, we have to specify "parameters" for the function, 00:00:48.882 --> 00:00:52.811 both in our function definition -- at the top here -- 00:00:52.811 --> 00:00:57.302 and in our function call, down here, when we actually call it. 00:00:57.302 --> 00:01:02.210 For drawWinston(), we pass it faceX and faceY, 00:01:02.210 --> 00:01:09.058 and have it use those values that we pass in instead of generating them randomly. 00:01:09.058 --> 00:01:14.657 Let's by thinking about what we'd pass into these function calls down here. 00:01:14.657 --> 00:01:20.071 We position the Winstons under each text, so we'd probably want the x and y of each 00:01:20.071 --> 00:01:24.491 Winston to be similar to the numbers we passed into the text() functions. 00:01:24.491 --> 00:01:32.166 Maybe,10 pixels lower in the y. The first one would be 10 and 30, 00:01:32.166 --> 00:01:40.891 and then maybe 200, 230... 10, 230... 200, 230. 00:01:40.891 --> 00:01:44.863 It's the same as the text coordinates, I'm just adding 10 to each y, ' 00:01:44.863 --> 00:01:47.405 cause I want it just a little bit lower. 00:01:49.985 --> 00:01:55.301 Winston hasn't moved. We haven't told our function up here that 00:01:55.301 --> 00:01:59.177 we're passing it parameters, so it's still using these random values. 00:01:59.177 --> 00:02:03.603 In order to tell this function,"We're gonna give you this information instead," 00:02:03.603 --> 00:02:08.398 we have to give the parameters names inside these parentheses. 00:02:08.398 --> 00:02:14.106 We'll call it faceX and faceY, separate them by a comma, 00:02:14.106 --> 00:02:20.704 We're calling it that since we're using it to refer to them inside the function 00:02:20.704 --> 00:02:23.472 That way we don't have to rewrite the rest of our code. 00:02:23.472 --> 00:02:28.813 But still, nothing has happened; Winston is still all over the place. 00:02:28.813 --> 00:02:31.353 If you look at the very top of our function, 00:02:31.353 --> 00:02:35.263 we're overwriting faceX and faceY with random values, still. 00:02:35.263 --> 00:02:38.793 So, all we have to do is delete these lines... 00:02:38.793 --> 00:02:45.457 Now, faceX and faceY are getting passed into the function, 00:02:45.457 --> 00:02:49.581 and it's using the values that we're calling it with here. 00:02:49.581 --> 00:02:55.311 I didn't quite position Winston correctly, because I forgot that text gets positioned 00:02:55.311 --> 00:03:01.041 according to the upper left,and the face gets positioned according to the center. 00:03:01.041 --> 00:03:06.383 I need to go and tinker with my numbers a little bit here, right? 00:03:06.383 --> 00:03:12.608 I need to move the x over a lot, and move this over, okay... so that's our toddler.. 00:03:12.608 --> 00:03:18.028 We'll go through, and change what I'm passing into the function, 00:03:18.028 --> 00:03:22.518 I don't have to change the function definition at all, 00:03:22.518 --> 00:03:25.758 It's always gonna take whatever values we pass in. 00:03:25.758 --> 00:03:28.388 Just like with ellipse() and rect(). 00:03:28.388 --> 00:03:33.348 I've positioned it, but I've noticed is that Winston is too big. 00:03:33.348 --> 00:03:35.756 He's overlapping, he doesn't fit. 00:03:35.756 --> 00:03:39.019 I've put the code to draw him in a function, 00:03:39.019 --> 00:03:42.374 I can change the size of all of them at once 00:03:42.374 --> 00:03:45.439 by changing one line of code that draws the ellipse. 00:03:45.439 --> 00:03:50.626 If we make him like 190, Winston's going on a diet, by 190. 00:03:50.626 --> 00:03:55.964 Now he's gonna fit better and then ya know I could keep tweaking 00:03:55.964 --> 00:04:01.902 so I could actually get him inside there, right? Cool. 00:04:01.902 --> 00:04:08.531 Let's do a review of what this code does. It defines a function called drawWinston() 00:04:08.531 --> 00:04:14.673 and says this function takes two values, and it labels them faceX and faceY, 00:04:14.673 --> 00:04:19.949 these values come in as variables that we can use anywhere inside our function, 00:04:19.949 --> 00:04:23.055 just like we used to use the variables that we declared at the top 00:04:23.055 --> 00:04:29.113 And then we can call this function whenever we want after we declare it, 00:04:29.113 --> 00:04:33.711 we can pass in different values, so it'll use those new values each time. 00:04:33.711 --> 00:04:38.110 You've seen what's cool about functions. We can come up with code that 00:04:38.110 --> 00:04:42.509 we think would be really useful to reuse, but we can also use parameters to say 00:04:42.509 --> 00:04:46.460 "Hey, here's a little something you can change about this code, to customize it." 00:04:46.460 --> 00:04:49.405 It's like a recipe. You write down the general instructions, 00:04:49.405 --> 00:04:52.810 and if you realize you suddenly need to feed 4 Winstons instead of 1, 00:04:52.810 --> 00:04:55.941 you don't have to start all over, you just modify the original instructions 00:04:55.941 --> 00:04:57.632 and multiply everything by 4. 00:04:57.632 --> 00:05:02.205 Now you can start thinking about the recipes in your code! Yummy.