CS50 Harvard: From Binary Basics to Building Interactive AI Chatbots and Games

Heat. [Music] Heat.

[Music] [Music] in your heart to light the magic of the

dark lighting from this [Music]

Heat. Heat. Heat. Heat. [Music]

[Applause] [Music] Heat.

[Music] Heat. [Music]

[Music] [Applause] All right. This is

This is CS50, Harvard University's introduction to the intellectual enterprises of computer science and the

arts of programming. My name is David Men and this is week zero. And by the end of today, you'll know not only what

these light bulbs here spell, but so much more. But why don't we start first with the uh the elephant or the elephant

in the room that is artificial intelligence, which is seemingly everywhere over the past few years. And

it's been said that it's going to change programming. And that's absolutely the case. It's been that way actually for

the past several years. Is only going to get to be the case all the more. But this is an incredibly exciting time.

This is actually a good thing. I do think in so far as now using AI in any number of forms, you can ask the

computer to help solve some problem for you. You can find some bug or mistake in your code. Better still, increasingly

you can tell the AI what additional features you want to add to your software. And this is huge because even

in industry for years, humans have been programming in some form for decades, building products and solutions to

problems, the reality is that you and I as humans have long been the bottleneck. There's only so many hours in the day.

There's only so many people on your team or in your company and there's so many more bugs that you want to solve and so

many more features that you want to implement, but at the same time, you still really need to understand the

fundamentals. And indeed, a class like this CS50 has never been about teaching you how to program. like that's actually

one of the side effects of taking a class like this. But the overarching goal is to teach you how to think, how

to take input and produce correct output and how to master these and other tools. And so by the end of the semester, not

only you will be not only will you be acquainted with languages like Scratch, which we'll touch on today if you've not

seen it already, languages like C and Python and SQL, HTML, CSS, and JavaScript. You'll be able to teach

yourself new things ultimately, and ultimately be able to tell computers increasingly what it is you want it to

do. But you'll still be in the driver's seat, so to speak. You'll be the pilot. You'll be the conductor, whatever your

preferred metaphor is. And that's what I think is so empowering still about learning introductory material,

foundational material, because you'll know what you're ultimately talking about and what you can in fact solve.

And we've been through this before, like when calculators came out. It's still valuable, I dare say, all these years

later, to still know how to do addition and subtraction and whatnot. And yet, I think back on some of my own math

classes. I remember learning so many darn ways in college how to take derivatives and integrals. And after

like the six process of that, I sort of realized, okay, I get it. I get the idea. Do I really need to know this many

ways? And here too, with AI and with code, can you increasingly sort of master the ideas and then lean on a a

co-pilot assistant to actually help you solve those same problems? So, let's do some of this ourselves here. In fact,

just to give you a teaser of what you'll be able to do yourselves before long, let me go ahead and open up a little

something called Visual Studio Code, aka VS Code for short. This is popular largely open- source or free software

that's used by real world people in industry to write code. And it's essentially a text editor similar to

Notepad if you're familiar with that or text edit kind of like Google Docs but no boldfacing and underlining and and

things like that that you'd find in word processing programs. And this is CS50's version thereof. We're going to

introduce you to this all the more next week. But for now, let's just give you a taste of what you can do with an

environment like this. So I'm going to switch over to this program already running VS Code. And in this uh bottom

of the screen, you're going to see a so-called terminal window. Again, more on that next week, but it's in this

terminal window that I can write commands that tells the computer what I want it to do. For instance, let's

suppose just for the sake of discussion that I want to make my own chatbot, not chat GPT or Gemini and Claude, like

let's make our own in some sense. So, I'm going to code up a program called chat.py. And you might be familiar that

I using a language here.py is it's just called Python. And if unfamiliar, you're in good company. You'll learn that too

within a few weeks. And at the top of the file here, I can write my code. And at the bottom of the file of the window

here, I can run my code. So, here's how relatively easy it is nowadays to write even your own chatbot using the AI

technologies that we already have. I'm going to go ahead and type a command like import uh uh I'm going to go ahead

and type the following from OpenAI. import open AI. We'll learn what this means ultimately, but what I'm going to

do is write my own program on top of an API, application programming interface that someone else provides, a big

company called OpenAI, and they're providing features and functionality that now I can write code against. I'm

going to create a so-called client, which is to say a program of my own that's going to use this OpenAI

software. And then I'm going to go ahead and ask this software for a response. And I'm going to set that equal to

client.responses.create whatever all that means. And then inside of these parenthesis I'm going to say

the following. The input I want to give to this underlying API is quote unquote something like in one sentence

what is CS50? Much like I would ask chatpt itself. If you're familiar with things like chat GPT and AI more

generally nowadays, you know there's these thing called models which are like statistical models that ultimately drive

what the AIs can do. I'm going to go ahead and say model equals quote unquote gpt5 which is the latest and greatest

version at least as of today. Now down in my terminal window I'm going to run a different command python of chat.py and

so long as I have made no typographical errors in this program I should be able to ask openai not with chatgpt.com but

with my own code for the answer to some question. But I want to know what the answer to that question is. So, I

actually want to print out that response by saying print response output text. In other words, these 10 lines, and it's

not even 10 lines because a few of them are blank, I've implemented my own chatbot that at the moment is hardcoded

that is permanently configured to only answer one question for me. And let's see, with the cross of the fingers, CS50

is Harvard University's introductory computer science course, the intellectual enterprises of computer

science and the art of programming. weirdly familiar covering problems solving algorithms, data structures, and

more using languages like C, Python, and SQL. Okay, interesting. But let's make the program itself more dynamic. Suppose

you wanted to write code that actually asks the human what their question is because very quickly might we want to

learn something more than just this one question. So up here, I'm going to go and change my code and type something

like this. Type prompt equals input with parenthesis. More on this another time, too. But what I'm going to ask the user

for is to give me an actual prompt. That is a question that I want this AI to answer. And down here, what you'll

notice, even if you've never programmed before, is that I can do something somewhat intuitive in so far as line

five is now asking the human for input. Let's just stipulate that this equal sign means store that answer in a

