CS50 Video Player
    • 🧁
      • 🍩
      • 🍌
      • 🍿
    • 0:00:00Introduction
    • 0:02:35Representation
    • 0:06:02Binary
    • 0:09:17Binary Bulbs (Demo)
    • 0:12:22Representing Letters
    • 0:14:08Abstraction
    • 0:15:35Unicode
    • 0:17:21RGB
    • 0:19:38Representing Images and Video
    • 0:21:28Finding Mike Smith
    • 0:24:54Solving Problems Effectively
    • 0:28:20Pseudocode
    • 0:31:18Scratch
    • 0:33:16The Scratch Editor
    • 0:39:58meow
    • 0:42:22count0
    • 0:43:42pet0
    • 0:44:42pet1
    • 0:45:25bounce0
    • 0:48:15bounce1
    • 0:48:49bark
    • 0:50:38marco
    • 0:52:19cough
    • 0:54:03Custom Blocks
    • 0:56:09Oscartime
    • 0:58:21Ivy's Hardest Game
    • 0:00:00[MUSIC PLAYING]
    • 0:01:23DAVID MALAN: This is CS50, Harvard University's introduction
    • 0:01:26for the intellectual enterprises of computer science
    • 0:01:28and the art of programming.
    • 0:01:30My name is David Malan, and I actually took this course
    • 0:01:32myself sophomore year some years ago.
    • 0:01:35But I almost didn't.
    • 0:01:36At the time, I was quite uneasy with the idea,
    • 0:01:39frankly, of taking a computer science course, let alone this course.
    • 0:01:42And so my freshman year, at least, I really
    • 0:01:44gravitated toward courses and departments
    • 0:01:46with which I was much more familiar.
    • 0:01:48Computer science was well beyond my comfort zone at the time,
    • 0:01:52and it was really these unfamiliar waters
    • 0:01:54that I wasn't quite ready to shop, even my first year.
    • 0:01:57But sophomore year, I finally got up the nerve to come through the door of CS50,
    • 0:02:01and only because the professor at the time let me take the course pass/fail.
    • 0:02:05I was that uneasy.
    • 0:02:06And if only I had known at the time what I now know,
    • 0:02:09which is that 2/3 of CS50 students have never
    • 0:02:12taken a computer science course before.
    • 0:02:14So if you are feeling similarly uneasy with the idea of trying something new,
    • 0:02:18or even if you have prior background but are
    • 0:02:20looking to fill in gaps in your knowledge,
    • 0:02:21or if you're particularly self-taught, realize
    • 0:02:23you are very much in good company.
    • 0:02:25And ultimately, what matters in this course
    • 0:02:27is not so much where you end up relative to your classmates,
    • 0:02:30but where you end up relative to yourself when you began, which is,
    • 0:02:34of course, today.
    • 0:02:35So what, then, is computer science?
    • 0:02:37And what was it that I was so uneasy with?
    • 0:02:39Well, I dare say we can describe computer science as this.
    • 0:02:42It's just the process of solving problems.
    • 0:02:44And what does it mean to solve a problem?
    • 0:02:46You've got some input.
    • 0:02:47And the goal is to get some output, the solution, to that particular problem.
    • 0:02:52And in between, really, is computer science.
    • 0:02:54And we'll see what's in this literal black box on the screen
    • 0:02:57as we begin to fill in some of those blanks.
    • 0:02:59But when we consider a problem to be solved,
    • 0:03:02we have to all agree from the get-go, especially if we're using machines,
    • 0:03:05how are we going to represent these inputs and outputs?
    • 0:03:08And so one of the first concepts we explore in computer science
    • 0:03:11is how you represent information itself.
    • 0:03:14And odds are you probably know coming into this course
    • 0:03:16that computers only speak what language, so to speak?
    • 0:03:19AUDIENCE: Binary.
    • 0:03:20DAVID MALAN: Yeah.
    • 0:03:20So binary.
    • 0:03:21And if you've never heard that term before, fine, as well.
    • 0:03:23But zeros and ones, somehow.
    • 0:03:25But how do we get to that point?
    • 0:03:26Well, even if you kind of know that computers speak binary,
    • 0:03:29whatever that means, but you haven't necessarily
    • 0:03:31thought about how that works, well, consider how most of us
    • 0:03:34learn how to count maybe first on our hands.
    • 0:03:37If I want to count the number of people in the room,
    • 0:03:39I might do 1, 2, 3, 4, 5, putting up one finger for every person in the room.
    • 0:03:45So that's what's known as unary notation.
    • 0:03:47[? U, ?] or uno, implying 1 because I'm just putting up a finger
    • 0:03:50or not to count people in the room.
    • 0:03:52Of course, I can only count so high on just one hand.
    • 0:03:55But thankfully, we have many symbols in our so-called human world of decimal.
    • 0:04:00Dec meaning 10, we have digits 0 through 9.
    • 0:04:03And from there, we can express any numbers with which we're all familiar.
    • 0:04:07But computers don't have that many digits.
    • 0:04:10They only have zeros and ones.
    • 0:04:12And yet somehow, they're able to store not only numbers,
    • 0:04:14but letters and images and videos and sounds and so much more.
    • 0:04:18So how does that work?
    • 0:04:19Well, let's take a quick look at just this to get everyone on the same page
    • 0:04:22as to how you can build the phones in our pockets, the laptops on our desk
    • 0:04:25today, using just zeros and ones.
    • 0:04:28Well, these are just symbols on the screen here.
    • 0:04:31What does this, of course, represent?
    • 0:04:34123, but why?
    • 0:04:36I mean, these literally are just symbols or glyphs
    • 0:04:38on the screen, sort of strokes of a pen that we all ascribe meaning to.
    • 0:04:41We just see this as 123.
    • 0:04:43But why is that?
    • 0:04:44Well, if you're like me, you probably learned way back
    • 0:04:46when to think of the rightmost digit as being in the ones place or the ones
    • 0:04:50column, the middle digit as being in the tens
    • 0:04:52place, and the leftmost digit as being in the hundreds place.
    • 0:04:55So how do we get from this pattern of 1, 2, 3 to the number 123?
    • 0:04:59Well, it's some quick mental math that we all just do instinctively.
    • 0:05:02It's 100 times 1, plus 10 times 2, plus 1 times 3.
    • 0:05:08That, of course, gives us 100 plus 20 plus three, or 123.
    • 0:05:13So all of us just kind of take that process for granted now.
    • 0:05:16But it turns out that there's a system at play
    • 0:05:19here, a system such that we can figure out any number in the same way.
    • 0:05:23So if we've got our ones place, tens place, and hundreds place, of course,
    • 0:05:26in the decimal world, this is the number 1,
    • 0:05:28this is the number 2, 3, 4, 5, 6, 7, 8, 9.
    • 0:05:33Something interesting happens, of course, after 9.
    • 0:05:35You sort of carry the 1.
    • 0:05:36And why then does 010, or if we ignore the leading zeros as being
    • 0:05:41insignificant, why does one 0 represent the number we all know obviously as 10?
    • 0:05:45Well, just because it's 10 times 1 plus 1 times 0.
    • 0:05:48So that's the system we've been using for years.
    • 0:05:51And it turns out that these columns, realize, are just powers of 10.
    • 0:05:54So 10 to the 0 is 1, 10 to the 1 is 10, and 10 to the 2 is 100.
    • 0:05:59That's how we got ones, tens, and hundreds place.
    • 0:06:02Now in the computer world, you don't have 10 digits, 0 through 9.
    • 0:06:05You have just two digits, 0 and 1.
    • 0:06:08So we can just make a little tweak to our mental model here,
    • 0:06:11so to speak, and just now use 2, powers of 2, instead of powers of 10.
    • 0:06:15So that means the right hand column is going to be 1,
    • 0:06:18the middle column is going to be 2, the left column is going to be 4,
    • 0:06:21and if we kept going, it'd be 8, 16, 32 instead of 1,000, 10,000, 100,000.
    • 0:06:27But the idea is exactly the same.
    • 0:06:29So I propose that computers only speak zeros and ones, of course.
    • 0:06:32But how do they represent larger numbers than 0 and 1?
    • 0:06:37Well, this is representing 0.
    • 0:06:39This is representing 1.
    • 0:06:40What pattern of symbols on the screen would represent the number
    • 0:06:43we humans know as 2?
    • 0:06:45Yeah.
    • 0:06:46So 010.
    • 0:06:47So you just spoke binary.
    • 0:06:49So even if you just generally knew that binary is spoken by computers,
    • 0:06:53it just means that a computer, to represent the number we know as 2,
    • 0:06:56somehow stores a pattern of symbols of 010.
    • 0:06:59How do they represent 3?
    • 0:07:01011, for the same reason.
    • 0:07:03It's 2 times 1, plus 1 times 1, gives us, of course, three.
    • 0:07:07And now, just as before when we meant 9 to 10, now we actually go from 3 to 4
    • 0:07:11by carrying the 1 now.
    • 0:07:13So in binary, bi meaning two, hence the 0 and 1, 100 is not 100, per se,
    • 0:07:21it is literally the number we know as 4.
    • 0:07:23And we can keep going on up.
    • 0:07:24This of course, now is 5.
    • 0:07:26This would be 6.
    • 0:07:27This would be 7.
    • 0:07:28And what happens if we want to represent eight?
    • 0:07:31Yeah.
    • 0:07:32So we kind of have to solve this somehow.
    • 0:07:33We need another digit.
    • 0:07:34And that's fine, right?
    • 0:07:35In math class, you would just add another place, another column, in order
    • 0:07:39to get back the value that you want.
    • 0:07:42So we need more zeros or ones, otherwise, now known as bit.
    • 0:07:47If you've ever heard of the phrase bit, it just means binary digit,
    • 0:07:50and a 0 or a 1 is just something we know as a bit.
    • 0:07:53And why is this germane to computers?
    • 0:07:55Well, as fancy as our Macs and PCs and phones are today,
    • 0:07:58consider, after all, that at the end of the day,
    • 0:08:00what do you have to do, typically, with your laptop, your desktop,
    • 0:08:04your phone these days?
    • 0:08:07What do you do at the very end of the day?
    • 0:08:09Yeah, so you charge it, right?
    • 0:08:10You plug it into some physical resource.
    • 0:08:12That is the only physical resource into these computers that we use today.
    • 0:08:16And that's kind of nice, because, of course,
    • 0:08:18the core can either be plugged in or not plugged in.
    • 0:08:21Or maybe we could call that a 1 or a 0, true or false, on or off,
    • 0:08:27which is to say if electricity is our only input
    • 0:08:30and there's either yes electricity or no electricity,
    • 0:08:32well, that actually maps quite nicely to the idea of binary
    • 0:08:36because we need just two symbols, 0 and 1, off and on, to represent that idea.
    • 0:08:41Of course with a single bit, you can't do all that much.
    • 0:08:43You can only count from 0 to 1, and that's it.
    • 0:08:46So computers tend to use larger numbers of bits to represent information.
    • 0:08:50And they do this ultimately physically.
    • 0:08:53So it turns out that with both plug-in the wall,
    • 0:08:55or even a light bulb or a switch thereof, you can represent a 0 or 1.
    • 0:09:00But if you want to represent more zeros and ones,
    • 0:09:02well, we just need, maybe, 8 bits at a time.
    • 0:09:05And if you've ever heard of the expression byte, a byte is just a term
    • 0:09:10describing eight bits, eight zeros and ones, a more useful measure instead.
    • 0:09:15So given that, I think it's time, perhaps,
    • 0:09:19to see if we can't solve the problem ourselves.
    • 0:09:22Perhaps we could get, say, two volunteers to come on?
    • 0:09:25OK.
    • 0:09:25Saw one hand here and one hand over here.
    • 0:09:28Come on down, if you want to meet me on the other end of the stage.
    • 0:09:32Come on over here.
    • 0:09:36Come on down.
    • 0:09:37What's your name?
    • 0:09:37PRIYANKA: Priyanka.
    • 0:09:38DAVID MALAN: Priyanka, nice to meet you.
    • 0:09:39David.
    • 0:09:40Come on over and if you want to wait right here.
    • 0:09:42And what's your name?
    • 0:09:43CALVIN: Calvin.
    • 0:09:44DAVID MALAN: Calvin?
    • 0:09:44CALVIN: Yeah.
    • 0:09:45DAVID MALAN: David.
    • 0:09:45Nice to meet you.
    • 0:09:46Come on over here where Priyanka is.
    • 0:09:47So Priyanka, you raised your hand first, so you get to choose.
    • 0:09:50Do you want to go first or second in this little challenge ahead?
    • 0:09:53PRIYANKA: Uh, I'll go first.
    • 0:09:54DAVID MALAN: OK.
    • 0:09:54So Priyanka is going to go first.
    • 0:09:56If you want to stand over there, Calvin.
    • 0:09:57So the challenge at head here is could you
    • 0:09:59go ahead and represent for us in binary, using each of these light bulbs
    • 0:10:04and, in turn, switches, as zeros and ones, say, the number 50?
    • 0:10:10So you might turn one light bulb on representing the 32s place.
    • 0:10:18Might turn a light bulb on representing the eighth place.
    • 0:10:21Our total count now is 32 plus not 8 plus 16,
    • 0:10:27I think, which is going to give us 32 plus 16, which is 48.
    • 0:10:33And so we get now a round of applause, if we could, for Priyanka.
    • 0:10:38Thanks very much.
    • 0:10:40Give us just a moment.
    • 0:10:41So each of these light bulbs, then, represents just a switch or a bit.
    • 0:10:44And inside of your computer, if you've ever heard the phrase transistor,
    • 0:10:48a transistor is just a tiny little switch in our computers.
    • 0:10:50So they have millions or billions of these switches
    • 0:10:53that they use physically to represent information and store values,
    • 0:10:57just like Priyanka did here.
    • 0:10:58So if a computer were to represent the number 50,
    • 0:11:01it would literally turn on three switches of sorts,
    • 0:11:03store a little bit of electricity here, here,
    • 0:11:05and here to represent the number 50, and it would leave off
    • 0:11:09all of the other switches.
    • 0:11:11The other five, in this case, if we're using eight bits or one byte.
    • 0:11:14Calvin you raised your hand second, and so we have one other challenge ahead.
    • 0:11:19Fortunately, these things are magnetic, so let's take things up a notch.
    • 0:11:25And if you would, Calvin--
    • 0:11:27[LAUGHTER]
    • 0:11:29--how about the number 13, if you will.
    • 0:11:33How would a computer represent the number 13
    • 0:11:35where each of these light bulbs from 1 to 128 represents a bit?
    • 0:11:44We had, of course, the ones place over here, the twos place, four, eight,
    • 0:11:5216, and so forth.
    • 0:11:55So we can ask the audience, should we turn on, for instance, this bulb here?
    • 0:12:00AUDIENCE: No.
    • 0:12:01DAVID MALAN: No.
    • 0:12:02Way too big.
    • 0:12:02How about this one?
    • 0:12:03CALVIN: No, too big.
    • 0:12:04DAVID MALAN: OK.
    • 0:12:04And you're in charge.
    • 0:12:05Ask the audience.
    • 0:12:06CALVIN: This one?
    • 0:12:07AUDIENCE: Yeah.
    • 0:12:08CALVIN: Yeah.
    • 0:12:09DAVID MALAN: OK.
    • 0:12:09So we have 1, 2, 4, 8.
    • 0:12:12CALVIN: 4.
    • 0:12:13DAVID MALAN: 4 gives us 8 plus 4 is 12.
    • 0:12:15And another round of applause, if we could.
    • 0:12:20Thank you.
    • 0:12:20You got the tougher job.
    • 0:12:21Thanks to you both.
    • 0:12:22So at the end of the day, while this is a very large physical incarnation
    • 0:12:26of the notion of binary, that's all that's going on inside of our computers
    • 0:12:30every day when they represent information.
    • 0:12:32But we only, thus far, have the ability to represent numbers, it seems.
    • 0:12:36So how then does a computer allow you to send text messages and emails
    • 0:12:39and compose documents and so forth?
    • 0:12:41We need to all agree how we're going to go about representing
    • 0:12:44characters or letters of an alphabet, be it English or something else, instead.
    • 0:12:48And any intuition for how, if a computer only
    • 0:12:51has millions or billions of switches that can be turned on and off, thereby
    • 0:12:55representing numbers, we could possibly go about representing something
    • 0:12:58other than numbers, like the letter A?
    • 0:13:02Say it again?
    • 0:13:04By a digit.
    • 0:13:04So we maybe just need to agree as a group, you know what?
    • 0:13:07Let's all agree that the letter A, in the context of a word processing
    • 0:13:11program or a text message or email, just needs to be represented by a number,
    • 0:13:14and we all need to agree what that number is.
    • 0:13:17So maybe super simply, let's just say A is 1, B is 2, C is 3 and so forth.
    • 0:13:22And you could imagine then having a computer
    • 0:13:24turn on lots of little transistors to represent A and B and C,
    • 0:13:28so long as the software on that computer, as we'll see,
    • 0:13:31knows that it's a word processing program and not,
    • 0:13:34say, a calculator or something that's meant to use numbers alone.
    • 0:13:37So it turns out that computers don't actually use the number 1 for A or 2
    • 0:13:41for B. It's a little bigger than that.
    • 0:13:43The world decided decades ago that the capital letter A is going
    • 0:13:46to be represented by the number 65.
    • 0:13:5065, which is to say, if you have a byte of information in the computer,
    • 0:13:53and this is the ones place, twos, four, eight, 16, 32, 64.
    • 0:13:59If a computer were to store the capital letter A using eight bits or switches,
    • 0:14:04it would just turn on those two, the 64s place and the ones place.
    • 0:14:09And so when you have actually received a message in a text message or an email
    • 0:14:12with a capital letter A, you have just received
    • 0:14:15a pattern of zeros and ones somehow, wirelessly or via wires,
    • 0:14:18representing that pattern.
    • 0:14:20Specifically, this pattern here, if we draw it not as light bulbs,
    • 0:14:23but as zeros and ones.
    • 0:14:25So it turns out there are certainly more numbers than just A's and B's and C's.
    • 0:14:30We have the whole alphabet plus punctuation, thanks to a system
    • 0:14:33called ASCII, the American Standard Code for Information Interchange, which
    • 0:14:36is just a fancy way of saying that there is a well-defined map that humans
    • 0:14:40around the world agreed on years ago that looks
    • 0:14:42a little something like this.
    • 0:14:44So A is 65, an I is 73, and dot dot dot to both ends.
    • 0:14:50So that is to say if you were to receive a message from a computer or from
    • 0:14:54a friend saying 72, 73, 33, or the pattern of zeros and ones representing
    • 0:15:00those digits , what message did you perhaps just receive?
    • 0:15:0472, 73, 33.
    • 0:15:08Yeah.
    • 0:15:09So, hi.
    • 0:15:09So quite literally, if you were to text a friend,
    • 0:15:11hi, they would receive a message that's essentially a pattern of zeros
    • 0:15:15and ones, 72, 73, then something.
    • 0:15:17It's actually not obvious from the chart what they are,
    • 0:15:20but it turns out 33 was the number humans gave years ago to represent
    • 0:15:24an exclamation point instead.
    • 0:15:25And so any of the other punctuation symbols you might see on your keyboard,
    • 0:15:28similarly have numbers that a computer would use, that all of us
    • 0:15:32agreed on years ago, to represent that value.
    • 0:15:35But of course, this is very American-centric at the moment.
    • 0:15:37And indeed, the acronym ASCII has American in it.
    • 0:15:40So it was biased early on to American English, for instance.
    • 0:15:44But there's so many more characters in the world,
    • 0:15:46of course, such as accented characters and other languages altogether.
    • 0:15:50And frankly, there's also these things these days,
    • 0:15:53which even though they look like pictures,
    • 0:15:55you access them via your keyboard because they are indeed
    • 0:15:58just symbols in an alphabet.
    • 0:16:01There are zeros and ones, patterns of zeros and ones,
    • 0:16:05that represent those characters, as well.
    • 0:16:07That's what's known as Unicode, and that's, like, a superset of ASCII.
    • 0:16:11Because ASCII, way back when, used only eight bits, which is not terribly many,
    • 0:16:14to represent characters.
    • 0:16:16Unicode uses 8 or 16 or 24 or even 32, which
    • 0:16:20means we have a way many more possible patterns of zeros and ones
    • 0:16:24with which to represent things like this.
    • 0:16:26So this is face with tears of joy.
    • 0:16:29As of 2019, it is the most popular emoji sent on iOS devices, at least.
    • 0:16:34Does anyone want to hazard a guess as to what
    • 0:16:37the decimal number is that represents a face with tears of joy?
    • 0:16:45Not 65.
    • 0:16:46Not 72.
    • 0:16:46Not 73.
    • 0:16:49800.
    • 0:16:50Higher than that.
    • 0:16:5210,000.
    • 0:16:53Higher than that.
    • 0:16:54It's 128,514.
    • 0:16:57That's how many emojis await us down the road
    • 0:17:00because the numbers are now getting this big.
    • 0:17:02Or equivalently, this pattern of zeros and ones.
    • 0:17:05So at the risk of taking all of the fun out of ever sending someone
    • 0:17:08an emoji, when you send that face with tears of joy,
    • 0:17:11you're literally just somehow having your phone send a friend's phone
    • 0:17:14this pattern of zeros and ones.
    • 0:17:16And Android or iOS are presenting it as that yellow picture.
    • 0:17:21But that yellow picture, of course, itself is an image.
    • 0:17:24And it's composed of lots of little dots.
    • 0:17:26And odds are coming into this class, you're
    • 0:17:28generally familiar with using images, certainly,
    • 0:17:30and seeing the little dots that compose an image.
    • 0:17:32Especially if they're of low quality, you can really see those dots.
    • 0:17:34And so in a face like the emoji, we have lots of yellow dots.
    • 0:17:38How does the computer represent each of those dots?
    • 0:17:40Well, according to a system called RGB.
    • 0:17:42Red, green, blue.
    • 0:17:44So again, decades ago, people in a room decided, you know what?
    • 0:17:47To represent colors, we still have to use just zeros and ones,
    • 0:17:51little switches, mechanically.
    • 0:17:53But let's just all agree what numbers represent what colors.
    • 0:17:56So we just need another system for that.
    • 0:17:59Now it turns out that RGB essentially composes any color of the rainbow
    • 0:18:04by mixing together some red, some green, some blue.
    • 0:18:08And by combining those colors one on top of the other,
    • 0:18:11you can get any color of the rainbow you want.
    • 0:18:13So this is to say to store any dot on the screen, one pixel,
    • 0:18:17so to speak, in an image that you might take as a photo or send to a friend,
    • 0:18:22you are actually storing three values.
    • 0:18:24One, two, three.
    • 0:18:24Three numbers, really, that, of course, at the end of the day,
    • 0:18:27are zeros and ones.
    • 0:18:29Those three numbers just tell the computer how much red, how much green,
    • 0:18:32and how much blue to use to represent some dot on a screen.
    • 0:18:36So suppose that coincidentally, a computer were storing the pattern 72,
    • 0:18:4173, 33, albeit with zeros and ones or light bulbs,
    • 0:18:45back-to-back-to-back like this.
    • 0:18:47Well, in the context of Photoshop or a browser or Apple photos or the like,
    • 0:18:52in the context of a graphical program, your computer
    • 0:18:55is going to interpret this same pattern of digits,
    • 0:18:59and in turn, bits, not as high, exclamation point,
    • 0:19:02but as some amount of red, some amount of green, some amount of blue.
    • 0:19:05And it turns out if you combine this much red, 72, this much green, 73,
    • 0:19:10followed by this much blue, 33, what you get when you combine all three of those
    • 0:19:15is a shade of yellow.
    • 0:19:17So for every single dot in that emoji, that
    • 0:19:21face with tears of joy, every dot in this image--
    • 0:19:24and we can see it if we really zoom in--
    • 0:19:26is stored using three values.
    • 0:19:28Some amount of red, some amount of green,
    • 0:19:30some amount of blue that we can bind give
    • 0:19:32you yellow or black or gray or anything else,
    • 0:19:35depending on how you encode those values.
    • 0:19:38Meanwhile, images or videos, things like this that you might see on the internet
    • 0:19:43these days in the form of memes or anything else,
    • 0:19:45are actually just images, but they're multiple images in the same file.
    • 0:19:49If you've ever seen what's called an animated GIF, which this happens
    • 0:19:52to be that happens to be looping, all our human eyes are seeing
    • 0:19:56is one image after another after another after another really
    • 0:19:59quickly, creating the illusion, therefore, of movement.
    • 0:20:02But this cat is not actually moving.
    • 0:20:04These are like five or 10 photographs of a cat in different positions
    • 0:20:07just being looped endlessly.
    • 0:20:09And that, too, is all a video is.
    • 0:20:11A video is just a sequence of images flying past your eyes so quickly,
    • 0:20:15we humans perceive it as actual movement.
    • 0:20:18And so that's almost everything we use to represent information today
    • 0:20:21in our computers.
    • 0:20:22We have zeros and ones from which we get binary
    • 0:20:24to which we then get decimal digits, but we
    • 0:20:26can use those digits to represent, say, characters on the screen or colors
    • 0:20:30on the screen and, in turn, now even the more interactive.
    • 0:20:33Now what about something like music in a computer?
    • 0:20:36Another type of information you might want to represent?
    • 0:20:38Well, if we had a piano on the stage here,
    • 0:20:40we could quantize the notes you're playing using just numbers, as well.
    • 0:20:45What note you're playing, maybe it's A, B, C, D, E, F or G or some variant
    • 0:20:49thereof.
    • 0:20:50Maybe how long you hold the key down for, and if you hit it really hard,
    • 0:20:53maybe how loud it is.
    • 0:20:54So you could imagine using three values, the note, the duration, and the volume
    • 0:20:59just to represent something like a piano song.
    • 0:21:02[PIANO PLAYING]
    • 0:21:05Might be one encoding of a song.
    • 0:21:06And I might use different values if I want to play it even louder and longer.
    • 0:21:10[PIANO PLAYING]
    • 0:21:13And so forth.
    • 0:21:14Which is to say that at the end of the day,
    • 0:21:16no matter what media we use to represent information,
    • 0:21:19it all reduces to zeros and ones.
    • 0:21:21So once we have the ability to represent inputs,
    • 0:21:23be it numbers or letters or colors or videos, now we can talk about outputs.
    • 0:21:29So how do we get from inputs to outputs?
    • 0:21:31That's what's inside this so-called black box,
    • 0:21:34and this is where computer science comes in.
    • 0:21:36An algorithm.
    • 0:21:37Anyone know what this term is?
    • 0:21:40What's an algorithm?
    • 0:21:41You sort of read about it all the time these days,
    • 0:21:43especially in the context of self-driving cars and Siri and Alexa
    • 0:21:47and so forth.
    • 0:21:47Yeah?
    • 0:21:49A set way to do something, yeah.
    • 0:21:51In the context of problem solving, an algorithm
    • 0:21:53is just step-by-step instructions for solving some problem.
    • 0:21:57So what might an algorithm be for a problem that we might want to solve?
    • 0:22:00Well, consider this.
    • 0:22:01This is an old school problem where you might
    • 0:22:03have lots and lots of names and lots of lots of numbers,
    • 0:22:06and those names are hopefully sorted alphabetically from A through Z
    • 0:22:09in a book like this.
    • 0:22:11And even though most of us don't really reach for this technology anymore,
    • 0:22:14consider that it's really the same as your iPhone or Android phone
    • 0:22:17or other device, which has all of your contacts top to bottom
    • 0:22:20and you can scroll through them from A to Z,
    • 0:22:23or you can search for them by typing into the little autocomplete box.
    • 0:22:26How is even your phone solving this problem?
    • 0:22:29Well let's consider a simple approach.
    • 0:22:31I'm going to look at the first page and look for someone on the phone book.
    • 0:22:35Suppose that person's name is Mike Smith, last name starting
    • 0:22:37with S. Let me go ahead and look down.
    • 0:22:39He's not here.
    • 0:22:40Let me turn the page.
    • 0:22:41Let me turn the page.
    • 0:22:43Let me turn the page.
    • 0:22:44This is an algorithm.
    • 0:22:45It's a step-by-step process for solving a problem, finding Mike Smith.
    • 0:22:48Is this algorithm correct, would you say?
    • 0:22:52Yeah.
    • 0:22:52I mean, it's pretty slow, it's pretty stupid, in that it's going to take,
    • 0:22:55my God, forever, like, hundreds of page turns to find Mike Smith.
    • 0:22:59But if he's there, I will find him according
    • 0:23:01to this step-by-step approach.
    • 0:23:03What if I speed things up a bit just because it's tedious, otherwise?
    • 0:23:05So I do two, four, six, eight, 10, 12, 14, 16 and so forth.
    • 0:23:11Is that algorithm faster?
    • 0:23:13Absolutely.
    • 0:23:14Literally twice as fast.
    • 0:23:15Is it correct?
    • 0:23:16AUDIENCE: No.
    • 0:23:17DAVID MALAN: No.
    • 0:23:17Why?
    • 0:23:18[INTERPOSING VOICES]
    • 0:23:19DAVID MALAN: Yeah, we might skip them.
    • 0:23:21I might get unlucky and eventually, I might get to the S's.
    • 0:23:23But darn it if Mike wasn't in between two pages as I turn them at once.
    • 0:23:28So it's not a fatal flaw.
    • 0:23:29That algorithm, I could fix by just saying
    • 0:23:31if you hit the T section or maybe Sn instead of Sm, just back
    • 0:23:36up one or so pages just to fix that bug or mistake, so to speak.
    • 0:23:40But it, at least, is twice as fast.
    • 0:23:43But if this phone book has 1,000 something pages,
    • 0:23:45it's still going to take me maybe 500 pairwise turns just to find Mike Smith.
    • 0:23:51That's a while just to look someone up.
    • 0:23:53But most of us, if you've used this technology,
    • 0:23:55instead, did what, back in the day?
    • 0:23:58Go roughly to the middle if there aren't little letters on the side off
    • 0:24:02which to cheat.
    • 0:24:03So roughly into the middle.
    • 0:24:04I'm in the M section.
    • 0:24:05Now the M's, of course, mean that Mike is not this way,
    • 0:24:08which would be the A's.
    • 0:24:09He's probably this way toward the Z's because S, of course,
    • 0:24:12is between the M and the Z.
    • 0:24:14So at this point, I can literally tear the problem in half,
    • 0:24:18throw half of the problem away very dramatically and unnecessarily,
    • 0:24:24making the point that we've now gone from 1,000 some odd pages to what?
    • 0:24:27500.
    • 0:24:28And I can do it again.
    • 0:24:29Ah, I went a little too far.
    • 0:24:30I'm now in the T section, so I can tear the problem in half again,
    • 0:24:34throw that half away, and now I'm down from 1,000 to 500 to 250 pages
    • 0:24:39only, after just two steps in this step-by-step process.
    • 0:24:44And if I repeat this again and again and again, hopefully, I'll
    • 0:24:46be left, ultimately, with, say, just one page on which
    • 0:24:50Mike Smith either is or is not.
    • 0:24:53And I can call him or quit.
    • 0:24:55So that algorithm would get me to the solution so much faster.
    • 0:24:58And we can appreciate this even if we just look at some of the numbers,
    • 0:25:01ultimately, as follows.
    • 0:25:03So if I start with, say, 1,024 pages total in the phone book,
    • 0:25:08and I'm looking for Mike Smith, and I divide and conquer this problem,
    • 0:25:11splitting the problem in half and in half and in half, I go to 512,
    • 0:25:14I go to 256, 128, 64, 32, 16, eight, four, two, and one.
    • 0:25:21After just 10 steps, I have found Mike Smith's page.
    • 0:25:25By contrast, that first algorithm where I just
    • 0:25:28did one page at a time, how many steps, maybe, might
    • 0:25:30it have taken me to find Mike Smith?
    • 0:25:33Yeah, like, 700, 800, roughly where the S's might be.
    • 0:25:36So in the worst case, 1,000 pages, if I look through the whole thing.
    • 0:25:39The second algorithm, maybe, 500 pages because I'm going twice at a time.
    • 0:25:43But my God, 10 steps with this algorithm here.
    • 0:25:47And odds are that would be the algorithm most of us in this room
    • 0:25:50would reach for by default, which is to say that a lot of problem solving
    • 0:25:53really, as we'll find, is just about harnessing your existing intuition
    • 0:25:57and comfort with ideas that now you just need to translate in such a way
    • 0:26:01that machines and other humans can understand.
    • 0:26:04So how might we just think about how much better that algorithm is?
    • 0:26:08Well, consider this first line here.
    • 0:26:10On this y-axis, or vertical axis, let me describe
    • 0:26:14this as the time to solve some problem.
    • 0:26:16And on the horizontal, or x-axis, the size of the problem.
    • 0:26:19So the number of pages in the phone book would get bigger as you go to the right
    • 0:26:23and the number of seconds or page turns required would go up along the y-axis
    • 0:26:28here.
    • 0:26:28So that first algorithm, depicted here in red,
    • 0:26:31suggests a one-to-one relationship between the number of pages in the book
    • 0:26:35and the number of seconds to find someone.
    • 0:26:37So you have this straight line.
    • 0:26:39A slope of 1 over 1, if you will.
    • 0:26:41And so if we consider the second algorithm,
    • 0:26:44the second algorithm is also going to be a straight line,
    • 0:26:47but that straight line is going to be lower on the graph.
    • 0:26:49Why?
    • 0:26:50Because for any size problem, it's going to take me half as much time
    • 0:26:53to search that phone book because, of course, I'm going two pages at a time.
    • 0:26:57So if we see this, for instance, if this dashed line
    • 0:26:59represents some number of pages in the phone book,
    • 0:27:02maybe 1,024, well, you can see that it might take this many seconds
    • 0:27:05or page turns to actually find Mike Smith with that second algorithm.
    • 0:27:09But in the first algorithm, that same number of pages
    • 0:27:12would take way more time to solve, literally twice
    • 0:27:16as much time in this case.
    • 0:27:17Well what about the third algorithm?
    • 0:27:19Well, even if your memory of what a logarithm is a little hazy,
    • 0:27:22it just describes a fundamentally different shape.
    • 0:27:24The green line describes that third and final algorithm
    • 0:27:27whereby you divided the problem not one page at a time or two pages at a time,
    • 0:27:31but 50% again and again and again.
    • 0:27:35You have it again and again and again.
    • 0:27:37And notice that as the number of pages in the phone book gets really large,
    • 0:27:41you barely make an impact on how much time it takes to solve that problem.
    • 0:27:47For instance, if Cambridge and Allston, two towns here in Massachusetts,
    • 0:27:50merge next year and their phone books become
    • 0:27:52one phone book that's twice as big, so not 1,000 pages each,
    • 0:27:56but 2000 pages total, how many more steps
    • 0:27:58might it take us to find Mike Smith in next year's phone book
    • 0:28:01if it's got 2000 pages instead of 1,000?
    • 0:28:04Just one more step.
    • 0:28:06But the first two algorithms, that's another 1,000 steps, maybe,
    • 0:28:09or another 500.
    • 0:28:10These are fundamentally big differences in efficiency, so to speak.
    • 0:28:15So let's translate this idea, this intuition,
    • 0:28:18into the first example of code.
    • 0:28:20There's a pseudo code.
    • 0:28:21And there's no one formal definition of this.
    • 0:28:23Pseudocode is code-like syntax that you write
    • 0:28:25in English or your own spoken language that represents your ideas,
    • 0:28:28but in a succinct way.
    • 0:28:30And so I might propose that this algorithm for finding Mike Smith
    • 0:28:33might be written in pseudocode English-like syntax as follows.
    • 0:28:37Step one, pick up phone book, which was indeed the first thing I did.
    • 0:28:40Step two, open to the middle of phone book, which is the next thing I did.
    • 0:28:43Step three might be look at the page to see if someone's there
    • 0:28:47and if Smith is on that page, what do I want to do?
    • 0:28:50Well, my code is going to look a little different now,
    • 0:28:52and I'm going to deliberately indent to make clear that there's
    • 0:28:55a dependency here of some sort.
    • 0:28:57I'm going to go ahead and step five and call Mike only if line four is true,
    • 0:29:02that he's on the page.
    • 0:29:04Else if Smith is earlier in the book, to the left, so to speak,
    • 0:29:08I'm going to go ahead and open to the middle of the left half of the book,
    • 0:29:11and then what am I probably going to want to do next?
    • 0:29:14AUDIENCE: [INAUDIBLE]
    • 0:29:15DAVID MALAN: So, yeah, this, ultimately.
    • 0:29:16How do I do this again and again?
    • 0:29:18Well, I already have some code, if you will, on line three that does that.
    • 0:29:22Look at page and then make a decision to go left or go right.
    • 0:29:26So I'll just say go back to line three after going
    • 0:29:29to the middle of the left half of the book
    • 0:29:30if Smith is indeed earlier in the book.
    • 0:29:33The other scenario, of course, is the opposite.
    • 0:29:35So else if Smith is later in book, let's open to the middle
    • 0:29:38of the right half of the book, and then let's go to line three.
    • 0:29:42Else, there's a fourth possible scenario or case.
    • 0:29:45What else might happen in this algorithm?
    • 0:29:49AUDIENCE: [INAUDIBLE]
    • 0:29:50DAVID MALAN: He's not there.
    • 0:29:51And so I probably want to anticipate that and just
    • 0:29:53say quit if, indeed, he's not on the page, to the left of the page,
    • 0:29:58or to the right of the page.
    • 0:29:59So there is one way of expressing this pseudocode albeit now
    • 0:30:03in just this English-like syntax.
    • 0:30:05But in this syntax alone, there's some commonalities,
    • 0:30:08some features we're going to see over the next several weeks
    • 0:30:10not only in pseudocode, but in a language called Scratch,
    • 0:30:13a language called C, a language called Python and more.
    • 0:30:16There are certain constructs in programming, procedural programming,
    • 0:30:20so to speak, that are going to be common among all of these languages.
    • 0:30:23Highlighted in yellow here are what, henceforth, today and onward,
    • 0:30:26we're just going to call functions.
    • 0:30:27These are verbs or actions that just tell the computer,
    • 0:30:30or in this case, the human, what to do.
    • 0:30:33So those are functions.
    • 0:30:34Now highlighted in yellow instead are what we're going to call conditions.
    • 0:30:37These are branches, sort of forks in the road so you can either do this
    • 0:30:41or you can do that or maybe this other thing as well.
    • 0:30:43But to make those decisions, you have to ask yourself a question.
    • 0:30:47And those questions, in computer science,
    • 0:30:49are called Boolean expressions, after a mathematician named Boole.
    • 0:30:52And a Boolean expression, highlighted now in yellow,
    • 0:30:55are just questions that have yes or no answers or, if you will, true or false
    • 0:31:00answers or, heck, now that we know binary, one or zero answers.
    • 0:31:04So even in code, we see a hint of why ones and zeros are helpful.
    • 0:31:08Lastly, there's this thing here.
    • 0:31:10Go back to line three.
    • 0:31:11We've used it in two places.
    • 0:31:12That refers to something we'll call a loop.
    • 0:31:14It's a cycle that does something again and again.
    • 0:31:18So beyond those four ideas, functions, conditions, Boolean expressions,
    • 0:31:21and loops, we're about to see a bunch of others, as well.
    • 0:31:24Variables, reminiscent of what you might recall from algebra,
    • 0:31:27but more powerful now in this context of programming.
    • 0:31:30Something called threads and events.
    • 0:31:31And we're going to do this by way of an actual programming language.
    • 0:31:35But it's not yet going to be this one.
    • 0:31:36Indeed, just a week from now will you actually understand what this means.
    • 0:31:41Odds are 2/3 of you have no idea what this actually is, and that's OK.
    • 0:31:46But it's a program written in a language called C--
    • 0:31:49more on that next time--
    • 0:31:50that quite simply says hello to the world.
    • 0:31:53But we're going to do it today in the context of a graphical language
    • 0:31:56from my MIT's Media Lab called Scratch.
    • 0:31:58This is a language via which you can program a computer by dragging
    • 0:32:02and dropping blocks or things that look like puzzle pieces that interlock
    • 0:32:05together so that you can tell the computer exactly what to do,
    • 0:32:09step-by-step.
    • 0:32:10And we'll see in this language today, and for the first problem set
    • 0:32:13or programming assignment, that you can express all of these ideas
    • 0:32:16from pseudocode in an actual language like Scratch.
    • 0:32:20So what lies ahead?
    • 0:32:21Well at scratch.MIT.edu, which I'm about to pull up myself,
    • 0:32:26is going to be where you spend time in the first problem set.
    • 0:32:28And it's going to look quite like this when you open it up.
    • 0:32:31On the left hand side of this website, this web-based programming environment
    • 0:32:35from MIT, you're going to see on the left hand side
    • 0:32:37a whole bunch of puzzle pieces, so to speak.
    • 0:32:39And they're categorized according to some different colors there
    • 0:32:42on the left.
    • 0:32:43In the middle, there's just going to be a big white canvas, initially,
    • 0:32:46onto which you can drag and drop those puzzle pieces
    • 0:32:48and lock them together to make the program do something.
    • 0:32:52What can you make it do?
    • 0:32:53Well, on the top right here is the so-called stage in Scratch.
    • 0:32:56By default, there's only one character, or sprite, on that stage.
    • 0:33:00Scratch himself, and he can move up, down, left, right
    • 0:33:02and do any number of other things if you tell
    • 0:33:05him what to do by dragging and dropping those puzzle pieces.
    • 0:33:08If you don't like that cat or you want many others,
    • 0:33:11you can also add multiple sprites, or characters,
    • 0:33:13by creating them in that area.
    • 0:33:16So let's actually do this now with some sample programs
    • 0:33:19such that we can actually begin programming using this environment.
    • 0:33:24I'm going to go ahead now and open up a browser here.
    • 0:33:27And in just a moment, you'll see on the screen scratch.MIT.edu itself.
    • 0:33:34So if I go ahead and create by simply clicking up there,
    • 0:33:37we'll see this editor, ultimately, that, by default, has this tutorial that I'm
    • 0:33:41going to go ahead and dismiss.
    • 0:33:43But now we see that same environment.
    • 0:33:45And you'll see that above Scratch here over at top right,
    • 0:33:47there's this green flag and this stop sign.
    • 0:33:49The green flag is what you can click as the human to make the program go.
    • 0:33:53The stop sign will make any program stop.
    • 0:33:56So it turns out among all of these categories here,
    • 0:33:59there's, for instance, some orange ones called Control.
    • 0:34:02There's some yellow ones called Events.
    • 0:34:04And we'll focus on this latter one first.
    • 0:34:06If I go ahead and drag from events this puzzle piece here,
    • 0:34:10this is how I can begin programming.
    • 0:34:11When the green flag is clicked, do the following.
    • 0:34:14What do I want to do?
    • 0:34:15Well, let's have this cat just say hello.
    • 0:34:17And from having used this program before,
    • 0:34:18I know that under Looks, I can go ahead and say something like, say hello.
    • 0:34:23And notice not only does the shape match the orange puzzle piece
    • 0:34:27or yellow puzzle piece, notice that it magnetically wants to snap together,
    • 0:34:30and if I let go, it will.
    • 0:34:31And I'm going to say perhaps one of the most canonical things
    • 0:34:34to say in your very first program, which is just, conventionally,
    • 0:34:37hello world, and leave it at that.
    • 0:34:39I'm going to now go ahead and click the green flag.
    • 0:34:41And voila, our very first program.
    • 0:34:45The same effect.
    • 0:34:46[APPLAUSE]
    • 0:34:46Thank you.
    • 0:34:50Thank you.
    • 0:34:51Very low bar so far, but we'll improve upon this next
    • 0:34:54because this cat is pretty inanimate and is just now saying hello.
    • 0:34:58What if we wanted him to do more than that and say not hello, but hello to me
    • 0:35:02or hello to you?
    • 0:35:03Well, it turns out we can do this a little differently, as well.
    • 0:35:05I'm going to go ahead and throw this away by just dragging it over
    • 0:35:08on the left.
    • 0:35:09And the puzzle piece just goes away.
    • 0:35:11And if I poke around a little further under these blue blocks,
    • 0:35:13for instance, Sensing, there's a bunch of puzzle pieces
    • 0:35:16related to Scratch's environment.
    • 0:35:18And one of those is this one here, ask, what's your name?
    • 0:35:21And wait.
    • 0:35:22But that what's your name expression is in a white box
    • 0:35:24that I can actually change.
    • 0:35:25So you can ask any questions you want, but I'll go ahead and use that default.
    • 0:35:29And now notice also over here in blue is Answer,
    • 0:35:32which is another circular shape which represents what we're
    • 0:35:35going to start calling a variable.
    • 0:35:36That variable is going to store whatever the human types in when
    • 0:35:40asked for his or her name.
    • 0:35:41So what do I want to do when I actually get the person's name?
    • 0:35:44Well, let me go back to Looks.
    • 0:35:46Let me go ahead and say hello.
    • 0:35:48And I'll go ahead and say hello and then another one, say hello again.
    • 0:35:53But instead of this, I want it to say my name.
    • 0:35:56But it would be incorrect to just type my name because then my name is always
    • 0:36:00going to be David no matter who plays this game or is asked the question.
    • 0:36:04So I don't want to do that.
    • 0:36:05If I go instead to Sensing and then drag and drop this puzzle piece,
    • 0:36:08notice this.
    • 0:36:09It wants to magnetically snap in there.
    • 0:36:11And it will grow to fit it.
    • 0:36:12So now I can say hello and then I can say name.
    • 0:36:16So let me go ahead and hit stop and play again.
    • 0:36:18What's your name?
    • 0:36:19I'll go ahead and type in David.
    • 0:36:20Enter.
    • 0:36:21And now David.
    • 0:36:24Huh, I feel like we forgot the hello.
    • 0:36:27This is my first bug.
    • 0:36:30Any thoughts as to why?
    • 0:36:31What did I do wrong?
    • 0:36:32Yeah?
    • 0:36:33AUDIENCE: [INAUDIBLE]
    • 0:36:37DAVID MALAN: Yeah.
    • 0:36:38I mean, I told the computer via this algorithm to do three things,
    • 0:36:42ask what's your name and wait, but then I just
    • 0:36:44say said hello, say answer in such rapid succession.
    • 0:36:47And my God, our Macs and PCs and phones these days
    • 0:36:49are so fast, they're going to do so many things so quickly that it
    • 0:36:53did say hello, it's just none of us really saw it
    • 0:36:55because my name immediately overrode it.
    • 0:36:57So I can fix this in a couple of ways.
    • 0:36:59Let me go ahead and go back to Looks for just a moment,
    • 0:37:01get rid of this puzzle piece, and maybe say hello for two seconds.
    • 0:37:05Then let me go ahead and say my name or the user's name for two seconds
    • 0:37:09as by dragging answer now into here.
    • 0:37:11So that was my first bug in code, so to speak.
    • 0:37:14Let me go ahead and play again, type in David, and now it's hello, David.
    • 0:37:19All right.
    • 0:37:20So better.
    • 0:37:20It's a little weird because you typically
    • 0:37:23don't greet someone by saying hello, David, two seconds later.
    • 0:37:27So what if we kind of combine this expressions
    • 0:37:29and say not hello world, but hello comma David?
    • 0:37:32Well, we can do this in a different way.
    • 0:37:34Let me go back over here and, for instance, get just one of those
    • 0:37:38say blocks like this.
    • 0:37:39I'm not going to worry about saying it for some number of seconds
    • 0:37:42because I'm only going to say one thing now.
    • 0:37:44But I somehow want to say hello comma and then the user's name.
    • 0:37:49Well, if I poke around further, and you would only
    • 0:37:51know this by having seen it before, it turns out
    • 0:37:53there's this puzzle piece down here called Join.
    • 0:37:55And it's a little weird that the default words are apple and banana,
    • 0:37:58but those are just placeholders.
    • 0:38:00If I go ahead and drag this over here, it grows to fill
    • 0:38:04and it overwrites what was there.
    • 0:38:06I can say hello comma and then instead of hello banana,
    • 0:38:10let me go back to Sensing, drag the user's answer,
    • 0:38:13and now we say hello comma so and so.
    • 0:38:16So let's try this now instead.
    • 0:38:18Green flag, type in my name, Enter.
    • 0:38:21Hello comma David.
    • 0:38:23So now the program isn't all that much more complicated,
    • 0:38:25but notice that we're starting to nest these verbs, these functions.
    • 0:38:28We're asking for a name and then we're saying the result
    • 0:38:31of joining the following two things.
    • 0:38:34So there's a few ideas to keep track of at a time.
    • 0:38:36But this is actually quite like what we were doing from the get-go earlier
    • 0:38:40as follows.
    • 0:38:41For instance, if we want to just say hello world with this puzzle piece
    • 0:38:44here, this actually maps perfectly to our fundamental definition
    • 0:38:48of what problem solving is.
    • 0:38:50The input to that puzzle piece is, of course, just hello world.
    • 0:38:53The function or algorithm that you want to execute, step-by-step instructions
    • 0:38:58for saying something, Scratch calls Say in purple, and the output you want,
    • 0:39:02of course, is Scratch saying hello world.
    • 0:39:05Now in the more sophisticated example, consider this.
    • 0:39:07We asked what's your name?
    • 0:39:08And then we waited.
    • 0:39:09Well, that picture would look like this instead.
    • 0:39:12The input to that question is, of course, what's your name?
    • 0:39:15The algorithm, or in this case, function,
    • 0:39:17via which we're solving that problem is to ask and wait, taking in that input.
    • 0:39:22And the output we get back is now answer.
    • 0:39:25And then lastly in that third example, where things got a little fancier
    • 0:39:28and you had to start dragging and dropping and nesting these puzzle
    • 0:39:31pieces, notice that this is the same idea.
    • 0:39:33The input now is two things, hello and answer.
    • 0:39:36Those go into a function called Join, the output
    • 0:39:39of which should be hello comma David.
    • 0:39:41But now we want to pass that output as the input to the Say block
    • 0:39:47so that the final result is hello, David right out of the cat's mouth.
    • 0:39:52So in this way, even with the simplest of puzzle pieces,
    • 0:39:54does everything fit into this same model of problem solving.
    • 0:39:59But let's now make things a little more interesting.
    • 0:40:01Rather than just talk and text with this cat, let's go ahead
    • 0:40:04and have it do some other things instead.
    • 0:40:06Let me go ahead under Sound, for instance,
    • 0:40:08and it looks like there's a block in pink here called Play Sound Meow
    • 0:40:11until done.
    • 0:40:12And now let me stop the old program and start the new.
    • 0:40:15[CAT MEOWING]
    • 0:40:17OK.
    • 0:40:17A little piercing, but adorable.
    • 0:40:19And if you want to hear it again--
    • 0:40:21[CAT MEOWING]
    • 0:40:22--I can click the green flag--
    • 0:40:23[CAT MEOWING]
    • 0:40:24--and I can click the green flag.
    • 0:40:26Of course, this is a pretty boring cat if it goes lifeless
    • 0:40:31after it said just one meow.
    • 0:40:32How would we get it to perpetuate that sound and just meow every few seconds?
    • 0:40:37What constructor idea might we want to use here?
    • 0:40:39AUDIENCE: [INAUDIBLE]
    • 0:40:40DAVID MALAN: Yeah, so some kind of loop.
    • 0:40:41So it turns out in Scratch, there's a few ways to do this.
    • 0:40:44But if I go down to Control, you'll see a couple of blocks here.
    • 0:40:47Repeat some number of times, by default, 10, or forever.
    • 0:40:50I'm going to go ahead and maybe do this forever.
    • 0:40:53[LAUGHTER]
    • 0:40:54And I'm going to drag and drop this now into here.
    • 0:40:56Notice I can move things around wherever I want.
    • 0:40:58And now I can reattach this up here.
    • 0:41:01And now play.
    • 0:41:02[CAT MEOWING REPEATEDLY]
    • 0:41:06It's a very agitated cat at the moment.
    • 0:41:08I can calm him down, perhaps, by dragging and dropping this.
    • 0:41:11And notice even if there's no room, it will grow to fill.
    • 0:41:15[CAT MEOWING SLOWED DOWN]
    • 0:41:16One second.
    • 0:41:17Now it's a happier cat, if you will.
    • 0:41:20But now that we have the ability to have the cat do something forever,
    • 0:41:23it doesn't have to just do the same thing again and again.
    • 0:41:26It can interact with me or its environment.
    • 0:41:29So instead of playing the sound here--
    • 0:41:31someone following along at home?
    • 0:41:33So instead of playing the sound here, let me go ahead and try this.
    • 0:41:37Let me go to Sensing and go ahead to--
    • 0:41:42what might I want to do here?
    • 0:41:43Let's go ahead and under Motion, rather, under here, point toward mouse pointer.
    • 0:41:50So point towards mouse pointer and then go ahead and move some number of steps.
    • 0:41:54And I'm going to have it move one step or dot or pixel at a time.
    • 0:41:57And here now we'll get this effect.
    • 0:42:00It looks as though now he'll kind of follow me, right?
    • 0:42:03And as I move my cursor, he is forever pointing
    • 0:42:06toward the cursor then moving one step.
    • 0:42:08Of course, he's a little slow.
    • 0:42:09And let me go ahead and stop.
    • 0:42:10If I make him take 10 steps at a time, or 10 dots or pixels on the screen,
    • 0:42:15now it seems a little harder to avoid.
    • 0:42:17And you can sort of--
    • 0:42:19he'll literally do as you move your cursor here.
    • 0:42:22All right.
    • 0:42:23So now that we have the ability to do something again and again, let's
    • 0:42:26have something count up.
    • 0:42:27For this one, let me go ahead and grab something from online.
    • 0:42:32So on CS50's website, we'll always make available the examples and source
    • 0:42:36code from each class.
    • 0:42:37And this time, I want to go ahead and get this sheep here.
    • 0:42:41So it turns out you don't have to just use a cat.
    • 0:42:43You can use a sheep if you prefer.
    • 0:42:44And let's see.
    • 0:42:45By looking at this code first, what is this sheep going to do?
    • 0:42:49When the green flag is clicked, there's this orange puzzle piece
    • 0:42:52called Counter to one.
    • 0:42:54What is that?
    • 0:42:54That's an example of--
    • 0:42:56what might we call this?
    • 0:42:58Yeah.
    • 0:42:59It's called a variable.
    • 0:43:00Now in algebra, we typically use x and y and z for variables.
    • 0:43:04In programming, when you want to store some value
    • 0:43:06in a placeholder like a variable, you typically
    • 0:43:09give it more descriptive words because x, y, and z don't really
    • 0:43:11tell the programmer or someone reading it what it's doing.
    • 0:43:14So we call this variable Counter and we set it equal to 1.
    • 0:43:17Now forever, the sheep is going to do what?
    • 0:43:19It's going to say the counter for one second,
    • 0:43:21it's going to then wait for one second, and then
    • 0:43:23it's going to change, or add 1 to, the counter as its final step.
    • 0:43:28So here we have, if you will, counting sheep
    • 0:43:31whereby it will now just perpetually count up from 1 to 2 to 3.
    • 0:43:39And probably, if we let this thing go, up to infinity.
    • 0:43:43So once we have the ability now to do variables,
    • 0:43:45what if we start to make our programs more interactive
    • 0:43:48and start to remember information?
    • 0:43:50Let me go ahead and into our examples from before,
    • 0:43:54and grab another example here now instead.
    • 0:43:56I'm going to go back to what's called a Studio in Scratch,
    • 0:43:59where all of these examples currently are.
    • 0:44:02And I'm going to go and open up an example called pet 0.
    • 0:44:05Computer scientists typically start counting from zero
    • 0:44:07because that's symbolic of all of the light bulbs being off.
    • 0:44:10And so here's a program now that if I hit
    • 0:44:13Play does not seem to do anything at first,
    • 0:44:16but notice as I move my cursor over--
    • 0:44:18[CAT MEOWING]
    • 0:44:20--I'm kind of petting the cat now, if you will.
    • 0:44:24So how is this working?
    • 0:44:25Well, he, too, is just forever listening or waiting for something to happen.
    • 0:44:29It's forever doing this if Touching Mouse Pointer then
    • 0:44:33Play Sound Meow until done.
    • 0:44:35So now the cat is being responsive to the user input not following my cursor,
    • 0:44:38but responding just if I'm actually hovering over him.
    • 0:44:42We can, of course, change this up a little bit in version two of this,
    • 0:44:46otherwise known as pet one because we started counting at 0.
    • 0:44:50What should I not do with this program?
    • 0:44:52[CAT MEOWING]
    • 0:44:58Maybe don't pet this cat.
    • 0:45:00Why?
    • 0:45:00Well, this time it is forever checking if I'm touching the mouse pointer.
    • 0:45:05And if so, it's going to apparently play a sound roar,
    • 0:45:08else it plays the sound Meow, which seems to be happening.
    • 0:45:12So here we go.
    • 0:45:13[CAT MEOWING]
    • 0:45:16[CAT ROARING]
    • 0:45:18So don't pet the cat.
    • 0:45:19And so that's just a condition asking a question, a so-called Boolean
    • 0:45:23expression if Touching Mouse Pointer.
    • 0:45:26Well, now let's do something a little fancier still.
    • 0:45:28Let me go ahead here and do this.
    • 0:45:30Let me go ahead and make this one from scratch, no pun intended.
    • 0:45:34And I'm going to go ahead and start with an event.
    • 0:45:36When the green flag is clicked, let me go ahead and grab some motion here.
    • 0:45:41Let me go ahead and grab Set Rotation Style to left right
    • 0:45:45just because this will make sure that he ultimately does as we intend.
    • 0:45:49I'm going to go to Control.
    • 0:45:50I'm going to do the following forever.
    • 0:45:52Suppose I want the cat to just bounce back and forth on the screen.
    • 0:45:56Well, the first thing I need to do is animate him and actually
    • 0:45:58make him start moving.
    • 0:46:00And the best way to do that, frankly, would just be to go to Motion
    • 0:46:03and move some number of steps, maybe 10 steps to go quickly or one step
    • 0:46:07to go slowly.
    • 0:46:08But I can ask a question every time the cat moves.
    • 0:46:11I can go and ask something like this.
    • 0:46:14If something is true, go ahead and maybe do something else.
    • 0:46:18So maybe bounce off the wall.
    • 0:46:19So how do I say if you're touching the edge, go ahead and bounce backwards?
    • 0:46:24Well, it turns out if you poke around, you'll see something like this.
    • 0:46:27If touching Not Mouse Pointer, but notice this edge,
    • 0:46:32I can use the little dropdown, change what the puzzle piece says.
    • 0:46:35I can now move this Boolean expression into place.
    • 0:46:38The condition will grow to fill.
    • 0:46:40And what do I want to now do?
    • 0:46:41Well, if he touches the edge, I'm going to go ahead and say
    • 0:46:44turn not 15 degrees, which is the default, but I'll do it 180 instead.
    • 0:46:50And now we have our own little animation where he's going back and forth
    • 0:46:56and back and forth.
    • 0:46:57Of course, this seems a little unrealistic
    • 0:46:59that he's just bouncing happily so, so there is a non-academic feature
    • 0:47:04we can now introduce.
    • 0:47:05For instance, you can turn on your computer's microphone and say ouch.
    • 0:47:11That is what Ouch looks like.
    • 0:47:13If I go ahead and save this, call this Ouch, go back now to my code.
    • 0:47:18Let's go ahead and into sound here and maybe play not the sound Meow,
    • 0:47:23but maybe the sound Ouch, such that now this cat--
    • 0:47:28[OUCH SOUND PLAYING REPEATEDLY]
    • 0:47:32OK.
    • 0:47:33So maybe a little more dynamic.
    • 0:47:36But it turns out he's really not walking or running.
    • 0:47:39He's really just--
    • 0:47:39[OUCH SOUND]
    • 0:47:40--sliding across the screen, right?
    • 0:47:42His legs are never actually moving.
    • 0:47:44Now, why is that?
    • 0:47:45Well, it turns out that the costume that this sprite is wearing,
    • 0:47:48that the cat is, it's just a picture.
    • 0:47:49It's an image composed of lots of little dots.
    • 0:47:51And you know what?
    • 0:47:52To animate a character and bring some life to it, so to speak,
    • 0:47:55all we really need is at least one more picture.
    • 0:47:58After all, that's all an animated GIF or a video is, multiple pictures.
    • 0:48:01So here's one, here's two.
    • 0:48:04Here's one, here's two.
    • 0:48:06And even though he's definitely making some leaps with each stride,
    • 0:48:09if you do this fast enough, it would seem
    • 0:48:11that the cat is actually making some motion
    • 0:48:13and walking instead of just sliding.
    • 0:48:15So how might I go ahead and do this?
    • 0:48:18Let me go ahead and open up this example, which I've made in advance.
    • 0:48:21This one's called bounce one.
    • 0:48:22And in bounce one here, I have the following second costume.
    • 0:48:28If I go ahead and click See Inside and click Play Now,
    • 0:48:31you'll notice now he's kind of moving.
    • 0:48:34It's a little jaggy because he's moving from one position to another really
    • 0:48:38quickly, but now it's the illusion of movement.
    • 0:48:41So if you've ever played a game or you've ever
    • 0:48:43created some animation yourself or even a film,
    • 0:48:45this really is what's been happening underneath the hood all this time.
    • 0:48:49But you don't have to have just one cat or one sprite in a program.
    • 0:48:52We can actually have multiple.
    • 0:48:53Let me go ahead and open up another animal here.
    • 0:48:56This one, a sea lion.
    • 0:48:58So in this sea lion here, if I See Inside and see its code,
    • 0:49:01there's a lot going on here.
    • 0:49:03So let's see what this thing does first.
    • 0:49:04If I go ahead and click the green flag--
    • 0:49:06[SEA LION BARKING]
    • 0:49:08--it's really, really annoying.
    • 0:49:09[SEA LION BARKING]
    • 0:49:11Now, why is that?
    • 0:49:12There's some loop in here, clearly, that's just doing the same thing again
    • 0:49:16and again and again.
    • 0:49:18How might, based on this code, I stop the sea lion from barking?
    • 0:49:24Yeah.
    • 0:49:25So that's the solution.
    • 0:49:26Let's go ahead and hit the space bar.
    • 0:49:31Why did that actually get him to stop barking?
    • 0:49:34Well, notice this.
    • 0:49:35There's two scripts in this program, which
    • 0:49:37is a little different from before.
    • 0:49:38Each of these represents a script or a program.
    • 0:49:40Notice here there's a variable called muted, and by default, it's false.
    • 0:49:43That is off.
    • 0:49:44So muted is false, or off, which means it's not muted,
    • 0:49:47which is why we hear it.
    • 0:49:48Then it does forever the following.
    • 0:49:50If the key space is pressed, go ahead and check the following question.
    • 0:49:55If muted is true, change muted to false, else change muted to true.
    • 0:50:00So this is a very common approach in programming
    • 0:50:02where if you have a variable, like something called muted that's
    • 0:50:04either true or false, 1 or 0, on or off, you
    • 0:50:08can change its value by just asking that question.
    • 0:50:10If muted is true, change it to false, else set it to true.
    • 0:50:15Meanwhile, if we scroll up, there's another script here
    • 0:50:19that was doing something again and again.
    • 0:50:21And I'll zoom in on this one.
    • 0:50:22When the green flag was clicked, the sea lion was also forever doing this.
    • 0:50:26If muted is false, that is, if it's not muted,
    • 0:50:29go ahead and play the sound sea lion and go ahead and say hi, hi, hi
    • 0:50:33for two seconds and then wait for one second.
    • 0:50:35And do that again and again and again.
    • 0:50:38So in programming, as in Scratch here, you can do multiple things at a time
    • 0:50:42sometimes with languages, such that they're both
    • 0:50:44running together in parallel, if you will, or looping again.
    • 0:50:47And they can somehow intercommunicate by using something like a variable.
    • 0:50:52Let's look at one final example involving two different sprites,
    • 0:50:55this one an old school game that you might recall growing up
    • 0:50:58called Marco Polo.
    • 0:50:59In this game of Marco Polo, one person yells out
    • 0:51:02Marco and one or more other people yell out Polo.
    • 0:51:05And the first of them is typically blindfolded,
    • 0:51:07so you're trying to find that person based only on his or her voice's
    • 0:51:11response.
    • 0:51:12So in this program here, if I go ahead and click the green flag,
    • 0:51:16notice that nothing happens yet until I hit the space bar.
    • 0:51:20And we'll see that the orange puppet says Marco and the blue puppet
    • 0:51:25says Polo.
    • 0:51:26But how does that work?
    • 0:51:27Well, here is the code for the orange puppet.
    • 0:51:30Forever, he is doing the following.
    • 0:51:33If the key space is pressed, that is the space bar, say Marco for two seconds,
    • 0:51:38but then one other feature.
    • 0:51:39And this is new.
    • 0:51:40It broadcasts what's called an event.
    • 0:51:41So it turns out that computers can't just
    • 0:51:43see what another program or sprite is doing,
    • 0:51:46but they can listen for something called an event.
    • 0:51:48It's sort of a secret message from one program to another.
    • 0:51:51So broadcast event is this other puzzle piece that can just say event.
    • 0:51:56And now notice if I click not on the orange puppet down here,
    • 0:51:59but on the blue, the blue puppet has even less code,
    • 0:52:02but it is not waiting for the green flag to be clicked.
    • 0:52:05Instead, it is waiting until it receives this so-called
    • 0:52:09an event, a sort of invisible message from one sprite to another.
    • 0:52:12And once he receives that event, it says Polo for two seconds.
    • 0:52:19All right.
    • 0:52:20So along the way, it turns out that there are better ways
    • 0:52:23to solve some of these problems.
    • 0:52:25And we can actually start to think now a little more in terms of design,
    • 0:52:30the design of the quality of your code.
    • 0:52:32I'm going to go ahead and do this.
    • 0:52:35Under events, I'm going to go ahead and grab when green flag is clicked,
    • 0:52:38and I'm going to go ahead and say something this time.
    • 0:52:40Let's go ahead and say cough for one second like this.
    • 0:52:45And then let me go ahead and wait for some number of seconds, like one.
    • 0:52:49And then you know what?
    • 0:52:50Let me go ahead and cough three times.
    • 0:52:51It's not uncommon when you're coughing, in the real world,
    • 0:52:53to cough three times.
    • 0:52:54So I'm going to right click or Control click,
    • 0:52:56I'm going to go ahead and duplicate, and just attach another one of those.
    • 0:52:59And I'm going to right click or Duplicate and give me one of these.
    • 0:53:02And now, of course, the cat is going to cough, cough, cough or meow,
    • 0:53:09and three times in a row.
    • 0:53:10Now this code is correct.
    • 0:53:12It does cough three times and it waits one second after each,
    • 0:53:15but it's not very good code.
    • 0:53:17It's not well-designed, as a computer scientist would say.
    • 0:53:20What could we do better with this code based on the ideas we've seen thus far?
    • 0:53:23AUDIENCE: [INAUDIBLE]
    • 0:53:24DAVID MALAN: Yeah.
    • 0:53:25So we can loop instead, right?
    • 0:53:26And Copy Paste is rarely the solution when
    • 0:53:29programming, be it in Scratch or in C or in Python or other languages.
    • 0:53:33So I'm actually going to throw all of this away.
    • 0:53:35Let me go ahead and just grab a repeat block,
    • 0:53:37change that default ten to three.
    • 0:53:39Let me grab these pairs of blocks and put them in here,
    • 0:53:42drag and drop this up here.
    • 0:53:43So now I'm going to go ahead and repeat three times, say cough for a second,
    • 0:53:48and then wait one second.
    • 0:53:49And now the program is just better designed.
    • 0:53:52It is no different from before, but it's a little easier
    • 0:53:55to maintain now for me or someone else because if I
    • 0:53:57want to change how long something's happening or what's being said,
    • 0:54:00I can change it now in one place instead of multiple.
    • 0:54:04But there's this other idea in computer science, this notion of abstraction.
    • 0:54:07Right now, this is a program that just so happens
    • 0:54:10to implement the notion of coughing.
    • 0:54:12But what if I want to use the same idea in multiple programs
    • 0:54:16and I want to give myself a custom puzzle piece that does not
    • 0:54:19come with Scratch called cough?
    • 0:54:22Well, there's this one other feature up here I can do like my blocks,
    • 0:54:25and I can make a block.
    • 0:54:27And I'm going to go ahead and call this cough.
    • 0:54:29And that puzzle piece, once I click OK, is going to give me this pink block
    • 0:54:34here.
    • 0:54:35I'm going to go ahead now, for instance, and move all of this
    • 0:54:38down to the custom puzzle piece.
    • 0:54:40And now notice because I've made a new block, I have this pink piece here.
    • 0:54:44I can now move this over here.
    • 0:54:46And frankly, out of sight, out of mind.
    • 0:54:48I can literally ignore those puzzle pieces
    • 0:54:52I created because now I have a new puzzle piece just
    • 0:54:55called cough that says what it does.
    • 0:54:57This is an abstraction in the sense that I
    • 0:54:59don't care how you implement coughing, I just care that your program can cough.
    • 0:55:04And so we have this notion of reusability
    • 0:55:05that starts to make our code no less sophisticated, but much,
    • 0:55:08much smaller and much less prone, potentially, to mistakes.
    • 0:55:12And I can take this one step further.
    • 0:55:13Let me go ahead and open up a different variant of this one altogether,
    • 0:55:17this one in cough three.
    • 0:55:19You can have these custom puzzle pieces even take arguments.
    • 0:55:23You can have this puzzle piece called cough
    • 0:55:25say, well, how many times do you want to cough, thereby taking an input.
    • 0:55:28Then you can repeat that number of times cough for a second and wait one second.
    • 0:55:34So if you want to now use this fancier puzzle piece up here,
    • 0:55:37notice this now looks even simpler.
    • 0:55:40Go ahead and cough three times.
    • 0:55:42And everything has been abstracted away.
    • 0:55:44If I scroll up and out of the way, you don't even
    • 0:55:46know or have to care how or why cough was implemented.
    • 0:55:51And so whereas we began this whole conversation
    • 0:55:52just looking for Mike Smith and trying to find an answer to a problem
    • 0:55:56correctly, we talked then about efficiency and finding that solution
    • 0:56:01not only for sure, but also quicker.
    • 0:56:03And now we've spoken a little bit to ideas
    • 0:56:06that lie ahead when it comes to the design of the quality of your code.
    • 0:56:10So where does that actually leave us?
    • 0:56:12Well, let me go ahead and open up a couple of final examples
    • 0:56:14here, one of them that I actually made back in my day.
    • 0:56:18And so this, when I actually started using Scratch for the first time,
    • 0:56:23it gave me this program here called Oscar Time.
    • 0:56:26And Oscar Time, reminiscent of an old song from Oscar the Grouch singing,
    • 0:56:30does this.
    • 0:56:31[SINGING]
    • 0:56:31There's this stage.
    • 0:56:33Notice the lamp post here and the trashcan.
    • 0:56:35And apparently, something falling from the sky
    • 0:56:37that looks like a piece of trash, but it's just a sprite.
    • 0:56:39It's what could have been a cat, but I changed the costume on the cat
    • 0:56:43to be a piece of trash.
    • 0:56:44But notice if I move my cursor and click and drag,
    • 0:56:47notice that this piece of trash follows the cursor just like Scratch followed
    • 0:56:52my cursor before on the screen.
    • 0:56:54And notice if I move it over to the trash can,
    • 0:56:56the trash can opens up, which is a Sensing question.
    • 0:57:00If touching trash can, then open up.
    • 0:57:03And open up probably just means change the costume
    • 0:57:06to show a different image instead of the original, thereby
    • 0:57:09a very simple idea of animation.
    • 0:57:11And now notice when I let go, if touching trash can and let go,
    • 0:57:17Oscar should come out of the trash can, count up to one, which is my score,
    • 0:57:21and then the game continues.
    • 0:57:22Now there's more trash falling.
    • 0:57:23Let me go ahead and do this.
    • 0:57:25And you'll see that these basic ideas of conditions and loops
    • 0:57:28and variables and Boolean expressions together
    • 0:57:31can compose a pretty interactive game.
    • 0:57:34This game took me eight or more hours to make,
    • 0:57:36and it's because I did not sit down and just make the whole thing at once.
    • 0:57:39I took baby steps, so to speak.
    • 0:57:41I first, frankly, did the easy part and I just found an image of Sesame Street,
    • 0:57:44put it on the stage, and boom.
    • 0:57:45At least version one, all it did was say Sesame Street.
    • 0:57:48And it's not interactive at all.
    • 0:57:49Then I added a sprite, which instead of being a cat,
    • 0:57:52I changed the costume to be the trash icon.
    • 0:57:54And I just figured out the code, the puzzle pieces,
    • 0:57:57to make that puzzle piece fall from the sky
    • 0:58:00and then stop when it's on the edge, just
    • 0:58:02like the cat was able to make a decision to bounce when it touched the edge.
    • 0:58:05And now things get a little crazy.
    • 0:58:07The song gets more sophisticated.
    • 0:58:08I added more and more sprites that just fall in lockstep with the music.
    • 0:58:13So this was quite a few hours of effort, but it boils down
    • 0:58:16to really the same principle, just as this other program here does, too.
    • 0:58:21And for this, rather than me play it, let
    • 0:58:23me invite one other volunteer to come on up who's got to be--
    • 0:58:27OK, I see your hand here.
    • 0:58:28What's your name?
    • 0:58:29MEGAN: Megan.
    • 0:58:30DAVID MALAN: Megan.
    • 0:58:30All right, Megan, we have a game for you called-- maybe
    • 0:58:34I mentioned this-- [? IB's ?] hardest game.
    • 0:58:36OK, come on up.
    • 0:58:38Nice to meet you.
    • 0:58:39This is a game by one of your former predecessors,
    • 0:58:42who their problems said zero, implemented this.
    • 0:58:45You'll see the instructions in just a moment on the screen.
    • 0:58:49We'll see if we can't inspire some folks to root for you here.
    • 0:58:54And after this, as is the tradition in CS50, we will adjourn for some cake.
    • 0:59:00So Megan, we have here for you, [? IB's ?] hardest game.
    • 0:59:03I'm going to go ahead and maximize the window.
    • 0:59:05I'm going to go ahead and click Begin and we'll see the instructions.
    • 0:59:07MEGAN: OK.
    • 0:59:07DAVID MALAN: Good luck.
    • 0:59:08MEGAN: Thanks.
    • 0:59:10[MUSIC -MC HAMMER, "U CAN'T TOUCH THIS"]
    • 0:59:13DAVID MALAN: Let's go ahead and raise the volume.
    • 0:59:15Here we go.
    • 0:59:16[MUSIC -MC HAMMER, "U CAN'T TOUCH THIS"]
    • 0:59:18(SINGING) Can't touch this.
    • 0:59:20DAVID MALAN: So you're going to move the arrow keys and navigate your way,
    • 0:59:24essentially-- oh, yep-- through a maze.
    • 0:59:26Notice Megan's not able to go beyond the black borders
    • 0:59:29because if touching edge, logic.
    • 0:59:33Now when you touch the other sprite, you advance to the next level.
    • 0:59:39Two sprites now.
    • 0:59:42Another Yale icon.
    • 0:59:44(SINGING) From the Oaktown and I'm known as such.
    • 0:59:46And this is a beat you can't touch.
    • 0:59:49I told you, homeboy.
    • 0:59:50DAVID MALAN: Nice.
    • 0:59:51OK.
    • 0:59:51[LAUGHTER]
    • 0:59:52(SINGING) Yeah, that's how we living and you know.
    • 0:59:54Can't touch this.
    • 0:59:56Look in my eyes, man.
    • 0:59:58DAVID MALAN: Nice.
    • 1:00:00(SINGING) Yo, let me but the funky lyrics.
    • 1:00:02Can't touch this.
    • 1:00:03[LAUGHTER]
    • 1:00:08DAVID MALAN: Nice.
    • 1:00:09[AUDIENCE GASPING]
    • 1:00:11[APPLAUSE]
    • 1:00:15(SINGING) Cold on a mission, so pull them on back.
    • 1:00:17Let them know that you're too much and this is a beat, uh, they can't touch.
    • 1:00:22Yo, I told you.
    • 1:00:23[LAUGHTER]
    • 1:00:26Why you standing there, man?
    • 1:00:27Can't touch this.
    • 1:00:28Yo, sounds the bells.
    • 1:00:29School is in, sucker.
    • 1:00:31Can't touch this.
    • 1:00:32DAVID MALAN: OK.
    • 1:00:34Good.
    • 1:00:35Nice.
    • 1:00:39[AUDIENCE GASPING]
    • 1:00:40[LAUGHTER]
    • 1:00:42(SINGING) Or a tape to learn what's it going to take?
    • 1:00:45And now he's going to burn the charts.
    • 1:00:47DAVID MALAN: Oh!
    • 1:00:48(SINGING) And you might as well quit.
    • 1:00:50That's word because you know--
    • 1:00:52DAVID MALAN: No!
    • 1:00:53That's OK.
    • 1:00:59Oh.
    • 1:00:59It's OK.
    • 1:01:03Nice.
    • 1:01:09Ah!
    • 1:01:15[INAUDIBLE]
    • 1:01:18Oh!
    • 1:01:20Couple more lives.
    • 1:01:22Nice.
    • 1:01:22Oh!
    • 1:01:23[AUDIENCE GASPING]
    • 1:01:28OK.
    • 1:01:29Yeah, you got it.
    • 1:01:30MEGAN: Yes.
    • 1:01:31Yep.
    • 1:01:32Oh my God.
    • 1:01:33DAVID MALAN: All right.
    • 1:01:34One more life-- two more lives!
    • 1:01:37Three more lives!
    • 1:01:40Come on.
    • 1:01:41(SINGING) Bring the bill.
    • 1:01:42School's back in.
    • 1:01:43Break it down.
    • 1:01:45DAVID MALAN: Yes!
    • 1:01:46[APPLAUSE]
    • 1:01:51MEGAN: Up, up, up.
    • 1:01:56(SINGING) Stop.
    • 1:01:57Hammer time.
    • 1:01:58DAVID MALAN: All right.
    • 1:01:59Last life.
    • 1:02:00Last life.
    • 1:02:00Go, go!
    • 1:02:02Here we go.
    • 1:02:05All right.
    • 1:02:06Nice, nice.
    • 1:02:07Yes, yes.
    • 1:02:08Ah!
    • 1:02:10All right.
    • 1:02:11A round of applause for Megan, if we could.
    • 1:02:13Check her out.
    • 1:02:14Here you go.
    • 1:02:15[APPLAUSE]
    • 1:02:18This, then, is CS50.
    • 1:02:20Welcome aboard.
    • 1:02:21Cake is now served.
  • CS50.ai
Shortcuts
Before using a shortcut, click at least once on the video itself (to give it "focus") after closing this window.
Play/Pause spacebar or k
Rewind 10 seconds left arrow or j
Fast forward 10 seconds right arrow or l
Previous frame (while paused) ,
Next frame (while paused) .
Decrease playback rate <
Increase playback rate >
Toggle captions on/off c
Toggle mute m
Toggle full screen f or double-click video