1 00:00:06,270 --> 00:00:10,760 This week is going to have the same basic structure of previous weeks. 2 00:00:10,760 --> 00:00:14,786 First we're going to learn a mechanism that supports interactive programs, that 3 00:00:14,786 --> 00:00:19,473 mechanism is called Big Bang. And no surprise, there's kind of a bad 4 00:00:19,473 --> 00:00:22,960 pun involved in the name of Big Bang. We'll talk about that later. 5 00:00:24,210 --> 00:00:26,718 So first we're going to learn that mechanism, and then later in the week 6 00:00:26,718 --> 00:00:29,210 we'll start learning how to design with it. 7 00:00:30,970 --> 00:00:34,270 To explain the Big Bang mechanism, what I'm going to do is I'm going to start by 8 00:00:34,270 --> 00:00:38,340 looking at a couple example interactive programs. 9 00:00:38,340 --> 00:00:41,146 And just kind of reason from first principles about what has to be going on 10 00:00:41,146 --> 00:00:44,830 inside those programs, the inherant structure of those programs. 11 00:00:46,070 --> 00:00:49,105 Then I'll explain how big bang works and how it supports that structure. 12 00:00:49,105 --> 00:00:53,959 So imagine that we have two fairly boring interactive programs. 13 00:00:53,959 --> 00:00:58,120 So the one on the left is just counting down, 8, 7, 6, 5, 4 and so on. 14 00:00:58,120 --> 00:01:03,780 And the one on the right just has a cat walking very slowly across the screen. 15 00:01:03,780 --> 00:01:07,940 And I'm going to say these programs are interactive because if I press the Space 16 00:01:07,940 --> 00:01:12,220 key they both reset back to the beginning. 17 00:01:12,220 --> 00:01:14,850 And start running again. So that's the sense in which they're 18 00:01:14,850 --> 00:01:17,252 interactive. These two programs have classical 19 00:01:17,252 --> 00:01:21,059 interactive behavior. Some underlying state is changing, the 20 00:01:21,059 --> 00:01:25,500 number in the countdown or the position of the cat. 21 00:01:25,500 --> 00:01:29,148 There's a changing image on the screen and pressing the key does something or 22 00:01:29,148 --> 00:01:32,569 perhaps clicking the mouse might do something. 23 00:01:33,700 --> 00:01:36,030 So there's two simple interactive programs. 24 00:01:36,030 --> 00:01:38,944 Now let's think about what's going on behind the scenes, starting with the 25 00:01:38,944 --> 00:01:43,072 countdown program. There's the current number in the 26 00:01:43,072 --> 00:01:45,370 countdown, which is the middle column in this table. 27 00:01:45,370 --> 00:01:47,780 It starts at ten and then it goes to nine and so on. 28 00:01:47,780 --> 00:01:51,497 And there's the currently displayed image, which is the image of the number 29 00:01:51,497 --> 00:01:54,968 of 10, the image of the number 9, and so on. 30 00:01:54,968 --> 00:02:00,734 And what's happening is that once a second, n gets decreased by one, and the 31 00:02:00,734 --> 00:02:08,320 image gets updated to be the image corresponding to the current n. 32 00:02:09,350 --> 00:02:13,185 So there's kind of this behavior of the clock ticking tick, tick, tick and each 33 00:02:13,185 --> 00:02:18,912 time an and the image are both updated. Now if we look at the cat program the 34 00:02:18,912 --> 00:02:25,332 same kind of thing just inherently has to be going on inside of it. 35 00:02:25,332 --> 00:02:29,172 In this case the changing state is the cat's exposition it starts at 0 and then 36 00:02:29,172 --> 00:02:34,684 it goes to 3 and then it goes to 6. The idea is that the cat is moving three 37 00:02:34,684 --> 00:02:38,231 units per tick. In this case the image is an image of a 38 00:02:38,231 --> 00:02:43,040 cat at that position rather than an image of the numeral. 39 00:02:43,040 --> 00:02:46,344 And in this case the ticks are also counting up, 0, 1, 2, 3, 4, but they're 40 00:02:46,344 --> 00:02:51,262 counting much faster in this case. Let's just say for now they're ticking 28 41 00:02:51,262 --> 00:02:54,743 times per second, whereas in the countdown program we wanted it to tick 42 00:02:54,743 --> 00:02:59,231 one time per second. Now, continuing with this exercise and 43 00:02:59,231 --> 00:03:02,830 thinking about what just has to inherently be inside this program, let's 44 00:03:02,830 --> 00:03:07,135 think in terms of information and data for a second. 45 00:03:07,135 --> 00:03:13,876 We've got these numbers, 0, 3, 6, that are representing the x position of the 46 00:03:13,876 --> 00:03:17,124 cat. So when we do something like that, what 47 00:03:17,124 --> 00:03:21,011 we use is a data definition. We use a data definition to tell us how 48 00:03:21,011 --> 00:03:26,040 we're going to represent domain information using data. 49 00:03:26,040 --> 00:03:29,740 So here's a data definition for that. We're going to say that cat is a number, 50 00:03:29,740 --> 00:03:34,790 and we're going to interpret that number to be the x coordinate with a cat. 51 00:03:34,790 --> 00:03:37,220 And the rest of this data defintion is fairly straightforward. 52 00:03:37,220 --> 00:03:43,220 Now it's simple atomic data. Looking back at our table, we see that at 53 00:03:43,220 --> 00:03:47,355 each clock tick. What happens is that the representation 54 00:03:47,355 --> 00:03:51,765 of the cats x-coordinate increases by it's speed each time, so it goes from 0 55 00:03:51,765 --> 00:03:56,236 to 3 to 6 to 9. So here's a function that does that for 56 00:03:56,236 --> 00:03:58,824 us. It's signature is cat to cat, so it takes 57 00:03:58,824 --> 00:04:03,411 a cat and produces at cat. And it increases that position by the 58 00:04:03,411 --> 00:04:06,880 cats speed. And there's some check expects. 59 00:04:06,880 --> 00:04:09,830 And if we look at the body of the function we can see what we expect. 60 00:04:09,830 --> 00:04:14,120 It takes the current cat, the current x-coordinate of the cat and increased it 61 00:04:14,120 --> 00:04:16,919 by speed. Going back to the table again. 62 00:04:16,919 --> 00:04:22,168 And still thinking about just what inherently had to be inside this program. 63 00:04:22,168 --> 00:04:27,586 We see that, at each clock tick, we need to produce an image based on the cat's 64 00:04:27,586 --> 00:04:33,335 current x-coordinate, that shows the actual cat. 65 00:04:33,335 --> 00:04:37,450 Farther and farther across the image of some background scene. 66 00:04:37,450 --> 00:04:41,419 In this case the background scene is white. 67 00:04:41,419 --> 00:04:46,689 So here's a function that does that. Function consumes a cat and produces an 68 00:04:46,689 --> 00:04:51,532 image. And we're using a primitive here that you 69 00:04:51,532 --> 00:04:55,846 haven't seen before called place image. But the way place image works is it takes 70 00:04:55,846 --> 00:05:00,437 an image and then it takes an x-coordinate, a y-coordinate. 71 00:05:00,437 --> 00:05:04,529 And a second image and it places the first image at the given x, y coordinate 72 00:05:04,529 --> 00:05:09,264 on the second image. So what this function's doing here is 73 00:05:09,264 --> 00:05:13,926 it's placing the image of the cat, which happens to be the value of a constant 74 00:05:13,926 --> 00:05:19,287 called cat image. At the appropriate x coordinate in the 75 00:05:19,287 --> 00:05:24,419 middle of the background image,which happens to be called MTS. 76 00:05:24,419 --> 00:05:28,707 So there's a data definition and two functions. 77 00:05:28,707 --> 00:05:33,120 One function, next cat, can take us from one cat to the next-cat. 78 00:05:33,120 --> 00:05:38,258 In other words, it can advance the cat's exposition by three each time. 79 00:05:38,258 --> 00:05:43,258 0, 3, 6, and so on. The other function can take us from a cat 80 00:05:43,258 --> 00:05:47,276 to an image of the cat. In other words, the image of the cat at 81 00:05:47,276 --> 00:05:51,490 the appropriate position on the background called MTS. 82 00:05:51,490 --> 00:05:54,703 Now we need to understand how those two functions need to dance together, in 83 00:05:54,703 --> 00:05:58,865 order for the cat to move across the screen the way we want it to. 84 00:05:58,865 --> 00:06:04,290 Suppose the cat starts at 0. We need to call render-cat to get the 85 00:06:04,290 --> 00:06:10,614 appropriate image and display that. Then we need to call next-cat with 0 to 86 00:06:10,614 --> 00:06:13,845 get 3. Then we need to call render-cat with 3 to 87 00:06:13,845 --> 00:06:19,480 get the image and display it. The next-cat with 3 to get 6. 88 00:06:19,480 --> 00:06:26,480 Then render-cat we call with 6 to get the next image, and display that. 89 00:06:26,480 --> 00:06:29,766 Then we call next-cat with 6 to get 9, then render-cat with 9 to get the image 90 00:06:29,766 --> 00:06:32,978 and display it. Next-cat with 9 to get 12, render-cat 91 00:06:32,978 --> 00:06:36,710 with 12, next-cat with 12, 15, and so on, and so on, and so on. 92 00:06:36,710 --> 00:06:41,236 And all we need to do is do that 28 times a second which I can't talk that fast. 93 00:06:41,236 --> 00:06:46,100 To do that, to wire render-cat, and next-cat together that way, Dr Ragi gives 94 00:06:46,100 --> 00:06:51,380 us a special expression called a Big-Bang Expression. 95 00:06:52,970 --> 00:06:58,090 And here's an example of how we would use big-bang, to make the cat walk. 96 00:06:58,090 --> 00:07:01,450 First argument to big-bang is an expression that evaluates to what 97 00:07:01,450 --> 00:07:06,010 big-bang calls the initial world state. The initial state of this whole 98 00:07:06,010 --> 00:07:09,716 interactive world. In this case the state of the interactive 99 00:07:09,716 --> 00:07:13,346 world is represented by the cat tight, and so we're going to give it an 100 00:07:13,346 --> 00:07:18,698 expression that produces a cat. So zero is the initial position of the 101 00:07:18,698 --> 00:07:21,615 cat. After its first argument, big-bang takes 102 00:07:21,615 --> 00:07:24,920 a number of options. And it takes so many that the way it does 103 00:07:24,920 --> 00:07:28,700 it is to take them by name, that way you can give it only the options you want to 104 00:07:28,700 --> 00:07:33,466 give it each time. The way to read this first option is, it 105 00:07:33,466 --> 00:07:37,500 says, each time the clock ticks, call the next-cat function. 106 00:07:37,500 --> 00:07:41,340 Pass it as an argument, the current state of the world and it will give you back 107 00:07:41,340 --> 00:07:46,162 the next state of the world. Because in this particular big-bang 108 00:07:46,162 --> 00:07:50,355 expression the state of the world is represented by cat. 109 00:07:50,355 --> 00:07:54,975 I've put a comment here saying that the type of the first argument to big-bang in 110 00:07:54,975 --> 00:07:59,643 this case is cat. And another comment here that says that 111 00:07:59,643 --> 00:08:05,950 the signature of the next-cat function is that is consumes cat and produces cat. 112 00:08:05,950 --> 00:08:09,245 The second option to big-bang in this case is called two draw. 113 00:08:09,245 --> 00:08:13,533 And you should read this use of true draw as saying that what big-bang's going to 114 00:08:13,533 --> 00:08:18,148 do is on each clock tick it's going to call render-cat. 115 00:08:18,148 --> 00:08:22,771 Passing render-cat as its first argument the current world state, in other words a 116 00:08:22,771 --> 00:08:26,533 cat. And render-cat will produce an image and 117 00:08:26,533 --> 00:08:31,687 big-bang will display that image. And I made a note here, off to the side, 118 00:08:31,687 --> 00:08:35,778 that the signature of render-cat is that it consumes cat and produces image. 119 00:08:35,778 --> 00:08:40,314 So, what big-bang is doing for us is, it's taking all the little pieces of our 120 00:08:40,314 --> 00:08:46,488 world, the initial world state, the tick function, the draw function. 121 00:08:46,488 --> 00:08:50,895 And it's combining all those pieces together to get a world. 122 00:08:50,895 --> 00:08:59,166 Do you see the joke behind the name now. It squeezes the pieces together, big-bang 123 00:08:59,166 --> 00:09:03,966 it produces a world. Whether you like that joke about the name 124 00:09:03,966 --> 00:09:06,209 or not that is the name I didn't come up with it. 125 00:09:08,250 --> 00:09:11,446 One other point to make about big-bang is that it's what computer scientists like 126 00:09:11,446 --> 00:09:16,490 to call polymorphic. It can work for any type of world state. 127 00:09:16,490 --> 00:09:20,443 So big-bang doesn't just work with cats, it can work for, for example, if you have 128 00:09:20,443 --> 00:09:25,315 an interactive world program that has to do with fireworks then. 129 00:09:25,315 --> 00:09:28,756 The world state could be firework. Or if you have an interactive program 130 00:09:28,756 --> 00:09:31,516 that has to do with lots of fireworks then the world state could be list of 131 00:09:31,516 --> 00:09:35,438 firework. The world state can be anything you want 132 00:09:35,438 --> 00:09:40,124 to be so actually here where we've, where we've noted cat and cat to cat and cat to 133 00:09:40,124 --> 00:09:46,100 image as far as big-bang's concerned it can be anything. 134 00:09:46,100 --> 00:09:50,920 So really it could be, X, X to X, and X to image. 135 00:09:50,920 --> 00:09:54,300 All big-bang wants is for you to give it an initial world state. 136 00:09:56,220 --> 00:09:59,076 And then for on-tick you've gotta give it a function that consumes a world state of 137 00:09:59,076 --> 00:10:01,920 that type and produces a world state of that type. 138 00:10:03,330 --> 00:10:07,685 And then for to-draw, you have to give it a function that consumes a world state of 139 00:10:07,685 --> 00:10:11,800 that type, whatever it is, and produces image. 140 00:10:13,100 --> 00:10:16,699 The key thing is, in any one use of big-bang, all the Xs have to be the same 141 00:10:16,699 --> 00:10:22,149 type, they all have to be consistent, that's what matters to big-bang. 142 00:10:22,149 --> 00:10:27,260 So, there's big-bang. It's without a doubt the most complicated 143 00:10:27,260 --> 00:10:29,600 single-primitive we're going to use this term. 144 00:10:30,800 --> 00:10:34,840 It's a user interface framework. And user interface frameworks, in other 145 00:10:34,840 --> 00:10:38,798 words tools that integrate a bunch of functionality together. 146 00:10:38,798 --> 00:10:42,684 To get an entire user interface, user interface frameworks are always somewhat 147 00:10:42,684 --> 00:10:45,759 complicated. This one is simpler than most. 148 00:10:47,360 --> 00:10:50,370 Don't worry about it, we're going to spend the whole week on it. 149 00:10:50,370 --> 00:10:54,231 You get a lot more chances at it. But the basic thing to understand is, 150 00:10:54,231 --> 00:10:58,990 this picture up here in the upper right, that's what big-bang is doing. 151 00:10:58,990 --> 00:11:01,116 It's starting with an initial world state. 152 00:11:01,116 --> 00:11:06,316 And then it's coordinating calling functions like render- cat and next-cat, 153 00:11:06,316 --> 00:11:13,650 to produce the combined behavior of the interactive program that we want to have. 154 00:11:14,770 --> 00:11:18,058 We'll also see starting in the next video that there's more options. 155 00:11:18,058 --> 00:11:21,370 So for example, big-bang has an option called on key. 156 00:11:21,370 --> 00:11:25,896 And you can imagine that the way that works is on key wants a function that it 157 00:11:25,896 --> 00:11:31,330 will call when a key is pressed on the keyboard. 158 00:11:31,330 --> 00:11:34,722 And that function should process the key properly and produce the next world 159 00:11:34,722 --> 00:11:37,712 state. What we'll also see in the next video is 160 00:11:37,712 --> 00:11:41,860 we're going to introduce a design recipe for designing interactive programs using 161 00:11:41,860 --> 00:11:45,498 big-bang. And that design recipe is going to help 162 00:11:45,498 --> 00:11:49,430 make it a lot easier to write programs that use big-bang.