variable called prompt where variables just like in math X, Y, or Z. Let's go ahead and store that in prompt. So the

input I want to give to OpenAI now is that actual prompt. So, it's a placeholder containing whatever

keystrokes the human typed in. If I now run that same command again, python of chat.py, hit enter, cross my fingers,

I'll see now dynamic prompting. So, what's a question I might want to ask? Well, let's just say it again. In one

sentence, whoops, in one sentence, what is CS50? Question mark. Enter. And now the answer comes back as probably

roughly the same but a little bit different. a variant thereof. But maybe we can distill this even more

succinctly. How about let's run it again. Python of chat.py and let's say in one word what is CS50 and see if the

underlying AI obliges and after a pause course in a word. So that's not all that incorrect. And maybe

we can have a little fun with this. Now how about in one word which is which is better? Maybe Harvard

or Stanford. Hope you picked right. Let's see. The answer is

depends. Okay. So would not in fact oblige. But notice what I keep doing in this code. I keep providing a prompt as

the human like in one sentence in one word. Well, if you want the AI to behave in a certain way, why don't we just tell

the underlying system to behave in that way? So I the human don't have to keep asking it in one sentence, in one

sentence, in one word. So, we can actually introduce one other feature that you'll hear discussed in industry

nowadays, which is not only a prompt from the user, which I'm going to now temporarily rename to user prompt. Just

to make clear, it's coming from the user. I'm going to also give our what's called a system prompt by setting this

equal to some standardized instructions that I want the AI to respect, like limit your answer to one sentence, quote

unquote. And now in addition to passing in as input the user prompt, I'm gonna actually tell OpenI to use these

instructions coming from this other variable called system prompt. So in other words, I'm still using the same

underlying service, but I'm handing it now not only what the user typed in, but also this standardized text limit your

answer to one sentence. So the human like me doesn't have to do that anymore. Let's now go back to my terminal, run

Python of chat.py once more, and this time we'll be prompted. But now I can just ask what is CS50 question mark and

I'll likely get a correct and similar answer to before. And indeed it's Harvard University's flagship

introductory computer science course dot dot dot. So seems spot on too. But now we can have some fun with this too. And

you might know that these GPTs nowadays have sort of personalities. You can make them obliged to behave in one way or

another. Why don't we go into our system prompt here and say something silly like pretend you're a cat. And now let's go

back to the prompt one final time. Run Python of chat.py. Prompt again will be say what is CS50? And with a final

flourish of hitting enter, what do we get back? CS50 is Harvard University's

introductory computer science course teaching programming algorithms, data structures, and problem solving. And

it's available free online. Meow. So that was enough to coersse this particular behavior. So this is to say

that with programming you have the ability in like 10 lines of text, not all of which you might understand yet,

but that's the whole point of a class like this to build fairly powerful things, maybe silly things like this,

but in fact it's using these same primitives that CS50 has its own virtual rubber duck. And we'll talk more about

this in the weeks to come, but long story short, in the world of programming, it's kind of a thing to

keep a rubber duck literally on your desk or really any inanimate cute object like this because when you are

struggling with some problem, some bug or mistake in your code and you don't have a friend, a teaching assistant, a

parent, or someone else who's more knowledgeable than you about code, well, you literally are encouraged in

programming circles to like talk to the rubber duck. And it's through that process of just verbalizing your

confusion and organizing your thoughts enough to convey it to another person or duck in this case that so often that

proverbial light bulb goes off and you realize ah I'm being an idiot now I hear in my own thoughts the illogic or the

mistake I'm making and you solve that problem as well. So CS50 drawing inspiration from this will give to you a

virtual duck in computer form and in fact among the other URLs you'll use over the course of the semester is that

here cs50.ai AI which is also built into that previous URL cs50.dev whereby these are the AIS you can use in CS50 to solve

problems and you are encouraged to do so as you'll see in the course's syllabus. is not reasonable. It is not allowed to

use AI based software other than CS50 zone, be it claw, Gemini, chat GPT or the like, but it is reasonable and very

much encouraged along the way to turn not only to humans like me, your teaching assistant and others in the

class, but to CS50's own AI based software. And what you'll find is that this virtual duck is designed to behave

as close to a good human tutor as you might expect from an actual human in the real world. knows about CS50, knows how

to lead you to a solution, ideally without simply spoiling it and providing it outright. So with that said, that's

sort of the endgame to be able to write code like that and more. But let's really start back at the beginning and

see how we can't get from zeros and ones that computers speak all the way back to artificial intelligence. So computer

science is the in the name of the course, computer science 50. But what is that? Well, it's really just the study

of information. How do you represent it? How do you process it? And very much gerine to computer science is what the

world calls computational thinking which is just the application of ideas from computer science or CS to problems

generally in the real world. And in fact that's ultimately I dare say what computer science really is. It's about

problem solving. And even though we use computers you learn how to program along the way. These are really just tools and

methodologies that you can leverage to solve problems. Now what does that mean? Well, a problem is perhaps most easily

distilled into a simple picture like this. We've got some input which is like the problem we want to solve and the

output which is the goal we want the solution there too. And then somewhere in the middle here is the proverbial

black box the sort of secret sauce that gets that input from output. So this then I would say is in essence is

problem solving and thus computer science. But we have to agree especially if we're going to use devices, Macs,

PCs, phones, whatever. How do we all represent information, the inputs and the outputs in some standardized way? Is

it with English? Is it with something else? Well, you all probably know, even if you're not computer people, that at

the end of the day, computers somehow use zeros in one entirely. That is their entire alphabet. And in fact, you might

be familiar already with certain such systems. So the unary uh notation, which means you essentially use single digits

like fingers on your hand. For instance, unary aka base one is something you can do on your own human hand. So for

instance, with one human hand, how high can I count? >> All right. So hopefully 1 2 3 4 five.

And if you want to count to six and uh to 11 and 10 and so forth, you need to, you know, take out another hand or your

toes or the like because it's fairly limiting. But if I think a little harder, instead of just using unary,

what if I use a different system instead? What about something like binary? Well, how high if you think a

little harder can you count on one human hand? So 31 says someone who studied computer

