1 00:00:00,000 --> 00:00:11,120 2 00:00:11,120 --> 00:00:12,590 >> SPEAKER: I'm [INAUDIBLE]. 3 00:00:12,590 --> 00:00:14,820 And I'm a senior at Leverett House. 4 00:00:14,820 --> 00:00:18,700 I study computer science, and I'm a TF for CS50. 5 00:00:18,700 --> 00:00:21,640 As a freshman, I didn't even have a laptop or a smartphone. 6 00:00:21,640 --> 00:00:23,550 I had no programming experience. 7 00:00:23,550 --> 00:00:29,690 CS50 was the most memorable course that I took at Harvard because it was 8 00:00:29,690 --> 00:00:32,960 a struggle, but it was a really fun struggle at the same time. 9 00:00:32,960 --> 00:00:37,670 And I made a lot of amazing, permanent friends, and I learned a lot of really 10 00:00:37,670 --> 00:00:38,830 applicable skills. 11 00:00:38,830 --> 00:00:43,480 I'm just so glad that I didn't let my lack of background be an excuse for me 12 00:00:43,480 --> 00:00:44,840 not take CS50. 13 00:00:44,840 --> 00:00:46,220 I'm [INAUDIBLE]. 14 00:00:46,220 --> 00:00:48,910 I'm a senior at Leverett House, class of 2014. 15 00:00:48,910 --> 00:00:51,670 And I took CS50. 16 00:00:51,670 --> 00:00:52,380 >> DAVID MALAN: So this is CS50. 17 00:00:52,380 --> 00:00:54,400 This is the end of week zero. 18 00:00:54,400 --> 00:00:58,500 And recall where we began the last time, was with these lamps, which were 19 00:00:58,500 --> 00:01:01,420 so popular that we went and bought some more today. 20 00:01:01,420 --> 00:01:03,790 So I think this will be our thing this year-- 21 00:01:03,790 --> 00:01:07,230 desk lamps if you come up on stage, at least until we run out. 22 00:01:07,230 --> 00:01:11,570 >> But we used these recall, to introduce the basics of representation of data. 23 00:01:11,570 --> 00:01:15,640 We needed way to start representing information inside of a computer. 24 00:01:15,640 --> 00:01:18,650 And the simplest way to do that was with one ingredient, electricity. 25 00:01:18,650 --> 00:01:21,760 And the simplest thing you can do with electricity is turn it on and it off. 26 00:01:21,760 --> 00:01:23,520 Let the electrons flow or not. 27 00:01:23,520 --> 00:01:27,930 And using those two basic states, off and on, or false and true, or zero and 28 00:01:27,930 --> 00:01:31,290 one, we began to see that we could build up, in this case, with light 29 00:01:31,290 --> 00:01:33,720 bulbs, more numbers than just zero and one. 30 00:01:33,720 --> 00:01:36,160 We counted as high as seven, for instance, last time. 31 00:01:36,160 --> 00:01:38,840 But all we have to do is keep throwing more and more light bulbs at that 32 00:01:38,840 --> 00:01:41,820 problem and, really, we can represent any number that we 33 00:01:41,820 --> 00:01:42,970 might possibly want. 34 00:01:42,970 --> 00:01:47,230 >> Well, we transitioned quickly then on Wednesday to this byte of volunteers. 35 00:01:47,230 --> 00:01:52,040 8 bits is what we generally call a byte, so here we had eight volunteers 36 00:01:52,040 --> 00:01:54,900 on Wednesday who collectively were representing eight bits. 37 00:01:54,900 --> 00:01:56,750 And when their hands went up, they were a one. 38 00:01:56,750 --> 00:01:58,530 And when their hands were down, there were a zero. 39 00:01:58,530 --> 00:02:01,970 And we had these folks come up on stage why? 40 00:02:01,970 --> 00:02:06,530 What we're able to do with this sequence of bits? 41 00:02:06,530 --> 00:02:07,510 >> To create an alphabet. 42 00:02:07,510 --> 00:02:11,550 We were able to build on top of that previous lesson learned and actually 43 00:02:11,550 --> 00:02:14,200 start to make more interesting information that's at least more 44 00:02:14,200 --> 00:02:15,330 familiar to us humans. 45 00:02:15,330 --> 00:02:18,360 And this is going to be a recurring theme throughout 50, but also computer 46 00:02:18,360 --> 00:02:21,470 science more generally, this idea of layering, where, at the end of the 47 00:02:21,470 --> 00:02:24,820 day, if you really started the basics with a computer, yes, 48 00:02:24,820 --> 00:02:25,760 it's zeros and ones. 49 00:02:25,760 --> 00:02:27,480 And beneath that it's just electricity. 50 00:02:27,480 --> 00:02:30,840 But we very quickly start to take those low level details for granted 51 00:02:30,840 --> 00:02:35,600 and start to layer on top of past worked done so that we, ultimately, by 52 00:02:35,600 --> 00:02:38,610 the end of the semester and, really, more generally as computer scientists 53 00:02:38,610 --> 00:02:42,790 and programmers, can do some really powerful things by leveraging work 54 00:02:42,790 --> 00:02:46,620 that we ourselves have done and also standing on the shoulders of others. 55 00:02:46,620 --> 00:02:49,300 >> Now we quickly transitioned on Wednesday from just needing to 56 00:02:49,300 --> 00:02:52,080 represent information to wanting to do something with it. 57 00:02:52,080 --> 00:02:54,170 So what did we define an algorithm as? 58 00:02:54,170 --> 00:02:57,340 59 00:02:57,340 --> 00:02:58,900 A series of instructions. 60 00:02:58,900 --> 00:03:03,380 So it's a series of instructions, a number of steps that you, a human, or 61 00:03:03,380 --> 00:03:07,160 a computer, more typically, would execute one after the other in order 62 00:03:07,160 --> 00:03:08,100 to achieve some goal. 63 00:03:08,100 --> 00:03:11,360 And we had a few goals last time, one of which was to count 64 00:03:11,360 --> 00:03:12,250 people in the room. 65 00:03:12,250 --> 00:03:15,560 And another such example was to find Mike Smith in a phone book. 66 00:03:15,560 --> 00:03:19,750 >> So you may recall that I tore a phone book in half toward this end up 67 00:03:19,750 --> 00:03:21,280 finding Mike Smith. 68 00:03:21,280 --> 00:03:24,000 The purpose of that visual was to demonstrate, again, that we were 69 00:03:24,000 --> 00:03:27,770 literally tearing this problem in half, in half, in half, and very 70 00:03:27,770 --> 00:03:31,750 quickly going from like 1,000 pages to just one single page. 71 00:03:31,750 --> 00:03:34,860 Those of you who missed this on Wednesday, I thought we'd play back 72 00:03:34,860 --> 00:03:36,820 some footage of what you missed. 73 00:03:36,820 --> 00:03:38,914 Let's take a look. 74 00:03:38,914 --> 00:03:40,906 >> [VIDEO PLAYBACK] 75 00:03:40,906 --> 00:03:55,360 76 00:03:55,360 --> 00:03:55,990 >> -There we go. 77 00:03:55,990 --> 00:04:01,432 1500 pages, Nice clean line, legitimate tear. 78 00:04:01,432 --> 00:04:02,850 >> [END VIDEO PLAYBACK] 79 00:04:02,850 --> 00:04:05,230 >> DAVID MALAN: So that was Wednesday. 80 00:04:05,230 --> 00:04:09,150 We transition, though, on Wednesday now to wanting to represent algorithms 81 00:04:09,150 --> 00:04:12,410 in some somewhat standard way, not just describing them verbally, but 82 00:04:12,410 --> 00:04:16,290 trying to express them in writing or on a computer screen so that we could 83 00:04:16,290 --> 00:04:19,170 begin to improve upon, and modify them, and, eventually, actually 84 00:04:19,170 --> 00:04:21,160 analyze just how correct or how fast they were. 85 00:04:21,160 --> 00:04:23,360 >> So we introduced this notion of pseudocode, which, in 86 00:04:23,360 --> 00:04:26,410 layman's terms, is what? 87 00:04:26,410 --> 00:04:26,930 OK, words. 88 00:04:26,930 --> 00:04:28,730 Let's go a little deeper than that. 89 00:04:28,730 --> 00:04:32,540 English, sure, are but toward what end? 90 00:04:32,540 --> 00:04:35,180 Words with which to create or to represent algorithms. 91 00:04:35,180 --> 00:04:38,380 So there's no one language known as pseudocode in the world. 92 00:04:38,380 --> 00:04:41,110 It's just that you, in English, or whatever your spoken language is, use 93 00:04:41,110 --> 00:04:44,930 a sort of cursory notation to convey an idea very succinctly. 94 00:04:44,930 --> 00:04:47,930 But we'll see that, certainly with an English pseudocode, and it turns out 95 00:04:47,930 --> 00:04:51,700 most programming languages themselves are derivative of English itself, 96 00:04:51,700 --> 00:04:55,750 we'll find that there's some standard ways of representing pseudocode and 97 00:04:55,750 --> 00:04:57,150 also programming code. 98 00:04:57,150 --> 00:05:00,200 So as you begin to see even the simplest examples today, realize these 99 00:05:00,200 --> 00:05:02,160 same patterns will recur next week. 100 00:05:02,160 --> 00:05:04,710 >> So pseudocode was some kind of language resembling 101 00:05:04,710 --> 00:05:06,170 a programming language. 102 00:05:06,170 --> 00:05:09,260 And the first example we saw visually written down was this one. 103 00:05:09,260 --> 00:05:12,870 It was only a three step program, the goal of which was to count the number 104 00:05:12,870 --> 00:05:15,650 of people in a dorm room for that video on Wednesday. 105 00:05:15,650 --> 00:05:19,040 But there were a few interesting aspects of this simplest program. 106 00:05:19,040 --> 00:05:20,320 >> And this will be recurring themes. 107 00:05:20,320 --> 00:05:22,930 So for those that are unfamiliar with this, one, we introduced a variable. 108 00:05:22,930 --> 00:05:25,650 And probably everyone in this room is familiar with a variable in the 109 00:05:25,650 --> 00:05:27,250 context of algebra. 110 00:05:27,250 --> 00:05:31,190 But here in programming, variables are, one, can be 111 00:05:31,190 --> 00:05:32,220 called anything we want. 112 00:05:32,220 --> 00:05:33,620 We've been using n as a counter. 113 00:05:33,620 --> 00:05:37,490 But we could use the word counter, or, as you'll see, most any phrase that 114 00:05:37,490 --> 00:05:40,240 you might like so long as it's descriptive, but it's really just a 115 00:05:40,240 --> 00:05:41,250 storage container. 116 00:05:41,250 --> 00:05:44,170 It's a chunk of memory, some number of bits, and it varies by computer, how 117 00:05:44,170 --> 00:05:47,020 many bits there are that compose that variable. 118 00:05:47,020 --> 00:05:48,450 >> But we can put values in it. 119 00:05:48,450 --> 00:05:50,740 Thus far, we've only put numbers. 120 00:05:50,740 --> 00:05:52,290 But we can put actual words. 121 00:05:52,290 --> 00:05:53,420 We can put paragraphs. 122 00:05:53,420 --> 00:05:54,560 We can put images-- 123 00:05:54,560 --> 00:05:57,860 anything, really, we can represent with zeros and ones, we can put in 124 00:05:57,860 --> 00:05:59,820 this higher level notion of a variable. 125 00:05:59,820 --> 00:06:01,350 >> So pretty straight forward there. 126 00:06:01,350 --> 00:06:02,210 And that's line one. 127 00:06:02,210 --> 00:06:05,340 But we very quickly moved on from line one to actually do 128 00:06:05,340 --> 00:06:06,600 something with that variable. 129 00:06:06,600 --> 00:06:10,330 And in line three, we updated N. We incremented N. And we could write this 130 00:06:10,330 --> 00:06:11,330 any number of ways. 131 00:06:11,330 --> 00:06:14,460 But perhaps the most obvious is just to say, set N equal to 132 00:06:14,460 --> 00:06:16,440 whatever N is plus 1. 133 00:06:16,440 --> 00:06:17,740 So that was our increment. 134 00:06:17,740 --> 00:06:18,740 >> Meanwhile, there was a loop. 135 00:06:18,740 --> 00:06:20,720 And this one, too, is probably pretty intuitive. 136 00:06:20,720 --> 00:06:24,250 A loop is just something in a program that happens again and again, some 137 00:06:24,250 --> 00:06:25,190 kind of cycle. 138 00:06:25,190 --> 00:06:29,300 And this key phrase here, for each, is actually very common throughout most 139 00:06:29,300 --> 00:06:32,300 programming languages, including ones we'll see in the course. 140 00:06:32,300 --> 00:06:35,850 Anytime you see the word for, it typically conveys the idea that a 141 00:06:35,850 --> 00:06:38,410 loop, something cyclical, is about to happen. 142 00:06:38,410 --> 00:06:40,980 >> But it's worth noting one other syntactic detail. 143 00:06:40,980 --> 00:06:44,660 The fact that third line there is actually indented by having hit the 144 00:06:44,660 --> 00:06:46,920 space bar few times is deliberate. 145 00:06:46,920 --> 00:06:49,870 Because human convention is such that, when you're doing something again and 146 00:06:49,870 --> 00:06:54,860 again, in a loop, as begun on line two, you indent anything that belonged 147 00:06:54,860 --> 00:06:58,880 to that loop just to make clear that it's line three and not, for instance, 148 00:06:58,880 --> 00:07:01,910 line four or five, if there were lines for or five, that are 149 00:07:01,910 --> 00:07:03,010 part of that loops. 150 00:07:03,010 --> 00:07:07,340 So this simple indentation conveys that basic idea. 151 00:07:07,340 --> 00:07:09,390 >> So we applied this algorithm, now, to a few examples. 152 00:07:09,390 --> 00:07:12,620 And this, too, simple example in the real world. 153 00:07:12,620 --> 00:07:15,440 But it's going to be representative of how you would go about testing your 154 00:07:15,440 --> 00:07:17,500 own increasingly complex programs. 155 00:07:17,500 --> 00:07:21,050 You try a few scenarios, some representatives inputs, and see if you 156 00:07:21,050 --> 00:07:22,180 get the desired outputs. 157 00:07:22,180 --> 00:07:25,090 >> So this example had two people sitting in the dorm room. 158 00:07:25,090 --> 00:07:27,170 On the left is that same pseudo code. 159 00:07:27,170 --> 00:07:30,800 And this is a screen shot of the very last step of the application of this 160 00:07:30,800 --> 00:07:35,270 algorithm to those inputs, where there were two people in the room and, 161 00:07:35,270 --> 00:07:39,190 recall, as we step through lines one, and two, and three, and two 162 00:07:39,190 --> 00:07:41,000 and three and done-- 163 00:07:41,000 --> 00:07:44,870 by the end of that algorithm, we had indeed counted the two fellows who are 164 00:07:44,870 --> 00:07:45,360 in the room. 165 00:07:45,360 --> 00:07:47,190 >> So then we tried another example. 166 00:07:47,190 --> 00:07:48,990 And we said what if there are zero people in the room? 167 00:07:48,990 --> 00:07:50,490 Is this code still correct? 168 00:07:50,490 --> 00:07:51,305 And indeed it was. 169 00:07:51,305 --> 00:07:55,240 It just so happens that line two and, thus, line three or 170 00:07:55,240 --> 00:07:56,620 not going to execute. 171 00:07:56,620 --> 00:07:59,790 They're not going to happen at all because they're just not applicable if 172 00:07:59,790 --> 00:08:01,210 there's zero people in the room. 173 00:08:01,210 --> 00:08:02,300 >> But not a big deal. 174 00:08:02,300 --> 00:08:06,620 Line one initialized N to zero, so even though only one line of this 175 00:08:06,620 --> 00:08:10,930 program actually ends up being useful, it still yields the correct answer, as 176 00:08:10,930 --> 00:08:13,780 indicated by the orange zero at the bottom. 177 00:08:13,780 --> 00:08:16,300 But then we decided that was kind of a stupid algorithm. 178 00:08:16,300 --> 00:08:17,060 It was pretty slow. 179 00:08:17,060 --> 00:08:19,720 Surely, I can do two, four, six, eight, ten, when 180 00:08:19,720 --> 00:08:20,990 counting people in a room. 181 00:08:20,990 --> 00:08:25,030 >> So we tweaked the algorithm, the pseudocode, to say, now in line two, 182 00:08:25,030 --> 00:08:29,710 for each pair of people in the room, proceed to, in line three, increment 183 00:08:29,710 --> 00:08:32,200 in by two on each iteration. 184 00:08:32,200 --> 00:08:35,530 So that would have worked here for this pair of persons in the room. 185 00:08:35,530 --> 00:08:38,530 >> But then, if you start thinking about this, and it doesn't take long to 186 00:08:38,530 --> 00:08:40,710 realize, wait a minute this is going to break, it breaks 187 00:08:40,710 --> 00:08:42,679 at what simple case? 188 00:08:42,679 --> 00:08:45,500 If there's three people in the room or, more generally, when there's an 189 00:08:45,500 --> 00:08:47,660 odd number of people in the room, including one. 190 00:08:47,660 --> 00:08:50,390 We would miss that person here because there are no such pairs. 191 00:08:50,390 --> 00:08:58,510 So we quickly addressed by instead introducing what additional 192 00:08:58,510 --> 00:09:02,560 programming constructs to the pseudo code. 193 00:09:02,560 --> 00:09:04,955 >> So a condition, we called it, or a branch. 194 00:09:04,955 --> 00:09:08,420 And it's meant to convey, visually, the idea of branch, a fork in the road 195 00:09:08,420 --> 00:09:11,080 where you can either do this or, maybe, something else. 196 00:09:11,080 --> 00:09:15,750 And indeed, we address this issue by adding line 4, by saying, really, at 197 00:09:15,750 --> 00:09:20,820 the very end, if one person remains, then go ahead and count them special. 198 00:09:20,820 --> 00:09:24,460 So you sort of special case them, so to speak, so that now we can handle 199 00:09:24,460 --> 00:09:27,810 both an even number of people and an odd number of people. 200 00:09:27,810 --> 00:09:30,260 >> Now there are any number of ways we could have expressed this. 201 00:09:30,260 --> 00:09:33,590 And frankly, I could've been even more nit picky when it came to my choice of 202 00:09:33,590 --> 00:09:35,040 English for the pseudocode. 203 00:09:35,040 --> 00:09:36,970 But at least the spirit of the idea is conveyed. 204 00:09:36,970 --> 00:09:40,725 If you handed this code to a friend who's not in CS, or has never taken 205 00:09:40,725 --> 00:09:44,560 CS, odds are they could figure out, given three people in the room, how to 206 00:09:44,560 --> 00:09:46,870 count those people based on these instructions. 207 00:09:46,870 --> 00:09:49,920 And that's all really we want to achieve with pseudocode, somehow 208 00:09:49,920 --> 00:09:54,300 standardize how we're going about representing ideas so that we can 209 00:09:54,300 --> 00:09:56,670 begin to do more complicated thing still. 210 00:09:56,670 --> 00:09:58,845 >> So that leads us then, today, to actual code. 211 00:09:58,845 --> 00:10:01,950 We begin to program today, albeit in a friendly environment. 212 00:10:01,950 --> 00:10:05,940 And then we transition very quickly to a more arcane syntax, but one that 213 00:10:05,940 --> 00:10:10,340 you'll see is fundamentally the same as the ideas will see manifested with 214 00:10:10,340 --> 00:10:11,990 this other language today. 215 00:10:11,990 --> 00:10:13,920 It's just going to look a little different. 216 00:10:13,920 --> 00:10:16,590 >> So rather than just call this code, I'm going to be a little more precise 217 00:10:16,590 --> 00:10:20,170 and say, henceforth, when writing a program, you're writing source code. 218 00:10:20,170 --> 00:10:21,990 It's kind of like pseudocode. 219 00:10:21,990 --> 00:10:26,540 But we'll see it's not sort of loose when it comes to choosing the words 220 00:10:26,540 --> 00:10:27,310 that you use. 221 00:10:27,310 --> 00:10:31,300 When programing in a language, you have to use the words, the phrases, 222 00:10:31,300 --> 00:10:36,020 the syntax, that other people have decided represent 223 00:10:36,020 --> 00:10:37,240 that particular language. 224 00:10:37,240 --> 00:10:38,510 So pseudocodes is up to you. 225 00:10:38,510 --> 00:10:42,330 An actual programming language like C, as we'll eventually see, is 226 00:10:42,330 --> 00:10:43,590 standardized by other people. 227 00:10:43,590 --> 00:10:45,590 >> So how do we go about writing some source code? 228 00:10:45,590 --> 00:10:46,810 Well I'm going to go ahead and do this. 229 00:10:46,810 --> 00:10:49,100 I'm going to go ahead and open up a window here. 230 00:10:49,100 --> 00:10:50,210 More on this next week. 231 00:10:50,210 --> 00:10:52,300 But this is a device called the CS50 appliance. 232 00:10:52,300 --> 00:10:55,480 I'm running a piece of software on my Mac, though you can do the same thing 233 00:10:55,480 --> 00:11:00,580 on a Windows computer, that is giving me the illusion running a different 234 00:11:00,580 --> 00:11:03,700 operating system altogether right here in a window on my Mac. 235 00:11:03,700 --> 00:11:06,790 I've just full screened it so you don't actually see Mac OS right now. 236 00:11:06,790 --> 00:11:08,340 >> This is an operating system called Linux. 237 00:11:08,340 --> 00:11:09,300 It's very popular. 238 00:11:09,300 --> 00:11:10,120 It's very fast. 239 00:11:10,120 --> 00:11:12,950 It's very free, which has made it very compelling, especially in the 240 00:11:12,950 --> 00:11:13,970 commercial world. 241 00:11:13,970 --> 00:11:17,200 And more on that toward the end of the semester when we use Linux quite a bit 242 00:11:17,200 --> 00:11:21,230 for web programming and hosting of actual websites and projects. 243 00:11:21,230 --> 00:11:24,910 So now, just know that this is a desktop that's meant to look vaguely 244 00:11:24,910 --> 00:11:26,750 familiar to Windows and Mac OS. 245 00:11:26,750 --> 00:11:29,110 It just has some different names and icons for things. 246 00:11:29,110 --> 00:11:32,510 But this is the so-called CS50 appliance, a virtual machine that, 247 00:11:32,510 --> 00:11:35,310 starting next week, you guys will run inside of a window on 248 00:11:35,310 --> 00:11:36,960 your own Mac or PC. 249 00:11:36,960 --> 00:11:39,760 >> For today, I'm going to open up the simplest of programs. 250 00:11:39,760 --> 00:11:41,110 It's called gedit. 251 00:11:41,110 --> 00:11:42,565 And this is just a graphical editor. 252 00:11:42,565 --> 00:11:44,695 It's kind of like Microsoft Word, but simpler. 253 00:11:44,695 --> 00:11:47,110 It's kind of like text edit or notepad. 254 00:11:47,110 --> 00:11:50,280 It's just a very simple program with which to write words on the screen. 255 00:11:50,280 --> 00:11:54,510 It just so what happens that if I save files that I create when this program 256 00:11:54,510 --> 00:11:59,860 in a special extension like .c, instead of .doc, or .xls, or whatever 257 00:11:59,860 --> 00:12:04,190 you're familiar with, I can actually create programs using even this simple 258 00:12:04,190 --> 00:12:05,130 text editor. 259 00:12:05,130 --> 00:12:05,770 >> So let me do that. 260 00:12:05,770 --> 00:12:09,330 Let me go ahead and save this file first as hello.c. 261 00:12:09,330 --> 00:12:12,350 And again, this user interface will become familiar to you quickly. 262 00:12:12,350 --> 00:12:14,160 But for now, I'm just typing in a file name. 263 00:12:14,160 --> 00:12:17,410 I'm going to save it into my John Harvard home directory. 264 00:12:17,410 --> 00:12:20,810 And now I have this tab that indicates I'm indeed editing 265 00:12:20,810 --> 00:12:23,070 a file called hello.c. 266 00:12:23,070 --> 00:12:24,510 So nothing too interesting yet. 267 00:12:24,510 --> 00:12:26,000 >> And now it's going to get pretty cryptic. 268 00:12:26,000 --> 00:12:28,370 I'm going to zoom in, just so it's more visible. 269 00:12:28,370 --> 00:12:35,780 And I'm going to start typing include stdio.h, int main, void, open curly 270 00:12:35,780 --> 00:12:40,140 brace, one, two, three, four spaces of indentation, print f, for print 271 00:12:40,140 --> 00:12:44,450 something formatted, quote unquote, "hello, world" backslash, n, close 272 00:12:44,450 --> 00:12:49,640 quote, closed parenthesis, semicolon, enter backspace, backspace, backspace, 273 00:12:49,640 --> 00:12:52,310 backspace, closed curly brace-- 274 00:12:52,310 --> 00:12:53,350 I have programmed. 275 00:12:53,350 --> 00:12:57,380 >> All right so this is a super simple program, really, the program that 276 00:12:57,380 --> 00:12:59,070 anyone starts off programming with. 277 00:12:59,070 --> 00:13:02,300 And all it does, for all its complexity, is print out on the 278 00:13:02,300 --> 00:13:04,160 screen, guess what? 279 00:13:04,160 --> 00:13:04,910 Hello world. 280 00:13:04,910 --> 00:13:07,500 But it's not sufficient just to write a program. 281 00:13:07,500 --> 00:13:08,155 So this is code. 282 00:13:08,155 --> 00:13:11,300 This is source code in a language called c. 283 00:13:11,300 --> 00:13:14,380 It's saved currently in a file called hello.c. 284 00:13:14,380 --> 00:13:16,180 >> Now look at the bottom of the screen here. 285 00:13:16,180 --> 00:13:17,890 More on this, again, in the weeks to come. 286 00:13:17,890 --> 00:13:19,570 But this is what we'll call a terminal window. 287 00:13:19,570 --> 00:13:21,290 It's a blinking, black and white prompt. 288 00:13:21,290 --> 00:13:24,390 It's sort of an old school interface to a computer that generally doesn't 289 00:13:24,390 --> 00:13:27,050 use a mouse or other graphical elements. 290 00:13:27,050 --> 00:13:28,320 It just uses your keyboard. 291 00:13:28,320 --> 00:13:30,970 And I can type commands at this blinking prompt. 292 00:13:30,970 --> 00:13:33,820 >> And for today's purposes, I'm just going to type the following-- 293 00:13:33,820 --> 00:13:35,610 make hello. 294 00:13:35,610 --> 00:13:39,370 And that program, make, is just a program that, in the real world these 295 00:13:39,370 --> 00:13:40,690 days, we would double click on. 296 00:13:40,690 --> 00:13:44,580 But in this interface for today, we're going to type its name at this prompt. 297 00:13:44,580 --> 00:13:47,980 make hello is literally going to make me a program called hello. 298 00:13:47,980 --> 00:13:51,360 And it's going to do so by looking for a file, just by 299 00:13:51,360 --> 00:13:53,460 default, called hello.c. 300 00:13:53,460 --> 00:13:57,260 It's going to assume I want a C program by nature of how this computer 301 00:13:57,260 --> 00:13:58,230 is configured. 302 00:13:58,230 --> 00:13:59,550 >> So I go ahead and hit enter. 303 00:13:59,550 --> 00:14:02,050 I see some cryptic output, but this will become all too 304 00:14:02,050 --> 00:14:03,330 familiar before long. 305 00:14:03,330 --> 00:14:06,870 This happened to run a compiler, more on that in a moment, called Clang. 306 00:14:06,870 --> 00:14:09,080 But now, I've got just another blinking prompt. 307 00:14:09,080 --> 00:14:13,060 And I can go ahead now and type dot slash, for uninteresting reasons we'll 308 00:14:13,060 --> 00:14:14,730 come back to next week-- 309 00:14:14,730 --> 00:14:15,910 hello. 310 00:14:15,910 --> 00:14:19,650 >> So all of this effort thus far just to write the simplest of programs that, 311 00:14:19,650 --> 00:14:22,640 as soon as I hit Enter, does that. 312 00:14:22,640 --> 00:14:24,510 So I've written my first program. 313 00:14:24,510 --> 00:14:27,500 So I'm deliberately poking fun at this very simple program 314 00:14:27,500 --> 00:14:28,540 for a couple of reasons. 315 00:14:28,540 --> 00:14:31,990 One, it's hard to get excited about taking a class if 316 00:14:31,990 --> 00:14:33,430 this is the end game. 317 00:14:33,430 --> 00:14:37,100 >> But more than that, there's a lot of distractions up here. 318 00:14:37,100 --> 00:14:40,640 The first time you learn to program, for those of you less comfortable, and 319 00:14:40,640 --> 00:14:43,410 even I, back in the day, when I first saw something like this-- you can kind 320 00:14:43,410 --> 00:14:46,500 of figure that, all right, this is in a print hello world. 321 00:14:46,500 --> 00:14:47,860 But there's so much distraction. 322 00:14:47,860 --> 00:14:52,110 There's so much syntax on the screen that it gets in the way of very 323 00:14:52,110 --> 00:14:54,170 simple, otherwise simple, ideas. 324 00:14:54,170 --> 00:14:56,700 >> So what we're going to do today is we're going to put aside C and come 325 00:14:56,700 --> 00:14:57,630 back to that on Monday. 326 00:14:57,630 --> 00:15:00,860 And we're going to use a graphical programming language called Scratch. 327 00:15:00,860 --> 00:15:04,470 This is a programming language, that I alluded to on Wednesday, that's going 328 00:15:04,470 --> 00:15:08,870 to allow us to do the same kind of stuff but turn a blind eye, for today, 329 00:15:08,870 --> 00:15:12,270 to the curly braces, the parentheses, the semicolons, and all these stupid 330 00:15:12,270 --> 00:15:15,680 distractions that get in the way, in this first day, of some basic, pretty 331 00:15:15,680 --> 00:15:17,230 interesting ideas. 332 00:15:17,230 --> 00:15:21,350 >> So toward that end, I'm going to go back to my desktop over here and 333 00:15:21,350 --> 00:15:25,890 introduce you to the alternative to that program, which is going to look a 334 00:15:25,890 --> 00:15:30,790 little something light this. 335 00:15:30,790 --> 00:15:33,930 That's how we're going to implement that same program today-- two puzzle 336 00:15:33,930 --> 00:15:37,710 pieces that, when interlocked and clicked on, will say to the world, 337 00:15:37,710 --> 00:15:39,000 hello world. 338 00:15:39,000 --> 00:15:41,200 >> So let's actually go there. 339 00:15:41,200 --> 00:15:44,965 So I'm going to go ahead and open a website known as scratch.mit.edu. 340 00:15:44,965 --> 00:15:47,980 341 00:15:47,980 --> 00:15:52,040 And this will lead me to this website here. 342 00:15:52,040 --> 00:15:54,660 In advance, I've logged into this website and the first problems that 343 00:15:54,660 --> 00:15:55,910 will walk you through some of these steps. 344 00:15:55,910 --> 00:15:58,930 I'm going to go ahead and click on my scratch folder here. 345 00:15:58,930 --> 00:16:00,720 >> And this is going to show me some projects that I've 346 00:16:00,720 --> 00:16:02,570 actually created in advance. 347 00:16:02,570 --> 00:16:05,860 And it turns out that this graphical programming language not only is going 348 00:16:05,860 --> 00:16:08,480 to let us program by dragging and dropping these puzzle pieces, you 349 00:16:08,480 --> 00:16:09,730 don't even need special software. 350 00:16:09,730 --> 00:16:13,190 It's all embedded within a browser so that you can do this, in theory, on 351 00:16:13,190 --> 00:16:16,810 your computers right now, as some of you may well be, without even needing 352 00:16:16,810 --> 00:16:19,870 software like the CS50 appliance, which will come next week. 353 00:16:19,870 --> 00:16:24,200 >> So I'm going to go up to the top corner here and click on Create. 354 00:16:24,200 --> 00:16:27,840 And in a moment I'm going to get a blank screen via which I can start 355 00:16:27,840 --> 00:16:30,380 programming in this graphical programming environment. 356 00:16:30,380 --> 00:16:36,140 But this time, it's going to be much, much simpler to actually do so. 357 00:16:36,140 --> 00:16:41,560 So in just a moment, when the Wi-Fi cooperates, we now have this screen. 358 00:16:41,560 --> 00:16:44,870 So a quick verbal tour, but I dare say, certainly when you dive into the 359 00:16:44,870 --> 00:16:46,840 first problem set, you'll find this all very 360 00:16:46,840 --> 00:16:48,315 accessible and fairly intuitive. 361 00:16:48,315 --> 00:16:50,900 But let's paint a mental picture for just a moment. 362 00:16:50,900 --> 00:16:54,620 >> So beneath this prompt saying save changes, you're about to see scratch. 363 00:16:54,620 --> 00:16:55,570 This is a sprite. 364 00:16:55,570 --> 00:16:56,630 It's a character. 365 00:16:56,630 --> 00:17:00,740 And he lives on what we'll call a stage, this big white rectangle on 366 00:17:00,740 --> 00:17:03,120 which he can move up, down, left, right, and do, really, 367 00:17:03,120 --> 00:17:04,670 other types of actions. 368 00:17:04,670 --> 00:17:08,780 >> Meanwhile, in the middle of this user interface, we have a whole bunch of 369 00:17:08,780 --> 00:17:09,750 puzzle pieces. 370 00:17:09,750 --> 00:17:14,060 And you'll see that they say things like move 10 steps, turned 15 degrees, 371 00:17:14,060 --> 00:17:15,550 point in a certain direction. 372 00:17:15,550 --> 00:17:17,910 But there's categories of blocks up here too. 373 00:17:17,910 --> 00:17:21,410 So if I go to Looks, you'll see that there's other puzzle pieces that 374 00:17:21,410 --> 00:17:25,530 apparently will tell this cit to say hello, to think, to show 375 00:17:25,530 --> 00:17:26,780 himself, hide himself. 376 00:17:26,780 --> 00:17:30,830 If I go down to Sounds, it turns out there's ways to play sounds like meow, 377 00:17:30,830 --> 00:17:32,670 to stop all sounds, to play a drum. 378 00:17:32,670 --> 00:17:36,530 >> So, long story short, there's a whole bunch of puzzle pieces that allow you 379 00:17:36,530 --> 00:17:40,920 to tell this cat, or any number of other characters, what to do. 380 00:17:40,920 --> 00:17:43,850 But to make this all happen you need to start programming. 381 00:17:43,850 --> 00:17:48,090 And this big white box, or grey box, on the right hand side, this is where 382 00:17:48,090 --> 00:17:50,170 I'm going to actually drag and drop those puzzle pieces. 383 00:17:50,170 --> 00:17:54,320 That is my blank text window equivalent. 384 00:17:54,320 --> 00:17:57,070 >> So I'm going to go ahead and click Control in the middle. 385 00:17:57,070 --> 00:17:58,540 Or rather, let me start up under Events. 386 00:17:58,540 --> 00:18:01,530 Under Events bench, you'll notice a few things that are deliberately 387 00:18:01,530 --> 00:18:05,240 curved on the top in such a way that they probably don't interlock on the 388 00:18:05,240 --> 00:18:06,710 top of the puzzle pieces. 389 00:18:06,710 --> 00:18:10,160 And that's because they demark the start of a program, the start of a 390 00:18:10,160 --> 00:18:11,910 script, so to speak. 391 00:18:11,910 --> 00:18:16,290 So if I go ahead and drag, when green flag clicked over here, and then I 392 00:18:16,290 --> 00:18:18,060 want this cat to say something at first. 393 00:18:18,060 --> 00:18:20,510 So I'm going to go under the looks panel. 394 00:18:20,510 --> 00:18:24,060 And I'm going to go ahead and grab the say hello block, and drag, and drop, 395 00:18:24,060 --> 00:18:27,220 and let go so that it automatically interlocks there. 396 00:18:27,220 --> 00:18:28,640 >> And then notice I can click on the text. 397 00:18:28,640 --> 00:18:31,960 And I can override it to be more specific like, say, hello world. 398 00:18:31,960 --> 00:18:36,340 And now we have the program that I claim is equivalent to that much more 399 00:18:36,340 --> 00:18:39,670 arcane program I implemented in C a moment ago. 400 00:18:39,670 --> 00:18:43,130 >> If I go over now to the left hand side, notice there's a big stop sign 401 00:18:43,130 --> 00:18:44,520 and a big green flag. 402 00:18:44,520 --> 00:18:46,390 Let me zoom in for clarity. 403 00:18:46,390 --> 00:18:49,390 And when I now click this green flag, you can probably guess what this first 404 00:18:49,390 --> 00:18:51,920 program is now going to do. 405 00:18:51,920 --> 00:18:55,420 So there, too, we're programming, but we're not actually getting bogged down 406 00:18:55,420 --> 00:18:58,980 in some of those syntactic, minute details. 407 00:18:58,980 --> 00:19:01,120 >> But let's try something a little more interesting. 408 00:19:01,120 --> 00:19:04,840 Let me go into my Scratch folder here. 409 00:19:04,840 --> 00:19:10,210 And actually, let me so let me open up a separate program here for just a 410 00:19:10,210 --> 00:19:17,830 moment, Maximize this window, File Open, and I'm going to go into today's 411 00:19:17,830 --> 00:19:18,620 source directory. 412 00:19:18,620 --> 00:19:21,660 As always, you'll find, today and onward, that all of today's examples 413 00:19:21,660 --> 00:19:25,225 are accessible inside of the course's website. 414 00:19:25,225 --> 00:19:31,170 >> And I'm going to go ahead here and pick up a little something different. 415 00:19:31,170 --> 00:19:33,970 This one here, for which I need a volunteer. 416 00:19:33,970 --> 00:19:36,850 Who would like a desk lamp today? 417 00:19:36,850 --> 00:19:40,600 OK, how about someone a little-- are you on the end? 418 00:19:40,600 --> 00:19:42,124 Come on down. 419 00:19:42,124 --> 00:19:47,230 Now, would you like to participate, or just say start with the desk lamp? 420 00:19:47,230 --> 00:19:48,190 >> VANESSA: [INAUDIBLE]. 421 00:19:48,190 --> 00:19:48,465 >> DAVID MALAN: OK. 422 00:19:48,465 --> 00:19:49,610 Excellent, what's you name? 423 00:19:49,610 --> 00:19:49,990 Vanessa? 424 00:19:49,990 --> 00:19:50,570 David. 425 00:19:50,570 --> 00:19:51,390 Nice to meet you. 426 00:19:51,390 --> 00:19:53,840 So come on up and Vanessa's going to take control of my 427 00:19:53,840 --> 00:19:55,490 keyboard for just a moment. 428 00:19:55,490 --> 00:19:57,850 And what I've done here, just for time's sake, as I've realized the 429 00:19:57,850 --> 00:20:01,070 Wi-Fi was a bit slow, Scratch, the programming environment that we're 430 00:20:01,070 --> 00:20:04,110 using, can also be downloaded and run on your local computer. 431 00:20:04,110 --> 00:20:06,360 So what I did in advance of lecture, in case that happens, is I downloaded 432 00:20:06,360 --> 00:20:09,120 all the files we're about to play with so that they can run a little more 433 00:20:09,120 --> 00:20:10,840 quickly right here on my laptop. 434 00:20:10,840 --> 00:20:13,460 So that's why now I'm seeing a Mac-specific interface. 435 00:20:13,460 --> 00:20:15,510 >> So I'm going to go ahead and open up this one. 436 00:20:15,510 --> 00:20:18,400 I'm going to go ahead now and full screen the window. 437 00:20:18,400 --> 00:20:21,740 And as you'll see, we can very quickly, as this student did, one of 438 00:20:21,740 --> 00:20:26,360 your predecessors, go from hello world to a much much more compelling 439 00:20:26,360 --> 00:20:27,020 application. 440 00:20:27,020 --> 00:20:28,180 So here are the instructions. 441 00:20:28,180 --> 00:20:29,500 Oh, and we have one other thing. 442 00:20:29,500 --> 00:20:31,640 I thought it would be fun, since, normally, we'll be filming 443 00:20:31,640 --> 00:20:32,440 cameras this way. 444 00:20:32,440 --> 00:20:34,100 I thought it would be fun if, Vanessa, we could see the world 445 00:20:34,100 --> 00:20:35,120 through your eyes. 446 00:20:35,120 --> 00:20:36,670 So here we have some Google Glass. 447 00:20:36,670 --> 00:20:39,290 >> [ASTONISHED GASPS] 448 00:20:39,290 --> 00:20:41,610 >> DAVID MALAN: We will only be giving away desk lamps today. 449 00:20:41,610 --> 00:20:43,530 >> [LAUGHTER] 450 00:20:43,530 --> 00:20:45,260 >> So let me cue this up. 451 00:20:45,260 --> 00:20:49,340 All right, so touch this. 452 00:20:49,340 --> 00:20:51,910 OK, Glass, record a video. 453 00:20:51,910 --> 00:20:55,700 454 00:20:55,700 --> 00:20:56,950 All right, Vanessa? 455 00:20:56,950 --> 00:21:00,940 456 00:21:00,940 --> 00:21:05,560 Now, as an aside that has got nothing to do with Scratch, if you look 457 00:21:05,560 --> 00:21:08,540 slightly up and to the right, you'll see the literal glass, and you should 458 00:21:08,540 --> 00:21:09,650 see a little rectangular window. 459 00:21:09,650 --> 00:21:11,500 You should see all your classmates being filmed right now? 460 00:21:11,500 --> 00:21:11,840 Yes. 461 00:21:11,840 --> 00:21:12,340 >> VANESSA: Yes. 462 00:21:12,340 --> 00:21:12,920 >> DAVID MALAN: OK. 463 00:21:12,920 --> 00:21:15,170 So that's fine. 464 00:21:15,170 --> 00:21:16,660 We'll release this footage later. 465 00:21:16,660 --> 00:21:18,460 For now, turn your attention to the screen here. 466 00:21:18,460 --> 00:21:20,990 And what your predecessor has done is put some instructions on the screen 467 00:21:20,990 --> 00:21:22,670 just by using a paint program. 468 00:21:22,670 --> 00:21:25,040 So you're going to, in a moment, press the space bar to begin. 469 00:21:25,040 --> 00:21:27,790 And then some puzzle pieces are going to start moving up the screen. 470 00:21:27,790 --> 00:21:30,900 And you want to hit the arrow keys, just like in real DDR, in accordance 471 00:21:30,900 --> 00:21:32,740 with things lining up with those arrows. 472 00:21:32,740 --> 00:21:33,020 >> VANESSA: OK. 473 00:21:33,020 --> 00:21:33,800 >> DAVID MALAN: You've play this before. 474 00:21:33,800 --> 00:21:34,140 >> VANESSA: Yeah. 475 00:21:34,140 --> 00:21:37,330 >> DAVID MALAN: All right, Vanessa, go ahead and take it away. 476 00:21:37,330 --> 00:22:53,082 >> [MUSIC - KAYNE WEST, "STRONGER"] 477 00:22:53,082 --> 00:22:57,080 >> [APPLAUSE] 478 00:22:57,080 --> 00:22:59,750 >> DAVID MALAN: So let's now take a step from that. 479 00:22:59,750 --> 00:23:01,230 So clearly, that's the end game. 480 00:23:01,230 --> 00:23:02,880 The end game is not hello world. 481 00:23:02,880 --> 00:23:05,520 But you don't have to necessarily do things that are so interactive. 482 00:23:05,520 --> 00:23:06,810 You can also do animation. 483 00:23:06,810 --> 00:23:10,790 So for instance, another one of your successors made this program here, 484 00:23:10,790 --> 00:23:14,100 which tells a story more than it does implemented a game. 485 00:23:14,100 --> 00:23:19,180 So let me go ahead and open up here a program in our same source directory 486 00:23:19,180 --> 00:23:20,300 from today. 487 00:23:20,300 --> 00:23:26,990 This one call, and let's start with, a cookie love story. 488 00:23:26,990 --> 00:23:30,750 >> And not to make this too academic, but, as you watch this one, think to 489 00:23:30,750 --> 00:23:34,030 yourself which of those simple programming concepts we've talked 490 00:23:34,030 --> 00:23:34,630 about thus far-- 491 00:23:34,630 --> 00:23:39,250 variables, and loops, and conditions, did your predecessor probably use just 492 00:23:39,250 --> 00:23:41,090 to implement some of the visualizations. 493 00:23:41,090 --> 00:23:41,760 You see here. 494 00:23:41,760 --> 00:23:44,118 So I give you A cookie love story. 495 00:23:44,118 --> 00:24:06,030 >> [MUSIC - GREEN DAY, "HOLIDAY"] 496 00:24:06,030 --> 00:24:08,022 >> [CRASH] 497 00:24:08,022 --> 00:24:09,272 >> [MUSIC - THE TURTLES, "HAPPY TOGETHER"] 498 00:24:09,272 --> 00:24:58,328 499 00:24:58,328 --> 00:25:00,560 >> DAVID MALAN: All right, so there, we had a cookie love story. 500 00:25:00,560 --> 00:25:01,360 But even there-- 501 00:25:01,360 --> 00:25:01,755 >> [APPLAUSE] 502 00:25:01,755 --> 00:25:08,110 >> DAVID MALAN: All right, even there, think about, as those hearts went from 503 00:25:08,110 --> 00:25:10,410 the bottom to the top of the screen, there was actually a bit of 504 00:25:10,410 --> 00:25:11,440 randomness going on. 505 00:25:11,440 --> 00:25:14,150 And indeed, we'll see that even in the simplest of environments, like 506 00:25:14,150 --> 00:25:18,180 Scratch, as in C, you can generate random numbers, or the illusion of 507 00:25:18,180 --> 00:25:21,110 random numbers, so that the game is a little more interesting than it might 508 00:25:21,110 --> 00:25:23,390 be if you had absolutely hard coded everything. 509 00:25:23,390 --> 00:25:26,360 >> In the movement that you see, there there's some kind of responsiveness. 510 00:25:26,360 --> 00:25:28,840 As soon as the gingerbread man touches the gingerbread woman, she 511 00:25:28,840 --> 00:25:30,000 seems to move away. 512 00:25:30,000 --> 00:25:33,580 And so, indeed, you can implement, in most programming languages, the notion 513 00:25:33,580 --> 00:25:38,680 of events, whereby if one hand touches the other hand, that can trigger some 514 00:25:38,680 --> 00:25:41,270 of your source code to actually execute. 515 00:25:41,270 --> 00:25:43,740 You can listen for such things on the screen. 516 00:25:43,740 --> 00:25:47,310 >> So let's take a quick tour, then, of some of the building blocks we can use 517 00:25:47,310 --> 00:25:48,790 to achieve some of these goals. 518 00:25:48,790 --> 00:25:51,630 So here's what we'll henceforth call a statement. 519 00:25:51,630 --> 00:25:55,030 A statement happens to be purple in Scratch, a little something like this, 520 00:25:55,030 --> 00:25:56,120 but that's arbitrary. 521 00:25:56,120 --> 00:26:00,140 A statement is just a puzzle piece or, more generally, an instruction, that 522 00:26:00,140 --> 00:26:03,370 tells the computer to do something, a statement. 523 00:26:03,370 --> 00:26:04,680 >> So here's a simple sample. 524 00:26:04,680 --> 00:26:05,930 Say hello world. 525 00:26:05,930 --> 00:26:08,180 Another one might be wait one second. 526 00:26:08,180 --> 00:26:10,840 So this puzzle piece, which is supported in Scratch, we'll let your 527 00:26:10,840 --> 00:26:13,050 characters pause for some number of seconds. 528 00:26:13,050 --> 00:26:15,330 This, too, is just a statement. 529 00:26:15,330 --> 00:26:18,640 >> Here next, we have another more interesting one, play sound meow, and 530 00:26:18,640 --> 00:26:21,480 the little arrow means that in Scratch, this is a drop down menu. 531 00:26:21,480 --> 00:26:22,590 So you can import sounds. 532 00:26:22,590 --> 00:26:25,095 You can record sounds and do other fun things in Scratch. 533 00:26:25,095 --> 00:26:28,450 And that, too, though, at the end of the day, is just a statement. 534 00:26:28,450 --> 00:26:31,250 But now let's introduce a more interesting piece, that known as a 535 00:26:31,250 --> 00:26:32,630 Boolean expression. 536 00:26:32,630 --> 00:26:35,180 Capital B, named after a fellow named Bool. 537 00:26:35,180 --> 00:26:39,500 >> And a Boolean expression is just a puzzle piece or, more generally, a 538 00:26:39,500 --> 00:26:42,980 piece of information that is either true or false-- 539 00:26:42,980 --> 00:26:45,830 one or zero, yes or no. 540 00:26:45,830 --> 00:26:48,420 So it's just one of those two opposites. 541 00:26:48,420 --> 00:26:52,840 So one such Boolean expression in the world of Scratch looks like this blue 542 00:26:52,840 --> 00:26:53,560 puzzle piece. 543 00:26:53,560 --> 00:26:56,735 And it's asking a question, mouse down, and that can either be, of 544 00:26:56,735 --> 00:26:58,430 course, true or false. 545 00:26:58,430 --> 00:27:01,710 So with this puzzle piece in Scratch, well, you'll be able to detect if a 546 00:27:01,710 --> 00:27:05,490 puzzle if the mouse is, in fact, being held down by the human interacting 547 00:27:05,490 --> 00:27:06,550 with your program. 548 00:27:06,550 --> 00:27:08,860 >> This one's a little more abstract, but those two white boxes 549 00:27:08,860 --> 00:27:09,740 are just for numbers. 550 00:27:09,740 --> 00:27:12,950 So you can do things like is this number less than the other? 551 00:27:12,950 --> 00:27:16,180 And if so, Scratch will behave one way or the other. 552 00:27:16,180 --> 00:27:17,505 This one's a little more graphical. 553 00:27:17,505 --> 00:27:21,840 It's if the sprite, if the cat, for instance, is actually touching the 554 00:27:21,840 --> 00:27:22,510 mouse pointer. 555 00:27:22,510 --> 00:27:25,780 So if the little arrow head is hovering over the cat, then this 556 00:27:25,780 --> 00:27:28,030 puzzle piece will evaluate to true. 557 00:27:28,030 --> 00:27:31,870 It will be true, in which case, if you use this Boolean expression, as we'll 558 00:27:31,870 --> 00:27:36,340 see in a moment, in a branch, you can either do this, or you can do that, 559 00:27:36,340 --> 00:27:39,940 much like we had a condition that checked, is there one more last person 560 00:27:39,940 --> 00:27:40,460 in the room? 561 00:27:40,460 --> 00:27:42,070 If so, add one. 562 00:27:42,070 --> 00:27:44,430 Otherwise, don't worry further. 563 00:27:44,430 --> 00:27:48,650 >> So a Boolean expression can also be and-ed together or or-ed together. 564 00:27:48,650 --> 00:27:53,120 So you can combine Boolean expressions and say this and this must be true for 565 00:27:53,120 --> 00:27:54,710 the whole thing to be true. 566 00:27:54,710 --> 00:27:56,520 And here is a more real world example. 567 00:27:56,520 --> 00:28:00,060 If you've used CS50 Courses to do course shopping, these check boxes 568 00:28:00,060 --> 00:28:03,520 there, where if you check that box next to courses, that will say, yes, 569 00:28:03,520 --> 00:28:07,860 only show me courses for which the Q value is 4.5 or higher. 570 00:28:07,860 --> 00:28:10,610 If you uncheck it, no, don't worry about that. 571 00:28:10,610 --> 00:28:13,910 Or similarly, on the right, Doesn't Conflict With Courses I'm Taking, 572 00:28:13,910 --> 00:28:15,650 that's either true or false. 573 00:28:15,650 --> 00:28:16,715 It's just a Boolean expression. 574 00:28:16,715 --> 00:28:20,080 So all this time when you've used websites with check boxes, you're just 575 00:28:20,080 --> 00:28:23,570 toggling the equivalent of a Boolean expression on and off. 576 00:28:23,570 --> 00:28:25,270 >> So in what form do you use these? 577 00:28:25,270 --> 00:28:28,820 Well, in Scratch, we'll see in a moment that there are conditions that 578 00:28:28,820 --> 00:28:29,560 look like this. 579 00:28:29,560 --> 00:28:33,130 And that's kind of sensible because much like in pseudocode, we indented 580 00:28:33,130 --> 00:28:38,550 the sort of U-shaped puzzle pieces, mean that anything inside of that U is 581 00:28:38,550 --> 00:28:41,390 going to execute, or not, depending on where it is. 582 00:28:41,390 --> 00:28:45,310 So if Boolean expression, then whatever's inside will get executed. 583 00:28:45,310 --> 00:28:46,800 >> Meanwhile, there's an if/else block. 584 00:28:46,800 --> 00:28:50,320 So if you want a branch that goes this way or that, Scratch gives us that. 585 00:28:50,320 --> 00:28:54,500 And by this logic, now, even though that puzzle piece is clearly too small 586 00:28:54,500 --> 00:28:57,400 to wedge something else inside of it, the scratch puzzle pieces, they're 587 00:28:57,400 --> 00:28:58,150 just going to grow. 588 00:28:58,150 --> 00:29:01,370 When you drag and drop over something, it will just grow to fit whatever it 589 00:29:01,370 --> 00:29:02,510 is you're trying to do. 590 00:29:02,510 --> 00:29:07,230 >> So we can take two of these things and make a three way fork in the road so 591 00:29:07,230 --> 00:29:11,300 that you either do this, or that, or this other thing just by nesting them 592 00:29:11,300 --> 00:29:12,070 in that way. 593 00:29:12,070 --> 00:29:14,370 Of course, if you do that too much, it starts to get ugly. 594 00:29:14,370 --> 00:29:17,660 But at that point, you're actually probably not programming very well. 595 00:29:17,660 --> 00:29:20,490 And so that will be recurring theme, too, that of style. 596 00:29:20,490 --> 00:29:22,790 Just how well do actually format your code? 597 00:29:22,790 --> 00:29:24,580 Or how well do you design your code? 598 00:29:24,580 --> 00:29:26,430 But more on that in the future. 599 00:29:26,430 --> 00:29:27,470 >> And now we have loops. 600 00:29:27,470 --> 00:29:30,310 There's a nice forever loop in Scratch which literally means that-- do 601 00:29:30,310 --> 00:29:32,710 whatever's inside of this again, and again, and again. 602 00:29:32,710 --> 00:29:35,880 You can be more concrete and say, do the following thing 10 times. 603 00:29:35,880 --> 00:29:37,620 You can also use variables. 604 00:29:37,620 --> 00:29:40,260 You can come up with any name in that little drop down and say, give me a 605 00:29:40,260 --> 00:29:43,190 variable called n and set it equal to some value. 606 00:29:43,190 --> 00:29:44,910 And then you can have functions. 607 00:29:44,910 --> 00:29:46,850 But more on those in just a moment. 608 00:29:46,850 --> 00:29:49,140 >> Let me go back to my Scratch interface. 609 00:29:49,140 --> 00:29:50,970 And let me go ahead this time. 610 00:29:50,970 --> 00:29:56,660 And let's go ahead and open up, let's say, an example from-- 611 00:29:56,660 --> 00:29:58,740 that's a little more interesting. 612 00:29:58,740 --> 00:30:00,750 Let me go ahead, and, actually, let me just make it myself. 613 00:30:00,750 --> 00:30:01,960 I don't need to open this one. 614 00:30:01,960 --> 00:30:03,390 Let me go to File, New. 615 00:30:03,390 --> 00:30:04,740 I'm going to go to Events. 616 00:30:04,740 --> 00:30:08,460 I'm going to go to when green flag clicked, and I'm going to go to Sound. 617 00:30:08,460 --> 00:30:11,590 And I'm going to drag and drop this puzzle piece, play sound meow. 618 00:30:11,590 --> 00:30:12,580 It latches together. 619 00:30:12,580 --> 00:30:14,327 And now, if I click the green flag-- 620 00:30:14,327 --> 00:30:16,260 >> [MEOW SOUND] 621 00:30:16,260 --> 00:30:17,500 >> DAVID MALAN: Adorable. 622 00:30:17,500 --> 00:30:21,560 OK, so now let's do something a little more logical just to demonstrate that 623 00:30:21,560 --> 00:30:22,760 we can, for now. 624 00:30:22,760 --> 00:30:25,550 I'm going to unlatch this from that guy. 625 00:30:25,550 --> 00:30:27,000 I'm going to go to Control. 626 00:30:27,000 --> 00:30:28,770 And I'm going to grab a condition. 627 00:30:28,770 --> 00:30:30,600 So if something then. 628 00:30:30,600 --> 00:30:32,020 So that's how it looks there. 629 00:30:32,020 --> 00:30:33,890 So I need a Boolean expression. 630 00:30:33,890 --> 00:30:38,130 And let me go ahead and say, let me go to Operators. 631 00:30:38,130 --> 00:30:40,270 I'm going to do something slightly mathy, just for kicks. 632 00:30:40,270 --> 00:30:43,600 I'm going to go in here and say, if something is less than something else, 633 00:30:43,600 --> 00:30:45,030 go ahead and do something. 634 00:30:45,030 --> 00:30:46,890 So now, you know what, a random block. 635 00:30:46,890 --> 00:30:51,620 So notice how, if I hover over this thing here, that will snap in there. 636 00:30:51,620 --> 00:30:54,090 >> So now, notice, I'm starting to do something already more logically 637 00:30:54,090 --> 00:30:54,650 interesting. 638 00:30:54,650 --> 00:30:59,720 If a random number between 1 and 10 is less than, let's say six. 639 00:30:59,720 --> 00:31:03,670 If I choose six, that essentially means, do the following with 50% 640 00:31:03,670 --> 00:31:03,980 probability. 641 00:31:03,980 --> 00:31:05,460 It's like flipping a coin. 642 00:31:05,460 --> 00:31:07,330 Now, I can do something conditionally. 643 00:31:07,330 --> 00:31:10,800 And that something I'm going to do is play the sound. 644 00:31:10,800 --> 00:31:14,280 So now, when I click on the screen flag, it's like tossing a coin. 645 00:31:14,280 --> 00:31:14,610 >> [MEOW SOUND] 646 00:31:14,610 --> 00:31:17,160 >> DAVID MALAN: It was heads or whatnot there. 647 00:31:17,160 --> 00:31:17,920 Let's do it again. 648 00:31:17,920 --> 00:31:18,860 >> [MEOW SOUND] 649 00:31:18,860 --> 00:31:19,790 >> DAVID MALAN: Heads again. 650 00:31:19,790 --> 00:31:20,280 >> [MEOW SOUND] 651 00:31:20,280 --> 00:31:21,500 >> DAVID MALAN: Heads again. 652 00:31:21,500 --> 00:31:22,631 Phew, OK. 653 00:31:22,631 --> 00:31:24,720 Tails that time. 654 00:31:24,720 --> 00:31:29,545 So 50% of the time, if we do this infinitely long, we will get 50% meows 655 00:31:29,545 --> 00:31:32,180 and 50% silences. 656 00:31:32,180 --> 00:31:34,850 So there, just a basic building block that lets us do that. 657 00:31:34,850 --> 00:31:37,710 But this is kind of tedious that I have to keep clicking that button. 658 00:31:37,710 --> 00:31:39,810 So let's just drag and throw all of those away. 659 00:31:39,810 --> 00:31:42,270 If you dragged them to the middle, they'll just delete themselves. 660 00:31:42,270 --> 00:31:43,760 >> Let me go up to control. 661 00:31:43,760 --> 00:31:46,060 Let me go to forever. 662 00:31:46,060 --> 00:31:49,952 And this time, I'm going to do something minorly annoying. 663 00:31:49,952 --> 00:31:51,560 >> [LAUGHTER] 664 00:31:51,560 --> 00:31:53,370 >> DAVID MALAN: And let me go ahead and do control. 665 00:31:53,370 --> 00:31:57,260 Wait one second, just so it's not too grating. 666 00:31:57,260 --> 00:31:59,870 >> [MEOW SOUND] 667 00:31:59,870 --> 00:32:00,970 >> DAVID MALAN: That's not natural. 668 00:32:00,970 --> 00:32:01,861 OK. 669 00:32:01,861 --> 00:32:04,510 >> [MEOW SOUND] 670 00:32:04,510 --> 00:32:06,406 >> DAVID MALAN: And notice what's, nice about Scratch, for those of you who 671 00:32:06,406 --> 00:32:09,210 have prior programing experience, you don't need to start and stop. 672 00:32:09,210 --> 00:32:10,060 You don't need to compile. 673 00:32:10,060 --> 00:32:13,210 You just change it, and the program will adapt dynamically. 674 00:32:13,210 --> 00:32:14,620 So this is getting a little interesting. 675 00:32:14,620 --> 00:32:16,930 But let's take it one step further. 676 00:32:16,930 --> 00:32:19,760 Let me go ahead and get rid of that program. 677 00:32:19,760 --> 00:32:23,300 >> [MEOW SOUND] 678 00:32:23,300 --> 00:32:25,520 >> DAVID MALAN: That's what we'll call a bug in Scratch. 679 00:32:25,520 --> 00:32:26,770 He should not keep making that sound. 680 00:32:26,770 --> 00:32:28,340 So we we'll tell him to stop. 681 00:32:28,340 --> 00:32:30,435 All right, so now I'm going to go into-- 682 00:32:30,435 --> 00:32:32,180 I'll let MIT know. 683 00:32:32,180 --> 00:32:35,160 We'll go over here to Forever. 684 00:32:35,160 --> 00:32:37,240 And now, I want to do something again and again. 685 00:32:37,240 --> 00:32:38,760 I'm going to go into Control. 686 00:32:38,760 --> 00:32:41,570 >> And let's see, I'm going to drag my if condition there. 687 00:32:41,570 --> 00:32:42,850 So now notice the logic. 688 00:32:42,850 --> 00:32:46,430 When the green flag is clicked, do something forever, but only do that 689 00:32:46,430 --> 00:32:48,890 something if this other thing is true. 690 00:32:48,890 --> 00:32:51,480 I'm going to go to, let's say, sensing. 691 00:32:51,480 --> 00:32:54,430 And I'm going to go ahead and choose touching and drop it there. 692 00:32:54,430 --> 00:32:55,930 That's a Boolean expression. 693 00:32:55,930 --> 00:32:57,740 >> And now, notice, in this drop down menu, there are 694 00:32:57,740 --> 00:32:59,050 some predefined values. 695 00:32:59,050 --> 00:33:00,910 So I can say, are you touching the edge of the screen? 696 00:33:00,910 --> 00:33:03,900 Or are you touching the mouse pointer, the arrow on the screen? 697 00:33:03,900 --> 00:33:04,620 So I'm going to do that. 698 00:33:04,620 --> 00:33:08,770 And if so, then I'm going to go ahead and play sound meow. 699 00:33:08,770 --> 00:33:11,250 So now I kind of have the beginnings of a game-- 700 00:33:11,250 --> 00:33:13,110 an adorable game. 701 00:33:13,110 --> 00:33:14,060 >> [MEOW SOUND] 702 00:33:14,060 --> 00:33:17,250 >> DAVID MALAN: OK, an adorable, buggy game. 703 00:33:17,250 --> 00:33:20,770 Let me wait, let's say, one second there. 704 00:33:20,770 --> 00:33:24,910 Now play again, by clicking the green flag. 705 00:33:24,910 --> 00:33:27,860 >> [MEOW SOUND] 706 00:33:27,860 --> 00:33:30,460 >> DAVID MALAN: So now it's like petting a cat. 707 00:33:30,460 --> 00:33:31,850 >> [MEOW SOUND] 708 00:33:31,850 --> 00:33:34,460 >> DAVID MALAN: All right, now this one I did make in advance. 709 00:33:34,460 --> 00:33:39,250 Very late, it gets kind of easy to do stupid things. 710 00:33:39,250 --> 00:33:40,240 So let me go in here. 711 00:33:40,240 --> 00:33:43,720 Let's say, that was Pet the Cat. 712 00:33:43,720 --> 00:33:46,600 Let's now open Don't Pet the Cat. 713 00:33:46,600 --> 00:33:48,330 Now, if we play this one, you can guess, if you're 714 00:33:48,330 --> 00:33:49,650 looking at the screen-- 715 00:33:49,650 --> 00:33:51,090 >> [MEOW SOUND] 716 00:33:51,090 --> 00:33:52,170 >> DAVID MALAN: Now, if I pet the cat 717 00:33:52,170 --> 00:33:55,420 >> [LION'S ROAR] 718 00:33:55,420 --> 00:33:57,260 >> DAVID MALAN: So don't actually pet the cat in that case. 719 00:33:57,260 --> 00:34:01,350 So now we just have an example of a branch that's going in two directions. 720 00:34:01,350 --> 00:34:03,130 Now let me go ahead and open another one here. 721 00:34:03,130 --> 00:34:07,120 This one, also, among our source code files for the day. 722 00:34:07,120 --> 00:34:13,199 So let me go back into my Source directory and go into, let's choose 723 00:34:13,199 --> 00:34:15,610 this guy here and see what's different. 724 00:34:15,610 --> 00:34:17,449 >> Wow, all right, so now it's getting a little more complex. 725 00:34:17,449 --> 00:34:21,300 And before we see what this guy does, let's try to infer, from the program 726 00:34:21,300 --> 00:34:22,219 at the right hand side. 727 00:34:22,219 --> 00:34:25,590 And now scratch clearly allows us to have multiple scripts, multiple 728 00:34:25,590 --> 00:34:29,730 programs associated with one sprite, with one character, and, apparently, 729 00:34:29,730 --> 00:34:31,760 they're both going to run in lockstep. 730 00:34:31,760 --> 00:34:35,570 Because both of these programs starts with when green flag clicks, this is 731 00:34:35,570 --> 00:34:38,650 hinting at a more advanced topic, with which some of you might be familiar, 732 00:34:38,650 --> 00:34:40,580 known as threading, or multi-threading. 733 00:34:40,580 --> 00:34:44,400 >> Turns out, long story short, computers today can essentially do multiple 734 00:34:44,400 --> 00:34:45,270 things at once. 735 00:34:45,270 --> 00:34:48,659 Or they can do one thing at a time so fast that you don't even notice that 736 00:34:48,659 --> 00:34:50,150 it's actually doing one thing at a time. 737 00:34:50,150 --> 00:34:53,320 But for now, let's assume that both of these programs are going to execute at 738 00:34:53,320 --> 00:34:54,310 the same time. 739 00:34:54,310 --> 00:34:57,350 And notice, both of them have forever puzzle pieces. 740 00:34:57,350 --> 00:35:01,270 So they're both going to keep running until I hit the red stop sign. 741 00:35:01,270 --> 00:35:02,100 >> So what are they going to do? 742 00:35:02,100 --> 00:35:06,030 On the left hand side, I'm apparently declaring a variable called muted. 743 00:35:06,030 --> 00:35:09,030 So I didn't call it something like boring like N. I called it muted this 744 00:35:09,030 --> 00:35:10,240 time to convey meaning. 745 00:35:10,240 --> 00:35:11,780 I set it equal to zero. 746 00:35:11,780 --> 00:35:16,200 Let's think of that as False, or let's think of that as False. 747 00:35:16,200 --> 00:35:17,490 >> Now, forever do the following. 748 00:35:17,490 --> 00:35:23,280 If the keyboard's space bar is pressed, then if muted equals zero, 749 00:35:23,280 --> 00:35:25,930 then change muted to equal one. 750 00:35:25,930 --> 00:35:27,580 Else, set muted to zero. 751 00:35:27,580 --> 00:35:30,530 So logically, even though that's a whole bunch of puzzle pieces that's 752 00:35:30,530 --> 00:35:33,160 just saying, when I hit the Space bar, what should I do to the variable 753 00:35:33,160 --> 00:35:34,750 called muted? 754 00:35:34,750 --> 00:35:37,170 Change it from one to zero, or zero to one. 755 00:35:37,170 --> 00:35:37,840 That's all. 756 00:35:37,840 --> 00:35:40,740 So it's like turning a light switch on or off and remembering, with a 757 00:35:40,740 --> 00:35:42,330 variable, that I've done that. 758 00:35:42,330 --> 00:35:45,990 >> Meanwhile, on the right hand side, in layman's terms, what is the purpose of 759 00:35:45,990 --> 00:35:47,547 the script on the right? 760 00:35:47,547 --> 00:35:48,860 >> STUDENT: To play the sea lion sound. 761 00:35:48,860 --> 00:35:52,500 >> DAVID MALAN: To play Sea Lion sound, if he is not muted, by 762 00:35:52,500 --> 00:35:53,480 nature of that variable. 763 00:35:53,480 --> 00:35:57,360 So we're sharing state, so to speak, sharing information across these two 764 00:35:57,360 --> 00:36:00,540 scripts because, notice here, we are forever doing the following. 765 00:36:00,540 --> 00:36:04,620 If muted is zero, so if it's not muted-- if muted is false, then play 766 00:36:04,620 --> 00:36:05,980 this Sea Lion sound. 767 00:36:05,980 --> 00:36:09,930 And think to yourself, hi, hi, hi, for two seconds, wait a moment, and then 768 00:36:09,930 --> 00:36:11,140 check again. 769 00:36:11,140 --> 00:36:15,150 So if we go now over here to the left, to where this guy is, and hit the 770 00:36:15,150 --> 00:36:16,662 green flag, 771 00:36:16,662 --> 00:36:30,260 >> [SEA LION SOUND] 772 00:36:30,260 --> 00:36:31,910 >> DAVID MALAN: At what point does this get really annoying? 773 00:36:31,910 --> 00:36:33,440 Because this will just go on forever. 774 00:36:33,440 --> 00:36:36,490 So sometimes, infinite loops, so to speak, are deliberate. 775 00:36:36,490 --> 00:36:41,140 But in this case, as soon as I hit the Space bar, he stops. 776 00:36:41,140 --> 00:36:42,800 Now the program has not quit. 777 00:36:42,800 --> 00:36:44,760 It's still running in these loops. 778 00:36:44,760 --> 00:36:46,540 But if I get the space bar again-- 779 00:36:46,540 --> 00:36:47,851 >> [SEA LION SOUND] 780 00:36:47,851 --> 00:36:49,650 >> DAVID MALAN: He's going to pick up where he left off. 781 00:36:49,650 --> 00:36:53,240 So there is one way for us to do something again and again but, that 782 00:36:53,240 --> 00:36:54,920 time, only conditionally. 783 00:36:54,920 --> 00:36:58,940 Well, while we're in this vein of doing things again and again, let me 784 00:36:58,940 --> 00:37:01,370 go into another such example here. 785 00:37:01,370 --> 00:37:04,370 This one we'll call counting sheep. 786 00:37:04,370 --> 00:37:05,710 >> And notice what this guy does. 787 00:37:05,710 --> 00:37:08,540 It's actually a bit more like the pseudocode we played with on 788 00:37:08,540 --> 00:37:12,230 Wednesday, whereby he sets some counter, think of it is as N again, to 789 00:37:12,230 --> 00:37:14,030 zero, he forever does the following. 790 00:37:14,030 --> 00:37:17,960 He says the counter's value for one second, waits a second, and then 791 00:37:17,960 --> 00:37:19,430 changes the counter by one. 792 00:37:19,430 --> 00:37:21,570 And in this context, that just means increments it. 793 00:37:21,570 --> 00:37:23,250 So he adds one to it. 794 00:37:23,250 --> 00:37:25,830 So this is literally-- 795 00:37:25,830 --> 00:37:27,890 it's not quite what we think of as counting sheep. 796 00:37:27,890 --> 00:37:33,120 It's the sheep doing the counting, forever, up from zero. 797 00:37:33,120 --> 00:37:35,560 >> So we can do similar things there, logically. 798 00:37:35,560 --> 00:37:37,750 But now let's try to clean some of these things up. 799 00:37:37,750 --> 00:37:43,440 Let me go ahead now into a simple example where our cat is just going to 800 00:37:43,440 --> 00:37:44,750 start coughing. 801 00:37:44,750 --> 00:37:48,830 All right, so here we have cough 0-- 802 00:37:48,830 --> 00:37:50,685 computer scientists start counting from 0. 803 00:37:50,685 --> 00:37:53,480 So this cat is just going to cough three times. 804 00:37:53,480 --> 00:37:54,890 And here's how I implemented that. 805 00:37:54,890 --> 00:38:00,130 When green flag is clicked, cough, wait, cough, wait, cough, wait. 806 00:38:00,130 --> 00:38:02,470 And I did this just by dragging and dropping puzzle pieces. 807 00:38:02,470 --> 00:38:04,740 Or if you start to tinker with Scratch, you'll see you can actually 808 00:38:04,740 --> 00:38:08,620 duplicate pieces so that you can do things more quickly without dragging 809 00:38:08,620 --> 00:38:10,310 and dropping ad nauseum. 810 00:38:10,310 --> 00:38:12,680 >> But we're not on the best path here. 811 00:38:12,680 --> 00:38:15,210 Because how do I make him cough a fourth time? 812 00:38:15,210 --> 00:38:16,790 Well, I could sort of go down here. 813 00:38:16,790 --> 00:38:19,420 I could duplicate and then paste this in there. 814 00:38:19,420 --> 00:38:21,740 How do I make him cough a fifth time? 815 00:38:21,740 --> 00:38:23,230 Well, copy and paste again. 816 00:38:23,230 --> 00:38:24,210 Or drag drop again. 817 00:38:24,210 --> 00:38:26,920 And very quickly, this program starts to get really, really redundant, 818 00:38:26,920 --> 00:38:28,880 really long, but really uninteresting. 819 00:38:28,880 --> 00:38:30,120 But there's a way to clean this up. 820 00:38:30,120 --> 00:38:33,680 What's the obvious way to clean this up? 821 00:38:33,680 --> 00:38:36,280 >> OK, so we could actually really go out and, when you hit the space 822 00:38:36,280 --> 00:38:37,070 bar, have him cough. 823 00:38:37,070 --> 00:38:40,150 But if I just want to do something repetitively, recall that we do have 824 00:38:40,150 --> 00:38:41,310 some control constructs. 825 00:38:41,310 --> 00:38:43,800 Let me move this out of the way, go under Control. 826 00:38:43,800 --> 00:38:47,340 Let me just do a repeat, say, three times. 827 00:38:47,340 --> 00:38:49,410 And now let me steal some of these puzzle pieces. 828 00:38:49,410 --> 00:38:50,980 Let me snap this in here. 829 00:38:50,980 --> 00:38:52,400 Let me throw these away altogether. 830 00:38:52,400 --> 00:38:55,400 >> And now, I have a better designed program. 831 00:38:55,400 --> 00:38:55,920 Why? 832 00:38:55,920 --> 00:39:00,540 If I want to change the number of times this cat coughs, all I have to 833 00:39:00,540 --> 00:39:05,640 do is change one variable, or one value, rather from three, to four, or 834 00:39:05,640 --> 00:39:06,700 five, or six. 835 00:39:06,700 --> 00:39:09,060 Or I could do something conditionally, even, with the space 836 00:39:09,060 --> 00:39:10,320 bar if I wanted to. 837 00:39:10,320 --> 00:39:11,780 >> So this is a general principle. 838 00:39:11,780 --> 00:39:14,950 Once you start copying and pasting code, whether it's in Scratch, or in 839 00:39:14,950 --> 00:39:18,340 C, you're doing something wrong, most likely. 840 00:39:18,340 --> 00:39:21,950 Or at least, once you've exceeded some reasonable numbers of copies and 841 00:39:21,950 --> 00:39:24,610 pastes, you're probably doing something wrong. 842 00:39:24,610 --> 00:39:26,740 >> But you know what? 843 00:39:26,740 --> 00:39:27,590 I don't really like this. 844 00:39:27,590 --> 00:39:28,980 This isn't the cleanest design. 845 00:39:28,980 --> 00:39:32,860 I wish there were a puzzle piece called cough because then I wouldn't 846 00:39:32,860 --> 00:39:36,100 have to implement this myself, the old fashioned way, by 847 00:39:36,100 --> 00:39:38,220 having say, and wait-- 848 00:39:38,220 --> 00:39:40,320 what if they were just a cough puzzle piece. 849 00:39:40,320 --> 00:39:41,330 >> Well, I can actually do that. 850 00:39:41,330 --> 00:39:45,010 Let me go under more blocks, click Make a Block, and now I get this 851 00:39:45,010 --> 00:39:45,610 window here. 852 00:39:45,610 --> 00:39:47,540 I'm going to call this thing cough. 853 00:39:47,540 --> 00:39:49,400 I'm going to go ahead and click OK. 854 00:39:49,400 --> 00:39:53,150 And now notice, I get a new starting piece that's curved on the top. 855 00:39:53,150 --> 00:39:56,590 And what I'm going to do with this, I'm going to just steal these blocks. 856 00:39:56,590 --> 00:39:57,800 I'm going to put them here. 857 00:39:57,800 --> 00:40:00,490 >> And now, with these three pieces, I've implemented what I'm going to call a 858 00:40:00,490 --> 00:40:03,530 function, or a procedure, or some of you might know it as a method. 859 00:40:03,530 --> 00:40:05,050 Slight differences among the words. 860 00:40:05,050 --> 00:40:06,950 But for now, let's just call this a function. 861 00:40:06,950 --> 00:40:08,750 This is just a new puzzle piece. 862 00:40:08,750 --> 00:40:11,000 Now it is implemented like this. 863 00:40:11,000 --> 00:40:15,170 >> But notice that Scratch has given us a physical representation of that whole 864 00:40:15,170 --> 00:40:16,570 block over here. 865 00:40:16,570 --> 00:40:21,930 So now, I can just drag this over here, say, repeat three times, and 866 00:40:21,930 --> 00:40:26,420 what's going to happen now, when I play this script, is only one program 867 00:40:26,420 --> 00:40:27,500 is running at a time. 868 00:40:27,500 --> 00:40:29,880 There's only one when green flag clicked. 869 00:40:29,880 --> 00:40:34,010 But that purple block called cough is effectively telling Scratch, every 870 00:40:34,010 --> 00:40:38,160 time you see that puzzle piece, actually execute these steps that I 871 00:40:38,160 --> 00:40:40,420 happen to implement manually. 872 00:40:40,420 --> 00:40:41,410 >> So that's kind of neat. 873 00:40:41,410 --> 00:40:44,650 But now, suppose that I decided, I don't want this cat just to cough. 874 00:40:44,650 --> 00:40:46,660 I want him to be able to sneeze as well. 875 00:40:46,660 --> 00:40:48,905 Well, how could we go about implementing sneeze? 876 00:40:48,905 --> 00:40:51,310 Well I could pretty much do the same thing. 877 00:40:51,310 --> 00:40:52,690 I could make another block. 878 00:40:52,690 --> 00:40:55,940 I could call this sneeze, click OK. 879 00:40:55,940 --> 00:40:59,250 >> Then, over here I could actually have, let me duplicate this-- 880 00:40:59,250 --> 00:41:02,850 and there's where you should feel like you're probably not doing something in 881 00:41:02,850 --> 00:41:03,780 the best way. 882 00:41:03,780 --> 00:41:06,670 I could say something like, achoo, for one second. 883 00:41:06,670 --> 00:41:07,440 Wait one second. 884 00:41:07,440 --> 00:41:08,715 Now I have a new block called sneeze. 885 00:41:08,715 --> 00:41:10,210 And indeed, there it is. 886 00:41:10,210 --> 00:41:14,010 >> But this, too, should start to feel-- maybe not the first week of class, but 887 00:41:14,010 --> 00:41:15,730 by the second-- just a little redundant. 888 00:41:15,730 --> 00:41:17,800 Clearly, there's some redundancy here. 889 00:41:17,800 --> 00:41:22,090 So let me propose, instead, that we refine this definition as follows. 890 00:41:22,090 --> 00:41:24,820 >> Let me go up to my file menu. 891 00:41:24,820 --> 00:41:26,090 I'm not going to save this version. 892 00:41:26,090 --> 00:41:29,080 I'm going to go into one of my premade files here. 893 00:41:29,080 --> 00:41:31,190 And I'm going to go ahead and open up cough 2. 894 00:41:31,190 --> 00:41:32,220 Whoops that was cough 2. 895 00:41:32,220 --> 00:41:36,900 Let me go ahead and open up cough 3, which is this source directory. 896 00:41:36,900 --> 00:41:42,450 Cough 3 and notice-- oh, I told the story in the wrong order. 897 00:41:42,450 --> 00:41:45,030 Let me recover from this story. 898 00:41:45,030 --> 00:41:48,990 >> The story I meant to tell ends with cough 4-- 899 00:41:48,990 --> 00:41:50,270 there it is. 900 00:41:50,270 --> 00:41:54,380 So what if I, instead, define a bigger puzzle piece called 901 00:41:54,380 --> 00:41:57,250 define, say word n times. 902 00:41:57,250 --> 00:41:59,930 Sneezing is just, apparently, in Scratch, achoo. 903 00:41:59,930 --> 00:42:01,680 So we express it as a word, just because that's the 904 00:42:01,680 --> 00:42:02,750 constraint of the program. 905 00:42:02,750 --> 00:42:07,860 And a cough is [COUGH], but cough, C-O-U-G-H. So that's just two 906 00:42:07,860 --> 00:42:10,820 different words doing, essentially, the same thing. 907 00:42:10,820 --> 00:42:12,820 >> So I can actually make a new block like this. 908 00:42:12,820 --> 00:42:14,220 I didn't use this menu option before. 909 00:42:14,220 --> 00:42:16,960 But when you click Make Block, you can choose some options. 910 00:42:16,960 --> 00:42:20,900 And you can say that this block actually takes some inputs, otherwise 911 00:42:20,900 --> 00:42:24,710 known as arguments, or parameters, so that you can modify the behavior of 912 00:42:24,710 --> 00:42:25,520 your block. 913 00:42:25,520 --> 00:42:28,780 >> So what I did a moment ago was I called this block Say. 914 00:42:28,780 --> 00:42:30,880 And then I said, it takes a string input. 915 00:42:30,880 --> 00:42:32,810 And now notice, by default, it says string 1. 916 00:42:32,810 --> 00:42:35,440 A string is just a word, or a phrase, for our purposes. 917 00:42:35,440 --> 00:42:37,810 But I'm just going to put some placeholder text there, just like in a 918 00:42:37,810 --> 00:42:40,620 website, when you see username, or password, and then it disappears when 919 00:42:40,620 --> 00:42:41,550 you start typing. 920 00:42:41,550 --> 00:42:42,720 That's all that is. 921 00:42:42,720 --> 00:42:44,590 >> And now I'm going to add a number input. 922 00:42:44,590 --> 00:42:47,180 And I'm going to call this n-- but that's pretty arbitrary. 923 00:42:47,180 --> 00:42:49,510 And then just a label, just to make this block a little more self 924 00:42:49,510 --> 00:42:50,570 explanatory-- 925 00:42:50,570 --> 00:42:53,010 times, that's what I just did. 926 00:42:53,010 --> 00:42:56,540 And the end result is that I get a block that looks like this. 927 00:42:56,540 --> 00:42:58,880 >> And now notice, I'm using a repeat block. 928 00:42:58,880 --> 00:43:03,480 But rather than hard coding three, I'm dragging and dropping n in there so I 929 00:43:03,480 --> 00:43:05,530 can parametrize the function. 930 00:43:05,530 --> 00:43:08,590 I can make this function do something a different number of times based on 931 00:43:08,590 --> 00:43:09,410 that value. 932 00:43:09,410 --> 00:43:14,270 >> And notice, say, this is what I did here, if I drag word, I can say not a 933 00:43:14,270 --> 00:43:17,860 hard coded word, but whatever is passed in for one second. 934 00:43:17,860 --> 00:43:20,200 Meanwhile, how do I re-implement cough? 935 00:43:20,200 --> 00:43:26,980 I instead define cough as saying cough n times. 936 00:43:26,980 --> 00:43:30,480 >> So in short, I'm going through this quickly, but the basic idea is as soon 937 00:43:30,480 --> 00:43:32,750 as you start seeing in your program that, wait a minute, I've done 938 00:43:32,750 --> 00:43:36,610 something quite like this before, can I factor out some common 939 00:43:36,610 --> 00:43:37,090 functionality? 940 00:43:37,090 --> 00:43:41,090 Can I decompose what I'm doing into some basic ideas? 941 00:43:41,090 --> 00:43:42,070 That's what we're doing here. 942 00:43:42,070 --> 00:43:44,830 And I've stacked these things, visually, on top of one another 943 00:43:44,830 --> 00:43:47,710 because it's testament to that idea of starting with binary, going to ASCII, 944 00:43:47,710 --> 00:43:51,530 making graphical programs, sort of layering increasingly complex ideas on 945 00:43:51,530 --> 00:43:52,570 top of one another. 946 00:43:52,570 --> 00:43:53,730 >> Same idea here. 947 00:43:53,730 --> 00:43:56,870 I started from Scratch, implementing coughing, then realized coughing is 948 00:43:56,870 --> 00:43:58,540 really just saying something. 949 00:43:58,540 --> 00:44:01,630 So let me instead implement the notion of saying something. 950 00:44:01,630 --> 00:44:05,200 And on top of that, can I implement achoo, or cough? 951 00:44:05,200 --> 00:44:07,990 And we could do more such variants still. 952 00:44:07,990 --> 00:44:10,400 >> So from this basic principle, we can start to do 953 00:44:10,400 --> 00:44:12,180 increasingly complex programs. 954 00:44:12,180 --> 00:44:14,100 Let me open up this one. 955 00:44:14,100 --> 00:44:18,020 We can actually have multiple sprites interacting on the screen at once. 956 00:44:18,020 --> 00:44:23,470 If I go into my source directory and grab one called Threads, recall that a 957 00:44:23,470 --> 00:44:26,920 thread is just really the ability of two scripts to run side by 958 00:44:26,920 --> 00:44:28,350 side at the same time. 959 00:44:28,350 --> 00:44:34,490 >> Notice now, have both a bird sprite and a cat sprite, both of which have 960 00:44:34,490 --> 00:44:35,270 their own scripts. 961 00:44:35,270 --> 00:44:37,690 So notice, when I click the cat, I get these scripts. 962 00:44:37,690 --> 00:44:39,830 When I click the bird, I get these scripts. 963 00:44:39,830 --> 00:44:42,070 So each of these guys has his own programs. 964 00:44:42,070 --> 00:44:46,680 When I now click the green flag, notice that what this program does is 965 00:44:46,680 --> 00:44:54,090 have the cat, incredibly slowly, chase the bird. 966 00:44:54,090 --> 00:44:57,120 But the cat has the advantage of having been programmed in such a way 967 00:44:57,120 --> 00:45:00,540 that no matter where the bird is, the cat goes toward him. 968 00:45:00,540 --> 00:45:02,150 >> We can play that game much faster. 969 00:45:02,150 --> 00:45:07,750 So if I'm on the cat, notice that I'm using, let's say move one steps. 970 00:45:07,750 --> 00:45:11,680 Let's have him move five steps at a time, so five dots at a time. 971 00:45:11,680 --> 00:45:13,580 Let me click play. 972 00:45:13,580 --> 00:45:14,490 >> [LION'S ROAR] 973 00:45:14,490 --> 00:45:17,170 >> DAVID MALAN: All right, now we can really give the cat the advantage. 974 00:45:17,170 --> 00:45:18,600 10 steps at a time. 975 00:45:18,600 --> 00:45:20,120 >> [LION'S ROAR] 976 00:45:20,120 --> 00:45:22,770 >> DAVID MALAN: All right, so very quickly, it gets a little advantage 977 00:45:22,770 --> 00:45:23,280 for the cat. 978 00:45:23,280 --> 00:45:25,310 But I'll wave my hand at some of the details. 979 00:45:25,310 --> 00:45:28,240 But the reason that that path is starting a little different each time 980 00:45:28,240 --> 00:45:29,700 is that I'm doing a bit of randomness. 981 00:45:29,700 --> 00:45:33,700 I'm actually pointing the cat in a different direction based on where I 982 00:45:33,700 --> 00:45:38,710 want him to begin so that each time the game, or the animation, is a 983 00:45:38,710 --> 00:45:39,760 little bit different. 984 00:45:39,760 --> 00:45:41,950 >> Now, let me introduce one other construct here. 985 00:45:41,950 --> 00:45:43,860 So in this case, we had functions. 986 00:45:43,860 --> 00:45:46,950 There's also going to be a puzzle piece known as an array, or a list, 987 00:45:46,950 --> 00:45:50,980 that allows you to store multiple values inside of a variable. 988 00:45:50,980 --> 00:45:53,410 We saw threads, and now there's Events. 989 00:45:53,410 --> 00:45:56,330 >> So here's an event using these two guys here. 990 00:45:56,330 --> 00:46:02,490 And if I open up the file called Events from today's examples, we will 991 00:46:02,490 --> 00:46:06,940 see a program that looks a little like this. 992 00:46:06,940 --> 00:46:09,630 And now notice this guy-- 993 00:46:09,630 --> 00:46:11,620 so notice I have the blue Muppet clicked-- 994 00:46:11,620 --> 00:46:12,990 he only does the following. 995 00:46:12,990 --> 00:46:15,540 He doesn't have one of those green flag puzzle pieces. 996 00:46:15,540 --> 00:46:18,620 He has a when I receive event-- 997 00:46:18,620 --> 00:46:19,970 so some arbitrary word. 998 00:46:19,970 --> 00:46:21,590 I just typed out event there-- 999 00:46:21,590 --> 00:46:23,740 he's going to say, Polo, for two seconds. 1000 00:46:23,740 --> 00:46:25,800 >> So those of you who are familiar with this game might know 1001 00:46:25,800 --> 00:46:26,460 where this is going. 1002 00:46:26,460 --> 00:46:29,800 If I now click on the orange Muppet, his program does this. 1003 00:46:29,800 --> 00:46:35,020 Forever, if the keyboard space bar suppressed, he is going to say, Marco, 1004 00:46:35,020 --> 00:46:36,580 for two seconds on the screen. 1005 00:46:36,580 --> 00:46:39,590 But he's also going to use this fancier block known as broadcast. 1006 00:46:39,590 --> 00:46:42,270 He's going to broadcast quote unquote, "event." 1007 00:46:42,270 --> 00:46:47,540 >> Meanwhile, the blue guy, recall, is listening for quote unquote, "event." 1008 00:46:47,540 --> 00:46:50,760 So somehow, now, we can have two sprites interacting. 1009 00:46:50,760 --> 00:46:53,790 And when we get to web programming, later in the term, similarly will this 1010 00:46:53,790 --> 00:46:58,320 be advantageous to have your website do something in response to, for 1011 00:46:58,320 --> 00:47:00,130 instance, a click of the keyboard. 1012 00:47:00,130 --> 00:47:02,120 >> So let me go ahead and hit the space bar. 1013 00:47:02,120 --> 00:47:04,020 Orange guy says Marco. 1014 00:47:04,020 --> 00:47:05,840 Blue guy says Polo. 1015 00:47:05,840 --> 00:47:10,780 If I do it again orange guy says Marco, blue guy says polo. 1016 00:47:10,780 --> 00:47:14,130 So let's take this one step further. 1017 00:47:14,130 --> 00:47:18,790 This time, we'll go, probably, just a few more minutes here. 1018 00:47:18,790 --> 00:47:19,904 Do we have-- 1019 00:47:19,904 --> 00:47:22,380 desk lamp, come on down. 1020 00:47:22,380 --> 00:47:24,500 You are right on the end. 1021 00:47:24,500 --> 00:47:25,740 OK, you can both come up. 1022 00:47:25,740 --> 00:47:26,990 We have desk lamps for everyone. 1023 00:47:26,990 --> 00:47:28,360 Come on. 1024 00:47:28,360 --> 00:47:30,090 I don't know if we can keep this ridiculous gag up 1025 00:47:30,090 --> 00:47:32,035 all semester, though. 1026 00:47:32,035 --> 00:47:33,530 All right, come on down. 1027 00:47:33,530 --> 00:47:40,260 >> And in the meantime, we have the following examples to pull up, just to 1028 00:47:40,260 --> 00:47:45,370 accelerate things now, such that we have a manifestation from another 1029 00:47:45,370 --> 00:47:48,360 predecessor of yours using the same basic building blocks. 1030 00:47:48,360 --> 00:47:48,975 What's your name? 1031 00:47:48,975 --> 00:47:49,240 >> JOHN: John. 1032 00:47:49,240 --> 00:47:49,770 >> DAVID MALAN: John. 1033 00:47:49,770 --> 00:47:50,400 Nice to me you. 1034 00:47:50,400 --> 00:47:50,650 And? 1035 00:47:50,650 --> 00:47:51,250 >> SETZ: Setz. 1036 00:47:51,250 --> 00:47:53,130 >> DAVID MALAN: Setz, nice to me you. 1037 00:47:53,130 --> 00:47:54,820 John, if you'd like to come up first, this is an old 1038 00:47:54,820 --> 00:47:55,910 school game named Frogger. 1039 00:47:55,910 --> 00:47:57,530 You use the keyboard for this as well. 1040 00:47:57,530 --> 00:48:02,425 And the goal is to get across the street and water. 1041 00:48:02,425 --> 00:48:12,700 >> [FROGGER MUSIC AND SOUND PLAYS] 1042 00:48:12,700 --> 00:48:14,970 >> DAVID MALAN: I'm sorry, no desk lamp for you today. 1043 00:48:14,970 --> 00:48:19,110 All right, Setz, would you like to come on up? 1044 00:48:19,110 --> 00:48:20,890 All right, let's do it again. 1045 00:48:20,890 --> 00:48:21,430 >> SETZ: Do I use the arrows? 1046 00:48:21,430 --> 00:48:22,360 >> DAVID MALAN: Just the arrow keys. 1047 00:48:22,360 --> 00:48:23,624 Up, down, left, right. 1048 00:48:23,624 --> 00:48:35,700 >> [FROGGER MUSIC AND SOUND PLAYS] 1049 00:48:35,700 --> 00:48:37,880 >> DAVID MALAN: We'll call them consolation prizes today, 1050 00:48:37,880 --> 00:48:38,950 then, very well done. 1051 00:48:38,950 --> 00:48:40,690 Here, for both of you, John and Setz. 1052 00:48:40,690 --> 00:48:41,940 Congratulations, all right. 1053 00:48:41,940 --> 00:48:46,720 1054 00:48:46,720 --> 00:48:50,620 So again, as this game plays, think about what's going on? 1055 00:48:50,620 --> 00:48:52,060 >> One, there's clearly a lot of motion. 1056 00:48:52,060 --> 00:48:55,220 But we've seen how, with the cat and the bird example, how you can make the 1057 00:48:55,220 --> 00:48:58,350 illusion of motion by just moving some number of pixels again and again. 1058 00:48:58,350 --> 00:49:00,280 And if you have a forever block, you could have these 1059 00:49:00,280 --> 00:49:02,120 cars doing this forever. 1060 00:49:02,120 --> 00:49:03,720 We have the ability to have some randomness. 1061 00:49:03,720 --> 00:49:06,310 So this game doesn't have to be exactly the same each time. 1062 00:49:06,310 --> 00:49:09,940 Those logs, those cars, can start at slightly different times so that the 1063 00:49:09,940 --> 00:49:12,690 game itself is more interesting with each game play. 1064 00:49:12,690 --> 00:49:15,320 >> And Meanwhile, we've seen the ability to listen to the space bar. 1065 00:49:15,320 --> 00:49:18,830 But clearly, in Scratch, can you also listen for up, down, left, right, and 1066 00:49:18,830 --> 00:49:20,760 really any key on the keyboard. 1067 00:49:20,760 --> 00:49:22,200 And you can also do some other things. 1068 00:49:22,200 --> 00:49:24,660 Let me go ahead and go back to the web version. 1069 00:49:24,660 --> 00:49:30,280 >> Let me go into our collection of examples here. 1070 00:49:30,280 --> 00:49:36,120 And under My Studio, video which is, essentially, a folder on 1071 00:49:36,120 --> 00:49:37,780 scratch.mit.edu. 1072 00:49:37,780 --> 00:49:39,710 We have the web versions of all of these projects. 1073 00:49:39,710 --> 00:49:42,530 And let's see if I can get my computer to cooperate here. 1074 00:49:42,530 --> 00:49:47,180 This is written by one of our friends at MIT, called Move the Butterfly. 1075 00:49:47,180 --> 00:49:50,250 >> And once this opens up, this is going to actually use more of 1076 00:49:50,250 --> 00:49:51,430 my computer's hardware. 1077 00:49:51,430 --> 00:49:53,325 Scratch happens to be implemented with Flash. 1078 00:49:53,325 --> 00:49:56,250 Flash can talk to your webcam, if you have one. 1079 00:49:56,250 --> 00:50:00,210 So if I go ahead and full screen this here, click the green flag, notice 1080 00:50:00,210 --> 00:50:02,530 that Flash's security message is saying, do you want to 1081 00:50:02,530 --> 00:50:04,210 allow to use my webcam? 1082 00:50:04,210 --> 00:50:05,510 >> Normally, you should probably say Deny. 1083 00:50:05,510 --> 00:50:07,180 But in this case, we'll say allow. 1084 00:50:07,180 --> 00:50:10,430 Then I'm going to tell Chrome to allow this as well. 1085 00:50:10,430 --> 00:50:15,010 And now, in just a moment, you see me, yep, me. 1086 00:50:15,010 --> 00:50:18,154 And if my hand goes up-- 1087 00:50:18,154 --> 00:50:20,390 I've got to not move my head at the same time. 1088 00:50:20,390 --> 00:50:21,740 There's also a reflection on the screen. 1089 00:50:21,740 --> 00:50:23,480 Come on, there we go-- 1090 00:50:23,480 --> 00:50:27,616 you can move it on the screen because there's also puzzle pieces-- oh, you 1091 00:50:27,616 --> 00:50:31,640 know what it is, it's because you also see the projector screen behind me. 1092 00:50:31,640 --> 00:50:33,870 So we have a little infinite thing going on there. 1093 00:50:33,870 --> 00:50:36,470 >> All right, so I'll play down here. 1094 00:50:36,470 --> 00:50:37,220 There we go. 1095 00:50:37,220 --> 00:50:41,310 So there's also a puzzle piece that says, when you see movement beneath 1096 00:50:41,310 --> 00:50:45,470 one of the sprites, you can have it go up, down, left, right or the like. 1097 00:50:45,470 --> 00:50:48,950 So we have a bit of virtual reality going on here as well, all within the 1098 00:50:48,950 --> 00:50:52,570 confines of my browser, just here using my webcam. 1099 00:50:52,570 --> 00:50:53,980 So what's then on the horizon. 1100 00:50:53,980 --> 00:50:58,350 The first problem set, as you'll see, or the website will go online later 1101 00:50:58,350 --> 00:51:01,100 tonight at cs50.net, is pretty much going to be open ended. 1102 00:51:01,100 --> 00:51:04,410 And implement a Scratch project of interest to you, a game, an 1103 00:51:04,410 --> 00:51:08,350 interaction, something artistic, and challenge yourself to use any number 1104 00:51:08,350 --> 00:51:09,660 of these puzzle pieces. 1105 00:51:09,660 --> 00:51:11,580 And it can either be interactive in this way. 1106 00:51:11,580 --> 00:51:15,470 Or it can be something more deliberately made to tell a story. 1107 00:51:15,470 --> 00:51:19,200 >> And indeed, that's where we'll end off today, with one final example. 1108 00:51:19,200 --> 00:51:21,290 Let me go into Scratch locally. 1109 00:51:21,290 --> 00:51:25,300 Let me go ahead and open this, and play one last program written by one 1110 00:51:25,300 --> 00:51:29,795 of your predecessors, namely that one here. 1111 00:51:29,795 --> 00:51:32,960 1112 00:51:32,960 --> 00:51:35,938 Good, raise the volume for this one. 1113 00:51:35,938 --> 00:52:53,770 >> [MUSIC PLAYING] 1114 00:52:53,770 --> 00:52:57,255 >> NARRATOR: At the next CS50, David invites a volunteer onstage. 1115 00:52:57,255 --> 00:52:58,636 >> DAVID MALAN: For this demonstration, we're going to need one volunteer. 1116 00:52:58,636 --> 00:53:01,050 Would you like to come on down? 1117 00:53:01,050 --> 00:53:02,300 What's your name? 1118 00:53:02,300 --> 00:53:05,320 1119 00:53:05,320 --> 00:53:06,570 Moving on. 1120 00:53:06,570 --> 00:53:08,394