CS50 Video Player
    • 🧁
      • 🍫
      • 🍒
      • 🍿
    • 0:00:00Introduction
    • 0:01:01AI Instructor
    • 0:02:12This is CS50
    • 0:12:26Computer Science
    • 0:13:52Binary
    • 0:28:00ASCII
    • 0:37:32Unicode
    • 0:46:39Color
    • 0:48:07Representation
    • 0:51:30Algorithms
    • 1:00:10Pseudocode
    • 1:05:10Thank you
    • 1:06:13Artificial Intelligence
    • 1:15:52cs50.dev
    • 1:16:15Scratch
    • 1:19:03Hello, World
    • 1:22:05Hello, You
    • 1:29:19Meow
    • 1:32:10Abstraction
    • 1:36:22Conditionals
    • 1:43:44Oscartime
    • 1:50:29Ivy's Hardest Game
    • 2:00:03The Harvard Krokodiloes and The Radcliffe Pitches
    • 0:00:00[MUSIC PLAYING]
    • 0:01:30[AUDIENCE EXCLAIMING]
    • 0:01:34[APPLAUSE]
    • 0:01:42SPOT: Hello, world.
    • 0:01:44This is CS50, Harvard University's introduction
    • 0:01:47to the intellectual enterprises of computer science
    • 0:01:50and the art of programming.
    • 0:01:53Woof, woof.
    • 0:01:54[LAUGHTER]
    • 0:02:08I'm sorry, Dave.
    • 0:02:10[PINK, "WHAT ABOUT US"] What about us?
    • 0:02:15What about us?
    • 0:02:16La-da-da-da-da-da-da.
    • 0:02:17La-da-da-da-da-da-da.
    • 0:02:18We are searchlights.
    • 0:02:21We can see in the dark.
    • 0:02:27We are rockets pointed up at the stars.
    • 0:02:34We are billions of beautiful hearts.
    • 0:02:41And you sold us down the river too far.
    • 0:02:49What about us?
    • 0:02:51What about all the times you said you had the answers?
    • 0:02:57What about us?
    • 0:02:59What about all the broken happy ever-afters?
    • 0:03:05What about us?
    • 0:03:06What about all the plans that ended in disaster?
    • 0:03:12What about love?
    • 0:03:14What about trust?
    • 0:03:16What about us?
    • 0:03:21La-da-da-da-da-da-da.
    • 0:03:24La-da-da-da-da-da-da.
    • 0:03:28La-da-da-da-da-da-da.
    • 0:03:33La-da-da-da-da-da-da.
    • 0:03:55DAVID J. MALAN: All right.
    • 0:03:56So--
    • 0:03:56[APPLAUSE, CHEERING]
    • 0:04:02This is CS50, Harvard University's introduction
    • 0:04:05to the intellectual enterprises of computer science
    • 0:04:07and the art of programming.
    • 0:04:09And this is Spot.
    • 0:04:11And our thanks to our friends at 3D Cowboys
    • 0:04:13for bringing him by class today.
    • 0:04:15Perhaps a round of applause for our special Professor [INAUDIBLE]..
    • 0:04:18[APPLAUSE]
    • 0:04:21My name is David Malan.
    • 0:04:22And I actually took this class, CS50, myself, some years ago.
    • 0:04:26But I almost didn't.
    • 0:04:27And I didn't because when I got to campus, as a first-year,
    • 0:04:30I really gravitated toward things already familiar, things
    • 0:04:33with which I was already comfortable, specifically, government.
    • 0:04:35And I came in here thinking I was going to major or concentrate in government.
    • 0:04:38And it was only once I got to sophomore year, fall semester,
    • 0:04:41that some friends of mine were coming to this class called
    • 0:04:44CS50 that was very much to beware at the time, in that it
    • 0:04:48was an unfamiliar field to so many of us, myself included.
    • 0:04:50But I got up the nerve to go over the threshold, sit in on the first class,
    • 0:04:54just shop it, so to speak.
    • 0:04:56And I was hooked.
    • 0:04:57I found that homework was, for the first time, fun.
    • 0:05:00And this was after having enrolled only because the professor let
    • 0:05:03me enroll pass/fail or [INAUDIBLE] because I didn't really
    • 0:05:06think I could even cut it.
    • 0:05:07But fast forward to five Mondays later in the semester,
    • 0:05:10I actually switched to a letter grade, deciding,
    • 0:05:12wow, this is actually something for me.
    • 0:05:14And I say this because computer science, what
    • 0:05:17I didn't realize about it at the time, really
    • 0:05:19is this very general purpose way of thinking and way of solving problems.
    • 0:05:23And even if this is the only CS class you ever take,
    • 0:05:26even if this is the only formal training you have in programming
    • 0:05:29as a practical skill, it's just so darn applicable
    • 0:05:32to so many other fields-- the arts, humanities, social sciences,
    • 0:05:35natural sciences, and beyond, and certainly within the STEM fields,
    • 0:05:39themselves.
    • 0:05:40That said, it's going to often feel a little something like this.
    • 0:05:43This is from our friends at MIT, down the road, which is one of their hacks
    • 0:05:47whereby they connected a fire hydrant to a drinking fountain,
    • 0:05:51with a little sign up there that says, "GETTING AN EDUCATION FROM MIT IS LIKE
    • 0:05:54DRINKING FROM A FIRE HOSE," which is to say that it's
    • 0:05:57going to feel, quite often, in this class,
    • 0:05:59too, that there's just a lot of information.
    • 0:06:01And you can't possibly absorb it all, but realize
    • 0:06:03that's to be expected, especially in an introductory class.
    • 0:06:06The whole point is for so much of it to feel new, but with practice, with time,
    • 0:06:11with years, even, looking back, will you get all the more
    • 0:06:14comfortable with the material.
    • 0:06:15But you're not meant to feel comfortable along the way.
    • 0:06:18And so let me encourage you, invite you, expect
    • 0:06:20you to get comfortable feeling uncomfortable along the way,
    • 0:06:23whether you have or have not prior computer science or programming
    • 0:06:27experience.
    • 0:06:28Now, back in my day, the class' syllabus was a little bit different.
    • 0:06:32And, really, when I and all of my classmates exited the class,
    • 0:06:35we would say to friends that we learned how
    • 0:06:37to program in C, which is a language that we, ourselves, will still
    • 0:06:40learn in this class.
    • 0:06:41But that was it for languages.
    • 0:06:44But nowadays, as you'll see, we'll explore not just
    • 0:06:46this older language called C, but a more modern language
    • 0:06:49called Python that's very much in vogue for data science, and web applications,
    • 0:06:53and much more.
    • 0:06:54But we'll also introduce you, along the way,
    • 0:06:56to another language called S-Q-L or SQL, which is specifically for databases.
    • 0:07:01And SQL is a different type of programming language
    • 0:07:03that's just going to give you different ways of solving problems,
    • 0:07:06different building blocks with which to express problems you want to solve.
    • 0:07:09We'll introduce you, toward the end of the semester,
    • 0:07:11yet another language, JavaScript, often used
    • 0:07:14with markup languages called HTML and CSS, with which maybe you
    • 0:07:17have some experience if you've made websites.
    • 0:07:19But we'll do this because so many of today's actual real-world software
    • 0:07:23is web-based.
    • 0:07:24Or it's phone-based, mobile-based, but even then,
    • 0:07:27it's using these same languages, like JavaScript.
    • 0:07:30And so by the end of CS50, in particular,
    • 0:07:32you won't know how to program in X, or Y, or Z, per se.
    • 0:07:35But, period, you'll learn how to program.
    • 0:07:39And, indeed, among the goals of this class
    • 0:07:41is to equip you with enough of a set of concepts, enough practical skills
    • 0:07:45and experience that after CS50, again, if you never take another CS class,
    • 0:07:49you can teach yourself new languages.
    • 0:07:51And you won't feel--
    • 0:07:52you won't have been reliant on a class to, indeed,
    • 0:07:55introduce you to each and one of those ideas.
    • 0:07:57And what are we going to do, then, in this class?
    • 0:07:59And, really, what are we going to start doing today?
    • 0:08:01Well, we're going to learn how to solve problems.
    • 0:08:03And that's really what computer science is all about.
    • 0:08:05We'll, very specifically, today, knock off a few to-dos.
    • 0:08:09We'll learn how to represent simple things, like numbers.
    • 0:08:12We'll learn how to represent letters of an alphabet, like English.
    • 0:08:14We'll learn how to represent colors-- red, green, blue,
    • 0:08:17and everything in between.
    • 0:08:18We'll learn how to represent, more interestingly,
    • 0:08:20full-fledged images that you might see on the web or your phone.
    • 0:08:23We'll talk about representing videos and even audio files.
    • 0:08:26So, by the end of today, alone, you will exit here
    • 0:08:29with a newfound mental model for how you can
    • 0:08:31represent all of today's media and multimedia that we take for granted
    • 0:08:36and use most every day.
    • 0:08:37But we'll also focus today, ultimately, on how
    • 0:08:40to write algorithms, like step-by-step instructions for solving
    • 0:08:43some problem, specifically, implementing algorithms with code.
    • 0:08:47And that's what we'll find.
    • 0:08:48An algorithm is just something you can express
    • 0:08:50in English or any human language, but code is a translation of that
    • 0:08:54to, presumably, the 0's and 1's that you've probably heard
    • 0:08:57is all that computers ultimately speak.
    • 0:08:59And if you're feeling like that's a lot for today,
    • 0:09:02if you're feeling like that's a lot for the whole semester,
    • 0:09:04realize and take comfort in knowing that -thirds of you
    • 0:09:07have never taken a CS course before.
    • 0:09:09So even if you think, like I did all those years ago,
    • 0:09:12that, surely, my friends, the kids I didn't even in the class,
    • 0:09:15must know more than I, have been programming
    • 0:09:16since they were six years old.
    • 0:09:18That's just not the case.
    • 0:09:19You're in very much good company.
    • 0:09:21And within the class will you find different tracks,
    • 0:09:24by way of the homework assignments, called "problem sets,"
    • 0:09:26by way of the sections or recitations.
    • 0:09:28There will be different tracks for those of you
    • 0:09:29less comfortable, more comfortable, somewhere in between.
    • 0:09:32And if you really don't know why you are here today,
    • 0:09:34we'll even have sections for those least comfortable, where you just
    • 0:09:37don't necessarily feel ready to dive into CS or maybe STEM, more generally.
    • 0:09:41But we'll get you there by way of the course's support structure.
    • 0:09:44And it's very much grounded in this mindset.
    • 0:09:47What ultimately matters in this class is not so much
    • 0:09:50where you end up relative to your classmates,
    • 0:09:52but where you end up relative to yourself, when you began.
    • 0:09:55So whether you have or have not prior programming or CSS experience,
    • 0:09:58it's not going to matter when it comes to evaluation, when
    • 0:10:00it comes to the output, be it a grade, or a satisfactory mark, or the like.
    • 0:10:04It's going to depend on, really, where you are today,
    • 0:10:06in this, what we call week zero, versus the very end of the semester, when
    • 0:10:11you will have built something grand, of your very own, in software.
    • 0:10:15But CS50 is also characterized, fairly uniquely,
    • 0:10:17by its community, its culture.
    • 0:10:19And along the way, you'll see that your experience
    • 0:10:21is punctuated by a lot of social and academic events alike.
    • 0:10:24CS50 lunches, most every Friday, we'll gather at a nearby restaurant
    • 0:10:27called Changsho where we'll have Chinese lunch together.
    • 0:10:30And as many of you as might want to attend
    • 0:10:32that week will be able to join us, sit down, and chat casually with me,
    • 0:10:34the course's teaching staff, friends of ours, alumni from industry, as well.
    • 0:10:39CS50 Puzzle Day, coming up this weekend, will be an opportunity,
    • 0:10:42even if you have no prior CS experience, just to solve problems,
    • 0:10:46not jigsaw puzzles, but puzzles in the logical sense.
    • 0:10:49We'll hand you a packet of puzzles--
    • 0:10:52logic problems, or riddles, or the like--
    • 0:10:54that you, as teams, can solve together.
    • 0:10:56And at the very end, we'll walk you through.
    • 0:10:57And along the way, there'll be not only these puzzles, but pizza, and prizes,
    • 0:11:01and so much more, as well.
    • 0:11:02Towards the end of the semester, we'll have a CS50 Hackathon whereby
    • 0:11:06we'll get together around 7:00 PM, at the start of reading period,
    • 0:11:09and we'll finish up around 7:00 AM the next morning.
    • 0:11:12And it will be this opportunity to really bond
    • 0:11:15with your classmates, your project partners, if you work in a team,
    • 0:11:18on your very own final project, which is meant
    • 0:11:20to be a capstone of the course, something you build, yourselves,
    • 0:11:23that we don't hand you a specification for.
    • 0:11:25But it's your final offboarding, so that when you exit CS50,
    • 0:11:29you don't need CS50 anymore.
    • 0:11:31You don't need me.
    • 0:11:32You don't need your TF.
    • 0:11:33You can actually write code and solve problems on your own.
    • 0:11:35So this picture here is one of our past photos from earlier in the evening.
    • 0:11:39Things get a little quieter as we then, around 5:00 AM,
    • 0:11:42drive anyone who's still awake and energetic to a nearby IHOP
    • 0:11:46for pancakes, around then.
    • 0:11:48But here is how most of the evenings tend to end for at least some
    • 0:11:51of your classmates prior.
    • 0:11:53But at the very end of the class is the so-called CS50 Fair,
    • 0:11:55an exhibition of all of your final projects for friends, faculty,
    • 0:11:59students, and staff across campus, whereby
    • 0:12:01you'll be invited to a space like this.
    • 0:12:03Bring your laptop.
    • 0:12:04Bring your phone, whatever it is you have built and created.
    • 0:12:06And we'll just show it off for a bit of the afternoon,
    • 0:12:09complete with music, and friends from industry,
    • 0:12:11and candy, and all what makes gathering together at term's end fond.
    • 0:12:16And you'll wear, ultimately, very proudly,
    • 0:12:17we hope, your very own "I took CS50," stating, very matter of factly,
    • 0:12:21what I did some years ago; that, indeed, this was a course I, myself, took.
    • 0:12:25So, today, let's focus, then, on computer science, like what is it.
    • 0:12:29Well, it's really the study of information.
    • 0:12:31But, really, it's, more specifically, about solving problems,
    • 0:12:34using certain ideas and techniques, all of which you'll exit the course with.
    • 0:12:38So, as such, problem solving is a goal that we'll
    • 0:12:43approach by way of something called "computational thinking."
    • 0:12:45So computational thinking, you can oversimplistically think about it
    • 0:12:49as thinking like a computer.
    • 0:12:51But it's really the application of ideas that we'll dive into today
    • 0:12:55and we'll finish some weeks from now, that you
    • 0:12:57can apply to problems from this field or most any other, but in a computational,
    • 0:13:01that is, a very methodical, very careful way.
    • 0:13:04And that's what CS really did for me and does for a lot of people.
    • 0:13:07It helps clean up your thought processes.
    • 0:13:09Even if you go off into the real world and do nothing in tech,
    • 0:13:12you have an ability, after classes like this,
    • 0:13:14to express yourself a little more correctly, more
    • 0:13:18precisely and, generally, having better command
    • 0:13:20of your own ideas and your language.
    • 0:13:22So what's problem solving?
    • 0:13:24Let me propose that this is it.
    • 0:13:25This is as simple as we can make today's goals and the semester's goals.
    • 0:13:29Problems to be solved look like this.
    • 0:13:30You've got some input, the problem to be solved.
    • 0:13:32You've got a goal being the output, like the solution there, too.
    • 0:13:35And then somewhere in the middle is the secret sauce,
    • 0:13:38where we'll spend the next several weeks figuring out how
    • 0:13:40we can convert these inputs to outputs.
    • 0:13:42But before we can do that, we all just have
    • 0:13:44to agree on how to represent these inputs and outputs,
    • 0:13:48whether it's with English or, really, any type of language.
    • 0:13:51But, as I spoiled earlier, you probably came in here already
    • 0:13:54with a general sense that, yeah, computers somehow
    • 0:13:56only speak or know 0's and 1's, the so-called binary system.
    • 0:14:00But that's just one way of representing information.
    • 0:14:02Even simpler than binary is unary.
    • 0:14:05So if you've ever, at this age or any prior age, counted on your fingers,
    • 0:14:10this is unary notation, whereby each of your digits, your fingers
    • 0:14:14literally represent some piece of information;
    • 0:14:17taking attendance, like 1, 2, 3, 4, 5.
    • 0:14:19But on your one human hand, how high can you count in this unary notation?
    • 0:14:25AUDIENCE: Five.
    • 0:14:26AUDIENCE: Five.
    • 0:14:27DAVID J. MALAN: Five, I'm hearing five.
    • 0:14:29Six, I heard one six.
    • 0:14:31But I'm going to go further and say the answer, if you're clever about it,
    • 0:14:35is actually--
    • 0:14:36AUDIENCE: 40?
    • 0:14:37DAVID J. MALAN: Not quite 40.
    • 0:14:38You overbid, but--
    • 0:14:39AUDIENCE: 31.
    • 0:14:40DAVID J. MALAN: 31 is as high as I can actually count.
    • 0:14:43And that's because if I actually-- and if you're thinking
    • 0:14:46this is weirdly painful now, it will be, but this
    • 0:14:49is my hand representing the number 0.
    • 0:14:51Normally, in unary, this is 1, 2, 3, 4, 5, of course, obviously.
    • 0:14:55But what if I take into account the order in which I'm
    • 0:14:58putting my fingers up and down?
    • 0:14:59So maybe this is still 0.
    • 0:15:00Maybe this is still 1.
    • 0:15:02But maybe this is now 2, where it's just the single second finger up,
    • 0:15:07not two of them, total.
    • 0:15:08Maybe this is now 3.
    • 0:15:10Maybe this is now-- often offensive, with just the middle finger up.
    • 0:15:14This is now [LAUGHS] 5.
    • 0:15:17This is now 6.
    • 0:15:19This is now 7.
    • 0:15:21And my hand just hurts too much if I try to count higher than seven.
    • 0:15:24But, theoretically, because each of my fingers can be down or up
    • 0:15:27and I've got five of them, that's actually 32 possible permutations,
    • 0:15:32up and down.
    • 0:15:32But wait a minute.
    • 0:15:33We said, 31, but if you start at 0.
    • 0:15:36You have to subtract 1 from the biggest possible value.
    • 0:15:38So this is to say you and I have been using unary because it's just simple,
    • 0:15:41and it gets the job done.
    • 0:15:43But if we just think about representation a little more cleverly,
    • 0:15:46we can do exactly what computers do, using not what mathematicians call
    • 0:15:50"base-1," where the finger is either there or it's not, but base-2.
    • 0:15:54And in base-2, we just need two digits at our disposal.
    • 0:15:58And we could call these digits 1 and 2, A and B, black or white.
    • 0:16:02We just need two words to describe two pieces of information.
    • 0:16:06Computers keep it simple.
    • 0:16:07And just like we humans start counting 0, 1, 2, 3 on up,
    • 0:16:10computers use 0 and 1, and that's it.
    • 0:16:14But that's by convention.
    • 0:16:15But why do they do that?
    • 0:16:16Well, it turns out, when you use base-2, otherwise known as binary, well,
    • 0:16:21it just maps really readily to the real world.
    • 0:16:24Because, at the end of the day, what do we all
    • 0:16:25do, if you've got a laptop, or a phone, or any device?
    • 0:16:28You plug it into the wall because it needs electricity at some point.
    • 0:16:32And what if you have electricity or not?
    • 0:16:35Well, there's your two possible values.
    • 0:16:38Either it's there, or it's not.
    • 0:16:39And because computers are electrical devices,
    • 0:16:42this is why binary is just useful.
    • 0:16:43It's nice and simple.
    • 0:16:44Either electricity is there, or it's not.
    • 0:16:46So when you plug this device in and you've
    • 0:16:48got all these electrons or whatever flowing, maybe
    • 0:16:51if we just hang on to some of that electricity,
    • 0:16:53we can represent what we'll call a 1.
    • 0:16:55And maybe if we let it dissipate or go away, that's a 0.
    • 0:16:58So on and off maps very readily to this idea of just 0's and 1's.
    • 0:17:02And if you've ever thought of this, now, as binary digits--
    • 0:17:06"bi" implying 2, 0 and 1-- well, if you've ever heard this term now,
    • 0:17:10"bit," it just means binary digit.
    • 0:17:12A single bit is just a 0 or 1.
    • 0:17:14But we could have called these things anything we want.
    • 0:17:16Now how does this map to be clear to the real world?
    • 0:17:20Well, we can't see the tiny little switches inside of our Macs,
    • 0:17:23PCs, and our phones that are actually turning the electricity on
    • 0:17:26or off, storing electricity or not.
    • 0:17:28But they're called transistors.
    • 0:17:29They've got millions of them in today's hardware.
    • 0:17:32And they're just on or off, like a switch or a light bulb.
    • 0:17:35So, for instance, if there's no electricity,
    • 0:17:37the switch is off, we would call this, by convention, a 0.
    • 0:17:40If, though, you throw the switch and it actually turns on, we would call this--
    • 0:17:45AUDIENCE: On.
    • 0:17:45DAVID J. MALAN: --an "on," exactly, a 1.
    • 0:17:47We could have reversed it.
    • 0:17:48But this is just the way the world decided to standardize.
    • 0:17:51And that's it.
    • 0:17:51So you've either got something on or off, a 1 or a 0.
    • 0:17:55And this, then, is this thing we know now as a binary digit or a bit.
    • 0:18:00So once we've got these values, what about how--
    • 0:18:04how can we go about, perhaps, representing things?
    • 0:18:07Well, you know what?
    • 0:18:08It turns out we've got a lot of light bulbs right here.
    • 0:18:10Let me grab-- thanks.
    • 0:18:11Excuse me, spot.
    • 0:18:12Let me grab the little music stand here.
    • 0:18:16Let me borrow a couple of these bulbs and see
    • 0:18:18if we can't make clearer than my hand, alone, what's going on here.
    • 0:18:22So I'm going to go ahead and grab two of these.
    • 0:18:24And I'll just put them here.
    • 0:18:26And I can turn these things on or off now.
    • 0:18:28So if I've got two bits, two switches, two transistors, if you will, well,
    • 0:18:32if I go ahead and turn on this one, I'm representing what number in binary,
    • 0:18:38perhaps?
    • 0:18:39AUDIENCE: 1.
    • 0:18:39DAVID J. MALAN: So just 1.
    • 0:18:41Now, if I'm using unary, I would turn this one on and be done with it.
    • 0:18:45And that's 2, but not in binary.
    • 0:18:46Binary, it's the permutations, which ones are on and off, that matters.
    • 0:18:51So what, now, am I representing here, perhaps?
    • 0:18:53AUDIENCE: 2.
    • 0:18:54DAVID J. MALAN: 2.
    • 0:18:55So this is when I put my single pointer finger up.
    • 0:18:58But then when I did this, in my human hand,
    • 0:19:00this was like representing the number 3.
    • 0:19:03How do I represent the number 4.
    • 0:19:06Yeah, I need another light bulb, so I need more hardware, so to speak.
    • 0:19:11So if I turn--
    • 0:19:13if I leave this one-- if I turn this one on, this one off, this one off,
    • 0:19:19now I have the number 4.
    • 0:19:21And someone tell me, saying the words "on"
    • 0:19:24and "on" and "on," or "on," or "off," or "on,"
    • 0:19:26using combinations of "on," "off" and-- "on"
    • 0:19:28and "off," how do I represent 5, from your left to your right?
    • 0:19:32How about over here?
    • 0:19:33AUDIENCE: On, off, on.
    • 0:19:34DAVID J. MALAN: "On, off, on," I heard.
    • 0:19:36And that's exactly right.
    • 0:19:38And how do I represent, maybe, 6?
    • 0:19:41Over here?
    • 0:19:41AUDIENCE: Off, on, on.
    • 0:19:43DAVID J. MALAN: Off, on, on, not quite.
    • 0:19:45From left to right?
    • 0:19:45AUDIENCE: Off-- the other way.
    • 0:19:47DAVID J. MALAN: The--
    • 0:19:47[LAUGHS] OK, so from right to left.
    • 0:19:49So I think we leave this one on.
    • 0:19:50This one, I'm going to claim, represents, now, 6 and 7.
    • 0:19:58AUDIENCE: On, off.
    • 0:19:59DAVID J. MALAN: I'm just going to-- it's actually going to be "on, on, on."
    • 0:20:02Now, if you're wondering, where are these people coming up
    • 0:20:04with these combinations, there's actually a system here.
    • 0:20:07It's actually hard for me to do it backwards.
    • 0:20:09But it turns out there's actually a system that's not all that unfamiliar.
    • 0:20:14In fact, let me propose this.
    • 0:20:15Let me propose that we consider what you and I all
    • 0:20:18learned in grade school, which was something like the base-10 system, 10
    • 0:20:23meaning that you use 10 different digits, not two, 10.
    • 0:20:25So 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, that's the base-10 system, otherwise known
    • 0:20:30as decimal, "dec" implying 10.
    • 0:20:32So that's what you and I use every day.
    • 0:20:34Well, let's think about how we represent numbers in decimal,
    • 0:20:37in the normal human way.
    • 0:20:38Well, here is a number.
    • 0:20:39It's what number, of course?
    • 0:20:41AUDIENCE: 123.
    • 0:20:42DAVID J. MALAN: 123.
    • 0:20:43So we all just have an intuition for that, obviously.
    • 0:20:45But it's not necessarily 123.
    • 0:20:48You're just assigning meaning to the positions of these digits.
    • 0:20:51This is really the pattern 1-2-3.
    • 0:20:54But you immediately jump, mathematically, to 123, but why?
    • 0:20:57Well, odds are, in grade school, you learned that the rightmost digit is
    • 0:21:00the ones place or the ones column.
    • 0:21:02This is the tens place or the tens column.
    • 0:21:04This is the hundreds place.
    • 0:21:06And so why is this relevant?
    • 0:21:08Well, this is like doing 100 times 1 plus 10 times
    • 0:21:112 plus 1 times 3 or, if we multiply that out, 100 plus 20 plus 3,
    • 0:21:16ergo, the number, now, that we just take for granted is 123.
    • 0:21:21But that's in base-10, the so-called decimal system,
    • 0:21:24whereby each of these digits is in a different column.
    • 0:21:27And those columns are, again, ones place, tens, hundreds.
    • 0:21:31If we keep going, thousand, ten thousand, and so forth.
    • 0:21:33But where did these come from?
    • 0:21:35Well, here's the base.
    • 0:21:35If you remember exponents and all of that,
    • 0:21:37this is just 10 to the 0, 10 to the 1, 10 to the 2, ad infinitum.
    • 0:21:41And so, now, what if we just changed the base from 10, 0 through 9,
    • 0:21:46to just two digits, 0 and 1?
    • 0:21:48Well, now the math is fundamentally the same.
    • 0:21:50But it's 2 to the 0, 2 to the 1, 2 to the 2,
    • 0:21:52which gives us the ones place, twos place, and fours place.
    • 0:21:57Now, why is this relevant?
    • 0:21:58If you've got three light bulbs or three bits that are off, off, off,
    • 0:22:02what have I done?
    • 0:22:034 times 0 plus 2 times 0 plus 1 times 0 is, obviously, the number
    • 0:22:07you and I know, in decimal, as 0.
    • 0:22:09This, though, represents the number you and I know as--
    • 0:22:12AUDIENCE: 1
    • 0:22:13DAVID J. MALAN: This represents--
    • 0:22:14AUDIENCE: 2.
    • 0:22:15DAVID J. MALAN: --3, 4.
    • 0:22:17And just to be clear, this is why, when I grabbed the additional light bulb,
    • 0:22:21we claimed that this now was 4.
    • 0:22:25Because we had "on, off, off," "on, off, off."
    • 0:22:29This now is 5.
    • 0:22:30This now is 6.
    • 0:22:32This now is 7.
    • 0:22:33And if I wanted to count higher, what would the pattern of 0's and 1's be
    • 0:22:36for the number 8?
    • 0:22:37AUDIENCE: 1, 0--
    • 0:22:38DAVID J. MALAN: 1, 0, 0, 0.
    • 0:22:40So we just need more hardware, more bits.
    • 0:22:42So it wasn't arbitrary, even if it was non-obvious,
    • 0:22:45what I was actually doing with turning these light bulbs on and off.
    • 0:22:49Now, it turns out here we are talking about how to represent information,
    • 0:22:53like numbers, but we could also use bits, 0's and 1's, light bulbs
    • 0:22:59to represent instructions, as well.
    • 0:23:01Because, at the end of the day, that's all computers do.
    • 0:23:04They process data, information of some sort, whether it's files,
    • 0:23:07or numbers, or images, or videos, or the like.
    • 0:23:10And you do things with those files.
    • 0:23:13You open them.
    • 0:23:13You print them.
    • 0:23:14You edit them and the like.
    • 0:23:15So there's this notion of instructions, what the computer can actually do.
    • 0:23:18And I bet we could come up with some pattern of 0's and 1's
    • 0:23:22or, equivalently, light bulbs that tell even Spot what to do.
    • 0:23:26Maybe, go up, or down, or left, or right.
    • 0:23:30And it could certainly do this autonomously by using various sensors.
    • 0:23:33We need to keep things safe today.
    • 0:23:35We're using Wi-Fi in sending Spot these very instructions.
    • 0:23:38But what's happening, wirelessly, with our friend Andrew, here, is,
    • 0:23:41essentially, he's sending Spot instructions just encoded, wirelessly,
    • 0:23:45somehow, as patterns of 0's and 1's.
    • 0:23:47And the folks at Boston Dynamics, who built this robot, programmed
    • 0:23:51Spot to recognize certain patterns as meaning "up,"
    • 0:23:54a certain pattern as meaning "down," "left," "right,"
    • 0:23:57and any number of other things.
    • 0:23:58So, in fact, Spot, come on over here, if you could.
    • 0:24:00Come on, Spot.
    • 0:24:01[FOOTSTEPS]
    • 0:24:03OK.
    • 0:24:05So Spot, for instance, may very well have a pattern
    • 0:24:08of 0's and 1's that represents shake.
    • 0:24:11Shake, Spot.
    • 0:24:12So he could do that and any number of other movements, as well.
    • 0:24:16And maybe, especially with sensors here and also a little human help over here,
    • 0:24:19for today, what if we went ahead and did something-- maybe
    • 0:24:22ask Spot some questions?
    • 0:24:23So let's go ahead, and we'll start simple.
    • 0:24:25Spot, here we have some bits, "off, off, on."
    • 0:24:31Spot, what [LAUGHS]-- OK.
    • 0:24:34Spot, what is this representing, "off, off, on"?
    • 0:24:41[SPOT TAPS STAGE]
    • 0:24:43Correct?
    • 0:24:44I think so.
    • 0:24:45Very horse-like, OK.
    • 0:24:46Thank you.
    • 0:24:47All right, so a round of applause for Spot here.
    • 0:24:49[APPLAUSE]
    • 0:24:50All right.
    • 0:24:51So, Spot, what if we [LAUGHS] turn--
    • 0:24:54OK.
    • 0:24:54We'll turn that one off here.
    • 0:24:56How about if we turn this one on?
    • 0:24:57So it's "off, on, off."
    • 0:24:59Spot, what's this number?
    • 0:25:02[SPOT TAPPING STAGE]
    • 0:25:04Is that correct?
    • 0:25:05Nice.
    • 0:25:06OK.
    • 0:25:06[APPLAUSE]
    • 0:25:07[LAUGHS] How about one final flourish?
    • 0:25:09How about, Spot, instead of "off, on, off,"
    • 0:25:12let's go ahead and do "off, on, on"?
    • 0:25:16So think, in your mind's eye, what the answer should be.
    • 0:25:20All right, Spot, "off, on, on."
    • 0:25:24[SPOT LANDING ON THE STAGE]
    • 0:25:27OK.
    • 0:25:28And a round of applause for, Spot, as well.
    • 0:25:30[LAUGHS]
    • 0:25:31[APPLAUSE]
    • 0:25:33So this is to say, no matter how--
    • 0:25:36thank you, Spot.
    • 0:25:37No matter how fancy today's hardware or software is,
    • 0:25:40it really just boils down to representing
    • 0:25:42information and instructions.
    • 0:25:44And computers, and phones, and the like really are just
    • 0:25:47operating on those same pieces of information,
    • 0:25:51whether implemented in 0's and 1's or with, really, anything else.
    • 0:25:55All right.
    • 0:25:55So, where can we take this, once we have this agreed-upon system
    • 0:25:59for representing [LAUGHS] information?
    • 0:26:03Well, it turns out that using three bits, three 0's and 1's, at a time,
    • 0:26:06isn't actually all that useful.
    • 0:26:08And you and I, even in conversation, don't often say the word "bit."
    • 0:26:12We say the word "byte."
    • 0:26:13And what is a byte, if familiar?
    • 0:26:15Yeah?
    • 0:26:15AUDIENCE: It's eight bits.
    • 0:26:16DAVID J. MALAN: So it's just eight bits.
    • 0:26:18It's just a more useful unit of measure.
    • 0:26:20And it happens to be a power of 2, 2 to the third,
    • 0:26:22which just makes math work out cleanly.
    • 0:26:24But it's just a convention, to have more interesting units of measure
    • 0:26:27than individual bits.
    • 0:26:28So a byte is eight bits.
    • 0:26:30So, for instance, this represents, using eight bits, eight light bulbs,
    • 0:26:34the number you and I know is 0.
    • 0:26:36And this byte of all 1 bits--
    • 0:26:40now you've got to do some quick math-- represents what number, instead?
    • 0:26:46So it's all 1's; eight of them, total.
    • 0:26:48How about over here, on the end?
    • 0:26:49AUDIENCE: 255.
    • 0:26:51DAVID J. MALAN: So it's, indeed, 255.
    • 0:26:52Now, that's not the kind of math that you
    • 0:26:54need to do in your head for a class like this, but you could.
    • 0:26:57This is the ones place, twos, fours, eight, 16, 32, 64, 128.
    • 0:27:04And because they're all 1, you just have to add up all of those columns' values.
    • 0:27:08And you get 255.
    • 0:27:10But a little mental trick, too, is that, if you've got eight bits
    • 0:27:13and each of them can be two possible values, 0 or 1,
    • 0:27:17that's like 2 possibilities here times 2 times 2 times 2 times 2, eight times.
    • 0:27:21So that's 2 to the eighth, so that is maybe a little easier to do.
    • 0:27:25That's 256.
    • 0:27:26Or easier, in the sense that you get used to seeing these numbers in CS.
    • 0:27:29That's 256.
    • 0:27:31But wait a minute.
    • 0:27:32How do I reconcile this with your 255?
    • 0:27:35Because you start at 0.
    • 0:27:36So you lose one on the high end because we started counting and representing
    • 0:27:41the number, like 0.
    • 0:27:42All right.
    • 0:27:43Questions on how we've represented just numbers or, for instance,
    • 0:27:47instructions to Spot, thus far?
    • 0:27:51Any questions on binary, unary, or the like?
    • 0:27:57No?
    • 0:27:58All right, so seeing none, let's let things escalate a bit.
    • 0:28:01So how do you represent letters because, obviously, this
    • 0:28:03makes our devices more useful, whether it's
    • 0:28:05in English or any other human language.
    • 0:28:07How could we go about representing the letter A, for instance?
    • 0:28:10If, at the end of the day, all our computers,
    • 0:28:13all our phones have access to is electricity; or, equivalently,
    • 0:28:17switches; or, metaphorically, tiny little light bulbs
    • 0:28:20inside of them that can be on and off-- that's it.
    • 0:28:23There's no more building blocks to give you.
    • 0:28:26How could we represent something like the letter A?
    • 0:28:30Yeah, how about here?
    • 0:28:32Yeah?
    • 0:28:32AUDIENCE: You could assign a number.
    • 0:28:34DAVID J. MALAN: Perfect.
    • 0:28:35So we could just assign every letter a number.
    • 0:28:37And we could do this super simply.
    • 0:28:38Maybe 0 is A, and 1 is B. Or maybe 1 is A,
    • 0:28:42and 2 is B. It doesn't really matter, so long as we all agree and we all
    • 0:28:46use the same types of computers, in some sense, ultimately.
    • 0:28:48Well, for various reasons, the humans that designed this system,
    • 0:28:51they went with the number 65.
    • 0:28:53So, nowadays, anytime your computer is showing you the capital letter
    • 0:28:57A on the screen, underneath the hood, so to speak,
    • 0:29:00it's actually storing a pattern of 0's and 1's that represents the number 65.
    • 0:29:06And it tends to use seven bits or, typically, eight bits, total,
    • 0:29:09even if it doesn't need all of those bits in total.
    • 0:29:12So how do we get there?
    • 0:29:14Well, here, for instance, is that same pattern.
    • 0:29:17Here is that pattern of bits that represents 65.
    • 0:29:19And why?
    • 0:29:20Well, quick check here.
    • 0:29:22This is the ones place, twos, fours, eights, 16, 32, 64's place.
    • 0:29:29OK, so 64 plus 1 gives me 65.
    • 0:29:32So that is to say here's how a computer, using some light switches, so to speak,
    • 0:29:36would represent the number 65.
    • 0:29:38And our Macs, our PCs, our phones just all know this.
    • 0:29:41So whenever they see that in their memory, so to speak,
    • 0:29:44they show a capital letter A on the screen.
    • 0:29:47So that's it.
    • 0:29:48That's the system known as ASCII, the American Standard
    • 0:29:51Code for Information Interchange.
    • 0:29:52And the A is actually operative there because we're only talking, thus far,
    • 0:29:57about English letters in our alphabet.
    • 0:29:59And, in fact, I claimed, a moment ago, that we only use
    • 0:30:02seven, maybe eight bits to represent letters of an alphabet.
    • 0:30:06So, just to come back to you, if I may, how many
    • 0:30:08possible letters of the alphabet could-- how
    • 0:30:10many possible letters of any alphabet could we represent with eight bits?
    • 0:30:14AUDIENCE: 256.
    • 0:30:15DAVID J. MALAN: 256, the numbers 0 through 255.
    • 0:30:18Now, that's more than enough for English because we've
    • 0:30:20got A through Z, uppercase, lowercase, a bunch of numbers,
    • 0:30:23a bunch of punctuation symbols.
    • 0:30:24But in a lot of languages, with accented characters, a lot of Asian characters,
    • 0:30:28this is not nearly enough memory or bits with which
    • 0:30:32to represent all of those possible values.
    • 0:30:34So we need to do a little better than ASCII,
    • 0:30:36but we can build on top of what they did years ago.
    • 0:30:39So here is a chart of ASCII codes.
    • 0:30:41It's just a bunch of columns showing us the mapping between letters
    • 0:30:44and numbers.
    • 0:30:44So, for instance, up here is the capital letter A, 65; capital B, 66;
    • 0:30:49capital C, 67; dot, dot, dot.
    • 0:30:5272 is H. 73 is I and so forth.
    • 0:30:56There's some weird things over here, like special symbols,
    • 0:30:58that we'll learn about over time.
    • 0:31:00But there's a mapping between every English letter
    • 0:31:02of the alphabet and some number, just as you'd propose,
    • 0:31:04both for uppercase and lowercase.
    • 0:31:06So, for instance, if we highlight just a few of these for now
    • 0:31:10and I say that I've just received a text message or an email that,
    • 0:31:14underneath the hood, so to speak, if I have the ability
    • 0:31:17to look at what switches are on and off, I received this message here.
    • 0:31:22Well, first-- and this is not what CS is about, but just fun fact.
    • 0:31:26Does anyone know what number this would represent in decimal,
    • 0:31:29if this is the binary pattern, like ones place, twos place?
    • 0:31:34AUDIENCE: 72?
    • 0:31:35DAVID J. MALAN: 72 is correct.
    • 0:31:37And again, not, intellectually, all that interesting
    • 0:31:39and this is not the kind of math that we spend all day as CS--
    • 0:31:41a computer scientist doing.
    • 0:31:42But it's just following the same darn pattern, which
    • 0:31:45is to say it might look cryptic, but, conceptually,
    • 0:31:47intellectually, it ultimately is exactly as we did before.
    • 0:31:50So, yes, I'll spoil the rest of the math.
    • 0:31:52It's 72, 73, 33.
    • 0:31:54Now, anyone remember, in your mind's eye, what message we just spelled?
    • 0:31:58AUDIENCE: Hi.
    • 0:31:59AUDIENCE: Hi.
    • 0:31:59DAVID J. MALAN: Yeah, so it is, in fact, "Hi!"
    • 0:32:01Though, no one really said that excitedly.
    • 0:32:03What's the 33, if you noticed?
    • 0:32:04AUDIENCE: Exclamation point.
    • 0:32:05DAVID J. MALAN: OK, so a lot of people noticed.
    • 0:32:06Yes, it's an exclamation point.
    • 0:32:08And that's, indeed, noticeable right here.
    • 0:32:1133 is the exclamation point.
    • 0:32:13And that's just something, eventually, that might sink in.
    • 0:32:15But, for the most part, if you remember capital A is 65,
    • 0:32:18you can figure out at least 25 other answers to these kinds of questions
    • 0:32:22because they're all contiguous like that.
    • 0:32:24So there's the exclamation point.
    • 0:32:25But at the end of the day, we might just have this mapping known as ASCII.
    • 0:32:30And it's how our phones, and computers, and devices, more
    • 0:32:33generally, actually store information.
    • 0:32:35So we thought we'd make--
    • 0:32:37maybe take a little pressure off of me here.
    • 0:32:38And could we maybe flip things around?
    • 0:32:41How about we try applying this newfound knowledge--
    • 0:32:44if it's, indeed, new to you-- with seven volunteers, seven bits, if we could?
    • 0:32:48OK.
    • 0:32:48I saw your hand first.
    • 0:32:49Come on down.
    • 0:32:50Maybe your hand, there.
    • 0:32:52OK, three, come on down over here.
    • 0:32:54How about four and five?
    • 0:32:56Yep, come on down.
    • 0:32:57Yep, in the black shirt, yep.
    • 0:32:59How about let me go farther back?
    • 0:33:00How about in the green, over there?
    • 0:33:01And how about you, seven, over here?
    • 0:33:03All right.
    • 0:33:03Come on down.
    • 0:33:04[CHATTER]
    • 0:33:05Come on down.
    • 0:33:08So a round of applause for our brave volunteers.
    • 0:33:10[APPLAUSE]
    • 0:33:12All right.
    • 0:33:13So if you'd like to stand, roughly, side by side, here in the middle
    • 0:33:17of the stage.
    • 0:33:20First of all, thank you.
    • 0:33:22Let's see.
    • 0:33:231, 2, 3, 4, 5, 6, 7, perfect.
    • 0:33:25OK.
    • 0:33:25And let's go all the way over to this place, here.
    • 0:33:29If you would like to introduce yourself to the class.
    • 0:33:32RACHEL RICHEY: I'm Rachel Richey.
    • 0:33:34DAVID J. MALAN: OK.
    • 0:33:35And what year?
    • 0:33:36Anything about you?
    • 0:33:36RACHEL RICHEY: Oh, first year, concentrating in CS.
    • 0:33:38DAVID J. MALAN: OK.
    • 0:33:39Welcome to the stage.
    • 0:33:40Next.
    • 0:33:41SPEAKER: Hi.
    • 0:33:42I'm [? Kang. ?] Also a first-year concentrating in CS.
    • 0:33:46SPEAKER: Hello.
    • 0:33:47My name is [? Lam. ?] I'm a [INAUDIBLE] student from education department.
    • 0:33:52DAVID J. MALAN: Nice.
    • 0:33:53OK.
    • 0:33:53Next.
    • 0:33:54JORDAN MITTLER: Hi.
    • 0:33:55I'm Jordan Mittler, concentrating in economics and maybe some CS.
    • 0:33:59SPEAKER: So, hi.
    • 0:34:00I'm [? Natalia. ?] First year, and I want to do CS.
    • 0:34:02SPEAKER: Hi.
    • 0:34:03I'm [? Khadija. ?] I'm a first-year, and I want to do CS.
    • 0:34:05DAVID J. MALAN: [LAUGHS].
    • 0:34:07SPEAKER: Hello.
    • 0:34:08I'm [? Caleb. ?] And, once again, first year, concentrating in CS.
    • 0:34:11DAVID J. MALAN: OK.
    • 0:34:12Wonderful.
    • 0:34:12A pattern, yes.
    • 0:34:13Thank you.
    • 0:34:14Thank you.
    • 0:34:14[APPLAUSE]
    • 0:34:15So, if you haven't guessed already, each of these volunteers
    • 0:34:20is going to represent a bit, from left to right, or right to left,
    • 0:34:23in this case.
    • 0:34:24So let's see.
    • 0:34:24If you want to represent-- how about the twos place?
    • 0:34:27How about the fours place, the eighths place, 16ths place, 32's, 64, and 128?
    • 0:34:37Although, wait a-- I think I screwed up.
    • 0:34:39We needed one-- eighth volunteer.
    • 0:34:40I think you know-- well, I think--
    • 0:34:42[CLEARS THROAT] Spot?
    • 0:34:45OK.
    • 0:34:46Come on over.
    • 0:34:46If you guys could step forward a little bit, and then scooch this way,
    • 0:34:49just to give Spot some room.
    • 0:34:51[FOOTSTEPS]
    • 0:34:52So Spot will represent the ones place.
    • 0:34:55Now, what our volunteers have on the back of their sheets of paper
    • 0:34:58are little instructions.
    • 0:34:59We're going to spell out a three-letter word in English by using three bytes,
    • 0:35:05from left to right, because now we have eight volunteers.
    • 0:35:08I'm going to propose that you raise your hand, if you're
    • 0:35:10supposed to represent a 1.
    • 0:35:12Or you just stand there, without raising your hand,
    • 0:35:14if you're meant to represent a 0.
    • 0:35:15And what we'll have the audience do is do the quick math
    • 0:35:18to figure out-- one, two, three-- each letter, what number is it.
    • 0:35:22What letter is it?
    • 0:35:23And we'll see what word that we have finally spelled.
    • 0:35:26All right.
    • 0:35:26So, in round one--
    • 0:35:28you have instructions on your back of your sheet that will tell you to--
    • 0:35:31what your number is.
    • 0:35:32If you're 0, stand there.
    • 0:35:33If you're a 1, raise your hand.
    • 0:35:37[PAPER RUSTLING]
    • 0:35:40What number do these guys seem to be representing?
    • 0:35:43AUDIENCE: 68.
    • 0:35:44DAVID J. MALAN: 66, I think.
    • 0:35:4664 plus 2, so 66, which is the letter--
    • 0:35:49AUDIENCE: B.
    • 0:35:50DAVID J. MALAN: OK, so, B. OK, so, B. All right.
    • 0:35:52Hands down.
    • 0:35:54Second letter is going to be spelled how?
    • 0:36:01[SPOT LANDS ON THE STAGE]
    • 0:36:02AUDIENCE: Whoa.
    • 0:36:02AUDIENCE: Whoa.
    • 0:36:03AUDIENCE: Whoa.
    • 0:36:04DAVID J. MALAN: [LAUGHS] All right.
    • 0:36:07What are we spelling now?
    • 0:36:09[INDISTINCT CHATTER]
    • 0:36:11I think-- psst, yep, OK.
    • 0:36:15Yeah, I think you're one.
    • 0:36:17[LAUGHTER]
    • 0:36:19OK.
    • 0:36:20Now what number are we spelling?
    • 0:36:23AUDIENCE: 79
    • 0:36:24DAVID J. MALAN: 79, I heard, which is the letter?
    • 0:36:26AUDIENCE: O.
    • 0:36:27DAVID J. MALAN: O. OK.
    • 0:36:28So hands down.
    • 0:36:29Thank you, Spot.
    • 0:36:30One final flourish.
    • 0:36:31So we've spelled B-O--
    • 0:36:33third letter, go ahead.
    • 0:36:37[SPOT LANDS ON THE STAGE]
    • 0:36:40What number, now, is this?
    • 0:36:42AUDIENCE: 87.
    • 0:36:43AUDIENCE: 87.
    • 0:36:44DAVID J. MALAN: I heard it here, 80--
    • 0:36:45AUDIENCE: Seven.
    • 0:36:46DAVID J. MALAN: --seven, which is?
    • 0:36:46AUDIENCE: W.
    • 0:36:47DAVID J. MALAN: W, which, of course, spells "bow."
    • 0:36:49So if our volunteers could take a bow, Spot included.
    • 0:36:53[APPLAUSE]
    • 0:36:58So this will make more sense in week one,
    • 0:37:01when we have an assignment involving a certain someone from the Nintendo
    • 0:37:04World.
    • 0:37:04But we have a lovely parting gift for each of you.
    • 0:37:06SPEAKER: Thank you.
    • 0:37:07[LAUGHS]
    • 0:37:07DAVID J. MALAN: Thank you for volunteering.
    • 0:37:08SPEAKER: Thanks.
    • 0:37:08DAVID J. MALAN: You might need to share it with the folks next to you.
    • 0:37:11[CHATTER]
    • 0:37:18Oop, here we go.
    • 0:37:19There we go.
    • 0:37:19Thank you--
    • 0:37:20SPEAKER: Thank you.
    • 0:37:21RACHEL RICHEY: Thank you.
    • 0:37:21DAVID J. MALAN: --so much.
    • 0:37:21One more round of applause, if we could, for our volunteers.
    • 0:37:23Thank you.
    • 0:37:23[APPLAUSE]
    • 0:37:24Did you lose something?
    • 0:37:26OK.
    • 0:37:27All right.
    • 0:37:28So, [LAUGHS] Spot's had it.
    • 0:37:31So let's see, then, if we've solved, now,
    • 0:37:34the problem of representing English letters of the alphabet,
    • 0:37:36being able to spell out words like "bow," B-O-W. What if we actually do
    • 0:37:39have accented characters?
    • 0:37:41What if we do have other glyphs that we want to represent?
    • 0:37:43Well, here, of course, is a standard US English keyboard, which a lot of you
    • 0:37:47might have.
    • 0:37:47But there's also characters that you can type much more
    • 0:37:50easily if you have a foreign keyboard, relative to the US,
    • 0:37:52or with certain keystrokes on your own Mac, PC, and phone.
    • 0:37:55But, nowadays, too, there's this menu that, probably, you've
    • 0:37:59used in the past hour or two to actually send some emoji.
    • 0:38:03An emoji, even though they look like pictures
    • 0:38:06and they actually are pictures on the screen,
    • 0:38:08they're, technically, just characters, characters of an emoji alphabet
    • 0:38:13that happened to use a certain pattern of 0's and 1's to represent
    • 0:38:16each of these faces, each of these people, and places, and things.
    • 0:38:19And it turns out that one of the reasons that we have just
    • 0:38:22so many [LAUGHS] such characters nowadays is because we now
    • 0:38:29use Unicode instead of ASCII.
    • 0:38:31So Unicode is a superset, so to speak, of ASCII,
    • 0:38:34which is to say that we, humans, realized, some time ago, that just
    • 0:38:38using eight bits to represent letters of the alphabet
    • 0:38:40certainly isn't very good when we want to represent
    • 0:38:43other, non-English languages.
    • 0:38:44So Unicode doesn't just use eight bits.
    • 0:38:47It sometimes uses 16 bits per character, sometimes 24 bits per character,
    • 0:38:52and sometimes even 32 bits per character.
    • 0:38:55Now, why those numbers?
    • 0:38:56That's just one byte, two bytes, three bytes, or four bytes.
    • 0:39:00And that gives us--
    • 0:39:02does anyone know?
    • 0:39:02That gives us the ability to represent as many as 4
    • 0:39:06billion possible characters.
    • 0:39:08Because if the longest one is 32 bits, that's 2 to the 32,
    • 0:39:12which, if you do out the math, trust me, is roughly 4 billion.
    • 0:39:15So that's a lot of characters.
    • 0:39:16And we've got a lot of room, then, for these emoji.
    • 0:39:19But it's not just about having fun, pictorially, on the screen.
    • 0:39:22Unicode's mission really is to represent and to preserve all human languages
    • 0:39:27digitally, both past, present, and future.
    • 0:39:31So it is really about capturing the entirety of human knowledge,
    • 0:39:35as we've expressed it in language, but also
    • 0:39:37giving this newfound ability that's been used centuries ago, too-- in writings,
    • 0:39:42on walls, and the like-- pictograms via which
    • 0:39:44we can still communicate, even independently
    • 0:39:46of our own human language.
    • 0:39:48So we'll reduce it, today, to just patterns of 0's and 1's, but
    • 0:39:51the problem being solved is much greater and well-beyond CS, itself, there.
    • 0:39:56So here is a pattern of 0's and 1's using
    • 0:39:58Unicode, so more than eight bits, that represents a very popular emoji, which
    • 0:40:04might be a bit of a hint.
    • 0:40:06This is the most popular emoji, as of last year, at least,
    • 0:40:08statistically, internationally.
    • 0:40:10[INTERPOSING VOICES]
    • 0:40:13DAVID J. MALAN: Does this help?
    • 0:40:14It's, roughly, this number here.
    • 0:40:16No?
    • 0:40:17It's this one here.
    • 0:40:19So this is the most popular emoji, by most measures, as of last year.
    • 0:40:23But it doesn't always look like this.
    • 0:40:25Those of you who have a Mac or an iPhone recognize this symbol, perhaps,
    • 0:40:28immediately.
    • 0:40:28Those of you with Android devices or other platforms
    • 0:40:31might notice that it's the same idea, but it's a little bit different.
    • 0:40:35And this is because, too, emojis, at the end of the day,
    • 0:40:38just represent character, but those characters can be drawn,
    • 0:40:41can be painted in different ways.
    • 0:40:43And reasonable people will interpret differently
    • 0:40:46this emoji, whose official name is "face with tears of joy."
    • 0:40:49And, indeed, Google interprets it a little differently
    • 0:40:52from Apple, versus Microsoft, versus Meta, versus other companies, as well.
    • 0:40:55So you can almost think of those different companies
    • 0:40:57as having different fonts for emoji.
    • 0:41:00And that really starts to connect things to the world of text and characters.
    • 0:41:04So, just so you've seen it.
    • 0:41:05More on this, another time.
    • 0:41:07It turns out that emoji and, really, characters, in general,
    • 0:41:10we don't use binary 0's and 1's to represent them
    • 0:41:13because no one, myself included, is going to recognize what's what.
    • 0:41:15It's just too much math.
    • 0:41:16It's not interesting.
    • 0:41:17And even decimal numbers-- that was 4 billion or some--
    • 0:41:19I don't remember which number is which.
    • 0:41:22So we represent things a little more compactly.
    • 0:41:24And this, too, admittedly, still looks cryptic,
    • 0:41:26but this is a Unicode code point that uses another system, mathematically,
    • 0:41:30called base-16 or hexadecimal.
    • 0:41:33More on that, another time.
    • 0:41:34But it's just a way of representing numbers even more succinctly,
    • 0:41:38writing less on the screen, because you're using not just 0
    • 0:41:41through 9, as in decimal.
    • 0:41:42But you're using A through F, as well, so a few letters
    • 0:41:46of the English alphabet come into play.
    • 0:41:47But, for now, that's just a little easier
    • 0:41:49to remember, too, for people who care, that that is the number that
    • 0:41:53represents "face with tears of joy."
    • 0:41:55But what if we want a customized emoji?
    • 0:41:58And this, increasingly, is the case.
    • 0:41:59Here, for instance, are the five skin tones
    • 0:42:01that phones, and laptops, and desktops, nowadays, support.
    • 0:42:04It's based on something called the "Fitzpatrick scale," which essentially
    • 0:42:07categorizes human skin tone into six or, in this case, five
    • 0:42:10different categories, from lighter to darker.
    • 0:42:12But this suggests that, wow, if we want to represent people
    • 0:42:17with five different skin tones, like this, that could significantly
    • 0:42:22increase how many unique patterns of 0's and 1's we
    • 0:42:25need for every possible face.
    • 0:42:26But if we think about it from an engineering perspective,
    • 0:42:29we can actually just think of skin tone as modifying some default
    • 0:42:33color, for better or for worse.
    • 0:42:34And yellow is the de facto default, Simpson style.
    • 0:42:37But to modify it to look more genuinely human-like, from lighter to darker,
    • 0:42:41well, maybe we just use the same pattern of bits
    • 0:42:43to represent a human thumb, for instance, thumbs up or thumbs down.
    • 0:42:47And we just, then, modify that character to be displayed with a different skin
    • 0:42:51tone.
    • 0:42:51So, for instance, here, then, is the "thumbs up"
    • 0:42:53that you might use on various platforms.
    • 0:42:55And let me just stipulate that this is the Unicode code point.
    • 0:42:59That is the number that Macs, PCs, and phones
    • 0:43:01use underneath the hood to represent the default yellow "thumbs up."
    • 0:43:05But if you want to give it a medium skin tone,
    • 0:43:08you still use that same number, that same pattern of 0's and 1's,
    • 0:43:12or switches, underneath the hood.
    • 0:43:13But you use a few more switches that the computer or phone
    • 0:43:17will interpret as, "Oh, you don't want to see the default in yellow
    • 0:43:20because of this second number that's in the computer's memory somewhere.
    • 0:43:23You want me to adjust it to be the medium skin tone or any
    • 0:43:27of the other values, instead."
    • 0:43:29So that's the engineering solution to this problem
    • 0:43:31of just trying to represent different ranges of emoji here.
    • 0:43:35Well, what about something like this?
    • 0:43:36There's a lot more combinatorics, nowadays,
    • 0:43:38on your keyboard for relationships, for instance.
    • 0:43:40So here is a "couple with heart" here.
    • 0:43:43So the couple, here, of course, is represented with, apparently,
    • 0:43:46this number here.
    • 0:43:47But that's it.
    • 0:43:48But if you want to be more specific-- like man and woman,
    • 0:43:50or man-man, woman-woman-- it's the same idea,
    • 0:43:53but we just need to express ourselves a little-- with a little
    • 0:43:56more information.
    • 0:43:57So, for instance, the way the Unicode folks came up with,
    • 0:44:00years ago, to represent, for instance, a woman with a heart and a man,
    • 0:44:03from left to right, would be using these values.
    • 0:44:06So things just escalated quickly, but only
    • 0:44:08in the sense that we're using more bits, more 0's and 1's, to represent,
    • 0:44:12more expressively, this particular combination.
    • 0:44:15So this happens to be the number in Unicode
    • 0:44:18that represents the woman at left.
    • 0:44:19This is the number that represents the man at right.
    • 0:44:22And this is the pair of numbers that represents
    • 0:44:25the heart in the middle, sometimes red, sometimes pink, displayed here as pink.
    • 0:44:29But if we want to change the combination, for instance, to be,
    • 0:44:32say, woman--
    • 0:44:33if we want to change the combination to be woman-woman,
    • 0:44:36notice that, now, the left and the rightmost numbers match.
    • 0:44:39Or if we flip it back to man-man, it's just using different numbers
    • 0:44:42on the tail end again.
    • 0:44:43And meanwhile, if I rewind, there's these two identical values here.
    • 0:44:48These are called zero-width joiners or ZWNJ characters.
    • 0:44:51It just is a special number that humans reserve to say,
    • 0:44:55glue the emoji at the left to the emoji on the right and so forth.
    • 0:45:00So it connects ideas in this way.
    • 0:45:02So there's actually a lot of emojis, nowadays,
    • 0:45:04that are a combination of different things.
    • 0:45:07"Heart on fire" is one that's, technically,
    • 0:45:09the combination of a heart emoji, the fire emoji,
    • 0:45:13joined together, numerically, in this way.
    • 0:45:16So computer scientists who come up with these things
    • 0:45:18are just reducing things to representations.
    • 0:45:21All we have at our disposal are 0's and 1's.
    • 0:45:23So we all just need to agree, ultimately--
    • 0:45:25whether we're Google, Microsoft, or the like-- how we're going to standardize
    • 0:45:28these kinds of things as information.
    • 0:45:31Questions, then, on how characters are represented in a computer,
    • 0:45:36be it English or any other language?
    • 0:45:38Yeah.
    • 0:45:38AUDIENCE: How is the plus a number?
    • 0:45:40DAVID J. MALAN: How is the what?
    • 0:45:41AUDIENCE: The plus, the U+.
    • 0:45:43DAVID J. MALAN: Oh, the U+ is just a convention, really.
    • 0:45:46So U+ represents a special Unicode character,
    • 0:45:49which is a U with a plus in the middle.
    • 0:45:51And this is just the convention for saying,
    • 0:45:54hey, everyone, here comes a number that represents a Unicode code point.
    • 0:45:58The U and the 1 have no-- sorry.
    • 0:46:00The U and the plus have no mathematical significance.
    • 0:46:02It's just a visual clue to folks.
    • 0:46:05Other questions on representing text in this way?
    • 0:46:10All right.
    • 0:46:10So what about colors?
    • 0:46:12We've already started looking at pictures.
    • 0:46:13Well, how are those pictures, be it emojis or anything else, represented?
    • 0:46:17One of the most common ways is just with RGB--
    • 0:46:19red, green, and blue.
    • 0:46:20It turns out that if we just keep track of how much red should
    • 0:46:24be on the screen, and how much green, and how much blue, combined together,
    • 0:46:27that gives us every color of the rainbow,
    • 0:46:29from white to black and everything in between.
    • 0:46:32So how do we represent an amount of red, and green, and blue?
    • 0:46:35Well, frankly, just with three different numbers.
    • 0:46:37And this is how computers typically represent colors.
    • 0:46:40Every one of the dots on your computer screen or your phone screen
    • 0:46:43is called a pixel.
    • 0:46:44And every single dot underneath the hood has three numbers associated with it,
    • 0:46:50so three numbers, three numbers, three numbers for every little dot.
    • 0:46:53And those three numbers, together, say how much red, green, and blue
    • 0:46:56should the device display at that location.
    • 0:46:59So, for instance, if you had a dot on your screen
    • 0:47:02that said, "use this much red, this much green this much blue," because each
    • 0:47:07of these numbers, I'll tell you, are one byte or eight bits,
    • 0:47:11which means the total possible values is 0 to 255--
    • 0:47:15let me just ballpark that the 72, it feels like a medium amount of red
    • 0:47:19because it's in between 0 and 255.
    • 0:47:2173 is a medium amount of green, and 33 of blue is just a little bit.
    • 0:47:25So if you combine a medium amount of red, green, and a little bit of blue,
    • 0:47:29anyone want to guess what color of the rainbow this is?
    • 0:47:32AUDIENCE: Brown.
    • 0:47:33DAVID J. MALAN: Sorry?
    • 0:47:34AUDIENCE: Brown.
    • 0:47:35DAVID J. MALAN: Brown?
    • 0:47:36So, close.
    • 0:47:37It's a little more yellow than it is brown.
    • 0:47:39But if we combine them, it looks a little something like this.
    • 0:47:41This is just CS trivia, not something that even
    • 0:47:43I would be able to eyeball, unless I came up with that particular example.
    • 0:47:46But wait a minute.
    • 0:47:48We've seen these numbers before.
    • 0:47:4972, 73, 33 represented what--
    • 0:47:51AUDIENCE: Hi!
    • 0:47:52DAVID J. MALAN: --a few minutes ago?
    • 0:47:53So it meant "Hi!" but here I am, claiming, no, no, no, no,
    • 0:47:55that means yellow.
    • 0:47:57How do you reconcile this?
    • 0:47:58Well, at the end of the day, this is all we have,
    • 0:48:010's and 1's, whether you think of them as numbers,
    • 0:48:04or letters, or even colors now.
    • 0:48:06But it depends on the context.
    • 0:48:08So if you've received a text message or an email,
    • 0:48:11odds are the pattern of 0's and 1's that the computer
    • 0:48:13is showing you are going to be interpreted as text because that's
    • 0:48:17the whole point of a text message or an email.
    • 0:48:19If, though, you opened up MacOS's or iOS's or Windows's or Android's
    • 0:48:23calculator app, the same pattern of 0's and 1's might
    • 0:48:27be interpreted as numbers for some addition, or subtraction, or whatever.
    • 0:48:30If you open the same pattern of 0's and 1's in Photoshop,
    • 0:48:33like a graphics program, they're going to be interpreted, in that context,
    • 0:48:37as colors.
    • 0:48:37So context matters.
    • 0:48:39And, indeed, as soon as next week, when you
    • 0:48:40start writing code in that language called C,
    • 0:48:43the onus will be on you, the programmer, to tell the computer, interpret
    • 0:48:47the following sequence of bits as a number, or a letter, or something else.
    • 0:48:52And you won't have to even worry about what the 0's and 1's are,
    • 0:48:55but you need to give the computer a hint as to what type of file
    • 0:48:58or piece of data you're representing.
    • 0:49:00So that gives us bits.
    • 0:49:01And you can actually see these dots, these pixels on the screen.
    • 0:49:05Let me zoom in, zoom in.
    • 0:49:07And here we have it, just with this emoji, which, at the end of the day,
    • 0:49:10is a picture that someone at Apple, in this case, drew.
    • 0:49:13And you can see-- if you really zoom in, or take your phone or TV
    • 0:49:16and really put it close to your face, you'll see all of these dots,
    • 0:49:19depending on the hardware.
    • 0:49:20And each of these dots, these squares, is
    • 0:49:23storing 24 bits or three bytes, 24 bits, 24 bits, 24 bits.
    • 0:49:28And that's whey, dot, dot, dot, if you've
    • 0:49:31got a photograph, for instance, that's three megabytes, which
    • 0:49:35is 3 million bytes, well, odds are there's 1 million pixels therein
    • 0:49:42because you're using three bytes per pixel
    • 0:49:45to represent each of those colors.
    • 0:49:46That's a bit of an oversimplification, but that's
    • 0:49:48why images and photos are getting bigger and bigger nowadays.
    • 0:49:51Because we're throwing even more pixels into the file.
    • 0:49:56Music--
    • 0:49:56[MUSIC PLAYING]
    • 0:49:57--how could you represent music, digitally,
    • 0:49:59using just 0's and 1's, or numbers, really?
    • 0:50:03Any instinct, whether a musician or not?
    • 0:50:07Yeah.
    • 0:50:08AUDIENCE: The notes could be represented by a number.
    • 0:50:11DAVID J. MALAN: Yeah, so we can just represent notes by a number.
    • 0:50:13So A is some number, and B. And maybe sharp or flat is some other number.
    • 0:50:17But note might not be quite enough for some--
    • 0:50:21yeah?
    • 0:50:22AUDIENCE: [INAUDIBLE].
    • 0:50:22DAVID J. MALAN: Ah, OK.
    • 0:50:23So one note-- one number to represent the note, itself,
    • 0:50:26the sound or the pitch; one other number to represent the duration.
    • 0:50:30In the context of piano, how long is the human holding the key down?
    • 0:50:35And maybe I can think of a third, the loudness.
    • 0:50:37How hard has the person played that note?
    • 0:50:39So, minimally, with three numbers, you could
    • 0:50:41imagine representing music, as well.
    • 0:50:43And, indeed, that's very well might be what computers
    • 0:50:45are doing when you listen to sound.
    • 0:50:47What about video?
    • 0:50:48How could you represent videos, as well?
    • 0:50:51Yeah?
    • 0:50:52AUDIENCE: Through many images.
    • 0:50:53DAVID J. MALAN: Yeah, many images.
    • 0:50:54So if you've ever produced a film or looked at some of the fine print,
    • 0:50:5730 frames per second, FPS, or 29 frames per second
    • 0:51:02is just how many pictures are flying across the screen.
    • 0:51:04But that's really all a video file is on a computer,
    • 0:51:06lots of pictures moving so quickly in front of us that you and I, our brains,
    • 0:51:10interpolate that as being actual motion.
    • 0:51:12And, in fact, from yesteryear, motion pictures,
    • 0:51:15it's like pictures that are giving the illusion of motion,
    • 0:51:18even though there's only 30 or so of them flying across the screen.
    • 0:51:21So we have a way, now, to represent information, both as
    • 0:51:24input and output, whether it's numbers, letters, images, anything else.
    • 0:51:29Let's now focus on what's inside of that black box,
    • 0:51:32so to speak, wherein we have algorithms, step-by-step instructions
    • 0:51:36for solving some problem.
    • 0:51:38Now, what do I mean by "algorithms" or "step-by-step instructions"?
    • 0:51:41Well, maybe, if we were to turn this into code--
    • 0:51:44and that's how we'll connect the dots, ultimately, today.
    • 0:51:47Code is just the implementation, in computers, of algorithms.
    • 0:51:51An algorithm can be something we do in the physical world.
    • 0:51:53Code is how we implement that exact same idea, in the context of a computer,
    • 0:51:58instead.
    • 0:51:58And here, for instance, is a very common application inside of a computer,
    • 0:52:02for your context.
    • 0:52:02This is the iOS version of the icon.
    • 0:52:04And, typically, if you click on that icon,
    • 0:52:06you'll see something like all of your contacts here,
    • 0:52:09typically, alphabetical, by first name or last name.
    • 0:52:12And your phone or your computer lets you often search for someone's name
    • 0:52:17at the very top.
    • 0:52:17And it will autocomplete, and it'll be pretty darn fast.
    • 0:52:20But it'll be pretty darn fast because the programmers who
    • 0:52:23implemented that application are looking for someone quickly for you.
    • 0:52:28Now, I can do this old school style, whereby we have one of these things
    • 0:52:33from yesteryear, an actual phone book.
    • 0:52:35So, in a physical phone book like this, you might have 1,000 pages.
    • 0:52:39And on every page are a bunch of names and a bunch of numbers.
    • 0:52:42And as I flip through this, I could look for someone specific.
    • 0:52:45So suppose I want to call John Harvard, who's-- the first name, of course,
    • 0:52:49starts with a J. Well, I could just turn, page by page,
    • 0:52:52looking for John Harvard.
    • 0:52:54And if he's not there, I keep turning and turning.
    • 0:52:57So this is an algorithm.
    • 0:52:58I'm stepping through the phone book, one page at a time.
    • 0:53:00Is it correct, this algorithm, assuming I'm looking down?
    • 0:53:04So, yeah.
    • 0:53:05I mean, it's stupidly slow because why am
    • 0:53:07I wasting my time with the A's, and the B's, and the so forth?
    • 0:53:10I could probably take bigger bites out of it.
    • 0:53:12But it is correct.
    • 0:53:13And that's going to be one of the goals of writing code, is to, of course,
    • 0:53:16solve the problem you care about correctly.
    • 0:53:18So correctness goes without saying, or else what's
    • 0:53:20the point of writing the code or solving-- or implementing
    • 0:53:23the algorithm?
    • 0:53:23All right.
    • 0:53:24Well, let me at least speed things up.
    • 0:53:25So, instead of one page at a time, so, two, four, six, eight--
    • 0:53:29no, ignore that-- 10, 12, 14, 16, and so forth.
    • 0:53:33It's a little hard to do, physically, but it sounded faster.
    • 0:53:35It was twice as fast, theoretically, but is it correct?
    • 0:53:38AUDIENCE: No.
    • 0:53:39DAVID J. MALAN: So, no.
    • 0:53:40Why?
    • 0:53:41Yeah?
    • 0:53:41AUDIENCE: Yeah, you might [INAUDIBLE].
    • 0:53:43DAVID J. MALAN: Yeah, I might miss John Harvard because, just by accident,
    • 0:53:46he might get sandwiched between two pages.
    • 0:53:48But do I have to throw the algorithm out altogether?
    • 0:53:52Probably not.
    • 0:53:53Once I reach the K section, which is past the J section,
    • 0:53:56I could double back at least one page, at least, [PATS TELEPHONE BOOK]
    • 0:53:58and just make sure I didn't blow past him completely.
    • 0:54:01So that is twice as fast, because I'm going two pages
    • 0:54:04at a time, plus one extra step.
    • 0:54:05So it's still an improvement.
    • 0:54:07So the first algorithm, worst case, if it's
    • 0:54:08not John, but someone whose name starts with Z,
    • 0:54:10that might take me a full 1,000 steps.
    • 0:54:12The second algorithm is just 500 steps because I'm
    • 0:54:16going two pages at a time plus one, in case I have to double back,
    • 0:54:19but that's in the worst case.
    • 0:54:20But most of us in the-- in yesteryear, and what Apple, and Google, and others
    • 0:54:26are actually doing is, in software or here, physically,
    • 0:54:29we're typically going, roughly, to the middle.
    • 0:54:31Especially if there's no cheat sheet on the side, like A through Z,
    • 0:54:34I'm just going to go to, roughly, the middle.
    • 0:54:36And, oh, here I am, not surprisingly, in the M section.
    • 0:54:38But what do I now know.
    • 0:54:40If this is the M section, where is John Harvard?
    • 0:54:43So, clearly, to the left, alphabetically.
    • 0:54:46And so here is where we can take a much bigger bite out of the problem.
    • 0:54:49We can really divide and conquer this problem
    • 0:54:52by tearing [TEARS BOOK] the problem in half, throwing half of it
    • 0:54:56away, 500 pages away, leaving me with a smaller problem,
    • 0:55:01half as big, that I can really just now repeat.
    • 0:55:04So I go, roughly, here, and now I'm in the E section.
    • 0:55:07So I went a little too far back.
    • 0:55:09But what do I now know?
    • 0:55:10If this is the E pages, where's John?
    • 0:55:11AUDIENCE: To the right.
    • 0:55:12DAVID J. MALAN: So now he's to the right.
    • 0:55:13So I can-- again, hopefully, he's not on that page.
    • 0:55:15I can tear the problem in half again, throw that 250 pages away.
    • 0:55:20And now I've gone from 1,000 to 500 to 250 pages.
    • 0:55:23Now I'm moving because the first algorithm was one page at a time,
    • 0:55:26second was two.
    • 0:55:27This is hundreds of pages at a time.
    • 0:55:29And if I go, roughly, again, to the middle; roughly,
    • 0:55:31to the middle; roughly, to the middle, hopefully, I'll
    • 0:55:33find John Harvard on one final page.
    • 0:55:36Can only do this once, but one final page.
    • 0:55:39So that invites the question, I would think,
    • 0:55:42if the phone book does have 1,000 or so pages,
    • 0:55:44how many times can I divide the problem in half to get down to one last page?
    • 0:55:50So it's, roughly, 10.
    • 0:55:51And the quick math is 1,000 goes to 500 to 250 to 125 to 67 something.
    • 0:55:56So we have to deal with rounding issues, eventually.
    • 0:55:58But assuming we work out the math, it's, roughly, 10 page tears.
    • 0:56:01And that's crazy faster than 1,000 pages and still faster than 500 pages.
    • 0:56:07So it's fundamentally better.
    • 0:56:09And, indeed, if I finally get to that final page, in the software world,
    • 0:56:13you'd see something like this, John Harvard and his number,
    • 0:56:16which you're welcome to call or text.
    • 0:56:17But that's how we now have our answer, much like the single page there.
    • 0:56:22But let's consider just how efficient that actually is.
    • 0:56:27So here's a very rough, broad-- with broad strokes, a chart.
    • 0:56:30So here's an xy plot.
    • 0:56:31So here, on the horizontal, is going to be the size of the problem.
    • 0:56:34And, by that, I mean, how many pages are we trying to go through?
    • 0:56:38This would be zero pages.
    • 0:56:39This would be a lot of pages.
    • 0:56:41How much time does it take to solve the problem?
    • 0:56:43How long does it take to find John Harvard or anyone else?
    • 0:56:46This means no time.
    • 0:56:47This means a lot of time.
    • 0:56:48So what's the relationship among these algorithms?
    • 0:56:51Well, the first one is actually just a straight line.
    • 0:56:53If there's n pages in the phone book, well, I
    • 0:56:57claim that it's a one-to-one relationship.
    • 0:57:00Because if Verizon or the phone company adds another page next year,
    • 0:57:04that just means I might have one more step next year,
    • 0:57:06as well, to find John Harvard or anyone else.
    • 0:57:09But the second algorithm, it's also a straight line,
    • 0:57:12but it's lower, even though it might not look obvious.
    • 0:57:15And what do I mean by that?
    • 0:57:16Well, let me just draw some temporary lines.
    • 0:57:18If this is how many pages are in the phone book-- dot,
    • 0:57:20dot, dot-- notice that it takes this much time, on the red line,
    • 0:57:24to solve the problem.
    • 0:57:25But if I, instead, use the second algorithm,
    • 0:57:28it takes me half as much time.
    • 0:57:30So, even though they're both straight lines,
    • 0:57:32one is strictly lower than the other, which means it's faster.
    • 0:57:34It's better.
    • 0:57:35But the third algorithm is a fundamentally different shape,
    • 0:57:38and it looks a little something like this.
    • 0:57:40And it looks like it's going to flatten, flatten, flatten out,
    • 0:57:42but it never does.
    • 0:57:43It just rises ever so slowly.
    • 0:57:46And what this means is that if maybe Cambridge and Allston, here
    • 0:57:49in Massachusetts, merge next year, so we go from 1,000 page phone book
    • 0:57:53to a 2,000 page phone book, that means, if we're here this year,
    • 0:57:58we're over here next year.
    • 0:57:59It's not all that much higher.
    • 0:58:01But it would be much higher if we were using the first two algorithms.
    • 0:58:04Why?
    • 0:58:04It'd be an extra 1,000 steps to find someone in that combined phone
    • 0:58:07book or maybe another 500 steps.
    • 0:58:09But, to be clear, if we're using my third and final algorithm,
    • 0:58:13how many more steps will it take me next year,
    • 0:58:15when Cambridge and Allston merge into one 2,000-page phone book?
    • 0:58:20Just one more step, no big deal.
    • 0:58:22It's one more page tear.
    • 0:58:24And this is what we mean, ultimately, about not just writing
    • 0:58:26code or implementing algorithms that are correct, but, now,
    • 0:58:29that are well-designed or efficient, specifically.
    • 0:58:33And this is what makes someone a better programmer, perhaps,
    • 0:58:35than someone else, or a better problem-solver than someone else,
    • 0:58:38is acquiring, over time, these skills.
    • 0:58:40So that, sure, you could solve the problem quickly and dirtily,
    • 0:58:43so to speak, but if you're going to have a lot of data
    • 0:58:45eventually, be it in your phone book or maybe your Google website index,
    • 0:58:49if you're searching the web, you're going
    • 0:58:51to want to try to think about how to design algorithms that look like this.
    • 0:58:54Mathematically, this is called a logarithm.
    • 0:58:56And it's log base 2 because I'm halving, halving, halving, again and again.
    • 0:58:59But, for now, just know that it's a fundamentally faster and different
    • 0:59:03shape.
    • 0:59:03So, among our goals in CS50, ultimately, is not just
    • 0:59:06to write and solve problems correctly, but, ultimately, ever more efficiently,
    • 0:59:12as well.
    • 0:59:13Any questions, then, on these ideas of efficiency and design?
    • 0:59:20Any questions here?
    • 0:59:21Yeah, in back?
    • 0:59:22AUDIENCE: [INAUDIBLE].
    • 0:59:23DAVID J. MALAN: A good question.
    • 0:59:24Just to repeat it, can a graph like this capture the accuracy of the algorithm?
    • 0:59:27Short answer, no.
    • 0:59:28For instance, if I drew a straight line that
    • 0:59:31is super low on this graph, which would imply that the algorithm takes
    • 0:59:35the same amount of time, no matter how many pages there are,
    • 0:59:38my algorithm might actually be to just pull a random page from the phone
    • 0:59:41book, one step, and say, here it is.
    • 0:59:43But that's not necessarily going to be accurate,
    • 0:59:45unless I get really, really lucky.
    • 0:59:47So the graph really only speaks to efficiency
    • 0:59:49and the design of the algorithm, not the correctness of it.
    • 0:59:52To analyze the correctness, you need to use another mechanism altogether,
    • 0:59:57namely, logic.
    • 0:59:58Other questions now, on efficiency, in this way?
    • 1:00:02No?
    • 1:00:02All right.
    • 1:00:03So, with that in mind, let's begin to translate this to some actual code.
    • 1:00:08And, in fact, before we look at, today, one actual programming language,
    • 1:00:11albeit a graphical one, let's consider something called pseudocode.
    • 1:00:14So pseudocode has no formal meaning.
    • 1:00:16Generally, you write it in English or whatever your own human language is.
    • 1:00:19But you write your thoughts down tersely, succinct, but precisely.
    • 1:00:25You try to really convey your thoughts, not with a wave of the hand,
    • 1:00:28metaphorically, but step by step, precisely.
    • 1:00:31So what do I mean by this?
    • 1:00:32Here might be some representative pseudocode
    • 1:00:35via which I describe that third and final algorithm in a way
    • 1:00:39that I could hand it to you and you could do the same at home.
    • 1:00:41Or I could hand it to someone at Google, and they could implement it in Android.
    • 1:00:45Or I could hand it to someone at Apple, and they could implement it in iOS.
    • 1:00:48So, step one, I claimed, was "Pick up phone book."
    • 1:00:51Step two was "Open to the middle of the phone book."
    • 1:00:54Step three, "Look at the page," as I did.
    • 1:00:57And now things get a little more interesting.
    • 1:00:59Step four, "If person is on page," I have to make a decision.
    • 1:01:03Presumably, what should I do if John Harvard is on the page I'm looking at?
    • 1:01:07So stop and probably make the call, or email, or whatever the goal might be.
    • 1:01:12And so I'm going to actually indent this, visually, by a few spaces,
    • 1:01:15just to make clear that you should only do line five if the answer to line four
    • 1:01:19is yes.
    • 1:01:21Otherwise, you don't bother.
    • 1:01:22The next thing I'm going to do, line six, is consider another possibility.
    • 1:01:26"If the person I'm looking for is earlier
    • 1:01:28in the book," what do I want to do?
    • 1:01:30Well, I could write--
    • 1:01:31I could describe this in a bunch of ways.
    • 1:01:33I'm going to do this tersely, as follows.
    • 1:01:35"Open to the middle of the left half of the book,
    • 1:01:38so it's open to the middle of the left half of the book.
    • 1:01:41And then, what am I going to do?
    • 1:01:43Well, I've just divided the problem into something smaller.
    • 1:01:46But it's fundamentally the same problem.
    • 1:01:48It's just a fewer number of pages.
    • 1:01:51So I'm just going to go back to line three and do it again
    • 1:01:54because the problem is just getting smaller and smaller, presumably.
    • 1:01:56Else, if the person I'm looking for is later in the book,
    • 1:01:59open to the middle of the right half of the book,
    • 1:02:02and, also, "Go back to line 3."
    • 1:02:04But there's a fourth possibility and its failure
    • 1:02:08to realize, sometimes, that there's other possible outcomes that
    • 1:02:11make computers crash, or spinning beach balls, or the like,
    • 1:02:14if a programmer doesn't anticipate some situation.
    • 1:02:17What's the fourth possible situation, when looking for John Harvard?
    • 1:02:20AUDIENCE: If they're not in the book.
    • 1:02:22DAVID J. MALAN: If they're not in the book, at all.
    • 1:02:24And, indeed, I might get to the very last page and John Harvard's not even
    • 1:02:27on that one.
    • 1:02:28I'd better handle that and say, else, as a catchall, just quit altogether.
    • 1:02:33And, truly, often, in your Macs, PCs, phones,
    • 1:02:35when they freeze, or, again, spinning beach ball, or the like,
    • 1:02:38and just weird things happen, that's just
    • 1:02:39because some human made a dumb mistake.
    • 1:02:41And they didn't realize that you could somehow get your phone or your laptop
    • 1:02:44into a configuration that they didn't anticipate.
    • 1:02:47So we're going to try to handle that here.
    • 1:02:48Now this is just one way of writing pseudocode.
    • 1:02:50There's no one way to do this.
    • 1:02:52All of us in this room could come up with slightly different pseudocode.
    • 1:02:55But I think you'll find characteristic are certain building
    • 1:02:59blocks in all of our answers.
    • 1:03:02Here, in yellow, are what, as of today, we're
    • 1:03:04going to start calling "functions," technically speaking.
    • 1:03:07These are like actions or verbs that literally, in this case, tell me
    • 1:03:10what to do.
    • 1:03:11Next, we're going to have these things, conditionals,
    • 1:03:15forks in the road, so to speak, that take me down this path or another,
    • 1:03:20metaphorically.
    • 1:03:21So I do this thing or something else.
    • 1:03:22But how do I decide if I want to go this way, or this way,
    • 1:03:25or this way, or this way?
    • 1:03:26I need to ask a question.
    • 1:03:27And in programming, we'll typically use what
    • 1:03:30are called Boolean expressions, named after a mathematician, Boole.
    • 1:03:33And a Boolean expression is essentially just a question
    • 1:03:36with a yes/no answer, a true or false answer, a 1 or 0 answer.
    • 1:03:42It doesn't matter how you think about it, but it's got two possible answers.
    • 1:03:45And so you can think of these as being expressions with question marks,
    • 1:03:49even though I didn't draw such.
    • 1:03:50Person on page, person earlier in book, person later in book,
    • 1:03:54those are Boolean expressions.
    • 1:03:55And they tell me whether I should go down one fork in the road or another.
    • 1:04:00And, lastly, there's this, "Go back to line 3," in two different places.
    • 1:04:03That represents what we call a "loop," some kind of cycle that's
    • 1:04:06doing something again and again.
    • 1:04:08Now these are just a few building blocks here--
    • 1:04:10functions, conditionals, Boolean expressions, loops.
    • 1:04:12But you'll find that they're characteristic of so
    • 1:04:15many different languages, one of which we'll look at today, another of which
    • 1:04:18we'll look at next week.
    • 1:04:19And those include, indeed, C, and Python, and other languages still.
    • 1:04:23And so this is why we focus on these basics
    • 1:04:25and fundamentals in these early days because we're
    • 1:04:27going to see them again and again.
    • 1:04:29So even if you feel like that fire hose is hitting you sometime,
    • 1:04:31we'll give you, today, ultimately, more visuals
    • 1:04:34by which you can hang onto, so as to actually write code, ultimately,
    • 1:04:38in different languages and solve all sorts of problems.
    • 1:04:41Now, we'd be remiss in not bringing up what's behind characters like Spot,
    • 1:04:46and ChatGPT, and other software, artificial intelligence.
    • 1:04:48And it turns out, to get to the point of AI,
    • 1:04:51we're actually going to need more building blocks than just
    • 1:04:54functions, and loops, and conditionals.
    • 1:04:56It's not going to be quite that simple.
    • 1:04:57But this has been a lot, so far.
    • 1:04:59Let's go ahead, here, and take a five-minute break.
    • 1:05:01And when we resume, we'll take a look not only at AI,
    • 1:05:03but also a specific language called Scratch.
    • 1:05:06So no cake, just yet, but we'll come back in five.
    • 1:05:09Before we dive back in, I just wanted to call out a special guest
    • 1:05:14that we have here today, beyond Spot, someone
    • 1:05:16who's come from even farther away.
    • 1:05:19And, in fact, if any of you have taken CS50x, the OpenCourseWare version
    • 1:05:22of the class, or dabbled in it over the past few years
    • 1:05:25in some of CS50's online social communities,
    • 1:05:27you might have had your questions answered
    • 1:05:29by a certain human from New Zealand.
    • 1:05:31And she's come all this way, today, to spend this lecture with us.
    • 1:05:35This is CS50's own Brenda Anderson.
    • 1:05:38If you might come up for acknowledgment from all of us here.
    • 1:05:41[APPLAUSE]
    • 1:05:47It's not much, but just a little token of our thanks.
    • 1:05:50Brenda has helped, truly, thousands of students online
    • 1:05:53for the past many years.
    • 1:05:55And, in fact, her own daughter has been the artist
    • 1:05:58behind the duck that's about to loom large in CS50 this year and beyond.
    • 1:06:03So, thank you to Brenda.
    • 1:06:04[APPLAUSE]
    • 1:06:11All right.
    • 1:06:12So it's hard to escape a discussion of artificial intelligence, nowadays,
    • 1:06:16but we thought we'd use this as an opportunity
    • 1:06:18to connect some of these dots.
    • 1:06:20Because, indeed, over the course of the semester,
    • 1:06:22we'll be-- not only be talking about artificial intelligence or AI,
    • 1:06:25but really using it all the more constructively
    • 1:06:28to help you solve problems, help you get unblocked
    • 1:06:31when you hit a wall, cognitively or syntactically, when writing code.
    • 1:06:35And, indeed, it's no accident that we have this duck here,
    • 1:06:39looming large, which is really the embodiment of the sort of AI
    • 1:06:42that you'll experience within CS50, itself, this year.
    • 1:06:45So let's talk about the so-called chatbots that
    • 1:06:48inspired some of those headlines with which we began
    • 1:06:50class, that weren't quite on the nose.
    • 1:06:52So the class will still be taught by us humans,
    • 1:06:54but helped by this CS50 duck, a chatbot of sorts.
    • 1:06:59Now what do I mean by this?
    • 1:07:00Well, it turns out that, when it comes to implementing something
    • 1:07:04like an artificial intelligence, we don't quite
    • 1:07:06have all of the building blocks yet, certainly after just today's week zero,
    • 1:07:10to implement something like that.
    • 1:07:12But I think we can skate in that direction, intellectually.
    • 1:07:14So, for instance, if we were to take a stab at implementing our own chatbot--
    • 1:07:19some interactive text-based program that talks to us,
    • 1:07:22and answers questions, and the like-- we could
    • 1:07:24try borrowing some of today's ideas already, those functions, conditionals,
    • 1:07:28loops, and more.
    • 1:07:30And I could write something like this.
    • 1:07:31If I am writing code or pseudocode for a chatbot,
    • 1:07:34I could program the chatbot to do something like this.
    • 1:07:37If the student says, hello, to the chatbot,
    • 1:07:39then the chatbot should say, hello, back.
    • 1:07:41Else, if the student says, goodbye, well, the chatbot
    • 1:07:44should say, goodbye, back.
    • 1:07:46Else, if the student asks how you are, the chat bot should say that it's well.
    • 1:07:51But things get a little harder when you start
    • 1:07:54asking more interesting questions, like, else,
    • 1:07:57if the student asks why 111 in binary is 7 in decimal.
    • 1:08:00Now, you could imagine that we just have a conditional,
    • 1:08:03with this Boolean expression, that programs the chatbot to just give you
    • 1:08:08the answer and explain, in an English sentence, why that, in fact, is.
    • 1:08:12But what if you, the student, asks why 110 is 6 in decimal or why 010 is 2?
    • 1:08:20I mean, you can just imagine the explosion in the amount of code
    • 1:08:24that we would have to write to just anticipate every darn question that you
    • 1:08:28might ask about today and every other class, not to mention all
    • 1:08:31of the knowledge in the universe.
    • 1:08:32So, surely, there are other ways to implement algorithms
    • 1:08:36that allow something like a chatbot or AI,
    • 1:08:39more generally, to be fed input, still, like all of the internet, all
    • 1:08:43of the worldwide web, all of the pages and textual content therein,
    • 1:08:46but to let it just figure out how to answer our questions based
    • 1:08:51on those kinds of inputs, assuming the inputs, themselves, are accurate.
    • 1:08:54So "large language models" is a term you might
    • 1:08:56have heard bandied about over the past several months, or LLMs.
    • 1:08:59And a large language model really is an implementation, in software,
    • 1:09:04of code that actually takes, as input, lots and lots of language--
    • 1:09:09like the text of lots and lots of web pages, dictionaries, encyclopedias,
    • 1:09:13Wikipedias, and the like--
    • 1:09:14and infers, from the patterns of English words or any human language,
    • 1:09:19what a typical human might actually say when asked a question.
    • 1:09:22And some of these questions are easy, right?
    • 1:09:24Probably, on the internet, alone, not to mention everyday life, if someone
    • 1:09:28extends their hand and says, "Hi.
    • 1:09:29How are you," odds are, with 90% probability, you're going to say,
    • 1:09:33"Good.
    • 1:09:33Thanks.
    • 1:09:34How are you?"
    • 1:09:34So I bet we could write software that just
    • 1:09:37infers what it should say, probabilistically, statistically, based
    • 1:09:41on those kinds of patterns online.
    • 1:09:43And that's, indeed, where the world is starting
    • 1:09:45to go, when it comes to the most sophisticated
    • 1:09:47of algorithms, where you and I, the humans,
    • 1:09:49we don't try to anticipate every possible input.
    • 1:09:51Rather, we give it a more general purpose
    • 1:09:54input, like all human knowledge, and ideally just let it figure things out.
    • 1:09:58Now, we're not quite there, yet.
    • 1:09:59And odds are you've heard of hallucinations or just mistakes
    • 1:10:02that these large language models make.
    • 1:10:03But their inputs are imperfect.
    • 1:10:05And sometimes there's a bit of randomness sprinkled
    • 1:10:07in because you don't want the thing to always say the exact same thing.
    • 1:10:10Even you and I might say, "Eh, I'm not that great today" 10% of the time.
    • 1:10:14So you need to perturb the output in some way.
    • 1:10:16But within CS50 and within this world of large language models,
    • 1:10:20we do have these tools like ChatGPT, and Bing, chat, and others.
    • 1:10:24And we'll stipulate that, for CS50's purposes,
    • 1:10:26the direction we're going this year is that this
    • 1:10:28is what's in the syllabus, dot, dot, dot;
    • 1:10:30that it will not be allowed, it will be considered
    • 1:10:32not reasonable to use AI-based software, other than CS50's own.
    • 1:10:37So the goal here is not to simply take away
    • 1:10:39tools that are clearly inevitable, in my view, and clearly helpful
    • 1:10:43and productivity savers.
    • 1:10:44But we'd like there to be some guardrails, intellectually, on just how
    • 1:10:48helpful these chatbots are.
    • 1:10:49Because as you've probably seen, if you ask it a question,
    • 1:10:52these chatbots are already pretty good at not just helping
    • 1:10:54you finish your current thought, but it'll
    • 1:10:56hand you your second and your third thought and do the assignment for you.
    • 1:10:59But I think, through prompting, so to speak,
    • 1:11:02we'll be able to coax some of our own tools,
    • 1:11:04being computer scientists, ourself, in a direction
    • 1:11:07that you actually find to be the right balance, akin to having
    • 1:11:10a good tutor by your side 24/7, who doesn't just hand you answers,
    • 1:11:14but, indeed, tries to lead you to the same.
    • 1:11:16So you actually get something out of the experience,
    • 1:11:18and, ideally, three-plus months from now,
    • 1:11:20those training wheels can come off, too.
    • 1:11:22And you're able to still stand on your own.
    • 1:11:24So it will be reasonable to use CS50's own AI-based software which
    • 1:11:28will actually take the form of a CS50 duck, which is actually available now--
    • 1:11:33and we'll use it throughout the term-- at CS50.ai, a web-based application
    • 1:11:37that's quite similar to ChatGPT, but that
    • 1:11:39has the personality of a CS50 teaching fellow or TF, or teaching assistant,
    • 1:11:44TA, that also happens to think of itself as a duck.
    • 1:11:47And for reasons we'll get to in a couple of weeks time,
    • 1:11:49but rubber ducks, in particular, are a thing in programming.
    • 1:11:54But more on that, before long, as you can even see from the one
    • 1:11:56there on my desk.
    • 1:11:58With that said, too, well, I'm going to call out CS50's own Brenda
    • 1:12:01Anderson, whose daughter, Sophie, kindly not only created
    • 1:12:05the first incarnation, digitally, of this duck, but also,
    • 1:12:07most recently, once it actually did more than quack a random number
    • 1:12:11of times in response to questions, has now
    • 1:12:13been virtually brought to life, too.
    • 1:12:15So, all that and more, over the coming weeks, but you'll find, ultimately,
    • 1:12:18that the goal is to really bring to life the availability of an AI-based tutor
    • 1:12:23that you have access to, a friend in your--
    • 1:12:26next to you, that will help guide you through a lot of the course's
    • 1:12:30challenges along the way.
    • 1:12:31And we actually rolled it out this past summer,
    • 1:12:33already, with some of your predecessors, through the Harvard Summer School.
    • 1:12:35One student wrote, at summer's end, that this duck
    • 1:12:38"felt like having a personal tutor--
    • 1:12:40I love how AI bots will answer questions without ego and without judgment
    • 1:12:44generally entertaining even the stupidest of questions
    • 1:12:47without treating them like they're stupid.
    • 1:12:49It has, as one could expect, an inhuman level of patience."
    • 1:12:53So there's actually something really there because as many teachers
    • 1:12:56as there are in CS50--
    • 1:12:57myself, the course's preceptors, teaching fellows, teaching assistants,
    • 1:13:00and course assistants-- there's only so many of us.
    • 1:13:03And we're only awake so many hours of the day.
    • 1:13:05And I think you'll find, too, that we're on the cusp of something
    • 1:13:08pretty remarkable, in the coming years, where
    • 1:13:11it's going to get a lot more enabling, now, to learn material
    • 1:13:14not only within the confines of a class, but on your own, ultimately, as well.
    • 1:13:18And as one other student put it, at summer's end, with respect to the duck,
    • 1:13:22"Love love loved the duck.
    • 1:13:23We're friends now."
    • 1:13:24So that, too, awaits.
    • 1:13:25But, first, we're going to need to start with the basics.
    • 1:13:28And we started today by talking about binary.
    • 1:13:30And darn it, here it is again.
    • 1:13:32So we can't actually get to the point of using, or solving, or implementing AI
    • 1:13:37until we understand this.
    • 1:13:38And odds are most of you won't know, at a glance, what this piece of software
    • 1:13:42does.
    • 1:13:43But these are the 0's and 1's that represent, perhaps,
    • 1:13:46the first program that any programmer writes, which is now a clue to some
    • 1:13:50of you who have dabbled in code before.
    • 1:13:52What does this pattern of 0's and 1's tell a typical computer to do?
    • 1:13:56Might someone guess?
    • 1:13:57AUDIENCE: "Hello, world."
    • 1:13:58DAVID J. MALAN: It's going to have it say, "hello, world,"
    • 1:14:00which is one of the very first programmer-- programs
    • 1:14:02that most any programmer writes.
    • 1:14:04Should you be able to recognize these 0's and 1's?
    • 1:14:06Do I recognize these 0's and 1's?
    • 1:14:08No, not at all.
    • 1:14:09I just happen to know that they are the same.
    • 1:14:11And that was a leading question.
    • 1:14:12But they are representing data and instructions, ultimately,
    • 1:14:17data like H-E-L-L-O, comma, W-O-R-L-D and an instruction like,
    • 1:14:22"Print that data to the screen."
    • 1:14:24As for what these patterns of 0's and 1's are,
    • 1:14:26this is not something that a computer scientist or programmer worries about.
    • 1:14:30We just stipulate that, OK, someone, somewhere knows how to do this.
    • 1:14:34And it's probably someone like Intel, who makes
    • 1:14:36the hardware inside of the computers.
    • 1:14:37But you and I, starting now, already, in week zero,
    • 1:14:41can start to view binary more abstractly.
    • 1:14:44We don't care about the 0's and 1's.
    • 1:14:46We only care that you can use 0's and 1's
    • 1:14:49to represent more useful quantities, like numbers,
    • 1:14:52and letters, colors, and more.
    • 1:14:54So this, next week, is going to be the code we actually
    • 1:14:57start writing at a keyboard.
    • 1:14:58And this is that language called C. It's the same language I, myself, learned
    • 1:15:01years ago, when taking CS50, when all we learned at the time was C.
    • 1:15:05But this, too, has some crypticness to it.
    • 1:15:07And if you've never programmed before, you can probably wrap your mind around,
    • 1:15:11OK, I'm guessing the "printf" prints out the "hello, world."
    • 1:15:14But what's with the semicolon, the quotes, the backslash,
    • 1:15:16and the curly braces, the #include, and all of this stupid syntax?
    • 1:15:21A lot of this, in the beginning of any class, is really a distraction.
    • 1:15:23It is not intellectually interesting.
    • 1:15:25But it's the stupid kind of stuff that's going to trip you up quite often.
    • 1:15:29And so, today, what we'll do is focus not
    • 1:15:31on syntax, characters on the keyboard, but ideas
    • 1:15:35because what really matters in this program
    • 1:15:37is that "printf" is a function here for our purposes.
    • 1:15:40And that function is to display information on the screen.
    • 1:15:43Everything else, as we'll soon see, has value
    • 1:15:46and will be understood by you, before long, but for now, it's a distraction.
    • 1:15:50Let's focus on those building blocks.
    • 1:15:52When it comes time to write code, though, for the curious,
    • 1:15:54especially if you've programmed before, we'll
    • 1:15:56use a very popular free and open-source tool
    • 1:15:58called Visual Studio Code, or VS Code.
    • 1:16:01We'll use a cloud-based version of it that we pre-install everything
    • 1:16:06you need in the cloud for you so you don't
    • 1:16:08have to deal with headaches like getting your Mac or PC to work.
    • 1:16:10You'll use instead this URL, cs50.dev, but more
    • 1:16:13on that in next week, week one.
    • 1:16:15For now, we'll use another cloud-based editor called Scratch.
    • 1:16:19And odds are some number of you use this probably
    • 1:16:21as early as like middle school or the like.
    • 1:16:23And that was fine to create your own animations, games,
    • 1:16:27interactive art, or the like.
    • 1:16:28But we'll use it today for just a bit.
    • 1:16:30And we'll use it in the course's first homework,
    • 1:16:32AKA problem set 0, to explore now some of these same ideas.
    • 1:16:36And among the goals today for the remainder of today
    • 1:16:39is not to focus so much on Scratch and the particulars
    • 1:16:42because this is not a language that you're
    • 1:16:44going to use often but to give you very visual representations of ideas
    • 1:16:50so that when things do escalate next week to C, to the more cryptic,
    • 1:16:53it's the same ideas just typed out instead of dragged and dropped.
    • 1:16:57So by that, I mean this.
    • 1:16:59I'm going to go ahead and share in just a moment the user interface of Scratch.
    • 1:17:03But what's nice about Scratch is that this
    • 1:17:05is how we're going to implement that same program today.
    • 1:17:08These are two blocks or puzzle pieces on the screen,
    • 1:17:11and they've been interconnected to tell the computer to say "hello, world"
    • 1:17:15on the screen.
    • 1:17:16The user interface that we're about to use
    • 1:17:18will look generally something like this.
    • 1:17:20It's a web-based editor that you can also
    • 1:17:22download it locally to use offline.
    • 1:17:24And you'll see that at the left here are a whole bunch of puzzle pieces
    • 1:17:28or blocks.
    • 1:17:29They're categorized by color, and the blue ones
    • 1:17:31tend to relate to motion, for instance.
    • 1:17:33The purple ones represent looks.
    • 1:17:35The pink one represents sounds.
    • 1:17:37The yellow one represents events.
    • 1:17:40More on that soon.
    • 1:17:41The orange ones represent control, and then
    • 1:17:43there's operators, variables, my blocks, and even some extensions
    • 1:17:46we can install as well.
    • 1:17:47So it just categorizes things visually and colorfully so that you
    • 1:17:51can find what you're looking for.
    • 1:17:53But we're going to use these puzzle pieces to drag and drop them
    • 1:17:56onto this area here.
    • 1:17:58And we're going to connect them when we want them to do something.
    • 1:18:02What can they do?
    • 1:18:02Well, by default, Scratch comes with this cat here, otherwise known
    • 1:18:06as a sprite, which is a character in a game or in a graphics context.
    • 1:18:09And this cat lives in this two-dimensional world in which
    • 1:18:12the cat can go up, down, left, right.
    • 1:18:14And you can actually change the cat's costume
    • 1:18:16to be a dog, a bird, or anything else.
    • 1:18:18It really is more of an idea than it is a specific animal in this case.
    • 1:18:23But the world that Scratch lives in looks a little something like this.
    • 1:18:26It's like a Cartesian plane with x-coordinates and y-coordinates.
    • 1:18:29And the numbers don't so much matter fundamentally,
    • 1:18:32except that when you want the cat or any character to go up,
    • 1:18:35down, left, or right by some amount, it's
    • 1:18:37useful to know, for instance, that 0, 0 is the middle, 0 comma 0 for x comma y.
    • 1:18:42All the way up is a y value of 180.
    • 1:18:45All the way down is -180.
    • 1:18:47All the way to the left is -240.
    • 1:18:50All the way to the right is 240.
    • 1:18:52And generally, you're not going to have to worry about numbers.
    • 1:18:54You're going to use these relatively-- go right, go left, go up, or down.
    • 1:18:58But that's just the world that Scratch itself lives in here.
    • 1:19:01So let's go about using Scratch here.
    • 1:19:03I'm going to change over to my cloud-based editor
    • 1:19:06here, where I've gone to scratch.mit.edu.
    • 1:19:10And I've clicked Create in order to create a project.
    • 1:19:12And that gives me this blank canvas here.
    • 1:19:14And I'm going to do these somewhat quickly because I kind of know
    • 1:19:17what I'm looking for.
    • 1:19:18But part of the process with problem set zero is going to be clicking,
    • 1:19:21and dragging, and sort of scrolling around
    • 1:19:23to see what building blocks exist.
    • 1:19:25But I know under Events there's this puzzle piece here
    • 1:19:29when green flag clicked.
    • 1:19:30Why is that germane?
    • 1:19:32Well, if I zoom out, and go back to Scratch's world at the right here,
    • 1:19:35notice that above Scratch's world there's
    • 1:19:37a green flag, which is going to mean go, and a red stop sign, which,
    • 1:19:40of course, is going to mean stop.
    • 1:19:42So if I drag this puzzle piece anywhere into the middle,
    • 1:19:46it's just going to plop where I put it.
    • 1:19:49But what that means semantically is when someone clicks that green flag,
    • 1:19:53I want Scratch the cat to do this other thing.
    • 1:19:56Well, what do I want it to do?
    • 1:19:57Well, let me go under Looks.
    • 1:19:59And looks here in purple have some puzzle pieces like this.
    • 1:20:04Well, I can say hello for some number of seconds,
    • 1:20:06or I can just go ahead and say hello.
    • 1:20:08So let's do that.
    • 1:20:09I'm going to drag this say block.
    • 1:20:11And notice that as soon as I get close enough,
    • 1:20:13it's going to magnetically want to connect.
    • 1:20:15So I can let go, and they snap together automatically
    • 1:20:17because they're the right shape.
    • 1:20:19I don't have to say hello, exclamation point.
    • 1:20:21I can change it to the more canonical, hello comma world.
    • 1:20:23So anything in this white oval is editable
    • 1:20:26that you can change as just text there.
    • 1:20:28If I now zoom out, let me go ahead and click the green flag.
    • 1:20:31And voila-- this should be my first program in Scratch.
    • 1:20:36Hello, world.
    • 1:20:37Without any of the distractions of syntax
    • 1:20:39or weird characters on the screen, it's just done what I want it to do.
    • 1:20:42All right.
    • 1:20:42Let me go ahead and click Stop there.
    • 1:20:44And let me make it a little more connected
    • 1:20:47to what we've discussed thus far.
    • 1:20:48So this puzzle piece here, say hello, world,
    • 1:20:51represents what type of building block using the vocabulary of today?
    • 1:20:56So it's a function.
    • 1:20:57So these purple blocks are functions, say, hello, world.
    • 1:21:00And let me give you another piece of terminology.
    • 1:21:02These white ovals that take textual input--
    • 1:21:04in general, those are called parameters or arguments.
    • 1:21:08And they customize the behavior of a function.
    • 1:21:11So a parameter or an argument customizes,
    • 1:21:14modifies the default behavior of a function, like in this case, say.
    • 1:21:17Similarly, in the C code from earlier that we'll see next week,
    • 1:21:20the printf function took a quoted phrase like, hello, world, similarly as input.
    • 1:21:27But more on that in the future.
    • 1:21:29So how does this connect to the mental model we presented earlier?
    • 1:21:32Well, here's problem-solving as I described it earlier, inputs to outputs
    • 1:21:37with algorithms or code in the middle.
    • 1:21:39Well, what we've got here really is an input of, hello, world, the white oval.
    • 1:21:43The function or algorithm that it's going into as input is the say block.
    • 1:21:48And what is the output of using this say block, the say function?
    • 1:21:51It's the visual effect of having the cat have the little speech bubble appear
    • 1:21:55above its head, saying, hello, world.
    • 1:21:58So everything we do, in fact, can be mapped back
    • 1:22:00to that very simple idea of inputs and outputs.
    • 1:22:04Well, let's make it a little more interesting, though.
    • 1:22:06It's a little boring to just say "hello, world" all the time.
    • 1:22:09Let me go ahead and drag this away.
    • 1:22:11And if you just drag it to the left and let go, it gets automatically deleted.
    • 1:22:15Let me go under Sensing in light blue here.
    • 1:22:18And you'll see there's a bunch of blocks, one of which
    • 1:22:20is an ask block, an ask function, which is going to prompt
    • 1:22:24the human, me, for some input.
    • 1:22:26So let me go ahead and drag that over here, and it snaps together.
    • 1:22:29I could change the question, but I'm OK with that question.
    • 1:22:32We'll use what's your name.
    • 1:22:33But notice that this block, ask, is a little special.
    • 1:22:36It is not just going to display like a speech bubble on the screen.
    • 1:22:40It's actually going to return a value, and this is
    • 1:22:42another term of art today and onward.
    • 1:22:44A return value is some value that can be handed back to you conceptually
    • 1:22:48from a function so that you can do something with it.
    • 1:22:50It's as though the ask function asks someone for their name,
    • 1:22:55writes it down on a piece of paper, and hands you the piece of paper.
    • 1:22:57You can do anything now that you want with that name.
    • 1:23:00And here is how you access the name in this special block called
    • 1:23:03answer, which, again, will start calling a return value.
    • 1:23:07So if I want to say "hello" to someone specific, I'm going to do this.
    • 1:23:10Let me zoom out.
    • 1:23:11Let me go back to Looks, and let me go back to Say.
    • 1:23:15And I'm going to change the say block here to "hello, comma."
    • 1:23:19Then I'm going to zoom out.
    • 1:23:21Well, I need two inputs, I think.
    • 1:23:23So I'm going to grab another say block, and I'm going to put it below.
    • 1:23:26And I could just type "David," but this is
    • 1:23:29going to defeat the whole point of asking me for the name.
    • 1:23:31And it will only work for me.
    • 1:23:32So I don't want to do that.
    • 1:23:33So let me go back to Sensing, and notice the shape is important here.
    • 1:23:38Even if it's not quite the same size, the shape matters.
    • 1:23:41And I can actually drag this and change the input of this say function
    • 1:23:45to be whatever that return value is, that piece of paper
    • 1:23:48that has the person's name on it.
    • 1:23:50And it grows to fill, but now we have a program
    • 1:23:53that I think when I click the green flag-- watch-- is going to prompt me.
    • 1:23:57What's your name?
    • 1:23:58And now I have room to type down here.
    • 1:23:59So I'm going to type D-A-V-I-D. I'm going to hit Enter,
    • 1:24:02and it should say "hello, Dave."
    • 1:24:04Wait.
    • 1:24:04Hmm.
    • 1:24:06Huh.
    • 1:24:07Maybe it was-- didn't work.
    • 1:24:09D-A-V-I-D. Here we go.
    • 1:24:11Hello, David.
    • 1:24:12Hmm.
    • 1:24:13It's missing the hello, but I'm quite sure we have a hello right there.
    • 1:24:19So what explains this bug or mistake?
    • 1:24:22Yeah.
    • 1:24:23AUDIENCE: [INAUDIBLE].
    • 1:24:26So they overlap.
    • 1:24:29DAVID J. MALAN: Exactly.
    • 1:24:30Put another way, my Mac, my PC, it's just so darn
    • 1:24:33fast that it did exactly what it was supposed to.
    • 1:24:36But it said "hello, David" so fast that we didn't even see, we being the human,
    • 1:24:40the slowest part of the puzzle, see the actual hello.
    • 1:24:42So there's a few different ways to fix this, as you know.
    • 1:24:45We could have it say "hello" for some number of seconds.
    • 1:24:48So I could kind of do that.
    • 1:24:49So let me do this.
    • 1:24:50I can decouple these by just dragging and letting it go
    • 1:24:53so that they're magnetically far apart.
    • 1:24:55Let me go ahead and drag this one, say hello for two seconds.
    • 1:24:58I'm going to change the grammar here to be hello comma again.
    • 1:25:02I'm going to go ahead and disconnect these two.
    • 1:25:05I'm going to throw away the old one that I don't want to use.
    • 1:25:08And I'm going to reconnect this so that now--
    • 1:25:11OK.
    • 1:25:11It's going to say hello for two seconds and then my name, hopefully.
    • 1:25:14So let me click Stop and Start.
    • 1:25:17D-A-V-I-D. Enter.
    • 1:25:20OK.
    • 1:25:21So it's better, but it's kind of poorly implemented.
    • 1:25:25Like, come on.
    • 1:25:26I just wanted to say hello comma David.
    • 1:25:27Why is that hard?
    • 1:25:28Well, maybe we can actually combine these a little differently.
    • 1:25:31And let me propose this.
    • 1:25:32Let me actually get rid of these blocks again.
    • 1:25:35And let me go ahead and just say one thing.
    • 1:25:38But can I somehow combine this to say hello comma David all in one breath?
    • 1:25:43Well, it turns out if I go under Operators,
    • 1:25:46I know from having played with this before that there's this puzzle
    • 1:25:49piece down here called join.
    • 1:25:51It's an oval.
    • 1:25:52It's a little big, but, again, it will grow to fill.
    • 1:25:54And by default, it wants to join two words, "apple" and "banana."
    • 1:25:57But those are just placeholders.
    • 1:25:59So let me go ahead and drag this over the default hello.
    • 1:26:03Let me change "apple" to hello comma space and then banana.
    • 1:26:08Let me go back to Sensing.
    • 1:26:10Let me grab answer and drag and drop that.
    • 1:26:13So now notice that I'm kind of layering my ideas.
    • 1:26:16And put another way, the output of this join block
    • 1:26:20is presumably going to join two things together,
    • 1:26:22apple and banana or hello comma David.
    • 1:26:25And then the output of join is going to become the input to say.
    • 1:26:29So aesthetically, it just looks better.
    • 1:26:31It's still correct, but it's just better.
    • 1:26:33So if I type "David," and hit Enter, hello, David.
    • 1:26:36This is what a normal program would presumably
    • 1:26:38do, not show you part of the phrase and then the rest of the phrase.
    • 1:26:42Like, it's just better in this way.
    • 1:26:44So let's connect this now to this same puzzle piece and this methodology.
    • 1:26:48So here's that same puzzle piece, ask.
    • 1:26:50How do we fit it into this input and output flow with algorithms?
    • 1:26:53Well, the input to that puzzle piece is something like, what's your name,
    • 1:26:57question mark.
    • 1:26:58Then the algorithm or the code implementation thereof
    • 1:27:01is this ask block and wait so the human has a moment to type their response in.
    • 1:27:06The output of that function recall is a return value.
    • 1:27:09You don't see anything on the screen by default because we've not used say yet,
    • 1:27:12but we get this return value.
    • 1:27:14And let me scooch everything over now so that we can now
    • 1:27:18join those inputs together.
    • 1:27:20So here's this puzzle piece.
    • 1:27:21Let me go ahead and propose that the inputs now to the join block
    • 1:27:24are two arguments or two parameters, so to speak, hello and answer.
    • 1:27:30They go into that join puzzle piece, whose purpose in life
    • 1:27:32is to return one joined version thereof.
    • 1:27:36Let me slide this all over logically now so
    • 1:27:38that now that output becomes the input to the say block
    • 1:27:42and now is why the cat has the speech bubble saying all at once,
    • 1:27:46hello comma David.
    • 1:27:47So what we've done here is kind of composed the output
    • 1:27:51and from one function into the input of another.
    • 1:27:54And you can think of this in a couple of different ways,
    • 1:27:56left to right, as I did there, or kind of
    • 1:27:58like stacking these things on top of one another.
    • 1:28:00But at the end of the day, even as programming
    • 1:28:02gets more and more powerful for us, it's just inputs and outputs, inputs
    • 1:28:07and outputs.
    • 1:28:08And thankfully, with built-in functionality from our friends
    • 1:28:11at MIT who designed Scratch, I can even do something playful like this.
    • 1:28:14I can go to that Extensions button at the bottom.
    • 1:28:16And there's a lot of fancy things I can add here, like text-to-speech.
    • 1:28:20So let me go ahead and choose text-to-speech.
    • 1:28:22And let me go ahead here and change the say block in purple.
    • 1:28:28Let me get rid of the say block, and let me borrow this.
    • 1:28:30Let me get the speak block like this.
    • 1:28:33And now let me drag and drop this oval.
    • 1:28:35It's going to grow to fill.
    • 1:28:36And I think it's just about to be a little more interesting.
    • 1:28:38Let me click Play now, and hopefully this isn't too loud.
    • 1:28:42D-A-V-I-D. Enter.
    • 1:28:44SPEAKER: Hello, David.
    • 1:28:45DAVID J. MALAN: OK.
    • 1:28:46[APPLAUSE]
    • 1:28:47Thank you.
    • 1:28:50Thank you.
    • 1:28:50That's a low bar.
    • 1:28:51[CHUCKLES] Let me go ahead and set the voice too.
    • 1:28:54And you might now remember how we began class, where
    • 1:28:56we had a robotic, computerized voice.
    • 1:28:59Well, we didn't use Scratch at the time, but we could change this in Scratch
    • 1:29:03alone to be a little different.
    • 1:29:04So D-A-V-I-D.
    • 1:29:05SPEAKER: Hello, David.
    • 1:29:07DAVID J. MALAN: OK.
    • 1:29:07Little creepy, but we can play all day long with that.
    • 1:29:10But the point is that these functions are just
    • 1:29:12now doing something a little different.
    • 1:29:13But it's just these inputs and outputs.
    • 1:29:15Well, let's make the cat more like a cat.
    • 1:29:17Let me go ahead and throw away all of this asking question stuff.
    • 1:29:20Let me go up to Sound, and let me go ahead
    • 1:29:23and drag the play sound meow until done.
    • 1:29:26And here too it comes with meow.
    • 1:29:27You can add your own sounds as well.
    • 1:29:31But I'm just going to use the default meow and here too.
    • 1:29:34Hopefully, this won't be too loud.
    • 1:29:35Let's make the cat meow by clicking Play.
    • 1:29:37[MEOWING]
    • 1:29:39OK.
    • 1:29:40It's a little piercing, but it's cute.
    • 1:29:42And if I want the cat to meow twice, I could just play the game twice.
    • 1:29:45[MEOWING]
    • 1:29:48All right.
    • 1:29:48But it would be nice to just get it to meow automatically two, or three,
    • 1:29:52or more times.
    • 1:29:53So you know what I could do?
    • 1:29:54I could just drag a second one of these.
    • 1:29:56Actually, you know what?
    • 1:29:57I could even just right-click or Control-click and duplicate them.
    • 1:30:00But I'll just keep dragging and dropping.
    • 1:30:02There's different ways to solve problems.
    • 1:30:03And now let me click Play.
    • 1:30:04[MEOWING]
    • 1:30:07OK.
    • 1:30:07Cat does not sound particularly happy.
    • 1:30:09So we could go under--
    • 1:30:12how about Control?
    • 1:30:13We could wait one second.
    • 1:30:15Now, there's no room, but it will sort of expand to give room for me.
    • 1:30:18So let me try this.
    • 1:30:19And now it's going to wait one second in between meows.
    • 1:30:22[MEOWING]
    • 1:30:26OK.
    • 1:30:27Let me stipulate that is correct.
    • 1:30:28If my goal is to get the cat to meow three times, it meowed three times.
    • 1:30:32But per our discussion earlier of algorithms and the design thereof,
    • 1:30:36this is not the best design.
    • 1:30:38[MEOWING]
    • 1:30:39OK?
    • 1:30:40[LAUGHTER]
    • 1:30:40Thank you for playing along at home.
    • 1:30:42Yeah.
    • 1:30:43In what sense is this arguably not well-designed?
    • 1:30:47Yeah.
    • 1:30:47AUDIENCE: You repeated yourself.
    • 1:30:48DAVID J. MALAN: I repeated myself, which actually in programming
    • 1:30:51tends not to be a good thing.
    • 1:30:53Now, it was easy.
    • 1:30:54I almost resorted to copy-paste, which saves me time upfront.
    • 1:30:57But just imagine a contrived scenario.
    • 1:30:59Now, what if I want it to wait like two seconds in between?
    • 1:31:02All right.
    • 1:31:02It's not that big a deal.
    • 1:31:03I change it here, and I change it here.
    • 1:31:05But what if the program is meant to meow 10 times?
    • 1:31:07Then I have to change it here, and here, and here, and here, and here.
    • 1:31:10And eventually I'm going to screw up.
    • 1:31:12Humans are fallible.
    • 1:31:13I'm going to overlook one of them.
    • 1:31:14One time, it's going to be one second.
    • 1:31:16Another is going to be two, and just stupid things will happen.
    • 1:31:18You're setting yourself up for failure if you design things poorly.
    • 1:31:23And so I would propose that we use another type of building block
    • 1:31:26to solve this instead.
    • 1:31:27Yeah.
    • 1:31:28AUDIENCE: [INAUDIBLE]
    • 1:31:28DAVID J. MALAN: Yeah.
    • 1:31:29So we could use a loop and just write minimal code
    • 1:31:32but to accomplish even more functionality.
    • 1:31:35So let me throw away most of these blocks.
    • 1:31:37And let's go and grab this repeat block, which we haven't used yet,
    • 1:31:40but it's right there.
    • 1:31:42And as the name suggests, this will allow
    • 1:31:43me to repeat something some number of times.
    • 1:31:45Let me put these two puzzle pieces inside.
    • 1:31:48It'll grow to fill.
    • 1:31:49Let me reconnect it to the green flag.
    • 1:31:51I'll change the default 10 to a 3.
    • 1:31:53And now--
    • 1:31:54[MEOWING]
    • 1:31:58It's just sort of better because if now you want it to meow more times,
    • 1:32:02you change it one place.
    • 1:32:03If you want it to slow down, you change it in one place.
    • 1:32:05There's no room for error.
    • 1:32:07And that's generally a good thing.
    • 1:32:09But this is silly.
    • 1:32:10Like, Scratch comes with a cat.
    • 1:32:12Why didn't MIT give us a puzzle piece called "meow?"
    • 1:32:15Like, why am I implementing the idea of meowing myself?
    • 1:32:18Like, that took me what?
    • 1:32:191, 2, 3, 4 puzzle pieces.
    • 1:32:21Why isn't there just one puzzle piece that meows for me?
    • 1:32:24This too we can do in code, be it in Scratch, or C, or other languages too.
    • 1:32:28I'm going to go down to these pink my blocks here,
    • 1:32:32where I can create my own puzzle piece.
    • 1:32:35And I'm going to call this literally "meow."
    • 1:32:36And I'm going to go ahead and just click OK.
    • 1:32:39And notice that it's given me this new type of start connector.
    • 1:32:42It's a start puzzle piece that nothing goes above it.
    • 1:32:44But you can put anything you want below it.
    • 1:32:46And I'm going to go ahead and cheat here.
    • 1:32:48I'm just going to grab my existing code, so to speak.
    • 1:32:51This is code I'm writing, even though it's puzzle pieces.
    • 1:32:53And now let me just claim, and I'll move this aside.
    • 1:32:57Here is now an implementation of my own function,
    • 1:33:00my own block called "meow," whose purpose in life
    • 1:33:03is to meow until done and then wait one second.
    • 1:33:06But what's powerful now is notice at top left, now that I've made the block,
    • 1:33:10I can use it any number of times.
    • 1:33:12So I can grab this meow block, drag it over here, and you know what?
    • 1:33:17Now that "meow" exists as an idea, I can abstract that away.
    • 1:33:21And I'm just going to arbitrarily drag it way to the bottom.
    • 1:33:24I'm not deleting it.
    • 1:33:24I'm just putting it out of sight, out of mind so
    • 1:33:27that we can focus now on this idea.
    • 1:33:28And I claim that this implementation of meowing
    • 1:33:31is sort of better because it's more compact, it does what it says,
    • 1:33:35and I don't care about the implementation details of "meow."
    • 1:33:38So this idea of abstraction, something we're going to use frequently.
    • 1:33:41To abstract something away is to simplify.
    • 1:33:44Don't think about the underlying implementation details.
    • 1:33:47Just care about what it does or what it's called.
    • 1:33:50Someone has to care about the implementation details,
    • 1:33:52like me 30 seconds ago.
    • 1:33:54But here on out, I don't need to care.
    • 1:33:56And so in fact, you and I are using the abstraction
    • 1:33:59that is Scratch because I don't know how to put a speech bubble on the screen.
    • 1:34:02I don't know how to create that sound, meow.
    • 1:34:04MIT did that, and they abstracted those pieces
    • 1:34:07of functionality away already for us by just giving us
    • 1:34:10these puzzle pieces we see here.
    • 1:34:12So the code will work the exact same.
    • 1:34:14[MEOWING]
    • 1:34:17But it's sort of better designed now because now I've
    • 1:34:21abstracted away the idea of meowing.
    • 1:34:23But I bet I can improve this further.
    • 1:34:25Can I get rid of the repeat block altogether?
    • 1:34:28And let me just tell the meow block how many times to meow.
    • 1:34:31Well, let me go down to the bottom and look at the implementation details.
    • 1:34:35I'm going to right-click or Control-click on this,
    • 1:34:37and I'm going to edit it.
    • 1:34:38So I'm going to make a change.
    • 1:34:39And I didn't do this before, but I'm going to call it "meow," as before.
    • 1:34:42I'm going to add an input.
    • 1:34:43And just so I know what it says what it does,
    • 1:34:46I'm going to add the word "times" here.
    • 1:34:49And I'm going to change this placeholder to n.
    • 1:34:52n for "number" is the go-to placeholder any time
    • 1:34:54we want to talk about a number in CS.
    • 1:34:57So now notice the puzzle piece looks a little different.
    • 1:35:00It takes an argument or a parameter called
    • 1:35:02n, which represents the number of times you want the thing to meow.
    • 1:35:05Now, that doesn't do that yet.
    • 1:35:07So let me go back to my other code.
    • 1:35:10Let me just decouple these temporarily.
    • 1:35:13I'm going to move my loop into my implementation of meowing.
    • 1:35:17But I don't want to hard code, that is literally write the number 3 anymore.
    • 1:35:21I'm going to grab this oval and put it there.
    • 1:35:25So now I've generalized the function.
    • 1:35:27So now it will meow any number of times, 0 on up, by executing that loop
    • 1:35:33and now more powerfully.
    • 1:35:35Out of sight, out of mind.
    • 1:35:36Notice that my code just became so darn simple.
    • 1:35:40Like, my function is called "meow."
    • 1:35:42It meows some number of times.
    • 1:35:44All I have to do is type a number there, and it just works.
    • 1:35:46And I don't care any more about those lower-level, so to speak,
    • 1:35:50implementation details.
    • 1:35:52So here, no surprise.
    • 1:35:53If I type in the number 3, zoom out, and hit Play--
    • 1:35:55[MEOWING]
    • 1:36:00--it still works just fine.
    • 1:36:02So any questions on what we've just done here?
    • 1:36:05It's still just meowing, but that's besides the point.
    • 1:36:07It's this creation of our own functions, this modularity,
    • 1:36:11this abstraction that's going to be the idea that keeps coming back to us.
    • 1:36:15No?
    • 1:36:16All right.
    • 1:36:16So let's make this a little more cat-like.
    • 1:36:19Let me throw away all of this code.
    • 1:36:20And let me go ahead--
    • 1:36:22oops-- let me throw away this code first and then the rest of this code.
    • 1:36:25And let me go ahead and give myself another green flag block.
    • 1:36:28And let me go ahead, and let's create a cat that allows us to pet it
    • 1:36:32by moving my cursor over the cat.
    • 1:36:34And maybe it likes that, so it'll meow when I do that.
    • 1:36:36So let me go under Control, and let me grab this if conditional,
    • 1:36:42which we talked about as a building block earlier.
    • 1:36:44Let me go to Sensing, and we haven't used this before.
    • 1:36:47But here is a weird sort of diagonal shape
    • 1:36:50that says touching mouse pointer question mark.
    • 1:36:52So that's a Boolean expression.
    • 1:36:54So I'm going to drag that, and it's definitely the wrong size.
    • 1:36:56But it is the right shape, so it will grow to fill.
    • 1:36:59And the question I want to ask is if the cat is touching the mouse pointer,
    • 1:37:03then go ahead and meow happily.
    • 1:37:05So let me grab the meow sound, put it in there.
    • 1:37:08And so I think when I click the green flag to start the program,
    • 1:37:12and now I let the mouse pointer touch the cat, we should hear--
    • 1:37:19huh.
    • 1:37:20huh.
    • 1:37:21Doesn't seem to be working.
    • 1:37:23There's a bug or a mistake in this program too.
    • 1:37:27What did I do wrong?
    • 1:37:28Yeah.
    • 1:37:28AUDIENCE: You didn't specify the sprite [INAUDIBLE]..
    • 1:37:31DAVID J. MALAN: I don't need to specify the sprite explicitly
    • 1:37:33because a detail I didn't discuss earlier.
    • 1:37:35In the bottom right of the screen, notice
    • 1:37:37that the cat is already selected.
    • 1:37:39So this code relates to that cat.
    • 1:37:42So your instinct is good if we had two or more sprites,
    • 1:37:45but I just have one, so I'm covered there.
    • 1:37:48Other thoughts.
    • 1:37:48Yeah.
    • 1:37:49AUDIENCE: It only checks once.
    • 1:37:50DAVID J. MALAN: It only checks?
    • 1:37:51AUDIENCE: Once.
    • 1:37:52DAVID J. MALAN: Once.
    • 1:37:53So I click the green flag.
    • 1:37:54The computer did what I told it to do.
    • 1:37:57The mouse pointer was not touching the cat at that moment
    • 1:38:00because it was touching the green flag.
    • 1:38:01So, of course, it didn't meow.
    • 1:38:03So what maybe is the fix here?
    • 1:38:05What puzzle piece can we add?
    • 1:38:06AUDIENCE: After the green flag is [INAUDIBLE]..
    • 1:38:09DAVID J. MALAN: OK.
    • 1:38:10OK.
    • 1:38:10Interesting solution.
    • 1:38:12So let me go ahead, and under Control let me grab a-- wait one second.
    • 1:38:17I'm going to change the 1 to 5, and now I'm going to click the green flag.
    • 1:38:21So here we go.
    • 1:38:221, 2, 3, 4, 5.
    • 1:38:28Damn it.
    • 1:38:29[MEOWING]
    • 1:38:29OK.
    • 1:38:29That was yours, not mine.
    • 1:38:30[LAUGHTER]
    • 1:38:32It didn't work.
    • 1:38:33AUDIENCE: [INAUDIBLE]
    • 1:38:34DAVID J. MALAN: Sorry?
    • 1:38:35AUDIENCE: [INAUDIBLE]
    • 1:38:36DAVID J. MALAN: Oh, maybe forever.
    • 1:38:38So your approach would work, but it's very much a hack, if you will.
    • 1:38:42Like, I would have to time it perfectly so that the mouse pointer is touching
    • 1:38:46it, or, conversely, I have to drag it there and just
    • 1:38:49leave it there for five seconds.
    • 1:38:50And that's a little weird because you don't just touch a cat
    • 1:38:53and then five seconds later it meows at you.
    • 1:38:54Like, presumably, we want it to be more interactive.
    • 1:38:57So I like this idea of a loop.
    • 1:38:58Right?
    • 1:38:59Why don't we just tell the cat to forever listen for the cursor
    • 1:39:04as by using not repeat but forever?
    • 1:39:07Let me move this in here.
    • 1:39:08So now the cat's going to be told when the green flag is clicked just forever,
    • 1:39:11if touching, if touching, if touching.
    • 1:39:13Oh, meow when actually touched.
    • 1:39:15So now if I zoom out and hit Play, nothing's happening.
    • 1:39:19I don't have to wait any number of seconds.
    • 1:39:21But when I do touch the cat--
    • 1:39:22[MEOWING]
    • 1:39:23[APPLAUSE]
    • 1:39:24[CHUCKLES] Fan section here.
    • 1:39:26Thank you.
    • 1:39:27[MEOWING]
    • 1:39:27So now it's actually working quite well.
    • 1:39:30So there we have sort of a logical bug.
    • 1:39:33But it does make sense if you think about what it was
    • 1:39:35you told the computer to actually do.
    • 1:39:38Well, let's make things even more interesting
    • 1:39:39by using one of these extensions.
    • 1:39:41In this bottom left corner, this is how I got to text-to-speech earlier.
    • 1:39:44Let me go to Video Sensing over here too.
    • 1:39:47And I can actually-- there we go-- literally, the video has come on.
    • 1:39:50Let me go ahead and do this.
    • 1:39:52Get rid of this code, and let me step out of the frame.
    • 1:39:55When video motion is greater than--
    • 1:39:58well, this is CS50, so let's just type in 50,
    • 1:40:00which is just a measure of motion.
    • 1:40:02Let me go and play sound meow.
    • 1:40:07OK.
    • 1:40:07And let me stop and restart.
    • 1:40:11All right.
    • 1:40:12So there's the cat.
    • 1:40:18[MEOWING]
    • 1:40:19OK.
    • 1:40:20It worked.
    • 1:40:20The cat's a little insensitive.
    • 1:40:24[MEOWING]
    • 1:40:25There we go.
    • 1:40:25Actually, you know what?
    • 1:40:26Maybe it's just-- let me put-- let's change it.
    • 1:40:3020.
    • 1:40:31Oh, my God.
    • 1:40:31Oh, that's OK.
    • 1:40:33[MEOWING]
    • 1:40:33There we go.
    • 1:40:34All right.
    • 1:40:35There we go.
    • 1:40:36So now it's a little more sensitive to the petting by using the camera.
    • 1:40:40Now, this is kind of a weird example.
    • 1:40:41And if I just start moving around crazily, like,
    • 1:40:43it's just going to meow incessantly, which was what was happening--
    • 1:40:45[MEOWING]
    • 1:40:46Stop.
    • 1:40:48[LAUGHTER]
    • 1:40:49OK.
    • 1:40:49When in doubt, this is when you reload the page.
    • 1:40:51[LAUGHTER]
    • 1:40:53All right.
    • 1:40:53So now we're back to where we wanted to be.
    • 1:40:55But where can we now use these kinds of building blocks?
    • 1:40:58Like, we were doing such tiny little programs.
    • 1:41:00But even that we could turn into a whole game, I bet.
    • 1:41:04Could we get like one volunteer to come on up?
    • 1:41:07One volunteer?
    • 1:41:08Everyone's looking down.
    • 1:41:10OK.
    • 1:41:10On the end here.
    • 1:41:11Come on down.
    • 1:41:11Yeah.
    • 1:41:12All right.
    • 1:41:12Round of applause for our one brave volunteer here.
    • 1:41:14[APPLAUSE]
    • 1:41:18All right.
    • 1:41:19These Super Mario cookies are on the line for you,
    • 1:41:22depending on how this goes.
    • 1:41:23So I'm going to have you come over here.
    • 1:41:24And in advance on Scratch's website, we have some pre-made games,
    • 1:41:28one of them written by one of your predecessors, a former student,
    • 1:41:32that they implemented this sort of "Whac-A-Mole" game.
    • 1:41:36So what you're about to see is the camera turn on on you.
    • 1:41:39And you're going to see four moles above, below, left, and right.
    • 1:41:43And using only your head--
    • 1:41:44up, down, left, right-- the goal is to whack a mole
    • 1:41:47to get a point every time your head touches one of these sprites.
    • 1:41:51So you're about to see things get very interesting very quickly.
    • 1:41:54But using these building blocks, just those simple
    • 1:41:57blocks but have four sprites, not four cats but four moles in this case.
    • 1:42:01We can actually turn these into actual games.
    • 1:42:03[MUSIC PLAYING]
    • 1:42:04So here we go.
    • 1:42:06Click Beginner.
    • 1:42:08OK.
    • 1:42:08And we just need you to center your head first.
    • 1:42:10[MUSIC PLAYING]
    • 1:42:20[INDISTINCT CHATTER]
    • 1:42:24[CHUCKLES]
    • 1:42:25[MUSIC PLAYING]
    • 1:42:30Nice.
    • 1:42:31Ten seconds.
    • 1:42:32[MUSIC PLAYING]
    • 1:42:39Nice.
    • 1:42:40Two seconds.
    • 1:42:42AUDIENCE: [LAUGHS]
    • 1:42:43DAVID J. MALAN: All right.
    • 1:42:43A round of applause.
    • 1:42:44[APPLAUSE]
    • 1:42:45Thank you.
    • 1:42:48You want to introduce yourself?
    • 1:42:50AUDIENCE: Hi, everybody.
    • 1:42:51My name is [? Vanilla. ?] I'm a first year,
    • 1:42:53and I'm going to be majoring in computer science and economics.
    • 1:42:56DAVID J. MALAN: Nice to meet you.
    • 1:42:58Here we go.
    • 1:42:58Thank you.
    • 1:42:59AUDIENCE: Nice to meet you.
    • 1:43:00[APPLAUSE, CHEERING]
    • 1:43:01DAVID J. MALAN: So we won't look at the code for that actual game.
    • 1:43:04It was written by one of your predecessors.
    • 1:43:05And you can see it online if you're curious.
    • 1:43:07But you can think about now with our functions, conditionals,
    • 1:43:10Boolean expressions, loops how you could kind of compose that kind of program.
    • 1:43:15So odds are there was a loop that was just constantly listening
    • 1:43:17for that kind of connectivity, or it was one
    • 1:43:19of those extensions that was waiting for motion to go
    • 1:43:22touch one of those sprites.
    • 1:43:24Notice that there's these numbers up here.
    • 1:43:25And we haven't talked about this yet.
    • 1:43:27But just like in math, where you can have variables x, y, and z,
    • 1:43:30in programming, you can create variables using other puzzle pieces
    • 1:43:33in Scratch that just keep track of how many seconds are left,
    • 1:43:36that keeps track of how many times her head hit one of the moles.
    • 1:43:40And so you can implement the mechanics of games using very simple building
    • 1:43:43blocks.
    • 1:43:44But how do you go about building something
    • 1:43:46that's more interesting and interactive like that?
    • 1:43:48Let me go ahead and bring up, for instance,
    • 1:43:50one of the very first things I wrote years ago
    • 1:43:52when I was in graduate school and Scratch had just come out.
    • 1:43:55I was taking a class at MIT's Media Lab.
    • 1:43:57And they invited us to beta test-- that is, try out the software before it then
    • 1:44:01became part of the world.
    • 1:44:03And the game I made was this one here.
    • 1:44:07Let me find the right version of "Oscartime."
    • 1:44:10So "Oscartime" is a game that took me tens of hours probably in the end.
    • 1:44:15It was a little bit addictive, but let me go ahead and full-screen it.
    • 1:44:18And I won't play the whole game.
    • 1:44:20But it looked a little something like this.
    • 1:44:23OSCAR: (SINGS) Oh, I love--
    • 1:44:25DAVID J. MALAN: Where trash is falling from the sky.
    • 1:44:28And I can click on it and drag it.
    • 1:44:30And notice as I get close, the lid opens up like this.
    • 1:44:33And if I let it keep falling, it goes in, and Oscar gives me a point.
    • 1:44:37And I can do this again.
    • 1:44:39OSCAR: If you really want to see something trashy--
    • 1:44:41DAVID J. MALAN: All right.
    • 1:44:41Here comes something else.
    • 1:44:42OSCAR: I have here a sneaker that--
    • 1:44:44DAVID J. MALAN: So now there's two pieces of trash.
    • 1:44:46OSCAR: It's all full of holes, and the laces are--
    • 1:44:49DAVID J. MALAN: And it just keeps going, and going, and going.
    • 1:44:52And if we can lower the volume for just a moment, we'll let more trash fall.
    • 1:44:55But to your comment earlier about one sprite or more
    • 1:44:58sprites, that's what we're seeing here.
    • 1:45:00Even though our examples thus far are just one cat, one or two puzzle
    • 1:45:03pieces, or a few puzzle pieces.
    • 1:45:04Here is, I claim, a sprite.
    • 1:45:06Here is another sprite.
    • 1:45:08Here is another sprite.
    • 1:45:09And by toggling among them in that bottom right-hand corner,
    • 1:45:11I can just associate different puzzle pieces with each of these sprites.
    • 1:45:15Now, I didn't start off by implementing this whole game.
    • 1:45:17And in just a moment, if we can raise the volume a little bit,
    • 1:45:20we'll see even more trash is falling.
    • 1:45:22So this is what--
    • 1:45:23I hate this song now, like 10 plus hours listening to this song on loop
    • 1:45:26just to get the timing right.
    • 1:45:28But it brings to life all of these different sprites.
    • 1:45:31And if you play it again and again, it's always a little bit different
    • 1:45:34because I'm using some randomness.
    • 1:45:35So this newspaper doesn't always fall from there.
    • 1:45:38Sometimes it's here.
    • 1:45:39Sometimes it's here.
    • 1:45:40And so here, again, we have mechanics of a game where
    • 1:45:42things are being perturbed a little, randomized a little bit
    • 1:45:45to keep things more interesting.
    • 1:45:47And let me go ahead.
    • 1:45:48OSCAR: (SINGS) I love trash.
    • 1:45:50DAVID J. MALAN: There we go.
    • 1:45:51How. about raise a little volume?
    • 1:45:53One more piece of trash.
    • 1:45:54So a clock.
    • 1:45:55It just goes on forever, this kind of game.
    • 1:45:57But let's go ahead and consider.
    • 1:45:59Let me close that.
    • 1:46:00Let me go ahead and consider.
    • 1:46:01How I went about implementing that from the get-go.
    • 1:46:04So I will stipulate--
    • 1:46:06let me open a few of these versions here-- that the very first thing I did
    • 1:46:11was pretty much just implement the stage.
    • 1:46:13Right?
    • 1:46:13I was kind of procrastinating, so I poked around.
    • 1:46:15I found the Sesame Street lamppost, and I dragged it into the world.
    • 1:46:18And done.
    • 1:46:18Version one is done.
    • 1:46:19It didn't do anything, but at least I had the world sort of laid out.
    • 1:46:23That is to say I took a baby step toward my goal.
    • 1:46:25Then I started thinking about, all right,
    • 1:46:27how do I bring the trash to life, even if it doesn't do much of anything else?
    • 1:46:31And so I created another sprite by clicking the appropriate button
    • 1:46:34in that bottom right-hand corner.
    • 1:46:35And I thought about, well, what do I want this trash to do?
    • 1:46:38I want it to just kind of fall from the sky.
    • 1:46:40And so what I did here was the following.
    • 1:46:44If I go to this trash piece here or-- actually, sorry.
    • 1:46:48Out of order.
    • 1:46:48What I actually did first was I didn't even have the trash fall.
    • 1:46:51If I play this game, the trash just stays there in the air.
    • 1:46:55But I can do this.
    • 1:46:57I can drag it, and as before, as I touch the other sprite,
    • 1:47:01I get the trash can lid to go up.
    • 1:47:03So how do I do that?
    • 1:47:04Well, let me click on Oscar down there, my first sprite.
    • 1:47:07And here are the puzzle pieces via which I implemented this idea.
    • 1:47:10I changed Oscar's costume, his appearance,
    • 1:47:13to be just number one, which was one of the images I imported into the program.
    • 1:47:17And then I forever did this.
    • 1:47:19If Oscar is touching the mouse pointer, then
    • 1:47:22change Oscar's costume to number two, otherwise change it back to one.
    • 1:47:26So it's super simple animation.
    • 1:47:28I'm just toggling between lid up, lid down, lid up, lid down,
    • 1:47:31but it kind of feels interactive.
    • 1:47:33And if I wanted to really make this pretty,
    • 1:47:35I could have 30 different costumes where the lid is ever so slightly higher.
    • 1:47:40Then it would look even more like a movie or fluid motion.
    • 1:47:44But this was enough to get the job done, which
    • 1:47:46is to say I didn't try to implement all of "Oscartime" together.
    • 1:47:49I just took a second baby step toward my goal.
    • 1:47:52And then my next version of "Oscartime" might
    • 1:47:54have looked a little something like this, where now the trash--
    • 1:47:57there's more going on here.
    • 1:47:58Let's look at two of these blocks of code.
    • 1:48:02The first thing I did was I enabled drag mode to draggable,
    • 1:48:04and I had to Google to figure this out because otherwise it
    • 1:48:07didn't let me drag the trash while playing the game.
    • 1:48:09But once I figured that out, I tell the trash
    • 1:48:12to go to a random x-coordinate between 0 and 240
    • 1:48:16from left to right and then the y location 180
    • 1:48:19because I always want the trash falling from the sky.
    • 1:48:22And then what do I do?
    • 1:48:23I told the trash to forever change its y-coordinate, its vertical coordinate,
    • 1:48:27by negative 1, negative 1, negative 1, one pixel
    • 1:48:30at a time, which creates the illusion of it falling from the sky.
    • 1:48:34But I needed to do one other thing, and let me scroll up.
    • 1:48:36Each of your sprites can have multiple programs, multiple scripts,
    • 1:48:41so to speak, that are not attached to one another.
    • 1:48:44They will happen in parallel for you.
    • 1:48:46The second one is saying this.
    • 1:48:47Forever if the trash is touching Oscar, what should it do?
    • 1:48:52Go to a completely different x and y location at the very top.
    • 1:48:57Why?
    • 1:48:57Well, as soon as I drag the trash over the Oscar,
    • 1:49:01I want it to disappear as though it's going into the can.
    • 1:49:03And I then want it to reappear at the top so more trash falls.
    • 1:49:06So I just thought about what would it mean
    • 1:49:08for the trash to go into the trash can.
    • 1:49:10Well, who cares?
    • 1:49:11What really matters to the human user is that it just
    • 1:49:14disappears and teleports elsewhere.
    • 1:49:16And so that's the idea I implemented here.
    • 1:49:19So if you can reduce intuitive ideas to just basic building blocks like this,
    • 1:49:24you can start to make things much more interactive.
    • 1:49:27And lastly, if I look at this version here,
    • 1:49:29you'll see that we've combined these.
    • 1:49:33And so indeed, if I actually go ahead and play this now,
    • 1:49:35not only is it falling.
    • 1:49:37I can let it fall right on top of Oscar and watch it disappear.
    • 1:49:41But notice Oscar doesn't pop out yet because that was the fourth version
    • 1:49:44and then the fifth version.
    • 1:49:45And then I added the annoying music and so forth but sort of
    • 1:49:48composed this program step by step by step
    • 1:49:51so as to accomplish my larger goal.
    • 1:49:53And this is going to be true of all of the code you write,
    • 1:49:55be it in Scratch, or C, or Python, or in the like, trying to come up with--
    • 1:50:00or rather, trying to reduce your ideas, your grand vision to just baby steps,
    • 1:50:05building blocks so that you start with version one,
    • 1:50:07and maybe you submit version 10 or 20.
    • 1:50:10But you don't try to implement version 10 or 20 at the get-go.
    • 1:50:13You take those incremental steps.
    • 1:50:15All right.
    • 1:50:16How about one other?
    • 1:50:17Well, let me propose this.
    • 1:50:19Let me go ahead and open three games that represent one
    • 1:50:23that your predecessors also implemented, which looks a little something
    • 1:50:27like this in version zero.
    • 1:50:29Suppose I wanted to implement a game that
    • 1:50:32simply has these kinds of mechanics.
    • 1:50:33I'm touching my arrow keys on my keyboard-- up, down, left, and right.
    • 1:50:37And I'm moving the Harvard logo.
    • 1:50:38Let me zoom in a bit.
    • 1:50:39So if I hit the up arrow, the Harvard shield goes up.
    • 1:50:42If I hit the down arrow, the shield goes down.
    • 1:50:44If I go all the way to the left, it goes left
    • 1:50:47until it hits the wall and same thing on the right.
    • 1:50:49So this is like the beginnings of a game or a beginning
    • 1:50:51of a maze, something like that.
    • 1:50:53Well, how might I implement this?
    • 1:50:55Well, let me look inside this one.
    • 1:50:57And there's a lot going on, but, again, I sort of took simple steps.
    • 1:51:01Notice that I've got three sprites--
    • 1:51:02a left wall, which is just a straight line,
    • 1:51:04the right wall, which is a straight line.
    • 1:51:07And just intuitively, why did I implement those as sprites?
    • 1:51:10Why do they need to exist as entities themselves?
    • 1:51:15Yeah, in front.
    • 1:51:16AUDIENCE: [INAUDIBLE]
    • 1:51:16DAVID J. MALAN: Yeah.
    • 1:51:17I want it to interact with the shield.
    • 1:51:19So I need to be able to ask that Boolean expression, like,
    • 1:51:21not touching mouse pointer but touching shield, for instance,
    • 1:51:24a different type of yes/no question.
    • 1:51:26And so what is the code for the shield actually doing?
    • 1:51:29Well, there's a lot of duplication, and let me focus on the abstraction first.
    • 1:51:32Notice that I've got this one green flag clicked.
    • 1:51:35I want the shield to go dead center, 0 comma 0,
    • 1:51:38and then forever listen for the human's keyboard, and feel for the wall.
    • 1:51:42So I decided to implement my own pink puzzle pieces that
    • 1:51:45implement the two separate ideas.
    • 1:51:47One, just listen for the keyboard-- up, down, left,
    • 1:51:49right-- and then do something.
    • 1:51:50And then feel for walls is this idea of whenever I go up,
    • 1:51:53down, left, or right, if I touch a wall, I
    • 1:51:56need to stop doing whatever the keystrokes are telling me to do.
    • 1:52:00So now if we dive into those implementation details, listen and feel
    • 1:52:05are abstractions, custom puzzle pieces.
    • 1:52:07Let's look at the implementation details.
    • 1:52:09Well, here's the keyboard.
    • 1:52:11If the key arrow up is pressed, change y by 1.
    • 1:52:15If key down arrow is pressed, change y by negative 1.
    • 1:52:19And you can probably see where this is going.
    • 1:52:21Right arrow is x by 1.
    • 1:52:23Left arrow is x by negative 1, and that's
    • 1:52:25sort of all that's involved with up, down, left, right.
    • 1:52:29But wait a minute.
    • 1:52:30Why is there no loop in this listen for keyboard puzzle piece?
    • 1:52:35I needed a loop last time so it constantly works.
    • 1:52:39AUDIENCE: [INAUDIBLE]
    • 1:52:40DAVID J. MALAN: Exactly.
    • 1:52:41I put the loop in my main part of my program
    • 1:52:44up top so something is telling me to keep listening again and again.
    • 1:52:48So it's got to be somewhere, but it doesn't have
    • 1:52:50to be in the actual implementation.
    • 1:52:51And lastly, how about this feel for walls?
    • 1:52:53Well, if touching left wall, which is just another sprite, change x by 1.
    • 1:52:58So that is to say if I'm touching the left wall,
    • 1:53:00I want to bounce it back the other direction
    • 1:53:03and same thing on the right wall.
    • 1:53:04If I'm touching the right wall, I want to bounce it
    • 1:53:06back to the left, which effectively means that even if the human's hitting
    • 1:53:09the key, it's like fighting with this code,
    • 1:53:11but it's never going to go through the wall based on that math.
    • 1:53:14It's going to stop it right there.
    • 1:53:16All right.
    • 1:53:17Let's add something else to the mix.
    • 1:53:18Suppose I want the game to change to be a little something like this,
    • 1:53:21where Yale is some kind of block in between me and the exit.
    • 1:53:25So some dramatic race here.
    • 1:53:27OK.
    • 1:53:27I just got by, but the Yale logo doesn't seem
    • 1:53:30to be doing all that much except bouncing.
    • 1:53:32So I'm guessing there's a loop, maybe a conditional checking for those walls
    • 1:53:35too.
    • 1:53:36So let's go ahead and zoom out, see inside.
    • 1:53:38Let's not worry about Harvard because it's pretty much the same.
    • 1:53:41Let's look at the Yale puzzle pieces.
    • 1:53:43And sure enough, go to the middle.
    • 1:53:450 comma zero.
    • 1:53:46Point in direction 90, so point horizontally on the grid.
    • 1:53:50And then if touching left wall or touching right wall--
    • 1:53:53I'm kind of cheating this time, but cleverly, just spin around and do 180
    • 1:53:58so you effectively bounce off the wall.
    • 1:54:00This just tightened up my code.
    • 1:54:01I don't need to do the negative 1 or the plus 1.
    • 1:54:03I just say bounce in this form of code, otherwise just
    • 1:54:07constantly move one step.
    • 1:54:08Now, if this is a game where Yale is supposed to be better and faster,
    • 1:54:12well, let's change the 1 to 5.
    • 1:54:13Move 5 pixels at a time.
    • 1:54:15Let's move it 10 back and forth.
    • 1:54:17Let's maybe 100.
    • 1:54:19Uh-oh.
    • 1:54:20So what just happened?
    • 1:54:21That is a bug, which we can avoid by just not doing that.
    • 1:54:25But why did it break out of the wall?
    • 1:54:27Yeah.
    • 1:54:28AUDIENCE: [INAUDIBLE].
    • 1:54:29At first it was [INAUDIBLE].
    • 1:54:30DAVID J. MALAN: Exactly.
    • 1:54:31Because I'm doing 100 steps at a time, I'm
    • 1:54:34never actually touching the other sprite because I'm
    • 1:54:36sort of stepping way over it.
    • 1:54:38So there's never a moment where they're actually touching.
    • 1:54:40So previously, I was just getting lucky by doing fewer steps because it's
    • 1:54:44gradually going over the wall, which gives me
    • 1:54:46just enough time to detect as much.
    • 1:54:48So I would have to kind of tinker, and he'll
    • 1:54:50handle this a little bit differently.
    • 1:54:51So it's a bug if it's too fast.
    • 1:54:53But at least if I keep it slow and reasonable
    • 1:54:55the math actually does work out, so long as it starts again in the middle.
    • 1:54:59Well, let's do one final flourish here, whereby let's bring MIT into the mix.
    • 1:55:04Right?
    • 1:55:04They're super smart, so maybe they can kind of
    • 1:55:06track us and follow wherever I'm going.
    • 1:55:11So how might this work?
    • 1:55:13All right.
    • 1:55:13So nothing happens yet because we haven't finished composing the game.
    • 1:55:16And notice here--
    • 1:55:17OK.
    • 1:55:17Now MIT is struggling.
    • 1:55:19It's kind of twitching there because it's going just above, and below,
    • 1:55:21and then above, and below.
    • 1:55:23So we could fix that too if we want.
    • 1:55:24But that's just a function of my math, one pixel at a time.
    • 1:55:28Let me open up this one, see inside, and click on MIT.
    • 1:55:33And it doesn't take much to implement MIT, it seems.
    • 1:55:37So go to random position, forever point towards the Harvard logo outline,
    • 1:55:43AKA the shield, and then move one step.
    • 1:55:46So if I wanted to make MIT even smarter, even faster, what do I change here?
    • 1:55:50AUDIENCE: [INAUDIBLE]
    • 1:55:51DAVID J. MALAN: Yeah.
    • 1:55:52Change one step to two steps to double their speed or five steps, 10 steps,
    • 1:55:56or 100 steps.
    • 1:55:56And the game is going to be over like that.
    • 1:55:58But that's all it takes to now make these kinds of elements.
    • 1:56:00So if you are a game player on your phone, or consoles,
    • 1:56:03or computer, or whatever, if you think about almost any game,
    • 1:56:06you can probably now start to think about how they implemented
    • 1:56:08those mechanics because it's just being reduced to functions, conditionals,
    • 1:56:12loops, variables, and the like in this case.
    • 1:56:15So let's go ahead here and have maybe one final volunteer.
    • 1:56:20We've got one more bag of Oreos here.
    • 1:56:22OK.
    • 1:56:22That was super fast.
    • 1:56:23Do you want to come on up?
    • 1:56:24All right.
    • 1:56:25Brave volunteer.
    • 1:56:25Come on up.
    • 1:56:26[APPLAUSE]
    • 1:56:31All right.
    • 1:56:31Let me find the full-fledged version of this that one of your predecessors
    • 1:56:36made.
    • 1:56:37And let me get the right one.
    • 1:56:40OK.
    • 1:56:40Here we go.
    • 1:56:41We'll see some instructions on the screen in just a moment.
    • 1:56:45And when we hit Play, you'll see that the mechanics are all combined now
    • 1:56:50into one full-fledged game.
    • 1:56:51But first, an introduction.
    • 1:56:54It's on.
    • 1:56:55SAM: Hi, everyone.
    • 1:56:56I'm Sam.
    • 1:56:57I live in [INAUDIBLE].
    • 1:56:58I'm a freshman, and I'm from Nepal.
    • 1:57:00DAVID J. MALAN: All right.
    • 1:57:01Welcome to the stage.
    • 1:57:02[APPLAUSE]
    • 1:57:03SAM: Thank you.
    • 1:57:04DAVID J. MALAN: All right.
    • 1:57:05So here we go.
    • 1:57:05Yep.
    • 1:57:06Go ahead and click the green flag.
    • 1:57:08[MUSIC PLAYING]
    • 1:57:10[MC HAMMER, "U CAN'T TOUCH THIS"] You can't touch this.
    • 1:57:14DAVID J. MALAN: You see the grid is just bigger this time.
    • 1:57:17(SINGING) You can't touch this.
    • 1:57:19DAVID J. MALAN: Nice.
    • 1:57:20Now there's that Yale element.
    • 1:57:22(SINGING) You can't touch this.
    • 1:57:24My, my, my my music hits me so hard.
    • 1:57:27Makes me say, oh, my Lord.
    • 1:57:29Thank you for blessing me with a mind to rhyme and two hyped feet.
    • 1:57:32It feels good when you know you're down, a super dope homeboy from the Oaktown.
    • 1:57:35DAVID J. MALAN: OK.
    • 1:57:36Third Yale.
    • 1:57:38All started at slightly different positions.
    • 1:57:41(SINGING) I told you, homeboy.
    • 1:57:43You can't touch this.
    • 1:57:43DAVID J. MALAN: Nice.
    • 1:57:44All right.
    • 1:57:45There's MIT.
    • 1:57:45(SINGING) And ya know you can't touch this.
    • 1:57:47[CHEERING, APPLAUSE]
    • 1:57:49DAVID J. MALAN: Oh.
    • 1:57:50(SINGING) You can't touch this.
    • 1:57:52Yo.
    • 1:57:53Let me bust the funky lyrics.
    • 1:57:54DAVID J. MALAN: Gotta go fast.
    • 1:57:58Oh.
    • 1:57:59No.
    • 1:58:05Oh.
    • 1:58:07[CHUCKLES]
    • 1:58:07(SINGING) Cold on a mission, so fall on back.
    • 1:58:09Let them know that you're too much, and this is a beat they can't touch.
    • 1:58:13DAVID J. MALAN: Nice.
    • 1:58:14[EXCLAIMING]
    • 1:58:15(SINGING) You can't touch this.
    • 1:58:18DAVID J. MALAN: No more walls but two MITs.
    • 1:58:20(SINGING) Yo, sound the bell.
    • 1:58:21School's in, sucker.
    • 1:58:22DAVID J. MALAN: Princeton now.
    • 1:58:24(SINGING) Give me a song or rhythm.
    • 1:58:25Making them sweat, that's what I'm giving them.
    • 1:58:27Now, they know you talk about the Hammer when you're talkin'
    • 1:58:31'bout a show that's hyped and tight.
    • 1:58:32Singers are sweatin', so pass them a wipe or a tape to learn.
    • 1:58:36DAVID J. MALAN: Second to last level.
    • 1:58:38(SINGING) The chart's legit.
    • 1:58:39Either work hard, or you might as well quit.
    • 1:58:41That's word because you know you can't touch this.
    • 1:58:48You can't touch this.
    • 1:58:51Break it down.
    • 1:58:52DAVID J. MALAN: All right.
    • 1:58:53Clear.
    • 1:58:54There we go.
    • 1:58:55Nice.
    • 1:58:55Oh, oh.
    • 1:58:59Oh.
    • 1:59:00Few more lives.
    • 1:59:02Oh.
    • 1:59:05(SINGING) Stop.
    • 1:59:06Hammer time.
    • 1:59:06DAVID J. MALAN: Here we go.
    • 1:59:07There we go.
    • 1:59:08[EXCLAIMING]
    • 1:59:09All right.
    • 1:59:10Couple more tries.
    • 1:59:12Yes!
    • 1:59:13Oh, no.
    • 1:59:14(SINGING) This is it for a winner.
    • 1:59:15Dance to this, and you're gonna get thinner.
    • 1:59:17Now move, slide your rump.
    • 1:59:19DAVID J. MALAN: Starts getting stressful.
    • 1:59:20(SINGING) Just for a minute, let's all do the bump.
    • 1:59:22Bump, bump, bump.
    • 1:59:23Yeah.
    • 1:59:24You can't touch this.
    • 1:59:27Look, man.
    • 1:59:27You can't touch this.
    • 1:59:29You'll probably get hyped, boy.
    • 1:59:30DAVID J. MALAN: One more try.
    • 1:59:31(SINGING) You can't touch this.
    • 1:59:33Ring the bell.
    • 1:59:33School's back in.
    • 1:59:34DAVID J. MALAN: All right.
    • 1:59:35A round of applause, nonetheless.
    • 1:59:36[APPLAUSE]
    • 1:59:37Nicely done.
    • 1:59:38Thank you.
    • 1:59:42So as you might have noticed if your eyes started
    • 1:59:46to wander to the light bulbs here, there's
    • 1:59:48actually 64 of these light bulbs.
    • 1:59:50And I'm wondering if you divide 64 by 8, that's 8 bytes of light bulbs.
    • 1:59:55And we now have some Unicode in our vocabulary.
    • 1:59:57So might very well be the case that we've
    • 1:59:58been spelling something out on the stage here for you all of this time.
    • 2:00:03But before we adjourn for cake to be served in the Transept,
    • 2:00:07allow me to introduce some of CS50's human friends,
    • 2:00:11the Harvard Krokodiloes and the Radcliffe Pitches,
    • 2:00:17to give us this exciting ending, "This is CS50."
    • 2:00:23[APPLAUSE, CHEERING]
    • 2:00:36[HARMONICA NOTE]
    • 2:00:41[VOCALIZING]
    • 2:00:41SPEAKER: (SINGING) There's a certain someone who I'm indebted to.
    • 2:00:50And since the old [? BNC ?] has 50, I have this friend for you.
    • 2:01:03A two, three, four.
    • 2:01:04[VOCALIZING]
    • 2:01:08Oh, rubber ducky, you're the one.
    • 2:01:12You make [INAUDIBLE] so much fun.
    • 2:01:14Rubber ducky, I'm awfully fond of you.
    • 2:01:18[SCATTING] Rubber ducky, you make me smile, and you help my code compile.
    • 2:01:25Rubber ducky, you're my very best friend.
    • 2:01:27It's true.
    • 2:01:29When I'm at a standstill, your debugging abilities stun me.
    • 2:01:33When I'm at the end of my rope, you just snap, and my code's up and running.
    • 2:01:40Rubber ducky, you're so fine, and I'm lucky that you're mine.
    • 2:01:45Rubber ducky, you're my very best friend.
    • 2:01:47It's true.
    • 2:01:48You're my best friend.
    • 2:01:49It's true.
    • 2:01:52Rubber ducky, I'm awfully fond of you.
    • 2:02:02[CHEERING, APPLAUSE]
    • 2:02:08SPEAKER: Good afternoon, CS50.
    • 2:02:10We are the Harvard Krokodiloes, Harvard's oldest a cappella group,
    • 2:02:12founded way back in 1946 at the historic Hasty Pudding Club.
    • 2:02:16We'd love to make a big thank you to CS50 staff
    • 2:02:18and to David Malan for having us perform here at Sanders Theater.
    • 2:02:21And you enjoyed this performance, please come audition for us
    • 2:02:24this weekend at Farkas Hall.
    • 2:02:26[CHEERING, APPLAUSE]
    • 2:02:36SPEAKER: Hello, everyone.
    • 2:02:37We are some of the Radcliffe Pitches, and we are also
    • 2:02:40hosting auditions this weekend.
    • 2:02:41You can find more information at our Instagram, @radcliffepitches.
    • 2:02:45Now, let me tell you a little bit about just about a year ago
    • 2:02:48today, when I was sitting in your very seats on my first day of CS50 lecture.
    • 2:02:52And this is just about how I was feeling.
    • 2:02:55[HARMONICA NOTE]
    • 2:03:00[VOCALIZING]
    • 2:03:07(SINGING) It's the first day of class, and I'm brand new to code.
    • 2:03:11Is this for me?
    • 2:03:14So many people around.
    • 2:03:16Can I get through the workload?
    • 2:03:18But it's my dream.
    • 2:03:21I tend to stick to English, not science.
    • 2:03:25But my [INAUDIBLE] friends told me to try this.
    • 2:03:29Hey, dancing robot dog, you kind of look like you have your life together,
    • 2:03:32I guess.
    • 2:03:33I really need some advice.
    • 2:03:35(ALL SINGING) We know you're feeling unsure,
    • 2:03:37but this is really the right call.
    • 2:03:40In CS50, you'll meet new friends, get free food.
    • 2:03:44You'll be all set for this fall in CS50.
    • 2:03:50You have a thousand TAs who will help you.
    • 2:03:54You'll get cupcakes, duckies, Chinese food.
    • 2:03:58And you can always take this class and set aside.
    • 2:04:06SPEAKER: This is CS50.
    • 2:04:08Fist bump.
    • 2:04:10[LAUGHTER]
    • 2:04:11[APPLAUSE, CHEERING]
    • 2:04:16DAVID J. MALAN: Thank you to the Kroks.
    • 2:04:18Thank you to the Pitches.
    • 2:04:19Cake is now served.
    • 2:04:20Come on up to say hi if you'd like or meet Spot.
    • 2:04:23See you next time.
    • 2:04:24[APPLAUSE, CHEERING]
    • 2:04:25[MUSIC PLAYING]
  • 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