science before. But why is that? It's kind of hard to imagine, right? Because 1 2 3 4 5 seems to be the five possible

patterns. But that's only when you're looking at the totality of fingers that are actually up. Five in total or four

in total or one or the like. But what if we take into account the pattern of fingers that are up and we just

standardize what each of those fingers represent. So maybe we all agree like a good computer would too that maybe no

fingers up means the number zero. And if we want to count to one, let's go with the obvious. This is now one. But

instead of two being this, which was my first instinct, maybe two can just be this. A single second finger up like

this. And that means we could now use two fingers up to represent three. I'll propose we can use just one middle

finger up to offend everyone, but represent four. I could maybe use these two fingers with some difficulty to

represent five, six, seven. And I'm already up to seven having used only three fingers. And in fact, if we keep

going higher and higher, I bet I can get as high as 31 for 32 possible combinations. But the first one was

zero. So that's as high as we can count. So we'll make this connection in just a moment. But what I started to do there

is something called base 2. Instead of just having fingers up or fingers down, I'm taking into account the positions of

those fingers and giving meaning to like this finger here, this finger here, this finger here, and so forth. Different

weights, if you will. So the binary system is indeed all computers understand and you might be familiar

with some terminology here. Binary digit is not really something anyone really says but the shorthand for that is going

to be bit. So if you've heard of bits and we'll soon see bytes and then kilobytes and megabytes and gigabytes

and terabytes and more. This just refers to a bit meaning a single binary digit either a zero or a one. A zero is

perhaps most simply represented by just like turning maybe keeping a finger down or in the world of computers which have

access to electricity be it from the wall or maybe a battery. You know what we could do? We could just decide sort

of universally that when the light bulb is off that thing represents a zero and when the light bulb is on that thing's

going to represent a one instead. Now why is this? Well, electricity is such a simple thing right? It's either flowing

or it's not. And we don't even have to therefore worry about how much of it is flowing. And if you're vaguely remember

a little bit about voltage, we can sort of be like zero volts. Nothing's there available for us. Or maybe it's 5 volts

or something else in between. But what's nice about binary only using zeros and ones is that it maps really nicely to

the real world by like throwing a light switch on and off. You can represent information by just using a little bit

of electricity or the lack thereof. So what do I mean by this? Well, suppose we want to start counting using binary

zeros and ones only. Well, let's think of them metaphorically as like akin to these light bulbs here. And in fact, let

me grab a few of these light bulbs and let me propose that if we want to represent the number zero, well, it

stands to reason that here single light bulb that is off can be agreed upon as representing zero. Now, in practice,

computers don't have little light bulbs inside, but they do have little switches inside. Millions of tiny little things

called transistors that if turned on, can allow it to capture a little bit of electricity and effectively turn on a

metaphorical bulb. Or the switch can go off. The transistor can go off and therefore let the electricity dissipate

and you have just now a zero. Unfortunately, even though I can let some electricity, there's the battery I

mentioned is required. Even though we might have some electricity available to us, I can therefore count to one. But

how do I go about counting? Hardware problem. How do I go about counting higher than one with just a

light bulb? Yeah. So, I need more of them. So, let me grab another one here. And now I

could put it next to it. And this two, I'll claim is just still the number one. But if I want to turn two of them on,

well, that would I could count to two. And if I maybe grab another one, now I can count as high as three. But wait a

minute, I'm doing something wrong because with three human fingers, how high was I able to count?

So seven in total starting at zero. So I've done something wrong here. But let me be a little more clever than about

the pattern that I'm actually using. Perhaps this can still be one. But just like my finger went up and only one

finger in the second version of this, this can be what we represent as two. Which one do I want to turn on as three?

Your left or your right? >> So, you're right. Because now this matches what I was doing with my fingers

a moment ago. And I claimed we could represent three like this. If we want to represent four, that's fine. We have to

turn that off, this off, and this on. And that's somehow four. And let's go all the way up to seven. Which ones need

to be on to represent the number seven? All right. So, all of them here. Now, if you're not among those who just sort of

naturally said all of them, like what the heck is going on? And how do half the people in this room know what these

patterns are supposed to be? Well, maybe you're remembering what I did with my fingers. But it turns out you're already

pretty familiar with systems like this, even if you might not have put a name to it. So, in the human world, the real

world, most of us deal every day with the so-called base 10 system, otherwise known as decimal deck implying 10.

Because in the decimal system, you have 10 digits available to you, 0 through 9. In the binary system, we only had two by

implying two. So zero and one and unary we had just one a single digit there or not. So in the decimal system we just

have more of a vocabulary to play with and yet you and I have been doing this since grade school. So this is obviously

the number 123. But why? It's technically just three symbols 1 2 3. But most of us your mind and meal e goes

okay 123. Pretty obvious pretty natural. But at some point you like me were probably taught that this is the one's

place and this is the 10's place and this is the 100's place and so forth. And the reason that this pattern of

symbols 1 2 3 is 123 is that we're all doing some quick mental math and realizing well that's 100 * 1 + 10 * 2 +

1 * 3. Oh okay there's how we get 100 + 20 + 3 gives us the number we all know mathematically is 123. Well, it turns

out whether you're using decimal or binary or other base systems that we'll talk about later in the course, the

system is still fundamentally the same. Let's kind of generalize this away. Here's a three-digit number in some base

system, specifically in decimal. And I know that only because of the placeholders that I've got on top of

each of these numbers. But if we do a little bit of math here, 1 10 100 1,000 10,000 and so forth. What's the pattern?

Well, technically this is 10^ the 0 10 the 1 10 the 2 and so forth. And we're using 10 because we can use as many as

10 digits under each of those columns. But if we take some of those digits away and go from decimal down to binary. The

motivation being it's way easier for a computer to distinguish electricity being on or off than coming up with like

10 unique levels of electricity to distinguish among. You could do it. It would be annoying and difficult to build

in hardware. You could do it so much simpler to just say on and off. It's a nice simple world that way. So let's

change the base from 10 to two. And what does this get us? Well, if we now do undo the math, that's two to the 0 is 1.

