字幕列表 影片播放 列印英文字幕 SEAN WALKER: Hello everyone, good afternoon. This is CS50, week 1, slash week 0, part 1, depending on how you're counting things. I'm Sean Walker. I'm a senior in Hopper, and I am your head teaching assistant. JANA VRANES: Hi everyone, my name is Jana. I'm the head course assistant for CS50 this year. SEAN WALKER: So yeah, we'll be seeing you guys in office hours. I'll be maybe seeing some of you in section. Can't wait to start the semester. We're very excited. There's so much cool things in store for you this semester, including this Saturday, there is a great event-- one of my favorite of the year-- which is called Puzzle Day. And maybe Jana will tell you a little bit more about that. JANA VRANES: So every year, CS50 partners with Facebook to organize Puzzle Day. Puzzle Day is this really fun event we put together. It's basically just like a fun afternoon slash evening that you can spend solving puzzles with your friends. This event is-- of course, all of you are invited and encouraged to come, but it's also open to anyone from Yale. So please feel free to bring your friends, bring your roommate. And the puzzles aren't CS50 or CS-related. So it's really open to everyone. And we will have super-cool prizes for the winners of the event, as well as a raffle. So yeah, make sure to come. It's this Saturday. It's going to be in Hillhouse 17, which I'm sure most of you know where it is. Yeah, it's right up there. And then one more announcement we have is that, next week, in the same time slot, Benedict, who is our professor of CS50 here at Yale, will be holding a-- he's right over there-- he'll be holding a hot takes CS50 tutorial right here in this room, from 4:00 to 5:15. So if you can come, please do. It's going to be just a lot of helpful advice, things you should know about the course. But it also should be recorded and available online if you can't come. Thank you, everyone. Have a great semester. [APPLAUSE] DAVID MALAN: So good to see everyone again. So this is a continuation of where we left off last week. Which, recall, was a look at computational thinking, where we tried to more methodically start thinking about problems, and start to leverage some of the intuition that you might have had with things like phone books and the like, to start solving more interesting problems. And in fact, Puzzle Day is ultimately about exactly that-- problem-solving. And indeed, as Jana said, it's not about computer science. There's no computers even required, or programming required. It really is just about taking input and producing outputs. And in this case, the inputs are the puzzles themselves. The outputs might very well be some fabulous prizes. But it really is meant to be an opportunity to bring you and some of your classmates together right at the start of the term, whether they're taking or not taking CS50, and really just think hard about some interesting, fun problems, and then sort of delight at the end as to who got as many of them as possible. But you'll recall that when we started framing problem-solving like this, it first required that we represent those inputs and outputs. And there's any number of ways we can represent inputs to problems. Like the number of people in this room, that's an input-- each of the bodies in this room. And we could count them sort of old-school like we did last time, or perhaps a little more methodically. We might think of the inputs, though, not as being physical as much as they are digital. Right? Recall, we introduced binary, which really is just an abstraction on top of electricity-- either being there or not being there, one or zero, true or false. And so we came up with a number of ways last time to represent information and recall this theme of abstraction we had the electricity sort of literally at the ground floor, then we had this layer of binary-- zeros and ones-- above it. From there, we could represent decimal, and another base system if we wanted. We could represent letters through ASCII, or we could represent emoji through Unicode. If we just thought about those bits in a different way, we could actually use the same zeros and ones to represent colors. And from colors, we get pictures. And from pictures, we get movies. And so there is this sort of hierarchy, this layering of one concept on another, so that we can start thinking about problems at this level, and just take for granted that someone else before us figured out how to actually map it to physical things like computers. So where does that leave us? Well turns out abstraction can be both useful and not so useful. And I thought we could explore this by way of just a couple of problems. The first of these requires that we take advantage of the white pieces of paper that hopefully you're holding in your hand. If you don't, any piece of notepaper suffices. Or just raise your hand, or one of us can run over with a piece of paper. You just need that plus a pen or pencil. And if we could ask for one brave volunteer who's comfy appearing on stage and the internet, we need you to come on up for just a moment. Can't distinguish hands asking for paper or hands asking for volunteer-- volunteer? Yeah, OK, come on up. What's your name? AUDIENCE: John DAVID MALAN: John, nice to meet you, David. All right, so John here is going to see in just a moment a picture. And John is then going to take on the role of a programmer, if you will, an expessify, step-by-step, how you all, as the computers, if you will, will execute that program by applying pen or pencil to paper. And the goal is for John to be as precise and as explicit as possible. You can say anything you want, but you can't make any physical gestures. And the goal is for all of us to transcribe, perfectly, exactly what it is that John is describing. So let me go ahead here and just temporarily mute my image, if I may, so that John and only John and I know what the picture is. And I'm going to ask that you draw this for the audience, verbally. Execute. And go ahead and right it into here. OK, just don't hit the keys, or this will spoil something. AUDIENCE: So start with the vertical line down the middle. DAVID MALAN: OK, a little louder. AUDIENCE: Start with the vertical line down the middle. Then two lines jutting out from the bottom-- well, start with one line at the right side, at an angle, about 30 degrees up-- 30 degrees from the horizontal. Just draw a line from the right, and then do the same thing on the left side. All the lines should be equal length. DAVID MALAN: By the way. [CHUCKLING] AUDIENCE: Yeah, after the fact, yeah. Then, at the end of those two lines that you drew, draw two more vertical lines, going straight up, yeah. Then, draw lines that will connect those two previous vertical lines, and connect them at a point. Then, draw a line that connects the three vertical lines together. DAVID MALAN: Good? All right, end program. So a big round of applause for John for coming on up, if we could. Thank you. [APPLAUSE] Give me just a moment to plug back in here. All right. So, if the staff wouldn't mind, could we just collect a random-ish sample of the answers here, just grabbing a few. We don't have to grab them all. No, OK, you're refusing. OK, who's willing? No? OK. Over here, thank you. Sorry for reaching. OK, thank you. OK, thank you. OK, little shy. Thank you. OK, sure. Thank you. OK. And let me get one more from the right-hand side. Thank you. All right. Thank you very much. So suffice it to say, at quick glance, it looks like there's been a number of interpretations of what John was prescribing. And that's fine. Thank you, Sean. Let me go ahead and lift up just a few of these, and then consider how we got to this point. So here is one that I'll project. Maybe it goes this way. Let's see. OK, here's one that's maybe a little more kite-like. OK. This one's pretty similar. This one got a little frilly, or a little on undo, undo, undo. [LAUGHTER] Maybe. OK, so this one looks a little more house-like, perhaps. OK, but it looks reminiscent of the same length line someone was-- that John prescribed. This one looks three-dimensional-- very nice. This one, less so. [LAUGHTER] And let's take a look-- actually, it looks like we got one more that has a bit of 3D to it. So let me go ahead and go back to what John alone was looking at. And in fact, what he was describing was this. So it looks like a few of you. So a round of applause for those of you who did get the-- who did get, frankly, the cube, which was a word I noticed you didn't actually say. But that's fine, because John was trying to be ever-so precise, like a computer might need to be, in specifying exactly what line needs to be drawn, and where it needs to be drawn, how long it needs to be. But notice just how much harder that problem was without John just indulging in the luxury of saying, hey everyone, draw a cube. Now, there's some ambiguity, to be fair, in just saying, draw a cube. Because which way is it rotated, at what angle? So he probably would have had to specify. But that's all an abstraction is. We all know, intuitively, what a cube is, in this room. But when you really start to think about it, well, a cube is really like a diamond shape on top, and then two more on the sides, and everything lines up with equidistant lines. So there's a specificity required, where you really get into the weeds, so to speak. And I'm sort of painting a picture down here, because those are the lower-level implementation details, like when we discussed binary. So in this case, maybe abstraction would have helped. It certainly is how we would think about this. But how would a computer do this? Odds are a computer would paint this picture quite like John was prescribing, putting down the equivalent of a pen or a marker, and then moving up, or down, or left, or right, maybe going up at one point to then move that pen or ink elsewhere. And that's the level we're going to start thinking about in just a bit today when we introduced Scratch, the first of our programming languages, via which we'll program by dragging and dropping puzzle pieces. And some of those pieces very well could do exactly what John was doing by drawing. But we'll see we need to actually build some of these abstractions ourselves. Now in the reverse direction, let's flip it around so everyone can rather partake. Can we get one more volunteer to come on up on stage. Let me look just a little farther back this time, a little more-- OK, right here. OK, come on-- yeah, sure. What's your name? AUDIENCE: Chloe. DAVID MALAN: Chloe, come on up. So this time, no one else needs paper. Because Chloe, you're the only one who has to draw this time. And you're the only one in the room who's not going to see what the picture is. AUDIENCE: All right. DAVID MALAN: So, and the only rule is you may not turn around at any number of screens that show you what everyone else sees. And I'm going to project it over here. So if you want to go ahead and now just take on the role that you did a moment ago, but all of us will now program you verbally, step by step, to draw without looking. Just look that way, please. A little to the right. To your right. OK, good. Who would like to offer step 1, from the audience, for Chloe? Yes. AUDIENCE: Draw a circle in the upper half of the chalkboard. DAVID MALAN: Draw a circle in the upper half of the chalkboard. AUDIENCE: [INAUDIBLE] DAVID MALAN: OK. OK. Step 2. Yes? AUDIENCE: From the middle of the middle of the bottom part of the circle, draw an upside-down Y. DAVID MALAN: From the middle of the bottom part of the circle, drawn an upside-down Y. OK, step three? Step three. No one? Yes, in the middle. AUDIENCE: From the point at which the circle connects to the line, draw the line in a 90-degree angle, with the point facing down. [LAUGHTER] CHLOE: Is the point facing [INAUDIBLE] AUDIENCE: The point of the angle. DAVID MALAN: All right, let's be more precise. I think she's at the right starting point. So let's go from there. Your-- AUDIENCE: Draw a line at a 45-degree angle down. Draw a line 45-- CHLOE: [INAUDIBLE] [LAUGHTER] DAVID MALAN: OK. Took some liberties there, but OK. Step 4. Step 4. Someone else? Step 4. Yes, in back. AUDIENCE: Complete the triangle on the left side. DAVID MALAN: Complete the triangle on the left side. OK, nice. Step 5. Yeah, right here, in the middle. AUDIENCE: On the right. So that line that's sticking out of the intersection of the circle and the other line-- OK, that one. [LAUGHTER] [INAUDIBLE] draw on the right, at a 45-degree angle. DAVID MALAN: Draw a 45-degree angle up. OK, nice. Step 6, almost home. Yeah, in the front. AUDIENCE: So bring your chalk to the top left of the circle, and then go-- without touching, hover like one inch up. Yeah, OK. Now touch the chalkboard, and draw a one-inch line to the left, up, like at a 45-degree angle. So you're like one inch away from the circle on the left. Yeah, but move-- yeah, that's fine. [LAUGHTER] And draw a line 45 degrees up, to the left. [LAUGHTER] CHLOE: Left or right? AUDIENCE: Oh, sorry. So start on the right, then you're moving up to the left. [LAUGHTER] DAVID MALAN: Yes, OK. Very nice. And finally, step 7. Yeah. AUDIENCE: To the left of that line, just move [INAUDIBLE] DAVID MALAN: Anything you want. AUDIENCE: All right, [INAUDIBLE]. OK, right edge [INAUDIBLE] CHLOE: Right-- AUDIENCE: Right edge [INAUDIBLE]. DAVID MALAN: An abstraction you could also just call, hi. [LAUGHTER] And if we could, I think-- Chloe, you want to take a look at what you were being prescribed to draw? I think a round of applause. That's pretty good. [APPLAUSE] Thank you. Thank you. So there, too, it actually felt like everyone, including you, were kind of resisting the tendency to provide abstractions. But clearly, they're useful, right? It's a lot easier to have said, draw "hi," or even slightly lower-level draw, an H and an I, then frankly, it would have been to tell Chloe, well, put your chalk at the top left, then draw down an inch, then lift it up, and move it up a half an inch, and then move it to the right. I mean, that's what an H is, a capital H. But when we think of H, you don't think about it as really being three lines that are sort of mathematically defined. But a computer ultimately will. And thankfully, once we, or one person in the world has decided how to draw an H on the screen, odds are, you and I don't have to bother with that low-level implementation detail anymore. Because you could imagine programming could get super tedious if literally every time you want to do something interesting graphically, you had to implement all of that low-level logic yourself. And we're not going to have to do that. In fact, because of this language and other scratch, you have at your disposal a whole toolkit, so to speak, of puzzle pieces, or as we'll start calling them, functions-- verbs, actions-- that someone else wrote, that we can use to actually achieve the effects, graphical or otherwise, that we actually want to perform in the computer. So let's see what other building blocks are going to remain in this toolkit for us ahead. So problem-solving, recall, was defined as this, inputs and outputs. And inside of that proverbial black box were what? AUDIENCE: [INAUDIBLE] DAVID MALAN: Say once more. AUDIENCE: [INAUDIBLE] DAVID MALAN: I sort of. AUDIENCE: [INAUDIBLE] DAVID MALAN: Algorithms was the keyword we proposed last week, is inside the black box. And an algorithm is just step-by-step instructions for solving some problems, but sounds fancier than that. And so these algorithms we began to introduce by way of a few of those step-by-step problems, like counting the number of people in the room, finding Mike Smith in a phone book, sorting the humans on the stage. All of those were algorithms. But only one of them did we really start to refine a little more precisely using something called pseudocode. And arguably, that's our first language of CS50-- pseudocode, which has no formal definition. It just means, in English, or whatever your native language is, just write short, succinct instructions that gets your point across. And the point we wanted to get across last time for finding Mike Smith in a phone book looked something like this. And recall what we did was call out a few of the key operative words in this pseudocode that kind of fit a pattern, all of the highlighted words here, did we call what? AUDIENCE: [INAUDIBLE] DAVID MALAN: Say a [INAUDIBLE] AUDIENCE: Commands. DAVID MALAN: Commands, or functions, we call them, technically-- commands, actions, verbs. And we're going to just start, across the board, calling them functions, if only because that's what a lot of programming languages call them. Functions provide you with functionality. You can think of it like that. They are really among the building blocks of a program. A program-- a computer program, or a piece of software, is just a collection of one or more uses of functions and other building blocks. And among those other building blocks, for instance, are these. So highlighted in yellow now are keywords like "if," and "else if," and "else," which we described as examples of what last tie. Yeah. AUDIENCE: Conditions. DAVID MALAN: Conditions. So these are questions-- very well done. Questions that you can ask in a computer to decide whether you're going to do this, or that, or this other thing. It's sort of like the proverbial fork in the road. Go left, go right, or maybe somewhere down the middle in a forking of the road. Now in yellow here-- slightly fancier term-- but these were the actual questions to which we had or wanted yes/no or true/false, or 1/0 answers. And we called these what? AUDIENCE: Boolean. DAVID MALAN: Boolean expressions. Boolean expression is just an expression that evaluates to true or false. That is, it is true or false, yes or no, 1 or 0, however you want to think about those two opposites. And you use Boolean expressions as part of conditions to decide on what basis to go left or right or somewhere else when deciding what to do in a program. And then lastly, we had these, which we called what? AUDIENCE: Loops. DAVID MALAN: Yeah, loops. They were cyclical in nature. And we're going to see them in different forms today, and next week, and beyond. But in this case, it's a loop in the sense that it's literally telling you, go back from these steps to step 2, and that induces the cyclicity. Do this again, and again, and again, thereby achieving the same functionality, hopefully until we find, in this case, Mike Smith. So this is just a few of the building blocks in this toolkit, if you will, that we're also going to see now in another language, called Scratch. And Scratch, also, like other languages, provides us with a few other ingredients, too, things called variables, which you might recall from algebra-- x, and y, and z. But these are more general purpose, not storing just numbers, but really storing strings of text-- words and paragraphs. You can store colors, and images, and videos, just variables or placeholders. And then we'll talk a little fancier about terms like threading and events. These are more technical terms, but they provide us with very useful and very straightforward features in a program. But to do that, we need to actually introduce a language. So what is a programming language? It is typically a set of English-like words that some humans in a room, years ago, decided can be used to express yourself precisely and methodically to get a computer to do something. And some other people, typically, then took that language, a sequence of English-like words, and they figured out how to convert those English-like words to the zeros and ones that our computers actually understand. So when you hear the slogan, "Intel inside," that refers to a computer having Intel hardware. Intel, a big, popular company, for hardware, they make CPUs-- Central Processing Units. And those are chips that might be yay big, or even smaller, or even bigger, that just know what to do when it sees certain patterns zeroes and ones. And what might the CPU, the brain of the computer, do? Well, sometimes it might do addition. Sometimes it might do subtraction. Sometimes it might save something for you-- information, sometimes that might load information for you. Sometimes it might print something on the screen. So Intel Inside means that every Mac and PC and other device these days-- or there's other brands, too, can do certain very simple operations. And when we humans want to program, we're not going to want to program in zeroes and ones. We're not going to want to program, necessarily, in the same way Intel might have designed that chip. We want to program in something that's as close to English as possible. And we can actually go even further-- it would be nice if we could actually program more pictorially. And that's where Scratch enters. This is a programming language that someone else figured out how to convert effectively to zeros and ones, but that allows us humans to write software with loops, and conditions, and functions, and more, by just dragging and dropping little graphical icons. We use it just for a week in the class, just for one homework assignment, just to give everyone a sense of what you can do with the language. And those of you who have programmed before-- not to worry, even if you find it more readily accessible-- odds are, you'll find yourselves pushing yourselves, trying to figure out how to do something in this language because it might actually be non-obvious if it's not quite like the languages you've seen before. So what is Scratch? That is not Scratch. At the moment, it is a website. So this is a programming language that is implemented in the confines of a web browser. Because that just makes it very accessible to people around the world. It's targeted generally at younger students who use it in afterschool programs to just learn how to do more computational thinking in a fun way. We're going to use it to explore some of those very same building blocks of programs, and then next week, translate, literally, those graphical puzzle pieces to the more technically-looking but conceptually identical keywords in different language called C. So what is it we're looking at here? So you'll see in the first homework assignment, ultimately, what URL to go to, and how to log in, and all of that. Today, we'll focus more on the ideas, and the features, and the programming we can do with this. On the left-hand side or all of those puzzle pieces I keep referring to. And those little circles that are colored just categorize the puzzle pieces into different modes of functionality. So you have collections of functions, you have things related to conditions, you have things related to variables. And even-- because it's a fun environment-- things like sound, sensing-- so you can sense your environment-- colors, and the like. So there's some more aesthetic stuff in there, too. On the right-hand side, way up there on top right, is Scratch, the default cat that you get with any program you write. So you can very quickly change him into a dog, or to a person, or to nothing at all. That's just an implementation detail, ultimately. He exists on a so-called stage, that rectangular or square-like region in the top right-hand corner. And very simply, he's going to be able to minimally move up, down, left, right, and do other things as well. That is his world. And then lastly is this big middle region that's currently blank, a blank slate, if you will. That is where we'll be able to drag and drop puzzle pieces, have them interlock together, and then command-- just like John did to you, and we did to Chloe-- them to do something on that stage. So most simply, for instance, might we do this. I'm going to go down to Control, because I want to control-- rather, I want to control what this program does. And you'll see some familiar keywords. Let me zoom in. You'll see things like "if," which we note already to be a condition. We see some new words, like "repeat" and "forever." But odds are, those are examples of loops. They just kind of say what they mean. And if we scroll a little higher, there's something called events. And it turns out, there's some helpful events here, the first one being when green flag clicked. Because it turns out-- you might not have noticed- that just above Scratch's stage, up here, is a green flag, like in a race, that means go, run the program. And then a little red stop sign icon that just means stop. So that's how we're going to run and stop the program. So what does this mean. Well, I have a puzzle piece that literally says, when the green flag is clicked, that's kind of the way to start running a program. Because when I click the green flag, the following is going to happen. At the moment, nothing is going to happen, because there's no puzzle pieces snapped onto the bottom of this. But let's go ahead and do that. Let me go ahead and-- let me go down to Looks. And let me go ahead and quite simply say, the very canonical computer science-ey term, "hello, world." And notice, I've provided input now to this puzzle piece. So this purple puzzle piece, say, is an example of a function. It's an action, clearly. It's literally a verb. And it actually takes an input, the words, or a word, or number, or whatever, that you want the cat to say. And because it's now attached to the one green flag clicked, just logically, that is literally what's going to happen. So just in case this is a little small, this is the program we've written thus far. And notice it's indeed attached. I can detach it, and move it over here. But they're rather magnetic, and they kind of want to go together. And now, if I zoom out and click the green flag, I'm going to indeed play this program. And that's it. Kind of underwhelming, certainly, with what we can do here. But if we could, can we get one volunteer? And let's quickly fast-forward to the end game here, something you can really do once you start connecting these blocks, from a former student. Someone like to come on up and play a game, just a few seconds? Yeah, come on up. What's your name? STEVEN: Steven. DAVID MALAN: Steven? STEVEN: Yep. DAVID MALAN: OK, nice to meet you, David. All right, so this is a game by a former student, called Pikachu's choose Pastry Catch, that at first glance is probably going to only impress, but perhaps overwhelm, that you go from "hello, world" with two puzzle pieces to the interactive game. But over the course of today, what we're going to do is distill programs like Pikachu's Pastry Catch, and think about, well, if you actually focus on one piece of it at a time, you can actually build it, step by step by step, until you're really impressed with yourself some number of hours later. Let me go ahead and fullscreen it here. Let me go ahead and click the green flag, and hit the space bar. PIKACHU: Pikachu. [LAUGHTER] DAVID MALAN: That was one puzzle piece to do that. So you want to-- [VIDEO GAME MUSIC PLAYING] --there we go, left and right, and up. That was bad, bad. OK. OK, a round of applause for Steven. [APPLAUSE] OK, let's do it once more. AUDIENCE: Let's do it. What's run, and what's [INAUDIBLE]? DAVID MALAN: OK, so let's go back to the-- let's stop and restart. So here we go. I'm going to hit the space bar for the instructions. PIKACHU: Pikachu. DAVID MALAN: Catch the food, don't catch the bombs. STEVEN: I see. DAVID MALAN: OK. [LAUGHTER] PIKACHU: [INAUDIBLE] [VIDEO GAME MUSIC PLAYING] DAVID MALAN: Nice. So notice, as Steven plays-- that's a bug. Notice, as Steven plays, there's some kind of counter keeping track of how many cookies and cakes he's caught. And so we're going to call that a variable. It's just a number, like x or y, that's getting incremented-- added to again and again. Notice that this time he still has three lives left, per the icons in the top right-hand corner. Just so we can see, do you mind throwing a game? Can you just let a bomb hit you? And watch the variable. Now he's down to two. You can also jump, I think, with up. So let's consider what some of these building blocks are. He's clearly moving left, right, and up. Left is the result, clearly, of him hitting a key on my keyboard. So apparently, in a computer program, you can listen for specific keys. Notice, if he hits up-- hit up once more. Notice, when he hits up, it's not just up, down. There seems to be a bit of animation. And now it's a loop. Here's an example of a loop. And you'll see that sometimes things fall more quickly than others, which is making the game arguably harder. So if you've ever heard of, back in the day, AI, or artificial intelligence, this is often what it typically meant, just make things harder, don't necessarily understand what the user is doing. And we'll see now, it looks like Steven has 16 seconds left. And everything's falling faster. 10 seconds-- so that, too, is probably just a variable that's being decremented-- decreased again and again. Very nice. One second. And you still died, I guess, at the end. All right, a round of applause for real. [APPLAUSE] Thank you. So most of my voiceover there was just trying to justify spending that much time playing the game. But there are indeed these various building blocks. Because think about all of the various components on the screen. A moment ago, we just saw Scratch say, "hello, world." Now, we clearly see so much more going on. And indeed, the programs look a little scary at first glance. It's lots of puzzle pieces. But the student who wrote this did not just start dragging and dropping all of these puzzle pieces, and voila, thus was born the game. They focused on individual building blocks. What might some of those building blocks have been? Well, when the game first started, the cakes and the bombs were falling somewhat slowly, and not all that often. And each of those cakes and each of those bombs is just what we're going to call sprite. It's some kind of object in the program that you can associate scripts or puzzle pieces with. And just as Scratch is a single sprite, this game had at least a dozen or more sprites moving along. So this middle area where all your scripts are actually associated with each of the characters or sprites in the game. This, for instance, because Pikachu is highlighted, are all of the scripts associated with Pikachu, who Steven was playing as. Then there is a separate sprite for the cupcake. And these are apparently all the puzzle pieces that govern just what the cupcake was doing, again and again. If we keep clicking, here's what the bomb was doing. And if we actually really looked closely at this, we could understand why was the bomb moving so quickly, why was the cake starting from the location it did. And we're not going to go into those weeds with this game. But realize things escalated quickly, but not before we'll take these step-by-step approaches to building some of these pieces of functionality. So what do I mean by that? Well, let me go ahead and actually just write a slightly different program. Let me clear the stage here. And you'll see, at the moment, Scratch is in beta. So you might have to dismiss some of those warnings, but it works. And what you'll see here is just a clean slate again. So let's do something that actually takes some input this time, and specify something like this. Let me go down to Events, because many of my programs are going to start with just this one puzzle piece, when green flag clicked. And now I'm going to go ahead and let's look for, say, Sensing. Notice this block here. It turns out you can actually get input from the user. You can ask the user questions. So ask, what's your name and weight? That's just a placeholder in the white box there. So I'm going to go ahead and drag and drop this, under that puzzle piece. And literally, it asked the user that. And then once I get his or her name, you know what I'm going to do. I'm going to go ahead and say something. Previously, I said "hello, world." But it would be kind of cool if I could actually say the name of the user who just typed in his or her name. So how do I do that? Well, let me go back to Sensing, which is the category of blocks where I found this ask block. And notice, right below it is something that's apparently related. It turns out that this puzzle piece functions in the following way. When the user is asked what his or her name is, the answer is actually stored in a variable called Answer. And a variable, again, like in math, x, or y, or z, you can give them more descriptive names. Because it would be a little misleading to just call it x. So they called it Answer. And notice what I can do. I can drag and drop Answer. And just notice, as I hover over there, it's a little magnetic as well. I just let go, and voila, it grows or shrinks to fit the block. So now, if I go ahead and click Play, notice, Scratch is asking me what's my name. I can go ahead and type in, David, and hit Enter. And now it says just, David. That's not exactly how you're supposed to greet someone, by just saying, Benedict. It would be nice to say something like, hello, comma, Benedict. So how do we do that? Well, I only figured this out by futzing around myself. But it turns out, under Operators, down here, there's some other puzzle pieces that I got curious about. These are just placeholders, apple and banana, but Join does exactly that. It takes not one input but two inputs. Or, as we're going to start calling them, arguments-- two arguments to a function that somehow control its behavior. And what I'm going to do now is actually this. Let me go ahead and remove Answer, and just drag it over there. If it's disconnected, it's not going to do anything. But I don't have to throw it away just yet. I'm going to drag one of these join blocks. Notice it magnetically clicks into there. I don't want to say, apple, banana. I want to say hello, comma, space, and then move answer right there. So now I'm passing two inputs to join. But if you kind of think through the logic, how many inputs am I then passing into Say to control its behavior? There's kind of this nesting approach. And the fact that I literally put one puzzle piece on top of the other indicates what the order of operations is. This is going to join the two words-- "hello," comma, and then "answer," and then it's going to pass whatever that answer is-- otherwise known as a return value, but more on that next week-- into Say as its argument. So functions can take arguments, whether it's one, or two, or even more. Now let me go ahead and hit green flag again. What's your name? David, Enter, "hello, David." So now it's a little more interactive. And I can type in any name, and it will just work. So it's not hard-coded anymore. So I have a dynamic program. And notice, the key takeaways here is not so much what it does but how it does it. But this is a little underwhelming, certainly on the heels of the game Steven was just playing. So let's actually take things up a notch. I'm going to go ahead and start over. And I can do this by just dragging all of my puzzle pieces away. They just get deleted. Now I'm going to go ahead and do this. I'm going to go ahead and start with the same puzzle pieces before, when green flag clicked, and then go under Sounds. And Scratch is a cat. Turns out he actually comes with some cat sounds. So let me go ahead and play this game now. [CAT MEOWING] Aw, it's kind of cute. [CAT MEOWING] It's a little annoying that I have to literally click the button every time I want to hear this play. But that's doing literally what it says. What if I want the cat to meow three times? How might I do this? Well, I see I have more of these, sort of an infinite supply. So I could just do this. Let me go ahead and hit play. [CAT MEOWING] Hm, that didn't seem to work. Let's do it again. [CAT MEOWING] Hm, doesn't quite sound right. But there are three puzzle pieces. Feels like a bug. My mistake, MIT's mistake, what's going on? I kind of wanted to hear "meow, meow, meow--" though not quite like that. Yeah. AUDIENCE: The time in between three [INAUDIBLE] DAVID MALAN: Yeah. It turns out that Macs and PCs are pretty fast. But this sound, of course, is stretched over a second or so. And the puzzle piece literally just says, start the sound, meow. And it doesn't say, wait for it to finish. It doesn't say anything about time. It just says, start the sound, start the sound, start the sound, three, one after the other. And so they're just kind of tripping over themselves because I've not waited. So-- [CAT MEOWING] --they're there, they're just all overlaid on each other. So I can fix this in a few ways. Let me actually go ahead and go to Control. Notice here, there's a weight block, which might actually help me fix this. So let me go ahead, and notice, you can kind of snap things inside if you want. So let me wait one second there, let me wait one second here, and now click Play. [CAT MEOWING THREE TIMES] OK, the cat's a little agitated. So that doesn't sound quite natural. I can change the input to wait to maybe be two seconds, and now play it. [CAT MEOWING THREE TIMES WITH WIDER INTERVALS] OK, a little more realistic. But this is getting a little tedious. But it turns out, if I look a little more closely, Scratch actually came with something a little more straightforward. Which puzzle piece should I probably have just used in the first place to solve the same problem? I'm currently using start sound. Yeah? AUDIENCE: Play sound, meow, until done. DAVID MALAN: Yeah, I mean, that just kind of says what it does-- play sound meow until done, thereby eliminating the tripping over of the sounds. So let me try that. I'm going to throw all of these away. And now let me just grab three identical copies of this, and see what happens. [CAT MEOWING THREE TIMES, QUICKLY] All right, so it's kind of the agitated cat again, but at least I didn't have to do as much work. It's three puzzle pieces instead of six, which just feels a little cleaner. It's twice as fast to write. But I bet I can do better than this. I'm asking the cat's meow again, and again, and again. What's the concept that comes to mind? AUDIENCE: [INAUDIBLE] DAVID MALAN: What's that? AUDIENCE: Repeat. DAVID MALAN: Repeat in some form. So a loop more generally. So we saw one of those earlier. If I go down to Control-- and notice here, repeat 10. So let me detach these. Let me grab a repeat block. And it doesn't look very big, but that gap in the middle will actually grow to fill. Let me just grab one of these now, throw the other two away. And now, even though it's still three puzzle pieces, it just feels like it's a little more maintainable. Because now I can just change how many times I want it to run there. [CAT MEOWING THREE TIMES, QUICKLY] OK, not quite natural. But again, how do I fix this problem? Yeah, I should probably wait. So let me go back to Control, and grab Wait One Second. This will snap to fit. And now-- [CAT MEOWING THREE TIMES AT ONE SECOND INTERVALS] OK. So it's getting better. And now we're sort of making a cleaner program, if you will. Because consider the alternative. If I wanted the cat's to meow 10 times, if I took that first approach, and dragged and dropped 10 play-sound blocks, that just gets messy. It feels like you're just wasting time and effort. Why not just grab one block, the repeat block, as you proposed, and just sandwich in one or two related blocks, like "play sound and wait," in order to achieve the same result. Well, let me go and do something a little fancier now. Let me go ahead and get rid of these, and let me demonstrate how we might have Scratch actually count itself in a program. Let me go ahead and go down to Variable here. And notice that there's a whole bunch of blocks here. But by default, I actually get one variable, called My Variable. But that's not very descriptive. Let me go ahead and make my own variable by clicking this box. That pops up this window. And I'm going to go ahead and make a variable called Counter. I just want a counter that just counts from one on up. I could call it x, or y, but Counter is more descriptive in English. Now notice I have a new puzzle piece in orange, Counter. And let me go ahead and drag-- let's go ahead and drag this one, Set Counter to 1. So this is a command in Scratch that just lets me do exactly that, initialize this variable to having a specific value. Then let me go to Control. And let me go and forever do the following. I want Scratch just to demonstrate to me that he can count up to, say, as high as he can go. We'll see how fast he counts. So let me go ahead and have him say-- not a word this time, so not "hello" for two seconds. Let me go down to Variables, and let me drag Counter where the word "hello" is, and have him just say the counter for one second. And then after that, what do I want to do? I'm going to go ahead and change the counter by one, and then let him repeat. So these programs alone-- let me go ahead and zoom in on the program that I just wrote. This program, composed of these five-or-so puzzle pieces, would seem to set a variable, called Counter to 1, and then show it on the screen. Then add one to the counter-- So hopefully it's up to two-- and then just say that on the screen. And repeat, and repeat, and repeat, and just do this forever. Because of that block, literally forever, an example of a loop-- 1, 2, 3, 4-- so it's going to go pretty straightforwardly. So what are the building blocks here? We have a loop, we have some functions, and we have, now, a variable. Now this gets very underwhelming quickly. Let's see if we can't make Scratch count a little more quickly. What would be a faster way of counting than by one? AUDIENCE: 10. DAVID MALAN: By 10, we could do. Or even more so-- 20 is more. So we could obviously play this for a while. So why don't we just have scratch double what he's doing on every iteration and every cycle? So how do I do this? Well, instead of changing the counter by one, you know what I'm going to do? I'm going to go ahead and set the counter-- let me stop the program. I'm going to go ahead and set the counter. And if I dig into Operators down here, Multiplication, I feel, is going to add up pretty quickly. So let me go ahead and set the counter equal to itself, times, say, two, and get rid of this altogether. So now, on every iteration, after starting at one, it's going to go two, four, eight, 16, 32, 64. And that would seem to grow-- technically, exponentially-- much faster. All right, so we're already counting pretty much higher than we did before. But this is still kind of tedious. What would happen if we instead do this? Let me go to Looks. And let me not say the counter for one second, why don't I just go ahead and say it by stealing this-- oops, let me get rid of this block, and just do this. So let's stop waiting. Now the cat can count pretty high-- 10 to the 70th, 80th, 90th. Now it just can't even fit in the speech bubble. So he's counting pretty high. This is times 10 to the 160, 10 to the 200 is coming up. This is kind of inviting the question, how high can Scratch-- or more technically-- how high can a computer count? Yes, last week we only counted up to, like, eight on the stage. Now we've already passed that. And at some point, Scratch appears to have just given up. Why? What's the intuition here, beyond a 12-year-old not really needing to count this high anyway, with this program? Why does Scratch just kind of say, that's it, infinity? What would be the implication of counting up, actually, forever? Yeah. AUDIENCE: You could go back past the amount of space that you have. DAVID MALAN: Yeah, you might, right? Because think about these abstractions we've built up over the past week. We know that there's electricity in zeroes and ones, and from there, we get decimal numbers, or any number of other types of data. But we always, always, always had a finite amount of battery capacity in our laptop. We had a finite number of bits or humans on the stage or on the chalkboard. We have a finite number of zeroes and ones. And you can only permute-- that is arrange-- a fixed number of zeros and ones in so many ways. Eventually, you're going to get all ones-- one, one, one, one. And you can't just carry the one again, because you don't have more hardware. You don't have more bits. And so you have to decide what to do. Scratch decides to just say, that's it, I can't count that high. Because MIT has decided to only allocate Scratch some number of bits to count super high, but no further. But if you didn't have that boundary. And you had, in your memory, a whole bunch of ones, ones, ones, ones, ones. And it turns out you can't spend any more space because you just don't have the hardware. The next number after this value on the board, guess what? It becomes what? This is 31, if we actually did the math. What comes after 31 if you only have five bits? Zero, zero, zero, zero, zero, because the only way you can change the pattern is to just change them to zeroes. So long story short, there's an implication for computers of what they're even capable of. You might think that they have this infinite capacity beyond us humans, but that's not actually the case. And we're just seeing a tiny bit of evidence of that here. Well now let's actually make Scratch more of a pet, and demonstrate some other building blocks with which we can navigate a program here. Let me go ahead and grab a one green flag clicked. Let me go under Control, and go to Forever again. And let me go ahead now and ask a question for the first time. Under Control, I'm going to go to this If block. And I'm going to say something like this. I want to kind of take scratch for a walk, if you will, on that stage. I want him to move around and interact with me or my cursor on the screen. So it turns out there's this category of blocks called Sensing. And notice this one at the top, Touching, mouse pointer. It's kind of a funky shape, with diamond shapes on the ends, left and right here. And so this is actually a category of Boolean expressions, questions you can ask that have yes, no, or true/false answers. So if I drag this, notice it's the right shape but not the right size. That's OK. It's going to grow to fill it. And now what I'm going to go ahead and do is go ahead and play the sound, meow, only if Scratch is touching the mouse pointer. So now if I go ahead and hit Play again, nothing's happening. But notice my cursor is in the top corner there. Let me zoom in. My cursor is now above Scratch. But now, if I move to pet him-- try this again. [INAUDIBLE] [CAT MEOWING] OK, that's a bug in Scratch, I think. So logically-- we'll pretend the last 20 seconds didn't happen. The program is indeed working as expected. All right, so what's going on? If the mouse pointer is actually touching Scratch, we're noticing it in that If condition. But it's super-important that I have wrapped it in that Forever block. Why? Scratch doesn't seem to be doing anything forever, does he? Why is there that forever, Chloe? AUDIENCE: If you don't put it in forever, then there won't be [INAUDIBLE] DAVID MALAN: Exactly. If you don't put the Forever, it's just going to ask that question once. And honestly, I don't think I can hit the green flag and move my cursor quickly enough to pet Scratch before it's already asked the question, if touching mouse pointer. And so odds are, what's going to happen is, he's just never going to meow. But if I instead use a Forever, he's just sitting there patiently, waiting and waiting, without doing anything, seemingly. But really, he's listening, if you will, or waiting for an actual touch of the mouse cursor. So now the key here is that we've embedded, within a loop, a condition, asking it again, and again, and again. And now let me go ahead and open up another example. And we'll post all of these sample programs on the website later today so you can play with them if you'd like, or use them as pieces to your problem set. I'm going to go ahead and open up another program here , called Meow 1. Oops, no, I'm going to recreate it really fast. Let's go ahead and do this. Let me go ahead and Forever, Control-- so do I want to do that one, Meow-- oh, let's do this. Let me go ahead and open this one, called Pet 1. So this one-- notice-- is going to work a little differently. This one-- [MEOWING] --is meowing endlessly, with just enough pause. But what's going to happen, apparently, when I do move to pet this cat? Yeah, he's going to roar. So in this case, the logic is a little different. Let me zoom in on the puzzle pieces here. So Forever, if touching mouse pointer, then Roar, apparently. Else, just meow. And at the moment, I'm not touching the cat. Notice my cursor is not even near it. But if I do move it closer and closer while it's still running-- [MEOWING] Bug. There we go. OK. Sorry for the bug. All right, so the reason is I needed to click on the white stage so that he would know my cursor was nearby. So here we go again. And now if I move to touch, there we go. All right, so let me open up a different one altogether, to demonstrate some actual movement here. Let me go ahead and open up what's called Bounce Zero. And this example here-- come on, upload. Notice what's happening here. So now we have the ability to start making something that's kind of a puzzle-- a building block for the game that Steven was playing earlier. It's just bouncing and bouncing off the stage. Why? Well notice, it's forever doing this. Every time that Forever loop executes, he moves 10 steps, apparently. But if he's touching the edge, he turns around 180 degrees. And you can kind of see him quickly doing that just over there. And if I zoom out, we'll see that he's still moving. But it's not exactly like real movement, right? His feet are just-- I can't even do it physically. But his feet are just in some fixed position as he's sliding across the stage. So let's breathe a little more life, so to speak, into this program. What does it mean for an image on the screen to give you the illusion of walking? What would need to happen to his feet, probably? Right now, they're just kind of fixed in place. Yeah, they need to shift somehow, right? Like when you walk, let's consider what happens. You kind of lift one foot, and it goes up, and you could imagine kind of taking one, or two, or three photographs of me or whoever while they're walking on the stage, and just using those photographs as examples of where their feet should be at points in time. And in fact, we can do this. I'm going to go ahead and pull up a slide, if you will, here. This is the original version of Scratch. And the subsequent slide actually looks like this. Legs are just a little different-- heads mostly those same, bodies mostly the same. But there's a little bit of movement. But notice, this is just my PDF of slides. If I go back, forth, back and forth, back and forth, it kind of looks like-- let me do it with two hands-- it kind of looks like he's walking now. It's pretty primitive, right? I kind of need a third, or fourth, or fifth frame to make it really look fluid. But that's all animation is. Recall from last time, when we talked about an image, and from images, we get videos. Videos are just like 24 or 30 images per second flying across the screen, thereby creating the illusion of movement. This would be two frames per second, maybe, just one snapshot, two snapshots, again, and again, and again, and again. But we can go pretty far with that. So it turns out that Scratch has this other feature. It's purely aesthetic. But it allows you to have multiple costumes. So by default, you get this one costume for Scratch, per the icon at top left. And you can actually draw any important GIFs and JPEGs from online if you want to make things look differently, like the student did for the Pikachu game. But by default, we just get this one costume. Well let me go ahead and instead open up a follow-on example here, this one called Bounce 1. And notice this one, if I go back to Costumes, actually has those two-- that one and that one. And again, it's just two points in time. But if I add one puzzle piece here, in purple, called Next Costume, if you read the documentation for Scratch, all that does is change the costume, change the costume, change the costume again and again. It's saying, next, because it just toggles among however many there are-- in this case, two. So now if I hit Play, it's cute. It's not really that natural. But now he's kind of legitimately sort of walking. How could we make it a little more fluid by changing the program, do you think? Why is he kind of moving so quickly? Was that a hand in back? AUDIENCE: [INAUDIBLE] DAVID MALAN: Wait a little longer before it changes. Yeah, I can do this in a few different ways. Let me try just waiting a second after he moves 10 steps. So now he's like tiptoeing. So that's probably too much. So rather than wait a second, let me try waiting 1/10 of a second-- better. Let me wait a little less than that, 0.05. OK, it still looks a little jittery, but that's only because we have two costumes to work with. But it's a little more realistic, too. And 10 steps, too, was how many he was moving. What's going to happen if I have to move 20 steps at a time, or maybe 20 pixels on the screen? What's the effect going to be? Bigger steps effectively. So let's try that. 20, Enter-- now he's moving quicker again. So now the wait really isn't helping because we're overwhelming it by movement. How about 30 steps. Now he's really moving. Let's go ahead and do 100 steps at a time. And if we do this enough-- 500? I mean, now he's just jumping back and forth on the screen. But again, that's all animation is. And frankly the game that we saw played, the Pikachu game, is really just a fine tuning, in parts, of those kinds of principles. Well let's make this actually more interactive again. Let me stop that, let me just reload to get back to a blank program. And let me go ahead and grab a when green flag clicked. And let me go ahead and, under Control, let me get a Forever block. And now let me go ahead and do this, motion. It turns out that there's bunches of blocks here. And we don't honestly care about all of them, per se, because they do what they say. We don't need to sort of exhaustively explore, I think, all of them. But this one sounds interesting-- point towards mouse pointer. Let me go ahead and grab that inside of my Forever block. And then let me have it move, just like one step, not 10. That's it, four puzzle pieces. What is this program going to do once I play the green flag? It's going to follow the mouse. So actually, that's kind of a funny, unintended pun. The cat is going to follow the mouse, if you will. But notice, that's exactly what he's doing. He's moving slower and more smoothly, but that's just because he's moving one step or pixel at a time. As my mouse moves, he's following it exactly. I mean, we can really kind of mess with him here, because he's just going to literally do what I say, depending only on the speed of my finger. But now we have the ability to do a more interactive game, not even using the keyboard, but using the mouse. So what more can we do with some of our building blocks here? Well this one, let me go ahead and open in advance, because it's a whole bunch of puzzle pieces. But let me go ahead and open this. I changed the costume for this one to be a-- let's see, upload here, let's call this Bark. Notice this one actually has a seal icon. And let me move the puzzle pieces-- there's actually two scripts here. And here, we can introduce the notion of threads. So it turns out that computers are so fast that they can kind of sort of do multiple things at a time. And that's sometimes a white lie. But sometimes computers have multiple cores, so to speak, or really multiple CPUs. If a computer has two or more brains, then it can literally do two or more things at once. One of those might be to run the program on the left, the other might be to run the program on the right. And we'll see what those programs do. But also, even in a computer that just has one brain, one CPU or core, as they say, computers are so darn fast and we humans are so relatively slow, a computer can give the illusion of doing multiple things at a time by spending a split second doing the work over here, then doing a split second of work over here, then over here, then over here, and over here. And because our CPUs, those Intels Inside, are moving at 1 gigahertz-- 1 billion operations per second, we humans don't even notice that it's splitting its time across these tasks. It just looks like things are happening in parallel. And so when a program is multi-threaded, so to speak, like threading a needle, that just means you can have two things happening-- or more-- at once. And that's useful here, because notice, both of these programs start when the green flag is clicked. Let me go ahead and hit Play. [SEAL BARKING] And then let me lower the volume. [SEAL BARKING] Come on. OK, a little lower volume. So what's going on now? How can I make it stop? If you can read this program, even though part of it's a little chopped off. [SEAL BARKING] Hit the space bar, and that's going to mute this program, apparently. Let's say-- OK, I didn't hit the Stop icon. I hit the space bar. I'll do it again, if you trust me-- space bar, space bar. So what's going on? Well, this is an example, now, of an even more interactive program. Notice on the left that I have the following. I created, in advance, what apparently is orange and a variable. I called it Muted this time instead of Counter. And again, just good choosing good words for variables that say what they are, just to help you think about what your program is doing. And I set it equal to literally False. I couldn't have set it equal to zero, but I just chose, literally, the word, False, per last week. Then, forever, what am I doing? I'm asking a question. If the space bar is pressed, then what do I want to do? Well, if muted equals false, change muted to true. Else, implicitly, if muted is true, change muted to false. So it took a few puzzle pieces there, with the Ifs. But if the space bar is clicked, I'm just checking, well, if this variable is true, make it false. But if this variable is false, make it true. So it just toggles the value. Meanwhile, what's the purpose of this program on the right-hand side, apparently? It's a little cut off. Let me move it over slightly. What's this program on the right-hand side doing? It's making noise. It is forever barking. It's playing the sound, Sea Lion, unless muted is true. Because before it barks and plays that sound, it's saying, if muted is false, then play the sound. So if it's not muted, false means no, or zero. So if it's not muted, play the sound. Otherwise, what does it do? Is there an else? There isn't. There doesn't need to be. It can just be a one-way fork in the road-- either go down it or don't. You don't have to do something else. And then it just waits one second and repeats. So threading refers to the process of both of these programs running at the same time. And notice that they're sharing state, if you will, as we'll say, eventually, sharing a variable across them. And that's another way for two sprites in this case-- or rather, one sprite, but two scripts, to actually interact with each other. We can see another form of this, too. If you ever played the game in a swimming pool in the US, growing up, Marco Polo, where one kid is blindfolded, or closes his or her eyes, and then everyone else swims around him or her, and then you just yell, Marco. Everyone else is supposed to yell, polo. And with you eyes closed, you're supposed to, in a pool, very dangerously, go find someone, and tag them, until they then become it. So in other words, one human says, Marco. The other humans say, polo. How might we actually simulate this in a program here? Well, let me open this program, this one using two puppets. And notice how this works. I'm going to hit Play. And as before, if I hit the space bar, something's going to happen. Orange puppet says, Marco. Blue puppet says, Polo, but only once the orange puppet has said something. Marco, Polo-- so why is that? Well, it turns out that this puppet is using a different building block altogether. This puppet is saying this-- forever, if the space is pressed, say, Marco, and then broadcast an event. So it turns out the two sprites can't see or hear what the other one is doing. Just because the one on the left says, Marco, doesn't mean the other on the right can actually see the word, Marco, appearing on the screen. To talk to another sprite, you need to do something a little more secretly in programming, known as broadcasting an event. And this is just a simple example, but there's literally a puzzle piece in Scratch called Broadcast that literally sends a secret message to any one other sprite that might be listening. And if that other sprite is expecting it-- and notice this-- I'm currently looking at the orange puppet's scripts. If I instead click on the blue puppet, notice, all he's doing is this. He's not waiting for the green flag. He's instead waiting for a different type of event, literally the word, event, to be secretly uttered to him, if you will. So when he receives that broadcasted event, then and only then does he say, polo, for two seconds. And that word event could be anything in this case. It's just the result, now, of using two puzzle pieces. The broadcast event to sort of secretly send a message to all other puppets, and then "when I receive" instead of "when green flag clicked." All right, let's actually now take a look at one final sequence here. Let's take a look at how you might design, now, your own puzzle piece. It turns out that you're not limited to only what Scratch provides. You can actually do this. Let me go ahead and say this. If I want to go ahead and, when the green flag is clicked, let me go ahead and say something like "cough." I want Scratch, unfortunately, to have a bit of a cough. And then, after he coughs, I'm going to go ahead and have him, say, wait for one second. And I'd like him to do this a few different times. It turns out if you control-click or right-click, you can start duplicating blocks to save time, even though that's a little lazy of me right now. So all this program does is, instead of meowing, it has Scratch coughing, again, and again, and again. Now we already know that we can do better with a program like this. This is bad design. The moment you start copying and pasting, and in Scratch, the moment you start duplicating, odds are you're taking a shortcut, and just making more work for yourself than you should. What puzzle piece should I have used instead? Yeah, Repeat, as before. So let me quickly clean this up. Let me go ahead and detach this. Let me go ahead and repeat, three times, just two of these blocks. So now we have a tighter program. And it's tighter in the sense that now, if I wanted him to cough 10 times, I literally just change one value. I don't have to go and copy, and paste, and update a whole bunch of things-- which, at the moment, not a big deal for three. Once it gets to be 10 or more, you're literally just creating work for yourself, and making it harder to maintain the program. But you know what? The notion of coughing is kind of a nice verb, right? It would've been nice if Scratch just came with a puzzle piece, called Cough, that literally displays cough on the screen so I don't have to reinvent this all the time. Maybe I want a whole bunch of animals to be coughing in this particular game, or animation, or whatnot. So let me make this code reusable. I want to never ever again write code for making a sprite cough. So it turns out you can do this by way of your own blocks or puzzle pieces. If I click on My Blocks at the bottom, and I click Make Block, I get this little interactive window, where I can give it a name. I'm going to go ahead and name this block, Cough, and then I'm going to go ahead and click OK. And what I'm now going to do is this. Now I get this pink puzzle piece. I'm going to actually move all of this code from inside there, to over to that puzzle piece, so that now I have this new pink block that I just created, called Cough. So now, if you look at my program, this is really how you want to think about the program. I want to abstract away from those lower-level implementation details, and just say, repeat the following 10 times, Cough. And only if you actually care what it means to cough do you need to bother scrolling to the left, and actually look at the implementation details, so to speak, of Cough. So it's a nice abstraction. We never again need to bother thinking about how do you make something cough. You just use it on the right. But I can take this one step further. How could I improve the program on the right, and in turn, this function I've created, called Cough? What would be a nice new feature to add to it? AUDIENCE: Add a sound. DAVID MALAN: Do a count. AUDIENCE: [INAUDIBLE] DAVID MALAN: Oh, OK. We could actually add a sound. As as an aside, do we have-- OK, we can do this. Here we go, real quick. Turns out there's a non-academic feature here, known as recording. If you allow your mic-- [COUGHING] OK, that is what a cough looks like when you graph it. We'll call this, Coughing. Let me go back to my code. This was not the point of this exercise. But so be it. Let me go ahead and say cough and play-- not meow, but coughing. [LAUGHTER] OK, so be it. But I was thinking of something else. How else can we improve the functionality, give a little more-- AUDIENCE: Motion. DAVID MALAN: Give more emotion? AUDIENCE: No, no, make it move. DAVID MALAN: Oh, make it move, too. [COUGHING] OK, we could do that. Also not what I have in mind. Let me-- go ahead. AUDIENCE: Not a variable to cough, but [INAUDIBLE] DAVID MALAN: Yeah, so this was actually what I was thinking up to. But those are all great decisions, too. So Cough right now is just a verb. It doesn't take any inputs. But it could, right? I don't strictly need the repeat block there. I could make Cough just a little fancier. So let me do this. I'm going to go ahead and right-click or control-click on it, and just edit. I'm going to go back one step to redefine it. And I'm actually going to click this button, Add an Input, number or text. And I'm going to go ahead and just call it n. Computer scientists tend to call arbitrary numbers n in the absence of something else. And then just a label that says, no functional [INAUDIBLE].. I'm just going to say cough n times, just so that the puzzle piece has some words on it. So now notice, what's nice-- now, my puzzle piece is fancier. I can actually get rid of this repeat block, just attach this, and say, cough 10 times. And now this repeat block, if you will, can become part of the abstraction such that it repeats not 10 times here, but I can drag and drop this. So notice now, the notion of coughing, if I zoom in, got a little fancier. You now have a custom puzzle piece, called Cough n times, where you, the user or caller of this function, specify how many times you want it to cough, then you let the code therein do that for you, so that now your program on the right, which is all you cared about at the end of the day, doesn't have to get into the weeds of all of that complexity. You can instead just say, cough 10 times, and never again think about the lower-level implementation details. So this is an abstraction on top of what that actually is. Well, let's go ahead now and tie all of this together if we can, in some more sophisticated examples, another one implemented by a recent student. Let me go ahead and open up, not Pikachu's Pastry Catch, but this one here, the Gingerbread Remix. So this one is not a game per se-- although it sort of is-- it's more of a story. Let me go ahead and hit Play, and I'll play this one up here. [MUSIC PLAYING] All right. Shall we have an apple? Let me go ahead and type, yes. And consider what's happening. Yes, is probably now my input. It's probably getting stored in a variable. And then that variable with an equals sign is probably being compared against the word, yes or no, in a condition. Here we go, yes. [SOUND EFFECTS PLAYING] OK, bad decision. So let's play again. Here we go. Green flag. [MUSIC PLAYING] OK, I'm going to say, no. Ooh, cupcake-- yes. [SOUND EFFECTS PLAYING] OK, poor choice again. But again, a condition is probably at play. Let's play a third time. No, no. [WICKED LAUGHTER] [CRYING] [STUDENTS LAUGHING] OK, surprise ending. So that's a simple game, now, to give you a sense of the range of capabilities here. And I thought, why don't we take a look at one final example as to what you can do with these various building blocks, but consider exactly how it got to this point of complexity in each of these programs, from the simplest to the fanciest. There was not a student sitting down at his or her keyboard, and then immediately starting to program by trying this, or let me do this, and this, and this. They thought about a simple problem there. So for instance, with the gingerbread game a moment ago, odds are, the student just had the princess come on the screen first-- one sprite, no witch, no house, no complexity, and just saying words on the screen. Then maybe the witch came into play, and the witch actually used that Ask block, and the witch asked a question, yes or no. Then, the student probably wrote some more code that said, once you get an answer, that special puzzle piece to that question, then use a condition. If the answer is yes, then game over after a bit of animation. How did the animation work? Probably quite like the cat, bouncing across the screen, but this time, just one direction, no bounce. Then as soon as the witch's apple or cupcake got close to the princess, turns out there's a block that says if one sprite is touching another-- like in the vicinity of the other-- then something else can happen, and thus something came on the screen there, too. And so with problems that zero, ultimately, the homework is going to be quite simply, make almost any Scratch project of interest to you-- a game, an interactive art, an animation, or the like. But the key is to think about it from the ground level up. Make just one feature at a time-- one cupcake, one apple, one witch, one princess, and begin to layer on top of that complexity. For this last example, made just a couple of years ago, as CS50 at Yale was just getting off the ground-- could we have one final volunteer? Yeah, OK, come on up. What's your name? AUDIENCE: Alvin. DAVID MALAN: Alfred. AUDIENCE: Alvin. DAVID MALAN: Alvin, Alvin. Come on up, Alvin. All right, this is Ivy's hardest game, pitting not just Yale and Harvard, but other Ivys against each other. Nice to meet you. We're about to see the instructions on the screen. And odds are, we'll muster some support of the audience here. Here we go, just a keyboard-based game-- up, down, left, right. [MUSIC - MC HAMMER, "CAN'T TOUCH THIS"] Very nice. So now second level-- crimson's in the way. Level three, two crimsons. And again, think about the building blocks. Now we're up to what, five sprites on the screen? But each of them is operating independently, and bouncing. MIT's a little smarter. [LAUGHTER] Nice. Very similar to that cat following the cursor. Nice. Second-to-last level. [CLASS OOHING] [APPLAUSE] [CLASS GROANING] Try a couple more times. Two more lives. OK, no, round of applause would be good for Alvin. [APPLAUSE] OK, so that's it for today. The first homework assignment will be posted on the website tomorrow. We'll stick around for one-on-one questions. A pleasure to have you in the course. See you all soon. [APPLAUSE]
B1 中級 CS502018--耶魯大學閱讀1--Scratch篇 (CS50 2018 - Lecture 1 at Yale - Scratch) 2 0 林宜悉 發佈於 2021 年 01 月 14 日 更多分享 分享 收藏 回報 影片單字