WEBVTT 00:00:01.383 --> 00:00:03.649 Now let's talk about something you've been using 00:00:03.649 --> 00:00:05.685 this whole time: Functions. 00:00:05.685 --> 00:00:09.140 Whenever you've used commands like rect() or fill() or text(), 00:00:09.140 --> 00:00:12.376 you've been calling functions, and those functions have drawn 00:00:12.376 --> 00:00:15.132 what you've told them to do. 00:00:15.132 --> 00:00:16.806 What is a function really? 00:00:16.806 --> 00:00:19.483 It's a collection of code that we've grouped together 00:00:19.483 --> 00:00:21.240 and given a name because we want to be able 00:00:21.240 --> 00:00:23.168 to use that bit of functionality many times. 00:00:23.368 --> 00:00:25.981 Think about rect()? What does a rect() do? 00:00:25.981 --> 00:00:28.551 It just draws four lines, right? 00:00:28.551 --> 00:00:31.141 We could just do that using our line() function, right? 00:00:31.141 --> 00:00:33.847 And here we have what looks like a rectangle. 00:00:33.847 --> 00:00:36.751 But we realize that we kind of want to be able 00:00:36.751 --> 00:00:39.322 to draw a rectangle a lot of times, 00:00:39.322 --> 00:00:40.773 and it would be really annoying 00:00:40.773 --> 00:00:42.784 to do the math every time to try and figure out 00:00:42.784 --> 00:00:44.282 how to draw a line from one corner to the next 00:00:44.282 --> 00:00:45.818 and next and next. 00:00:45.818 --> 00:00:48.538 So instead, we just made a rect() function, 00:00:48.538 --> 00:00:50.858 and that function does exactly the same thing 00:00:50.858 --> 00:00:55.148 that those four lines of code did, but in much less code. 00:00:55.148 --> 00:00:58.399 So that's pretty cool, and rect() is one of those functions 00:00:58.399 --> 00:01:00.519 that we've made available for ALL programs 00:01:00.519 --> 00:01:02.729 to use here on Khan Academy. 00:01:02.729 --> 00:01:05.339 But - you can also make up your own functions 00:01:05.339 --> 00:01:08.409 to use in each of your programs. 00:01:08.409 --> 00:01:11.430 For example - let's say we are making a program 00:01:11.430 --> 00:01:14.434 and we want to draw Winston multiple times - 00:01:14.434 --> 00:01:17.017 maybe cause we're going to tell the life story of Winston 00:01:17.017 --> 00:01:20.190 and show him at every age in his life. 00:01:20.190 --> 00:01:24.243 So, here's what our Winston drawing code might start off as: 00:01:24.243 --> 00:01:27.106 We have 'faceX' and 'faceY' variables 00:01:27.106 --> 00:01:29.029 to store the center of the face, 00:01:29.029 --> 00:01:31.243 and then we draw the eyes and the mouth 00:01:31.243 --> 00:01:33.039 relative to those variables. 00:01:33.039 --> 00:01:34.732 Right now the program sees the code, 00:01:34.732 --> 00:01:37.325 and it's not inside any function, so it just runs it, 00:01:37.325 --> 00:01:39.739 and it only runs it once. 00:01:39.739 --> 00:01:43.717 OK, let's turn this into a function. 00:01:43.717 --> 00:01:46.439 To do that, we do it very similarly to the way 00:01:46.439 --> 00:01:48.487 we declare a variable, because that's actually 00:01:48.487 --> 00:01:50.245 what we are doing. 00:01:50.245 --> 00:01:52.077 So we say 'var drawWinston'. 00:01:52.077 --> 00:01:54.551 We give it a nice name, very descriptive, 00:01:54.551 --> 00:01:59.037 and then '=', but here, instead of writing a number or a string, 00:01:59.037 --> 00:02:02.721 we're going to write 'function' (make sure you spell it right) 00:02:02.721 --> 00:02:08.357 and then empty parentheses '()' and then an open curly '{' 00:02:08.357 --> 00:02:11.563 and then a close curly '}' and our semicolon ';' 00:02:11.563 --> 00:02:14.490 OK so what we need to do is put everything 00:02:14.490 --> 00:02:19.454 that we want inside our function in between the start and end curly. 00:02:19.454 --> 00:02:22.130 So we're going to take all this code here, 00:02:22.130 --> 00:02:26.816 put it in our function (indent it nicely), and Ta Da! 00:02:26.816 --> 00:02:28.970 So now what we have is we have this variable 00:02:28.970 --> 00:02:32.379 that is storing a function - so basically we've given 00:02:32.379 --> 00:02:35.759 a label to this block of code, so that we'd be able to tell 00:02:35.759 --> 00:02:37.859 our program at any time, 00:02:37.859 --> 00:02:40.765 "Hey, find that block of code with that label and run it!" 00:02:40.765 --> 00:02:43.551 We we're making this bit of code reusable. 00:02:43.551 --> 00:02:46.535 But now notice, that we have no Winston anymore! 00:02:46.535 --> 00:02:49.357 We've lost Winston! Where did he go? 00:02:49.357 --> 00:02:53.025 OK - so what happened is that once we put this inside a function, 00:02:53.025 --> 00:02:55.907 we told our program "hey here's a bunch of code 00:02:55.907 --> 00:02:57.842 that I want to be able to run later, 00:02:57.842 --> 00:03:00.807 but only when I TELL you to run it." 00:03:00.807 --> 00:03:04.288 So we have to tell it to run the code, which means we need 00:03:04.288 --> 00:03:09.110 to 'call' the function - just like we do with ellipse() and rect() and line(). 00:03:09.400 --> 00:03:13.753 So we just write the function name drawWinston 00:03:13.753 --> 00:03:16.376 followed by our start and end parentheses '()' 00:03:16.376 --> 00:03:18.959 and, of course, our semicolon, and Ta Da! -- 00:03:18.959 --> 00:03:20.942 We have a Winston! 00:03:20.942 --> 00:03:24.237 OK! So I think it's cool, but you might not think it's cool 00:03:24.237 --> 00:03:27.373 because all we've done is made our program do exactly 00:03:27.373 --> 00:03:30.239 what it did before. Kinda silly huh? 00:03:30.239 --> 00:03:32.920 The whole point of functions is we can reuse them. 00:03:32.920 --> 00:03:34.957 So let's do that now. 00:03:34.957 --> 00:03:41.162 We can just copy and paste this function call... Ta da! Ta da! Over and over. 00:03:41.162 --> 00:03:46.572 Hmmm, but it looks the same, well, it worked - 00:03:46.572 --> 00:03:48.998 it's drawing multiple Winstons, but the problem 00:03:48.998 --> 00:03:51.474 is they're all in the same place. 00:03:51.474 --> 00:03:54.428 If we had x-ray vision, we could x-ray the canvas 00:03:54.428 --> 00:03:57.631 and see three Winstons, but I don't have x-ray vision. 00:03:57.631 --> 00:04:00.334 I don't know about you. 00:04:00.334 --> 00:04:03.440 But, we can make a small change to our function 00:04:03.440 --> 00:04:05.486 that WILL make it obvious. 00:04:05.486 --> 00:04:08.825 So you see faceX and faceY - they're always 202 and 208? 00:04:08.825 --> 00:04:11.587 We can change this to using the random() function - 00:04:11.587 --> 00:04:14.849 - let's say like random() from 50 to 350 and it'll generate 00:04:14.849 --> 00:04:19.183 a random number between those two - and we can do the same thing for here - 00:04:19.183 --> 00:04:23.023 and so every time this function is called, it generates this new random number, 00:04:23.023 --> 00:04:26.566 and if we push restart, we can keep getting random Winstons. 00:04:26.566 --> 00:04:29.359 So cool! Whoo!! 00:04:29.359 --> 00:04:32.095 Alright - so I think this is cool because it would have been 00:04:32.095 --> 00:04:34.916 a lot of code to write this if we didn't have it in a function. 00:04:34.916 --> 00:04:38.317 It would have been three times the amount of code. 00:04:38.317 --> 00:04:40.960 But it's still not AS useful as it could be, 00:04:40.960 --> 00:04:43.796 because we probably don't want random Winstons. 00:04:43.796 --> 00:04:45.736 We probably want to be able to position a Winston 00:04:45.736 --> 00:04:47.846 at specific points on the screen. 00:04:47.846 --> 00:04:49.943 So stay tuned, 'cause we'll talk about how pass parameters 00:04:49.943 --> 00:04:52.483 to our functions next, and then you'll be able 00:04:52.000 --> 00:04:56.000 to do exactly that.