2 to the 1 is 2. 2 to the 2 is 4. So the man the mental math is now about to be the same, but the columns represent

something a little bit different. So, for instance, if I turn all of these off again such that I've got off, off off,

otherwise known as 0 0, it's zero because it's 4 * 0 + 2 * 0 + 1 * 0 still gives me zero. By contrast, if I turn on

maybe just this one all the way over on the left, well, that's four * 1 because on represents one and off represents 0,

plus 2 * 0 + 1 * 0, that gives me four. And if I turn both of these on such that all three of them are now on on on aka 1

one one that's four * 1 + 2 * 1 + 1 * 1 that then gives me seven. And we can keep adding more and more bits to this.

In fact, if we go all the way up uh numerically, here's how we would represent in binary the number you and I

know is zero. Here's how we would represent one. Here's how we would represent two and three and four and

five. And you can kind of see in your mind's eye now because I only have zeros and ones and no twos or threes, not to

mention nines. I'm essentially going to be carrying a one in a moment if we were to be doing some math. So to go from

five to six, that's why the one ends up in the middle column. To go to seven here gives us now one one or on on on.

How do I represent eight using ones and zeros? Yeah, >> we need to add another digit.

>> Yeah. So, we're going to need to add another digit. We need to throw hardware at the problem using an additional digit

so that we actually have a column representing eight. Now, as an aside, and we'll talk about this before long,

if you don't have an additional digit available, if your computer doesn't have enough memory, so to speak, you might

accidentally count from 0 1 2 3 4 5 6 7 and then accidentally end up back at zero. Because if there's no room to

store the fourth bit, well, all you have is part of the number. And this is going to create all sorts of problems then

ultimately in the real world. So, let me go ahead and put these back and propose that we have a system now. If you agree

to sort of count numbers in this way via which we can represent information in some standard way and all the device

underneath the hood needs is a bit of electricity to make this work. It's got to be able to turn things on, aka use

some transistors, and it's got to be able to turn those things off so as to represent zeros instead of ones. But the

reality is like two bits, three bits, four bits aren't very useful in the real world because even with three bits you

can count to seven, with four you can count to 15. These aren't very big numbers. So it tends to be more common

to actually use units of measure of eight bits at a time. A bite is just that. One bite is eight bits. So if

you've ever used the vernacular of kilobytes, megabytes, gigabytes, that's just referring to some number of bits,

but eight of them together compose one individual bite. So here, for instance, is a bite worth of bits, eight of them

total. I've added all the additional placeholders. And what number does this represent in decimal even though you're

looking at eight binary digits? >> It's a zero cuz like literally every column is a zero. Now, this is a bit

more of mental math, but unless you know it already, what if I change all of the zeros to ones? I turn all eight light

bulbs on. What number is this? >> Yeah. So, 255. Now, some of those of you who didn't get that instantly, that's

fine. You could certainly do the math manually. I dare say some of you have some prior knowledge of how to do this

sort of system. But 255 means that if you start counting at zero and you go all the way up to 255, okay, that's 256

total possibilities. Once you include zero in the total number of patterns of zeros and ones, and this is just going

to be one of these common numbers in computer science, 256. Why? Because it's referring to 8 of something. 2 to the 8

gives you 256. And so, you're going to commonly see certain values like that. 256. Back in the day, computers could

only show 256 colors on the screen. Certain graphics formats nowadays that you might download can only use as many

as 256 colors because as we'll see they're only using for instance eight bits and therefore they can only

represent so many colors of the rainbow as a result. So this then is how we might go from just zeros and ones

electricity inside of a computer to storing actual numbers with which we're familiar. And honestly we can go higher

than 255. What do you need to count higher than 255? a ninth bit, a tenth bit, an 11th bit, and so forth. And it

turns out common conventions nowadays, and we'll see this in code, too, is to use as many as 32 bits at a time. So

that's a good chunk of bits. And anyone want to ballpark how high you can count count if you've got 32 bits available to

you. Oh, a fewer people now. Yeah, in the back. Yeah. So, it's roughly 4 billion.

And it's technically two billion if you also want to represent negative numbers, but we'll revisit that question. But 2

to the 32nd power is roughly 4 billion. However, nowadays it's even more common with the Macs and PCs you might have on

your laps and even your phones nowadays to use 64 bits, which is a big enough number that I'm not even sure offh hand

to pronounce it. That's a lot of permutations. That's 2 to the 64 possible permutations, but that's

increasingly common place. And as an aside, just to dovetail things with our discussion of AI, among the reasons that

we're living through over these past few years, especially this crazy interesting time of AI is because computers have

been getting so much faster, exponentially so over time, they have so much more memory available to them.

There's so much data out there on the internet in particular to train these models that it's an interesting

confluence of hardware now actually meeting the mathematics and statistics that we'll talk about later in the class

that ultimately make tools like the cat we just built possible. But of course computers are not all math and in fact

we'll use very little math per se in this class. And so let's move away pretty quickly from just zeros and ones

and talk about letters of the alphabet. Say in English here is the letter A. Suppose you want to use this letter in

an email, a text message, or any other program. What is the computer doing underneath the hood? How can the

computer store a capital letter A in English? If at the end of the day, all the computer has access to is a source

of electricity from the wall or from a battery and it has a lot of switches that it can turn on and off and treat

the electricity in units of 8 or 32 or 64 or whatever. How might a computer represent a letter A?

>> Yeah, we need to give it an identity so to speak as an integer. In other words, at the end of the day, if your entire

canvas, so to speak, consists only of zeros and ones. Like that is going to be the answer to every question today. You

only have zeros and ones as the solution to these problems. We just need to agree what pattern of zeros and ones and

therefore what integer, what number shall be used to represent the letter A. And hopefully when we look at that

pattern of zeros and ones in the right context, we'll indeed see it as an A. So if we look inside of a computer so to

speak in the context of like a text messaging program or a word processor or anything like that, that pattern shall

be interpreted hopefully as a capital letter A. But if I open up Mac OS's or Windows or my phone's calculator

program, I would want that same pattern of zeros and ones to be interpreted instead as a number. If I open up

