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