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