Photoshop, as we'll soon see, I want that same pattern of zeros and ones to be interpreted as a color presumably,

not to mention videos and sound and so forth, but it's all just zeros and ones. And so, even though I, when writing that

chat program a few minutes ago, didn't have to worry about telling the computer, oh, this is text, this is a

number, this is something else. We'll see as we write code ourselves that you as the programmer will have control over

telling the computer how to treat some pattern of zeros and ones telling it this is a number, this is a color, this

is a letter or something else. Um, how do we represent the letter A? Well, turns out a bunch of humans in a room

years ago decided ah this pattern of zeros and ones shall be known globally as a capital letter English A. What is

that number if you do the quick mental math? So indeed 65 because we had a one in the 64's place and a one in the onees

place. So 65 that's just sort of it. It would have been nice if it were just the number one or maybe the number zero. But

at least after the capital letter A, they kept things consistent such that if you want to represent a letter B, it's

going to be 66. Capital letter C, it's going to be 67. Why? Because the humans in this room, a bunch of Americans at

the time, standardized on what's called ASKI, the American standard code for information interchange. It doesn't

matter what the acronym represents, but it was just a mapping. Someone on a piece of paper essentially started

writing down letters of the alphabet and corresponding numbers so that computers subsequently could all speak that same

standard representation. And here's an excerpt thereof. In this case, we're seeing seven bits worth, but eventually

we ended up using eight bits in total to represent letters. And some of these are fairly cryptic. Maybe more on those

another time. But down here, if we highlight just one column, we'll see that indeed on this cheat sheet, 65 is

capital A, 66 is B, 67 is C, and so forth. So, why don't we do a little exercise here? What pattern of zeros and

ones do I see here? I've got three bytes. So, three sets of eight bits. And even though there's no placeholders now

over the columns, what is this number? It's 60. Yeah. Yeah. So, we got the

ones, twos, fours, 8s, uh, 16, 32, 64s column. So, indeed, this is going to be the number 72. 72. This is not what

computer scientists spend their day doing. This is just to reinforce what it is we just looked at. And I'll spoil it.

The rest of these numbers are 72 73 33. And anyone in this room could have done that if you took out a piece of paper,

figured out what the columns are, and just do a bit of quick or mental or written math. But this is to say,

suppose that you just got a text message or an email that if you had the ability to look underneath the hood of the

computer and see what pattern of zeros and ones did you just receive over the internet. Suppose that pattern of zeros

and ones was three bytes of bits, which when you do the math are the numbers 72, 73, 33. Well, here's the cheat sheet

again. What message did you just get? >> Yeah. So, it's high. Why? Because 72 is H and 73 is I. Now, some of you said hi

fairly emphatically. Why? Well, 33 turns out, and you wouldn't know this unless you looked it up or someone told you, is

an exclamation point. So, literally, if you were to text someone like right now, if you haven't already, hi exclamation

point in all caps, you would essentially be sending three bytes of information somehow over the internet to that

recipient. And because their phone similarly understands ASI because it was programmed years ago to do so, it knows

to show you hi exclamation point and not a number three numbers no less or colors or something else altogether. So here we

then have hi three digits in a row here. Um what else is worth noting here? Well, there's some fun sort of trivia embedded

even in this cheat sheet. So here again is a b cde e fg and so forth 65 on down. Let me just highlight over here the

lowercase letters. 97, 98, 99, and so forth. If I go back and forth, does anyone notice the consistent pattern

between these two? >> Yeah. So, the lowercase letters are 32 away from the uppercase letters. Well,

how do we know that? Well, 97 - 65 is Yeah. 32. Uh 98 - 66 is okay. 32. And that pattern continues. What does this

mean? Well, computers know how to do this. Most normal humans don't need this information. But what it means is if you

are representing in binary with your transistors on and off representing some pattern and this is the pattern

representing capital letter A, which is why we have a one in the 64's place and a one in the one's place. How does a

computer go about lowercasing this same letter? Yeah. >> Perfect. All the computer has to do is

change this one bit in the 32's place to a one because that has the effect mathematically per our discussion of

adding the number 32 to whatever it is. So it turns out you can force text from uppercase to lowerase or back by just

changing a single bit inside of that pattern of eight bits in total. All right, why don't we maybe reinforce this

with another quick exercise? We have an opportunity perhaps here for um maybe to give you some stress balls right at the

very start of class. Could we get eight volunteers to come up on stage? Maybe over here and over here and uh over here

on the left. Let me go all the way on the right. Uh let's see. Okay, the high hand here. The the hand that's highest

there. Yes, we're making eye contact. How about all the way? Wait, let's see. Let's go here in the crimson sweatshirt

here. And how about in the the white shirt here? Come on up. Did I count correctly? Let's see.

Come on down. The eight of you. I didn't count right, did I? 1 2 3 4 5 6. It's ironic that I'm not counting correctly.

Eight here. How about on the left in gray? Okay. Oh, and uh Okay. In black here. Come on down. All right.

Hopefully, this is eight. 1 2 3 4 5 6 7. I pretty. Okay. Eight. There we go. All right. So, let's go ahead and do the

following exercise. I've got some sheets of paper preprinted here. If each of you indeed want to do exactly what you're

doing and line up from left to right, each of you is going to represent a placeholder essentially. So we have over

here the ones place all the way over here. And then we have the two's place and the four's place and the eights.

16 32 64 128. And we come bearing a microphone if each of you want to say a quick hello. your name, maybe your dorm

or house, and something besides computer science that you're studying or want to. >> Hi, I'm loud. Okay. I'm Allison. I'm a

freshman in Matthews and um I like climbing and I'm thinking of CS and econ.

>> Number two. >> Hi, I'm Lily. I'm in Herbut this year and I'm thinking of doing CS in

government. >> Nice to meet. >> Hi. Hi, I'm Sean. I'm in candidate hall

and I'm thinking of doing astrophysics and CS. Welcome. >> Hi, I'm Jordan. I'm doing applied math

with a specialization in CS and econ. And um I'm in Widdlesworth and I like going to the gym.

>> Okay, nice. 16. >> Hi, I'm Shiv. I'm studying Mcki and I'm in Canada G.

