1 00:00:06,380 --> 00:00:08,595 Now let me just say a thing about templates. 2 00:00:08,595 --> 00:00:13,490 Templates are not a beginner's approach to programming. 3 00:00:13,490 --> 00:00:16,625 I told you in the intro video that the method we're going to learn in this 4 00:00:16,625 --> 00:00:20,250 course is what I do when problems get hard. 5 00:00:20,250 --> 00:00:23,263 And that's true. So what templates are, the way we mean 6 00:00:23,263 --> 00:00:27,033 them in this course, is they're an expert's way of saying gee, before I 7 00:00:27,033 --> 00:00:31,323 start on this function or before I start on this program, what do I know about the 8 00:00:31,323 --> 00:00:37,290 basic structure of it before I get into the details. 9 00:00:38,600 --> 00:00:41,876 So data driven templates are saying, given that I know what type of data this 10 00:00:41,876 --> 00:00:46,440 function consumes, what do I know about the structure of this function? 11 00:00:47,560 --> 00:00:51,200 And the Big Bang World program template is a way of saying, given that I know I'm 12 00:00:51,200 --> 00:00:54,896 using Big Bang, what do I know about the basic structure of this program before I 13 00:00:54,896 --> 00:00:59,690 start? And later on in the course, we'll see 14 00:00:59,690 --> 00:01:02,938 templates where we know, given that I know I'm using this basic kind of 15 00:01:02,938 --> 00:01:06,578 algorithm, what must be true about the structure of the program before I get to 16 00:01:06,578 --> 00:01:11,282 the details. Templates are an idea that you can use 17 00:01:11,282 --> 00:01:17,090 throughout your career no matter how sophisticated a programmer you get to be. 18 00:01:17,090 --> 00:01:20,438 When you get a hard problem and you don't quite know how to do it you first say 19 00:01:20,438 --> 00:01:23,732 well what do I know about the basic structure of the program before I get to 20 00:01:23,732 --> 00:01:29,021 the details. That's an incredibly powerful idea and 21 00:01:29,021 --> 00:01:33,624 its not one that's just for beginners. In the last video we started on the 22 00:01:33,624 --> 00:01:37,069 problem of designing the world program that causes the cat to march across the 23 00:01:37,069 --> 00:01:41,060 screen. And we did the first half of the world 24 00:01:41,060 --> 00:01:44,270 program design recipe, we did the domain analysis half. 25 00:01:44,270 --> 00:01:48,365 That produced this domain analysis for us, in which we identified constant 26 00:01:48,365 --> 00:01:52,785 information, changing information, and the required big-bang options for this 27 00:01:52,785 --> 00:01:56,344 program. In this video, we're going to start on 28 00:01:56,344 --> 00:02:00,480 the second part of the How to Design Worlds recipe. 29 00:02:00,480 --> 00:02:04,771 The Build the actual program part. And we're going to do steps 2-1, 2-2, and 30 00:02:04,771 --> 00:02:08,256 2-3 in this video. So let's get the starter file, and what 31 00:02:08,256 --> 00:02:12,986 I'm going to do now is I'm going to go to the How to Design Worlds Recipe page. 32 00:02:12,986 --> 00:02:16,726 And I'm going to scoot down here to the bottom, and I'm going to take this 33 00:02:16,726 --> 00:02:22,680 template of a world program. And I'm just going to copy this whole 34 00:02:22,680 --> 00:02:27,960 template right here and bring it over into my program that I'm working on. 35 00:02:27,960 --> 00:02:31,132 Now templates do something else important, or what I should really say is 36 00:02:31,132 --> 00:02:35,438 that the way the recipe is structured does something else important. 37 00:02:35,438 --> 00:02:40,443 Which is templates break the process of design down into steps of the process, 38 00:02:40,443 --> 00:02:46,632 not just pieces of the solution. So this function and that function are 39 00:02:46,632 --> 00:02:51,264 two pieces of the solution. But what the template is, is it's a step 40 00:02:51,264 --> 00:02:54,294 in the process. Because when you have the final function 41 00:02:54,294 --> 00:02:57,810 The template is kind of buried in the middle of it somewhere. 42 00:02:58,830 --> 00:03:01,876 That's really important. That's what happens when you design a 43 00:03:01,876 --> 00:03:04,800 method. Is, you can design it so that you both 44 00:03:04,800 --> 00:03:09,180 get pieces of the solution, and steps of the process. 45 00:03:09,180 --> 00:03:12,420 And so you get a kind of cross cutting decomposition that helps break the 46 00:03:12,420 --> 00:03:17,060 overall work down into smaller and more manageable pieces. 47 00:03:17,060 --> 00:03:20,610 So don't let anyone tell you that templates are just for beginners. 48 00:03:20,610 --> 00:03:25,073 Nothing could be further from the truth. What is true is that as you get to be a 49 00:03:25,073 --> 00:03:28,081 better programmer, you will template very simple functions or you'll kind of 50 00:03:28,081 --> 00:03:33,087 template them in your head or something. But the idea of templates, the idea of 51 00:03:33,087 --> 00:03:37,183 getting the structure of a piece of code before you get to the details, you'll 52 00:03:37,183 --> 00:03:41,894 always have that idea. And you'll always use it when the problem 53 00:03:41,894 --> 00:03:45,292 gets too hard to just immediately write down the solution. 54 00:03:45,292 --> 00:03:48,858 So, here we go. We need a better title than this. 55 00:03:48,858 --> 00:03:56,460 A cat [SOUND] that walks from left to right across the screen, right? 56 00:03:56,460 --> 00:04:01,190 The first line of a program should give us a short summary of the program. 57 00:04:01,190 --> 00:04:04,526 Now we're going to do the constants. And the constants are going to come 58 00:04:04,526 --> 00:04:09,680 directly from the analysis phase of the program, this analysis here. 59 00:04:09,680 --> 00:04:13,508 So, for example, one of the constants we identified was that the width of screen 60 00:04:13,508 --> 00:04:16,995 didn't change. So here I have to just guess a number, 61 00:04:16,995 --> 00:04:21,406 I'm going to guess a number like 600. In the rest of the program we're never 62 00:04:21,406 --> 00:04:27,150 going to use the number 600, we're always going to use the constant name width. 63 00:04:27,150 --> 00:04:30,710 So if it turns out that this is the wrong number, it'll be real easy to change. 64 00:04:30,710 --> 00:04:33,770 We'll only have to change it in one place. 65 00:04:33,770 --> 00:04:40,110 Here we go with the height. And I'll say 400. 66 00:04:40,110 --> 00:04:44,050 Another constant we identified is the y coordinate of the cat. 67 00:04:44,050 --> 00:04:47,460 The y coordinate of the cat never changes. 68 00:04:47,460 --> 00:04:51,812 So that's the center y. And now here you might be tempted to put 69 00:04:51,812 --> 00:04:54,950 200. But what I'm going to do is follow the 70 00:04:54,950 --> 00:04:59,330 rule that every time I need to refer to the height I'm going to use the height 71 00:04:59,330 --> 00:05:03,280 constant. So what I'm going to do here is put 72 00:05:03,280 --> 00:05:08,110 height over 2. Now if I change height, center y will 73 00:05:08,110 --> 00:05:13,520 also change. And let's see. 74 00:05:13,520 --> 00:05:16,540 For the empty scene, the background of the scene. 75 00:05:16,540 --> 00:05:22,382 There's a primitive called empty scene. And we'll make it width by height. 76 00:05:22,382 --> 00:05:27,040 And that will give us a sort of blank background. 77 00:05:27,040 --> 00:05:29,742 If you wanted to make a background. If you wanted to make a background that 78 00:05:29,742 --> 00:05:37,224 was a nice midnight blue or something. You could, for example, make this 79 00:05:37,224 --> 00:05:47,290 overlay, rectangle, width, height, solid, blue. 80 00:05:47,290 --> 00:05:49,390 And that would give you a blue background. 81 00:05:49,390 --> 00:05:51,280 I'll just stick with the simpler background for now. 82 00:05:52,660 --> 00:05:57,890 And the last constant we identified was the cat image itself. 83 00:05:57,890 --> 00:05:59,324 Okay? And for that, we're just going to use 84 00:05:59,324 --> 00:06:01,970 this image here, which the starter file gave us. 85 00:06:01,970 --> 00:06:06,048 I'll go up there and copy it. And then I'll come down here and paste 86 00:06:06,048 --> 00:06:07,920 it. And there's the cat image. 87 00:06:07,920 --> 00:06:10,848 And now would be a good time to run. In fact I should have run after each of 88 00:06:10,848 --> 00:06:13,574 these definitions. And I don't get any errors, so I know 89 00:06:13,574 --> 00:06:17,970 that my constants are well-formed. Now let me reinforce a point I made 90 00:06:17,970 --> 00:06:22,260 before about using the constants and always referring to the constants Notice 91 00:06:22,260 --> 00:06:28,630 that this code that I have here lines up really well with the analysis we did. 92 00:06:28,630 --> 00:06:32,284 The fact that I can look at the analysis, and look at the code, and understand 93 00:06:32,284 --> 00:06:35,706 where everything in the analysis showed up in the code is a thing called 94 00:06:35,706 --> 00:06:40,761 traceability. Both of those are important for the same 95 00:06:40,761 --> 00:06:44,405 reason. And this is an important intuition. 96 00:06:44,405 --> 00:06:48,730 The way to think about it is there's only two kinds of programs in the world. 97 00:06:50,710 --> 00:06:53,980 There's programs that change and programs that nobody uses. 98 00:06:53,980 --> 00:06:58,960 To put it another way, any program that anybody uses is always changing. 99 00:06:58,960 --> 00:07:02,940 People always want it to do more and better things. 100 00:07:04,040 --> 00:07:07,496 And so what we're doing here is we're designing this program to make it easy to 101 00:07:07,496 --> 00:07:11,680 change using constant names makes it easy to change. 102 00:07:11,680 --> 00:07:16,035 Having a clear traceability between the code and the analysis we'll see later 103 00:07:16,035 --> 00:07:22,170 that makes it easy to change. Okay, let's keep going. 104 00:07:22,170 --> 00:07:25,278 Now I've got the constants. The next step is to do a data definition 105 00:07:25,278 --> 00:07:29,330 that corresponds to the changing state of the program. 106 00:07:30,550 --> 00:07:34,149 The changing state of the program from my domain analysis is the cat's x 107 00:07:34,149 --> 00:07:37,744 coordinate. So that's going to be, that's simple 108 00:07:37,744 --> 00:07:39,745 atomic data. That's going to be something like a 109 00:07:39,745 --> 00:07:43,812 number. The World Program template has the 110 00:07:43,812 --> 00:07:48,006 beginning of a data definition here. it has WS for World State but it says to 111 00:07:48,006 --> 00:07:53,770 give WS a better name and sure enough I will because WS isn't a very good name. 112 00:07:53,770 --> 00:07:58,490 I'll just call it cat and I'll say cat is let's say number. 113 00:07:58,490 --> 00:08:06,106 And let's see the interpretation is this is the x position of the cat in screen 114 00:08:06,106 --> 00:08:12,410 coordinates. And now I need some examples. 115 00:08:12,410 --> 00:08:22,450 And let's see, one good example is 0. And another example is, well, let's see, 116 00:08:22,450 --> 00:08:26,235 the middle of the screen is width over 2, so that's kind of in the middle. 117 00:08:26,235 --> 00:08:32,950 And that's kind of on the right, on the left edge. 118 00:08:32,950 --> 00:08:43,921 And let's do this one. And this is on the right edge. 119 00:08:46,190 --> 00:08:51,451 So we'll run, just to make sure everything's well-formed, and it is. 120 00:08:51,451 --> 00:08:56,379 Now we need a template, define fn for cat, and this is just an atomic, 121 00:08:56,379 --> 00:09:01,923 non-distinct case, so dot dot dot c, we'll fill in the template rules used of 122 00:09:01,923 --> 00:09:07,819 atomic non-distinct and number And its also good to comment out the template and 123 00:09:07,819 --> 00:09:15,175 now we're good to go. So there we go there's our data 124 00:09:15,175 --> 00:09:19,210 definition for cat for the changing world state of the program. 125 00:09:19,210 --> 00:09:21,870 Now we're going to proceed to our main function. 126 00:09:21,870 --> 00:09:26,700 Now we decided not to use the name ws for the changing state of this program. 127 00:09:26,700 --> 00:09:30,380 We decided to use the name cat. So what I'm going to do here is, I'm 128 00:09:30,380 --> 00:09:36,150 going to say Cmd+F or Ctrl+F on Windows. I'm going to take every occurrence of WS, 129 00:09:36,150 --> 00:09:42,758 and I'm going to replace it with cat. Let's see, we'll replace that one, and 130 00:09:42,758 --> 00:09:45,730 that one. And I won't do that one because it's a 131 00:09:45,730 --> 00:09:48,560 parameter name. And I don't want to mess up the case. 132 00:09:48,560 --> 00:09:54,044 I'll come back and do that one. But I'll do all of these. 133 00:09:54,044 --> 00:09:59,070 [SOUND]. Oops, I didn't mean to do that one. 134 00:09:59,070 --> 00:10:03,355 I'll come back and fix it. I'm not going to do that one. 135 00:10:03,355 --> 00:10:07,003 Now, what's left is these ones that are parameter names, and these, I'll just 136 00:10:07,003 --> 00:10:17,730 change to C. And there's that one there that I messed 137 00:10:17,730 --> 00:10:21,452 up. And I'll just run down to make sure 138 00:10:21,452 --> 00:10:25,769 things are still well formed. So now here what I've got from the 139 00:10:25,769 --> 00:10:29,430 template is a main function that has lots of big bang options in it. 140 00:10:29,430 --> 00:10:33,850 I'm not going to use all these options. I'm only going to use on-tick and 141 00:10:33,850 --> 00:10:37,940 to-draw. That's what my analysis told me. 142 00:10:37,940 --> 00:10:40,480 So I'm just going to go ahead and delete all of this. 143 00:10:49,900 --> 00:10:54,550 And, you know, I might decide that I don't like the name tock for the on-tick 144 00:10:54,550 --> 00:10:59,859 function for this program. So, let's see, I could change the name 145 00:10:59,859 --> 00:11:02,205 tock. Oops, I've got a parenthesis problem 146 00:11:02,205 --> 00:11:08,140 here. I'm going to change tock. 147 00:11:08,140 --> 00:11:13,616 I clicked on Check Syntax. Now, click on tock, I'll say Rename tock, 148 00:11:13,616 --> 00:11:20,251 and I'm going to called it advance-cat. And I'll have to fix some of my spacing 149 00:11:20,251 --> 00:11:23,542 here. [SOUND] Now what's going here, on here 150 00:11:23,542 --> 00:11:27,802 off to the right, is that the template for the [UNKNOWN] main function is 151 00:11:27,802 --> 00:11:33,180 reminding us of the signature of each of the handlers. 152 00:11:34,800 --> 00:11:37,972 And the other thing the template for the world program did is for these two 153 00:11:37,972 --> 00:11:43,427 handlers, look at what we've got here. For each of these two handlers we've got 154 00:11:43,427 --> 00:11:48,230 its signature, its purpose but that's not filled in. 155 00:11:48,230 --> 00:11:54,170 And a stub which isn't filled in. Let me just fill this in now. 156 00:11:54,170 --> 00:12:01,360 It's produce the next cat, by advancing it one pixel to right. 157 00:12:01,360 --> 00:12:14,540 And that means that a good stub is just 0, because cat is number. 158 00:12:16,360 --> 00:12:28,150 And this just says render the cat image at appropriate place on MTS. 159 00:12:28,150 --> 00:12:33,187 These two things here, the combination of signature, purpose, and stub With those 160 00:12:33,187 --> 00:12:38,020 exclamation marks are what we call a wish-list entry. 161 00:12:39,160 --> 00:12:43,000 What we're doing here is we're saying, hey, up here when I wrote main I assumed 162 00:12:43,000 --> 00:12:46,790 that this function advance-cat was going to exist. 163 00:12:48,060 --> 00:12:51,462 And what I'm doing here is I'm writing a reminder to myself of what it is I want 164 00:12:51,462 --> 00:12:59,611 that function advance-cat to do. I want it to have this signature, this 165 00:12:59,611 --> 00:13:04,524 purpose, and by the way there's a stub. And this is a reminder of what I want the 166 00:13:04,524 --> 00:13:07,626 render function to do, I want it to have this signature, this purpose, and by the 167 00:13:07,626 --> 00:13:12,206 way there's a stub. Now, once my program is set up like this, 168 00:13:12,206 --> 00:13:15,800 notice two interesting things about it. One is it turns out I can actually run 169 00:13:15,800 --> 00:13:18,760 it, and I can even say main of zero and run it. 170 00:13:19,800 --> 00:13:24,557 Nothing happens of course, because my tick function doesn't do anything, and my 171 00:13:24,557 --> 00:13:30,360 render function only returns the At background scene no matter what. 172 00:13:30,360 --> 00:13:34,840 But it does run and the reason it runs is I have these stubs, for the two big bang 173 00:13:34,840 --> 00:13:38,463 handlers. I have a stub for advance cat and a stub 174 00:13:38,463 --> 00:13:43,538 for render. The other thing I can do now, is I can 175 00:13:43,538 --> 00:13:50,008 search for bang, bang, bang. And I can see every place in my program 176 00:13:50,008 --> 00:13:55,245 that's incomplete. By marking each of the wishlist entries 177 00:13:55,245 --> 00:13:58,710 with some well-known marker that says, hey this isn't done, I now know what I 178 00:13:58,710 --> 00:14:04,040 have to finish. So now what I've got is the overall 179 00:14:04,040 --> 00:14:10,120 structure of this program set up. I've got the constants. 180 00:14:10,120 --> 00:14:14,341 I've got the data definition for the changing world I've got a main function 181 00:14:14,341 --> 00:14:20,060 that calls big bang with two options on tick and two draw. 182 00:14:20,060 --> 00:14:23,482 And I've got wish list entries for advanced cat and render which are the 183 00:14:23,482 --> 00:14:27,950 handler functions for those two big bang options. 184 00:14:27,950 --> 00:14:30,900 And now I know what I need to do in order to finish this program. 185 00:14:30,900 --> 00:14:33,850 I have to design the advanced cat function or I have to finish the design 186 00:14:33,850 --> 00:14:37,950 in the advanced cat function. And I have to finish the design of the 187 00:14:37,950 --> 00:14:41,105 render function. And then, I should be done. 188 00:14:41,105 --> 00:14:43,630 That's what we'll do in the next video.