WEBVTT 00:00:00.635 --> 00:00:04.231 Remember all those cool exciting projects we saw earlier in the first video? 00:00:04.231 --> 00:00:07.641 They were all animated and exploding and colors changing and moving, 00:00:07.641 --> 00:00:08.925 all sorts of stuff happening. 00:00:08.925 --> 00:00:14.274 Everything that we've done in this set of tutorials up until now is static drawings 00:00:14.274 --> 00:00:15.955 that don't move, that don't change. 00:00:15.955 --> 00:00:19.935 But what we're going to do now is look at how we can animate things. 00:00:19.935 --> 00:00:22.036 How can we make things change? 00:00:22.036 --> 00:00:25.790 Well first of all, we should realize, like, what does it mean for a program to animate? 00:00:25.790 --> 00:00:31.086 What we had before was stroke, fill, rectangle, stroke, fill, ellipse. 00:00:31.086 --> 00:00:33.604 We execute all those lines of code and we get to the end and voila, 00:00:33.604 --> 00:00:35.199 we have our perfect drawing. 00:00:35.199 --> 00:00:36.547 Now we want to do something different. 00:00:36.547 --> 00:00:40.274 A program that animates runs continuously over time. 00:00:40.274 --> 00:00:44.632 It starts, it runs, and it reruns and it reruns and it reruns. 00:00:44.632 --> 00:00:48.103 It has to continuously draw the circle, draw the circle, draw the circle. 00:00:48.103 --> 00:00:52.493 So we need a framework, we need a structure, we need some way of doing this besides 00:00:52.493 --> 00:00:55.493 just having our linear list of instructions. 00:00:55.493 --> 00:01:00.903 The way we're gonna do that is by having two sections of code, two blocks of code. 00:01:00.903 --> 00:01:02.745 One, we're going to call "setup." 00:01:04.902 --> 00:01:11.627 Setup is all the code that happens once at the start. 00:01:13.056 --> 00:01:16.395 All the code that goes in setup happens once at the start. 00:01:16.748 --> 00:01:21.932 Then we're going to have another block, another section of code that's going to be called "draw." 00:01:21.932 --> 00:01:27.608 The code that goes in draw loops continuously over and over again. 00:01:28.135 --> 00:01:31.577 So we might, the program is going to run forever and ever. 00:01:31.577 --> 00:01:33.733 It's going to do some things once, then it's going to run forever and ever. 00:01:33.733 --> 00:01:35.354 You can think about programming a game. 00:01:35.354 --> 00:01:37.917 If you were making a game, you might have some things at the beginning, 00:01:37.917 --> 00:01:40.984 we would set the scoreboard to 0, we would set the player's name, 00:01:40.984 --> 00:01:44.136 we would set the player's location to the beginning spot, and then, 00:01:44.136 --> 00:01:48.083 after that beginning setup, after that initialization, 00:01:48.083 --> 00:01:52.847 then the things move and they change and they check and the ball hit the puck 00:01:52.847 --> 00:01:56.886 or whatever the game might be, they draw all the elements of the game continuously. 00:01:56.886 --> 00:01:58.951 This is the structure we're going to use. 00:01:58.951 --> 00:02:03.248 The question of course then is, how do we type this into our code? 00:02:03.248 --> 00:02:05.510 Do we just type "setup" and put a line underneath it? 00:02:05.510 --> 00:02:11.279 No, there's new syntax, new strange symbols that we have to write very precisely. 00:02:11.279 --> 00:02:12.392 And it looks like this. 00:02:13.397 --> 00:02:22.551 Void setup with parentheses with curly bracket open, end curly bracket. 00:02:22.931 --> 00:02:24.970 By the way, the curly brackets might actually be a character you've 00:02:24.970 --> 00:02:26.642 never had a chance to use before. 00:02:26.642 --> 00:02:29.911 This is a time. It's shift something on your keyboard, so if you can't find it, 00:02:29.911 --> 00:02:31.662 pause this video and find those curly brackets. 00:02:32.123 --> 00:02:36.478 And the curly brackets are crucial because they mark the beginning and end of setup, 00:02:36.478 --> 00:02:41.582 meaning any code that goes inside here is the code that's going to happen 00:02:41.582 --> 00:02:42.961 in the beginning of the program. 00:02:43.583 --> 00:02:47.397 Now, to write draw, we follow exactly this syntax again. 00:02:47.801 --> 00:02:57.193 We say void, draw, () another start curly bracket and another close curly bracket. 00:02:57.193 --> 00:02:59.754 So we're now writing two blocks of code. 00:02:59.754 --> 00:03:02.199 We put code in setup that happens once at the beginning, 00:03:02.199 --> 00:03:04.138 code in draw that loops over and over again. 00:03:04.138 --> 00:03:06.676 You might also be asking yourself the question like, 00:03:06.676 --> 00:03:09.499 "yeah, I kind of get why the curly bracket is there, the parentheses, 00:03:09.499 --> 00:03:13.654 maybe I'm willing to understand that I have to have parentheses, but what is this 'void?'" 00:03:13.654 --> 00:03:14.941 What does void mean? 00:03:14.941 --> 00:03:17.829 At this point, I really just have to say that void is something you should just memorize, 00:03:17.829 --> 00:03:20.731 it's part of the definition of setup and draw. 00:03:20.731 --> 00:03:23.264 You have to say void draw, void setup. 00:03:23.264 --> 00:03:26.216 The more important thing that we should be looking at together is, 00:03:26.216 --> 00:03:30.645 we wrote all this code, stroke, fill, background, rect, ellipse, all these things. 00:03:30.645 --> 00:03:32.993 Where do they go? Do they go in setup do they go in draw? 00:03:32.993 --> 00:03:34.872 Well, here's the thing. 00:03:34.872 --> 00:03:36.220 What goes in setup? 00:03:36.220 --> 00:03:40.104 What is something that you might do at the beginning of your program? 00:03:40.104 --> 00:03:42.860 There's a function that we haven't actually taught you yet. 00:03:42.860 --> 00:03:45.961 It's a function that's secretly been happening but we didn't put it in yet. 00:03:45.961 --> 00:03:47.784 Now it's time to actually put it in. 00:03:47.784 --> 00:03:51.505 That function is called "size," and it's something that makes sense to go in setup. 00:03:51.505 --> 00:03:58.693 Size (); takes two arguments, a width and a height. 00:03:59.195 --> 00:04:01.478 500, 400. 00:04:01.818 --> 00:04:02.849 This makes sense. 00:04:02.849 --> 00:04:05.892 This is defining the size, in pixels, of your canvas. 00:04:05.892 --> 00:04:10.581 The thing that you're drawing to is 500 pixels wide and 400 pixels high. 00:04:10.581 --> 00:04:11.804 Now this makes sense. 00:04:11.804 --> 00:04:15.835 When your program first starts, this is something that you would do at the beginning. 00:04:15.835 --> 00:04:17.900 You would set up the size of your canvas. 00:04:18.527 --> 00:04:19.750 We can look at what would we put in draw? 00:04:19.750 --> 00:04:21.943 Well in draw, we might put all of our drawing code. 00:04:21.943 --> 00:04:24.220 We would say, "hey, I want to draw the background. 00:04:24.220 --> 00:04:28.319 And I'm gonna have a black background. And then I'm going to set a fill. 00:04:28.319 --> 00:04:32.159 And then I'm going to set a stroke. And then I'm gonna draw a shape, 00:04:32.159 --> 00:04:34.271 like ellipse, blah blah blah." 00:04:34.271 --> 00:04:37.396 Now I'm making this messy here because this is anything your heart imagines. 00:04:37.396 --> 00:04:38.465 Anything you want to draw. 00:04:38.465 --> 00:04:41.009 Any colors, any shapes, all of your drawing code. 00:04:41.009 --> 00:04:45.184 So what we're actually going to do right now is switch back over to the code editor, 00:04:45.184 --> 00:04:48.476 and in the code editor, I'm gonna add void setup and void draw. 00:04:48.476 --> 00:04:53.353 See how those are two separate functions now? Two separate blocks of code? 00:04:53.353 --> 00:04:56.447 Now we're gonna put size in setup, there it is. 00:04:56.447 --> 00:04:58.072 Notice how it's indented slightly. 00:04:58.072 --> 00:05:02.399 This is the convention to have code inside a block of code have a slight indentation. 00:05:02.399 --> 00:05:05.516 Now we're gonna put code in draw. I'm gonna put a background and 00:05:05.516 --> 00:05:07.305 I'm gonna put a couple different shapes. 00:05:07.305 --> 00:05:08.589 Ready? 00:05:08.843 --> 00:05:12.483 It's a program, remember, that runs once at the beginning and loops over and over again. 00:05:12.483 --> 00:05:14.901 So when we run it, something really exciting should happen, right? 00:05:14.901 --> 00:05:16.629 OK, here we go, we're gonna run that code. 00:05:16.942 --> 00:05:17.811 There it is. 00:05:18.939 --> 00:05:20.561 Alright, yeah, I don't know how you feel, 00:05:20.561 --> 00:05:22.811 I'm not even looking at it because there's no window, really, 00:05:22.811 --> 00:05:26.004 I'm just in a video, but I know what it's doing, and it's static. 00:05:26.781 --> 00:05:27.877 It's not changing. 00:05:27.877 --> 00:05:29.504 So this might feel a little bit disappointing, 00:05:29.504 --> 00:05:33.772 we spent all this time to add setup and draw, but our program isn't animating. 00:05:33.772 --> 00:05:35.224 Why isn't it animating? 00:05:35.224 --> 00:05:39.444 The reason why it's not animating is, well, inside of draw, 00:05:39.444 --> 00:05:42.263 we're drawing the same shapes over and over again, so if we're always saying, 00:05:42.263 --> 00:05:45.390 "Put a rectangle here, draw the background, put a rectangle here, 00:05:45.390 --> 00:05:47.110 draw the background, put a rectangle over here," 00:05:47.110 --> 00:05:48.862 that rectangle's never going to move. 00:05:48.862 --> 00:05:51.463 So now, we need a new concept. 00:05:51.463 --> 00:05:57.687 We need to figure out, how can we vary the way the shapes are drawn each time 00:05:57.687 --> 00:05:59.748 through this draw loop? 00:05:59.748 --> 00:06:01.658 We might be drawing an ellipse. 00:06:01.658 --> 00:06:07.627 And that ellipse might be at some x, some y, with some width and some height. 00:06:07.627 --> 00:06:11.310 The values that we've been using are numbers like 250, 200. 00:06:11.310 --> 00:06:15.256 And if the values are 250, 200, the ellipse is always at that location. 00:06:15.256 --> 00:06:16.756 Always and forever. 00:06:18.571 --> 00:06:20.849 Remember this thing, you know this thing that you've got on your computer, 00:06:20.849 --> 00:06:22.761 it's called a mouse and you can move things around? 00:06:22.761 --> 00:06:25.012 And you usually see, I'm gonna do a terrible job of drawing this, 00:06:25.012 --> 00:06:27.157 this little mouse pointer on your screen? 00:06:27.157 --> 00:06:31.793 Well, the mouse exists at some x and some y, right? 00:06:31.793 --> 00:06:33.683 This is an x, y location where the mouse is. 00:06:33.683 --> 00:06:39.701 What if I could say, draw the ellipse not at 250, but at the x location of the mouse, 00:06:39.701 --> 00:06:43.708 wherever it might be, and the y location of the mouse, wherever it might be. 00:06:44.646 --> 00:06:49.288 The fact is, we can do that! The way we do that is by writing a word. 00:06:49.288 --> 00:06:56.256 The word is "mouse x mouse y." 00:06:56.256 --> 00:06:59.039 Now this isn't magic. It's not just magic that this happens. 00:06:59.039 --> 00:07:01.912 Processing knows, this computer programming environment 00:07:01.912 --> 00:07:04.019 knows that when you write the word "mouse x," 00:07:04.019 --> 00:07:09.918 you mean, it stands in for the number that is currently the x value of the mouse. 00:07:10.238 --> 00:07:15.469 We have now learned a really important fundamental thing in computer programming. 00:07:15.469 --> 00:07:17.918 A fundamental concept. A variable. 00:07:17.918 --> 00:07:20.227 Words that stand in for numbers. 00:07:20.227 --> 00:07:22.807 A word that holds a value, this is a variable. 00:07:22.807 --> 00:07:26.758 There's lots more to variables than this, but we've got to start here. 00:07:26.758 --> 00:07:29.920 We now know that we can use the variables "mouse x" and "mouse y." 00:07:29.920 --> 00:07:32.267 So I'm gonna bring the code editor back up, 00:07:32.267 --> 00:07:37.103 and you're gonna see that there's an ellipse being drawn just at 250, 200. 00:07:37.103 --> 00:07:39.539 There it is. It's looping, but it never changes. 00:07:39.539 --> 00:07:43.624 Now I'm gonna replace that line of code with the ellipse at mouse x, mouse y, 00:07:43.624 --> 00:07:45.292 and I'm gonna run it again. 00:07:45.292 --> 00:07:48.893 OK? Take your mouse, move it over there, are you moving that circle? 00:07:48.893 --> 00:07:51.986 We're drawing the circle over and over again, but every time we draw the circle, 00:07:51.986 --> 00:07:55.048 we're drawing it at an updated location, wherever that mouse is. 00:07:55.048 --> 00:08:00.048 This is the power of looping an animation loop with variation inside that loop. 00:08:00.048 --> 00:08:03.079 If we can draw a circle at a different location, 00:08:03.079 --> 00:08:06.367 if we can draw a circle with a different size, with a different color, 00:08:06.367 --> 00:08:09.054 things can change, things can animate. 00:08:09.054 --> 00:08:12.524 Just as an exercise, try swapping mouse x and mouse y, 00:08:12.524 --> 00:08:16.380 so type mouse y where mouse x was, and mouse x where mouse y was. 00:08:17.410 --> 00:08:20.694 Run the code yourself and see what happens. 00:08:21.085 --> 00:08:22.024 Interesting, right? 00:08:22.024 --> 00:08:23.867 This is a very important point. 00:08:23.867 --> 00:08:26.557 One of the things that you can do is, these are just numbers. 00:08:26.557 --> 00:08:30.838 Even though it makes sense intuitively to have mouse x for the x value of something, 00:08:30.838 --> 00:08:34.369 you can also use mouse x for the value, the red value of a color. 00:08:34.369 --> 00:08:37.340 You can use mouse y for the blue value of a color. 00:08:37.340 --> 00:08:40.691 You could also say something, like you can do little mathematical operations. 00:08:40.691 --> 00:08:46.200 Something you can always say are things like "mouse x plus 50" 00:08:46.200 --> 00:08:50.357 which would draw your shape 50 pixels over from where the mouse was. 00:08:50.357 --> 00:08:54.960 You could also do things like say "mouse x divided by 3," 00:08:54.960 --> 00:08:59.318 which would then take the value of mouse x, divide it by 3, and use that number. 00:08:59.318 --> 00:09:01.894 So this is something you can really play with, 00:09:01.894 --> 00:09:05.024 and in our example that I'm going to put below for you, 00:09:05.024 --> 00:09:07.748 you'll see some examples of using the mouse values in 00:09:07.748 --> 00:09:11.391 slightly more complicated mathematical operations. 00:09:11.391 --> 00:09:13.966 OK, so we're done with this part of the tutorial, 00:09:13.966 --> 00:09:17.385 but there's one little last piece I think that would be important to show you, 00:09:17.385 --> 00:09:20.523 and it's something that's gonna go into the example that I'm gonna leave you with. 00:09:20.523 --> 00:09:23.998 If you've noticed, right, we only ever had size in setup. 00:09:23.998 --> 00:09:26.503 All of our drawing stuff goes in draw. That makes sense. 00:09:26.503 --> 00:09:31.019 Look below, that example that's there right now, size is in setup, everything else is in draw. 00:09:31.019 --> 00:09:35.580 Let's just try, just as an experiment, what happens if we take the line of code 00:09:35.580 --> 00:09:38.687 called "background," and move it from draw to setup? 00:09:38.687 --> 00:09:40.316 We're gonna move it there. 00:09:40.316 --> 00:09:44.077 That means background is gonna be here, in setup. 00:09:45.088 --> 00:09:50.731 That means background is only being drawn once at the beginning. 00:09:50.731 --> 00:09:52.349 Never ever again. 00:09:52.349 --> 00:09:55.206 What do you think's gonna happen when we run this code? 00:09:55.206 --> 00:09:56.019 Try to guess. 00:09:56.344 --> 00:09:57.321 And now we're gonna run it. 00:09:57.321 --> 00:09:58.981 Move your mouse over. 00:09:58.981 --> 00:10:01.487 Notice that the circle is leaving a trail. 00:10:01.487 --> 00:10:04.520 It's because we've never erased the background. 00:10:04.520 --> 00:10:08.291 So we're seeing every circle that's being drawn, and we're seeing every circle 00:10:08.291 --> 00:10:12.465 that's being drawn in draw over and over and over and over again. 00:10:12.465 --> 00:10:15.028 This is something that you can use, you can make this decision, 00:10:15.028 --> 00:10:17.090 "do I want to draw the background always? 00:10:17.090 --> 00:10:20.750 Or do I want to put the background just once in setup to create a painting program?" 00:10:20.750 --> 00:10:24.633 So go forth, make your program animate, make things move, 00:10:24.633 --> 00:10:28.893 make things change color if you can, and we're gonna add one more piece, 00:10:28.893 --> 00:10:30.554 we're almost to the end of this tutorial series, 00:10:30.554 --> 00:10:32.904 but we've got one more step we're gonna do in 00:10:32.904 --> 00:10:35.497 learning the basics of programming in this tutorial. 00:10:35.497 --> 00:10:38.750 OK, have fun, see you in a bit.