>> Nice. >> Hi, I'm Sophia. I'm in the think of doing electrical engineering.

>> Welcome. Hi, my name is Marie and I'm in Canada B and I really like CS physics and astrophysics.

>> Hi, I'm Alyssa. I'm in Hullworthy. I'm also thinking of studying math or physics and I also like to climb.

>> Nice. Welcome to you all. So, on the backs of their sheets of paper, they have a little cheat sheet that's

describing what they should do in each of three rounds. We're going to spell out together a threeletter word. You all

as the audience have a cheat sheet above you that represents numbers to letters. These folks don't necessarily know what

they're spelling. They only know what they individually are spelling. So if your sheet of paper tells you to

represent a zero in a given round, just kind of stand there awkwardly, no hands up. But if you're told on your sheet of

paper to represent a one, just raise a single hand to make obvious to the audience that you're representing a one

and not a zero. And the goal here is to figure out what we are spelling using this system called ASKI. All right,

round one. Execute. What number is this here? I'm hearing. You can just shout it out.

What number? >> 66 or B. So, you're spelling B. All right. Hands down. Round two.

More math. Feel free to shout it out. >> Oh, I heard it. Yeah. 79, which is

>> O. Okay. Okay, so we have B O. Hands down. Third and final round. Execute number

87. >> Yes. 87. Which is the letter? >> W. Which spells?

>> Bow. If you want to take your bow now. >> Ah, okay. Here we go. You guys can keep those.

Okay. Thank. All right. You guys can head back. Thank you to our volunteers here. Very nicely done. We indeed

spelled out bow and that's just because we all standardized on representing information in exactly the same way.

Which is why when you type b on your phone or your computer, the recipient sees the exact same thing. But what's

noteworthy in this discussion is that you can't spell a huge number of words. Like yeah, English, okay, we've got that

covered. But odds are you're noticing depending on your own background, what human languages you read or speak

yourself, um that a whole bunch of symbols might be missing from your keyboard. For instance, we have accented

characters here in a lot of Asian languages. There's so many more glyphs than we could have even fit in that

cheat sheet of numbers and letters. And so ASI is not the only system that the world uses. It was one of the earliest,

but we've moved on in modern times to a superset of ASI that's generally known as Unicode. And Unicode uses so many

more bits than ASI that we even have room for all of these little things that we seem to send constantly nowadays.

These are obviously images that you might send with your phone or your computer, but they're technically

characters. They're technically just patterns of zeros and ones that have similarly been standardized around the

world to look a certain way, but they're this is an emoji keyboard in the sense that you're sending characters. You're

not sending images, per se. The characters are displayed as images obviously, but really these are just

like characters in a different font. And that font happens to be very colorful and graphical as well. So, Unicode

instead of using just seven or eight bits, which if you do the quick mental math, if ASI only used seven or let's

say eight bits, how many possible characters can you represent in ASKI alone?

256. Because if we do that quick mental math, 2 to the 8, 256 possibilities, like that's it. That is that's enough

for English because you can cram all the uppercase letters, the lowercase letters, the numbers, and a whole bunch

of punctuation as well. But it's not enough for certain other punctuation symbols, not to mention many other human

languages. And so the Unicode Consortium, its charge in life has been to come up with a digital representation

of all human language, past, present, and hopefully future by using not just seven or eight bits, but maybe 16 bits

per character, 24 bits, or heck, even 32 bits per character. And per before, if you've got as many as 32 bits available

to you, you can represent what, like 4 billion characters in total. And that's just one of the reasons why these emoji

have kind of exploded in popularity and availability. There's just so many darn patterns. Like, what else are we going

to do with all of these zeros and ones? But more importantly, emoji have been designed to really represent people and

places and things and emotions in a way that transcends human language. But even then, they're somewhat open to

interpretation. In fact, here's a pattern of I think 32 zeros and ones. I'm guessing no one's going to do the

quick mental math here, but this represents what decimal number if we do in fact do out the math with that's

being the ones place all the way over to the left. Well, that's the number 4 bill36,991,16.

Who knows what that is? It's not a and it's nothing near a uppercase or lowerase, but it is among the most

popular emoji that you might send typically on your phone, laptop, or other device. namely this thing here

face with tears of joy which odds are you've sent or received recently but interestingly even though many of you

might have iPhones and see and send the same image you'll notice that if you see a friend who's got Android or some other

device maybe you're using uh Meta's messenger program or Telegram or some other messaging service sometimes these

emoji look a little bit different why because what a unicode has done is they decided there shall exist an emoji known

as excuse me faced with tears of joy then Apple and Google and Microsoft and others they're sort of free to interpret

that as they see fit. So what you see on the screen here is a recent version from iOS Apple's operating system. Google's

version of the same looks a little something like this. And on Telegram, if you have animations enabled, the same

idea faced with tears of joy is actually animated. But it's the same pattern of zeros and ones in each case, but again,

they each essentially have different graphical fonts to present to you what each of those images actually is. All

right, so those are each, excuse me, images. So those are each images. How is the

computer representing them though? At the end of the day, we've represented numbers. We've represented letters. But

how about these things here, colors? So, how do we represent red or green or blue, not to mention every other color

in between? At the end of the day, we only have one canvas at our disposal. Yeah.

So, integers is the exact same answer as before. We just need to agree on what number do we use for red, what do we use

for green, what do we use from blue and we can come up with some standardized pattern for this. In fact, one of the

most common techniques for doing this and the common one of the most common ways to do this in the real world is to

use a combination of three colors together. Some amount of red, some amount of green, and some amount of blue

and mix them together to get most any color of the rainbow that you might want. This is sort of a a picture of

something I grew up with back in the day where in like middle school when we'd watch movies or some kind of show in

like in in class, we would kind of uh the projector screen would be over here. This is a old school projector with

three different lenses, one of which projects some amount of green, some amount of red, some amount of blue. And

so long as the lenses are correctly oriented to all point at the same circle or like rectangular region on the

screen, you would see any number of colors coming to life in the old school video. I still remember all these years

later we would kind of sit and lean up against it because it was super warm and you could heal it easy way to fall

