1 00:00:06,300 --> 00:00:09,309 Now that we've covered the Big Bang mechanism, we're going to get into the 2 00:00:09,309 --> 00:00:14,082 How to Design Worlds recipe. That's a process that lets us 3 00:00:14,082 --> 00:00:17,736 systematically design interactive programs, or what Big Bang calls world 4 00:00:17,736 --> 00:00:22,440 programs. Now interactive programs are the most 5 00:00:22,440 --> 00:00:26,359 complicated thing we've done so far. And you can imagine that designing them 6 00:00:26,359 --> 00:00:31,459 is going to take a little bit longer. In fact, that shows up in How to Design 7 00:00:31,459 --> 00:00:35,911 Worlds recipe because it has two parts. It first has an analysis part that takes 8 00:00:35,911 --> 00:00:40,367 place with paper and pencil. And then, it has a second part where we 9 00:00:40,367 --> 00:00:44,460 actually take the analysis and develop code for it. 10 00:00:44,460 --> 00:00:48,400 In this video, we're just going to do the first part, the analysis part. 11 00:00:48,400 --> 00:00:51,898 So, I really encourage you to get out an actual piece of paper and work along with 12 00:00:51,898 --> 00:00:57,700 me through the rest of this video. Here's the problem that we're asked to 13 00:00:57,700 --> 00:01:00,231 solve. And I apologize if this is a bit boring 14 00:01:00,231 --> 00:01:04,059 but what we're going to do is we're going to design the catwalk program that 15 00:01:04,059 --> 00:01:09,532 we saw as an example in the last video. But this time we're going to design it 16 00:01:09,532 --> 00:01:14,368 systematically using the recipe. I'm keeping the same example just to make 17 00:01:14,368 --> 00:01:19,062 it easier to focus on the recipe. We'll quickly start doing more 18 00:01:19,062 --> 00:01:21,850 challenging interactive program design problems. 19 00:01:22,930 --> 00:01:25,450 So, what we're asked to do is an interactive program in which a cat starts 20 00:01:25,450 --> 00:01:29,770 at the left edge of the display and walks across the screen to the right. 21 00:01:29,770 --> 00:01:32,670 When it reaches the right edge, it should just keep going right off the screen. 22 00:01:32,670 --> 00:01:36,830 And then this next paragraph talks about something that we're going to add to the 23 00:01:36,830 --> 00:01:40,422 program once its com-, once it's complete. 24 00:01:40,422 --> 00:01:44,520 So, let's skip that for now. And it's giving us an image of a cat here 25 00:01:44,520 --> 00:01:47,195 that we can use. You can, of course, use a better looking 26 00:01:47,195 --> 00:01:50,676 image of a cat than that if you have one. So this is a How to Design Worlds 27 00:01:50,676 --> 00:01:52,718 problem. And so, we want to turn to the How to 28 00:01:52,718 --> 00:01:56,440 Design Worlds recipe. Going to the design recipe's page, the 29 00:01:56,440 --> 00:02:00,370 link to the How to Design World's recipe is here. 30 00:02:01,520 --> 00:02:05,674 And as with the other recipes, the page starts with a summary and then a more 31 00:02:05,674 --> 00:02:09,388 detailed explanation. You should read the more detailed 32 00:02:09,388 --> 00:02:13,205 explanation after you watch these videos. The recipe says that World Program Design 33 00:02:13,205 --> 00:02:16,538 is divided into two phases, each of which has subparts. 34 00:02:16,538 --> 00:02:21,758 And the first part is domain analysis, that we want to do using a piece of 35 00:02:21,758 --> 00:02:25,356 paper. So the first thing we're supposed to do 36 00:02:25,356 --> 00:02:28,801 is draw two or three pictures that show different stages in the progression of 37 00:02:28,801 --> 00:02:32,330 the program. So here we go. 38 00:02:32,330 --> 00:02:35,960 Here's what the program might like look at the beginning. 39 00:02:35,960 --> 00:02:41,600 We've got the screen [BLANK_AUDIO] and there's an image of a cat. 40 00:02:44,180 --> 00:02:47,298 And there's the little cat's ears. And if you want to you can make whiskers 41 00:02:47,298 --> 00:02:49,280 too. I'm not very good at drawing. 42 00:02:49,280 --> 00:02:53,415 That's why I got into computer science. so there's an image of the program early 43 00:02:53,415 --> 00:02:59,550 on in its progression. And after a little while, perhaps it 44 00:02:59,550 --> 00:03:07,928 looks like this. There's the cat and later, it looks like 45 00:03:07,928 --> 00:03:11,274 this. The cat is kind of in the midst of 46 00:03:11,274 --> 00:03:15,750 walking off the edge of the screen. Okay. 47 00:03:15,750 --> 00:03:21,162 So, the key thing is to draw two or three images that reflect different stages in 48 00:03:21,162 --> 00:03:29,080 the program's evolution and, and try to capture some of the interesting events. 49 00:03:29,080 --> 00:03:32,252 Sometimes you need more than two or three, sometimes you want to zoom in on 50 00:03:32,252 --> 00:03:34,422 one. The next thing we're going to do is 51 00:03:34,422 --> 00:03:38,330 identify the constant information. So this is information that does not 52 00:03:38,330 --> 00:03:42,490 change through the progression of the program. 53 00:03:42,490 --> 00:03:45,263 A lot of these values are fairly canonical in the sense that you'll find 54 00:03:45,263 --> 00:03:49,350 them in almost every World Program, but we still want to identify them. 55 00:03:49,350 --> 00:03:52,230 So, for example, there's the width of the screen. 56 00:03:52,230 --> 00:04:01,110 And what I like to do is label up here [BLANK_AUDIO] [SOUND] what I mean by 57 00:04:01,110 --> 00:04:05,820 this. Width is fairly obvious, but they're not 58 00:04:05,820 --> 00:04:09,020 all quite as obvious. So, there's the width of the screen, 59 00:04:09,020 --> 00:04:19,460 there's the height of the screen. What else is there? 60 00:04:19,460 --> 00:04:25,770 Well, the cat progresses from left to right but it's height always stays. 61 00:04:25,770 --> 00:04:31,402 So the cat's y coordinate doesn't change. And there's a funny little thing you're 62 00:04:31,402 --> 00:04:35,370 going to see here in a little bit but I'll tell you now, which is the computer 63 00:04:35,370 --> 00:04:39,018 scientists, in order to sort of be annoying have decided that the 0,0 64 00:04:39,018 --> 00:04:43,114 coordinate in screens, is up here in the left and that y values increase going 65 00:04:43,114 --> 00:04:48,508 down. So that's kind of the opposite of the way 66 00:04:48,508 --> 00:04:52,740 it works in for example grade school. So another constant thing is the cats y 67 00:04:52,740 --> 00:04:59,294 kind of sit there at the center. So I'll just call that center y. 68 00:05:00,790 --> 00:05:03,651 What else doesn't change? Well, let's see the background image 69 00:05:03,651 --> 00:05:07,725 itself doesn't change. We'll call that mts that's the 70 00:05:07,725 --> 00:05:12,195 abbreviation that the book uses. It stands for empty scene. 71 00:05:12,195 --> 00:05:16,354 And let's see what else doesn't change. Oh, the actual image of the cat doesn't 72 00:05:16,354 --> 00:05:21,238 change. [SOUND] So there’s some things that don’t 73 00:05:21,238 --> 00:05:24,490 change. Now a real important point about this 74 00:05:24,490 --> 00:05:27,690 analysis is you should do it, you should do it in this order, and you should try 75 00:05:27,690 --> 00:05:31,880 to [INAUDIBLE] identify all the constants. 76 00:05:31,880 --> 00:05:34,618 In a complicated program, you’re not going to identify them all. 77 00:05:34,618 --> 00:05:38,028 You’ll realize partway through the process that you were missing one, and 78 00:05:38,028 --> 00:05:41,919 that’s just fine. Just go back and add it to your list. 79 00:05:43,620 --> 00:05:45,812 We're also going to identify the changing information. 80 00:05:45,812 --> 00:05:54,032 And in this case, the changing information is fairly straightforward, 81 00:05:54,032 --> 00:06:06,305 it's just the x coordinate of the cat. And the last thing we identify is the Big 82 00:06:06,305 --> 00:06:12,157 Bang option. And the recipe page gives us a table that 83 00:06:12,157 --> 00:06:17,089 helps us do this. The table talks about behavior that our 84 00:06:17,089 --> 00:06:21,348 program has, and what options we need to have to support that behavior. 85 00:06:21,348 --> 00:06:25,582 So this program changes, it has information that changes as time goes 86 00:06:25,582 --> 00:06:29,752 along. Because the x coordinate of cat, this 87 00:06:29,752 --> 00:06:37,152 value here, changes as time goes on. So that means that we're going to need to 88 00:06:37,152 --> 00:06:43,163 use the on tick option to big bang. And this program also has behavior that 89 00:06:43,163 --> 00:06:48,061 we see, the display changes. And so that means we're going to need to 90 00:06:48,061 --> 00:06:54,470 use the to draw option to big bang. Once we've done that, we've done the 91 00:06:54,470 --> 00:06:58,130 analysis for this program. Just to recap quickly, we drew three 92 00:06:58,130 --> 00:07:01,425 pictures of different states in the programs progression. 93 00:07:01,425 --> 00:07:06,673 And then using the pictures, we identified constant information, changing 94 00:07:06,673 --> 00:07:12,008 information and big bang options. The constant information inherently will 95 00:07:12,008 --> 00:07:15,868 show up in every picture. You may need to use more than one of the 96 00:07:15,868 --> 00:07:21,190 pictures to identify the changing information from the big bang options. 97 00:07:21,190 --> 00:07:25,090 For example, if your program is going to have special behavior that happens when 98 00:07:25,090 --> 00:07:29,980 you click the mouse, you may only have one picture that shows that. 99 00:07:29,980 --> 00:07:32,956 So big bang options don't have to all be in the picture that's above big bang 100 00:07:32,956 --> 00:07:36,448 options. Right, this is really two parts of your 101 00:07:36,448 --> 00:07:40,260 analysis. One part is the diagrams and then the 102 00:07:40,260 --> 00:07:47,427 other part is these three elements of constant changing and big bang options. 103 00:07:47,427 --> 00:07:52,213 In the next video, we'll start converting this into code.