asleep back in grade school. But we use the same fundamental color system nowadays as well including in modern

programs like Photoshop. So let's abstract that away. Focus on just three colors, some amount of red, green, and

blue. And let's suppose for the sake of discussion that we want to mix together like a medium amount of red, a medium

amount of green, and just a little bit of blue. For instance, let's suppose that we'll use 72 amount of red, 72

amount 73 amount of green or or 33 amount of blue, RGB. Now, why these numbers? Well, in the context of ASI or

Unicode, which is just a supererset thereof, what does this spell? >> High. But again, if you were instead to

open a file containing these three numbers, or really these three bytes of bits in Photoshop, you would hope that

they're going to be interpreted not as letters on the screen, but as some m uh the the color of a dot on the screen

instead. So it turns out that in typically when you have a three of these numbers together, each of them is using

a single bite. So eight bits. So you can have zero red or 255 red. 0 green or 255 green or 0 to 255 of blue. So 0 is none,

255 is the max. So if we mix these together, imagine that just like that projector consolidating these three

colors into one central point. Anyone want to guess what you're going to get if you mix some red, some green, some

blue in those amounts in way back? >> Yeah, you're going to get a dark shade of yellow. I've brightened it up a

little bit for the projector here, but you're going to get roughly this shade of yellow. And we could play with these

numbers all day long and get similar results if we want to represent different colors as well. And indeed,

whether it's Photoshop or some other program, you can actually combine these amounts in all sorts of ratios to get

different colors. So if you had 0 0, so no red, no green, no blue, take a guess as to what color that's going to be in

the computer. >> So it's going to be black, like the absence of all three of those colors.

But if you mix the maximum amount of each of those 255 red and green and blue, that's going to give you white.

Now, if any of you have made web pages before or used programs like Photoshop, you might have seen numbers like 00 or

FF. Long story short, that's just another base system for representing numbers between 0 and 255 as well. But

we'll come back to that mid-semester when we make some of our own filters uh in sort of an Instagram-like way,

manipulating images of our own. So, where are these colors coming from or where can we actually see them? Well,

here's just a picture of that same emoji face with tears of joy. If I kind of zoom in on that and maybe zoom in again,

you can start to see if you blow it up enough or if you put your eyes close enough to the device, sometimes you can

actually see individual dots or squares. These are generally known as pixels. And they're just the individual dots that

collectively compose an image. Which is to say that if each of these dots, which is part of the image, is going to be a

distinct color. Like this one's yellow, this one's brown, and then there's a bunch in between. Well, you're using

some number of bits to represent each of those pixels colors. So, if you imagine using the RGB system, that's 8 + 8 + 8

bits. So, that's 24 bits or three bytes just to keep track of the color of each and every one of these dots. So now, if

you think about having downloaded a GIF at some point, a ping, PNG file, um a JPEG or any other file format, it's

usually measured in what file size? like megabytes typically that means millions of bytes. Why? Because if it's a pretty

big photograph or pretty big image, each of those dots takes up at least three bytes it would seem. And if you do out

the math, if you got thousands of dots, each of which uses three bytes, you're going to quickly get to megabytes, if

not even larger for things like say videos. But again, it's just patterns of zeros and ones. And so long as the

programmer knows what they're doing and tells the computer how to interpret those zeros and ones. And equivalently,

so long as the software knows, look at these zeros and ones and interpret them as numbers or letters or colors, we

should see what we intended to represent. All right, so that's num that's uh colors and images. What about

how many of you kind of played with these little flip books as a kid where they've got like a hundred different

little pictures and you flip through them really quickly and you see what looks like animation in book form. Well,

this is essentially a video. So therefore, what is a video or how can you think of what a video is? It's just

a whole bunch of like images flying across the screen either on paper or digitally nowadays on your phone or your

laptop. And that's kind of nice because we're sort of composing more interesting media now based on these lower level

building blocks. And this is going to be thematic. We literally started with zeros and ones. We worked our way up to

letters. We then worked our way up to sort of images and uh colors and thus images. Now we're up at this level of

hierarchy in terms of video because what's a video? It's like 30 images per second flying across the screen or maybe

slightly fewer than that. That collectively tricks our mind into thinking we are seeing motion pictures.

And that's the old school term for movies, but it literally is what it was. motion pictures was this film was

showing you 30 pictures per second and it looks like motion even though you're just looking at images much like this

flip book very quickly one after the other. What about music? Well, how could you go about representing musical notes

if again your only ingredients are zeros and ones? Even if you're not a musician, how do you represent music like that on

the screen here? Yeah. Okay. So, the frequency like the tone that you're actually hearing from the device. What

else might weigh in beside besides the frequency of the note? Yeah. >> So the speed of the note or maybe the

duration like if you think about a physical piano like how long you're holding the key down for or not. What

else? So the amplitude maybe how loud like how hard did you hit the keyboard to generate that sound. So let me

propose at the risk of simplifying we could represent each of these notes using three numbers. maybe 0 to 255 or

some other range that represents the frequency or the pitch of the note, the duration, and the loudness. And so long

as the person receiving a file containing all of those zeros and ones knows how to interpret them three at a

time, I bet you could share uh a musical file with someone else that they could hear in exactly the same way that you

yourself intended. Let me pause here to see if there's any questions now because we've already built our way up from

zeros and ones now to video and sound. >> Yeah, in front. >> How does the computer know differentiate

between what the letter like 65 would be and then what the number 65? >> So, how does the computer distinguish

between the letter 65 and the number 65? It's context dependent. So put simply and we'll see this as early as next week

the programmer tells the computer how to display the information either as a number or a letter or equivalently once

programmed the software knows that when it opens a GIF file or JPEG or something else to interpret those zeros and ones

as colors instead of as like docx for a Microsoft Word file or the like. Other questions on any of these

representations? Yeah. In front. >> Can we go over like the base 10 base 2

thing like really briefly? >> Sure. So, can we go over base 10 and base two? So, base 10 is like literally

the numbers you and I use every day. It's base 10 in the sense that you have 10 digits at your disposal. 0 through 9.

And any numbers you want to represent in the real world must be composed using 0 through 9. The binary system or base 2

is fundamentally the same. It's just the computer doesn't have access to 2 through 9. It only has access to zero

and one. But much like the light bulbs I was displaying here, you can simply ascribe different weights to each of the

digits. So that instead of it being as much as the ones place, the t's place, and the hundred's place, if we more

modestly say the ones place, the two's place, the four's place, we can use the same system. In binary, you might need

to use more digits to count as high. Because in 255, you can just write 255. That's three digits in decimal. But in

binary, we've seen you need to use eight such digits, which is more, but it's still much better than unary, which

would have had 255 light bulbs on instead. >> And is

binary and like the same thing. >> Is binary and base 2 the same thing? Yes. Just like base 10 and decimal are

the same thing as well. And unary and base 1 are the same thing as well. All right. So let me just stipulate that

even though we sort of took this tour quickly at the end of the day computers only have zeros and ones at their

disposal. So again the answer to any question as to how can we represent X is going to somehow involve permuting those

zeros and ones into patterns or equivalently into the numbers that they represent. But if we now have a way to

represent all inputs in the world be it letters, numbers, images, videos, anything else and get output from some

problem-solving process like how do we actually solve problems? Well, the secret sauce in the middle here is

another term that you've probably heard in the real world nowadays, which is that of algorithm. Stepbystep

instructions for solving some problem. So, this ultimately is what computer science really is about too, is not just

representing information, but somehow processing it, doing something interesting with it to actually solve

the problem that you've been provided as input so you can output the correct answer. Now, there's all sorts of

algorithms implemented in our phones and in our Macs and PCs, and that's all software is. It's an implementation in

code, be it C++ or Java or anything else. Other languages exist too in code that the computer understands, but it's

still just step-by-step instructions. And among the things we'll learn in CS50 is how to express yourself in different

ways to solve problems, not only in different languages, but using different methodologies as well. Because as we'll

see, among the reasons we introduce these several languages is you don't just learn more and more languages that

allow you to solve the same problems. different languages will allow you to solve different problems and even save

you time by being better tools for the job. So here for instance on uh an iPhone is maybe a bunch of contacts

which is presumably familiar where we might have a whole bunch of friends and family and whatnot alphabetized by first

name or last name and suppose we want to find one such person like John Harvard whose number here might be plus1

949-468-2750 feel free to call or text him sometime. Um this is the goal of this problem. If

we have our contacts app and I start typing in John's name by first name or last name, the autocomplete nowadays

kicks in and it somehow filters the list down from my 10 friends or 100 friends or a thousand friends into just the

single directory entry that matches. So here too, back in the days of RG&B um projector, we had uh phone books like

this here too. Um I'm pleased to say thanks to our friend Alexis, this is the largest phone book that we've used for

this demonstration. Uh, this is an old school phone book that's essentially the same thing as our contacts app or

address book nowadays whereby I've got a whole bunch of names and numbers alphabetically sorted by first name or

last name, whatever, and corresponding to each of those as a number. So, back in the day and frankly even nowadays in

your phones, how do you go about finding someone in a phone book or your contacts app? Well, you could very naively just

start at the beginning and look down and just turn one page at a time looking for John Harvard in this case. Now, so long

as I'm paying attention, this step-by-step process will get me to John Harvard. Like, this is a correct

algorithm, even though you might kind of object to how I'm doing this. Why? Like, what's bad about this algorithm?

>> It's just slow. I mean, this is crazy slow. If there's like a thousand pages in this phone book, which looks like

there are, like this could take me as many as a thousand pages, or maybe he's roughly in the middle, like 500 pages.

Like, that's crazy. That's really rather slow, especially if I'm going to do this again and again. Well, what if I do it a

little smarter? Grade school, I sort of learned how to count two at a time. So, 2 4 6 8 10 12 14 16 18. Again, if I'm

paying attention, I'll get there twice as fast because I'm counting two at a time. But is that algorithm step by step

correct? And I'm seeing no, but why? >> I might skip over John Harvard. So, just

by bad luck and kind of with 50/50 probability, he's going to be sandwiched between two of the pages. Now, I don't

have to abort this algorithm alto together. I could just as soon as I get past the J section if we're doing it by

first name. I could just double back one page and just make sure that I haven't missed him. So, it's recoverable. And

this algorithm therefore is sort of twice as fast plus one extra step maybe to double back. But that's arguably

otherwise a bug or mistake in the algorithm if I don't fix it intelligently. But what did we do back

in the day? And what does your iPhone or Android phone do? What they typically do is they go roughly to the middle, look

physically or virtually down. They see, oh, I'm in the M section. And so, which side is John Harbor to? To the left or

to the right? So, he's to the left. So, I could literally now Jesus Christ.

We talked about this before class that this might be more Oh my god. There we go. We can tear the problem in half.

Thank you. It's been a while. We can tear the problem in half. We know that John

Harvard is to the left. So, I can throw half of the problem away if uh dramatically such that I've now gone

from a thousandpage problem to 500 pages instead. What now can I do? I can go roughly to the middle here and maybe I'm

in the E section. So, I went a little too far back to the left, but I kept it simple and I just divided so that I can

conquer this problem, if you will. And if I'm in the E section now, is John Harvard to the left or to the right? To

the right. So I can again Jesus Christ. Tear the problem in half. And now, thank you. So now John Harvard again is going

to be in this half. I can throw this half away. So now I've gone from a,000 to 500 to 250. And I can repeat, repeat,

repeat down to 125. Half of that, half of that, half of that until I'm left with finally just a single page. And

John Harvard is hopefully now on this page such that I can call him or not at all at which point this is all sort of

for not. But what's powerful about each of those algorithms is that there sort of good better and best like they all

get the job done conditional on the second one having that little fix just to make sure I don't miss John Harbor

between two pages but they're fundamentally different in their efficiency and the quality of their

design. And this is really representative of one of the emphases of a class like this. It's not just about

writing correct code or getting the job done, but doing it well and doing it quickly. Using the least amount of CPU

or computing resources, using the minimal amount of RAM, using the fewest number of people, using the least amount