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

All right, this is.

OK. This is CS 50, Harvard University's introduction to the intellectual Enterprises of

Computer Science and the arts of programming. My name is David Malan, and this is week er,

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 insofar 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 the industry for years, humans have been programming in some form for decades,

building products and solutions to problems. The 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,

CS 50, 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, 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. 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.

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 6th process of that,

I sort of realized, OK, 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 copilot, 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 bold facing and underlining and things like that that you'd find in word processing programs.

And this is CS 50'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 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 Claw.

Like, let's make our own in some sense. So I'm going to code up a program called chat.ie,

and you might be familiar that I, I'm using a language here.ie 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.

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. I'm going to go ahead and type the following

from OpenAI, import OpenAI. 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.pos.create, whatever all that means, and then Inside of these parentheses,

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 CS 50? Much like I would ask Chachi PT itself.

If you're familiar with things like Chat GPT and AI more generally nowadays, you know, there's this thing called models which are like statistical

models that ultimately drive what the AI's can do. I'm gonna go ahead and say model equals quote unquote GPT 5, 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.ie and so long as I have made no typographical errors in this program,

I should be able to ask OpenAI, not with Chat GPT.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.

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 hard coded,

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

CS 50 is Harvard University's introductory computer science course, the intellectual enterprises of Computer Science and the Art of programming. Weirdly familiar,

covering problem solving algorithms, data structures, and more using languages like CPython and SQL.

OK, 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 some.

Like this type prompt equals input with parentheses.

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 insofar as line 5 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. 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.ie, hit enter,

cross my fingers, I'll see now dynamic

prompting. So what's the question I might want to ask? Well,

let's just say it again in one sentence, whoops, in one sentence,

what is CS 50 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.pi and let's say in one word what is CS 50 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 Question mark.

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

Depends. OK, 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 why 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 gonna. Now temporarily renamed 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 going to 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.ie once more, and this time we'll be prompted, but now I can just ask what is CS 50 question.

And I'll likely get a correct and similar

answer to before. And indeed it's Harvard University's flagship introductory computer science course.

So it 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.ie prompt again will be say what is CS 50 and with a final flourish of hitting enter.

What do we get back? CS 50 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 coerce 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 the same primitives that CS 50 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 problems, 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 where 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 CS 50,

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, 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 of syllabus, it is not reasonable.

Not allowed to use AI-based software other than CS 50's own, be it Claw, Gemini,

Chachi PT, 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 CS 50'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 CS.

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 end game 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 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 germane 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 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 12345, and if you want to count to 6 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 12345 seems to be the five possible patterns, but that's only when you're looking at the totality of fingers

that are actually up 5 in total or 4 in total, or 1 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 0. And if we want to count to 1, let's go with the obvious.

This is now 1. But instead of 2 being this, which was my first instinct,

maybe 2 can just be this a single second finger up like this,

and that means we could now use 2 fingers up to represent 3. I propose we can use just one middle finger up to offend everyone but represent 4. I could maybe use these two fingers with some difficulty to represent 567.

I'm already up to 7 having used only 3 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. 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. 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 0 or a 1.

A 0 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 a light bulb is off, that thing represents a zero,

and when the light bulb. Was on that thing's going to represent a 1 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. 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 housing 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 0, well,

it stands to reason that here single light bulb that is off can be agreed upon as representing 0. 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 have.

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 0. Unfortunately, even though I can let some

electricity, here's the battery I mentioned is required, even though we might have some electricity available to us,

I can therefore count to 1. 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 can put it next to it,

and this too I'll claim is just still the number one. But if I want to turn 2 of them on, well,

that would mean I could count to 2. And if I maybe grab another one now I can count as high as 3, but wait a minute,

I'm doing something wrong because with 3 human fingers, how high was they able to count.

So 7 in total starting at 0. 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 1, but just like my finger went up and only one finger in the second version of this,

this can be what we represent as 2. Which one do I want to turn on as 3,

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 3 like this. If we want to represent 4, that's fine.

We have to turn that off, this off, and this on,

and that's somehow 4 and let's go all the way up to 7. Which ones need to be on to represent the number 7?

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? 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. 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 2 by implying 2, so 0 and 1. And unary we had just 1,

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 123,

but most of us, your mind immediately goes, OK,

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 ten's place and this is the 100s place and so forth. And the reason that this pattern of symbols 123 is 123 is that we're all doing some quick mental math and.

I, well, that's 100 times 1 plus 10 times 2 plus 1 times 30,

OK, there's how we get 100 plus 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 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, 1000, 10,000,

and so forth, what's the pattern? Well,

technically this is 100, 10 to 1, 10 to 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 and 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 2, and what does this get us? Well,

if we now do undo the math, that's 2 to 0. 121 is 222 is 4.

So the 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 000, it's 0 because it's 4 times 0 + 2 times 0 + 1 times 0 still gives me 0.

By contrast, If I turn on maybe just this one all the way over on the left, well,

that's 4 times 1 because on represents 1 and off represents 0, plus 2 times 0 plus 1 times 0,

that gives me 4. And if I turn both of these on such that all three of them are now on,

on, on, on,

AKA 111, that's 4 times 1 plus 2 times 1 plus 1 times 1. That then gives me 7,

and we can keep adding more and more bits to this. In fact, if we go all the way up

numerically, here's how we would represent in binary the number you and I know as 0. Here's how we would represent

1. Here's how we would represent 2 and 3

and 4 and 5, and you can kind of see in your mind's eyes. Now because I only have zeros and

ones and no 2s or threes, not to mention nines, I'm essentially going to be carrying a 1 in a moment if we were to be doing some math.

So to go from 5 to 6, that's why the 1 ends up in the middle column to go to 7 here gives us now 111 or on on

on, how do I represent 8? Using ones and zeros,

yeah, 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 8. 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 01234567.

And then accidentally end up back at 0 because if there's no room to store the 4th 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.

It 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 2 bits,

3 bits, 4 bits aren't very useful in the real world because even with 3 bits you can count to 7, with 4 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 8 bits at a time. A byte is just that.

1 byte is 8 bits. So if you've ever used the vernacular of kilobytes, megabytes,

gigabytes, that's just referring to some number of bits, but

8 of them together compose one individual byte. So here for instance is a byte worth of bits,

8 of them total. I've added all the additional placeholders, and what number does this represent in decimal

even though you're looking at 8 binary digits. It's just 0, because like literally every column is a 0.

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 8 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 0 and you go all the way up to 255. OK, that's 256 total possibilities.

Once you include 0 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 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, 8 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? 1/9 bit,

a 10th bit, 11th bit and so forth and it turns out common conventions nowadays, and we'll see this in code 2 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 if you've got 32 bits available to you. Oh,

fewer people now, yeah, in the back.

Yeah, so it's roughly 4 billion, and it's technically 2 billion if you also want to represent negative numbers,

but we'll revisit that question, but 2 to 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 offhand how to pronounce it. That's a lot of permutations that. 2 to 64 possible permutations,

but that's increasingly commonplace. 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.

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, it turns out a bunch of humans in a room years ago decided that 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 1 in the 604s place and a 1 in the one's place. So 65,

that's just sort of it. It would have been nice if it were just the number 1 or maybe the number 0, 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.

C, it's going to be 67 Y because. The humans in this room,

a bunch of Americans at the time, standardized on what's called ASCI, 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 7 bits' worth, but eventually we ended up using 8 bits in total to represent letters,

and some of these are fairly cryptic, maybe more on those other 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 3 bytes, so 3 sets of 8 bits,

and even though there's no placeholders now over the columns, what is this? Number

It's 60. Yeah, so we've got the 1s,

2s, 4s, 8s,

1632, 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. Of 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 3 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 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 3 bytes of information somehow over the internet to that recipient and because their phone similarly understands ASCI

because it was programmed years ago to do so, it knows to show you HI exclamation point and not a number, 3 numbers no less,

or colors or something else altogether. So here we then have high, 3 digits in a row here.

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,

C, D, E,

F, G, 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 minus 65 is, yeah,

32. 98 minus 66 is OK, 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 1 in the 604 space and a 1 in the ones place,

how does a computer go about lower casing this same letter? Yeah. Perfect.

All the computer has to do is change this one bit in the 32's place to a 1, 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 upper case to lower case or back by just changing a single bit. Inside of that pattern

of 8 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 8 volunteers to come up

on stage, maybe over here and over here and over here on the left.

Let me go all the way on the right. Uh, let's see.

OK, the high hand here, the,

the hand that's highest there, yes, we're making eye contact.

How about all the way, what, 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 say Come on down.

The 8 of you. I, I didn't count right,

did I? 123456. It's ironic that I'm not counting correctly here.

How about on the left in gray? OK. Oh,

OK, in black here. Come on down.

All right, hopefully this is 81234567. 7.

I'm pretty sure. OK, 8,

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 choose place. And the 4th 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 out. OK.

I'm Alison. I'm a freshman in Mathews, and,

um, I like climbing and I'm thinking of CS and Econ. 2.

Hi, I'm Lily. I'm in Hurlbut this year and I'm thinking of doing CS in government.

Nice to meet you. 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 Widsworth,

and I like going to the gym. 16. Hi,

I'm Shiv. I'm studying Mac and I'm in Canada. Nice.

Hi, I'm Sophia. I'm in Thayer and I'm thinking 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 Holworthy. 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 3 rounds. We're going to spell out together a three letter word.

You all as the audience have a cheat sheet above you that represents numbers, 2 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 1, just raise a single hand to make obvious to the

audience that you're representing a 1 and not a zero. And the goal here is to figure out what we are spelling using this system called ASCI.

All right, round 1, 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 2. More math. Feel free to shout it out

Oh, I heard it, yeah,

79, which is, oh,

OK, so we have BO. Hands down,

3rd and final round, execute. Number

Yes, 87, which is the letter?

W, which spells? Bow,

if you want to take your bow now. Ah, OK,

here we go. You guys can keep those. OK,

thank you. All right, you guys see that 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 BOW 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, OK,

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

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

ASCI 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 super set of AI that's generally.

Known as Unicode, and Unicode uses so many more bits than AI 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 7 or 8 bits, which if you do the quick mental math,

if Asky only used 7 or let's say 8 bits, how many possible characters can you represent in Asky alone? 256 because if we do that quick mental math,

28, 256 possibilities like that's it. That is,

that's enough for English because you can cram all the uppercase letters, the lower case 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 7 or 8 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. 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.

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 billion, 36,

991,106. Who knows what that is? It's not a,

and it's nothing near A upper case or lower case, 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. 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 for 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 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 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 and like in in class,

we would kind of uh the projector screen would be over here. This is an old school projector with 3 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

feel it it's an easy way to fall asleep but 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 propose 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 propose

that we'll use 72 amount of red, 23 amount of green, or 33 amount of blue RGB.

Now why these numbers? Well, in the context of ASCI or Unicode,

which is just a superset thereof, what is this spell? Hi,

but again, if you were instead to open a file containing these 3 numbers or really these 3 bytes of bits

in Photoshop, you would hope that they're going to be interpreted not as letters on the screen, but as some the color of a dot on the screen instead.

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

so 8 bits. So you can have 0 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 just like that projector consolidating these three colors into one central point. Anyone want to guess what you're gonna get if you mix some red,

some green, some blue in those amounts and 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 it 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 000, 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 gonna be black,

like the absence of all three of those colors, but if you mix the maximal amount of each of those 255 red and green and blue, that's gonna give you white.

Now if any of you have made web pages before or use 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 mint 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 faced 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 in

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 3 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, 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 3 bytes, it would seem.

And if you do out the math, if you've got thousands of dots, each of which uses 3 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 100 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 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. OK,

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 notes? Yeah. So the speed of the note,

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 may be 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 3 numbers, maybe 0 to 255 or some other range that

represents the frequency or the pitch of the note. 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 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. What the letter like 65 would be and then the number 5.

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 dot GIF file or jpayEG or something else to interpret those zeros and ones as colors instead of as like. DOCX for Microsoft Word file

or the like. Other questions. On any of these representations,

yeah, in front like the 1 thing like really briefly. Sure,

so can we go on base 10 and base 2? 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. doesn't have access to 2

through 9. It only has access to 0 and 1. 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 one's place, the tens place,

and the hundreds place, if we more modestly say the one's place, the two's place,

the four's place, we can. 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 3 digits in decimal.

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

which would have had 255 light bulbs on. Instead. And they like.

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 is 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. step by step instructions for solving some problem. So this ultimately is what computer science really is about too.

It's 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 CS 50 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 introduced these several languages is

you don't just learn more and more languages. They 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 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 + 1 94946. 82,750.

Feel free to call or text him sometime. 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 or 100 friends or 1000 friends into just the single directory entry that matches.

So here too, back in the days of RG&B. Projectors we had phone books like this here too.

I'm pleased to say thanks to our friend Alexis, this is the largest phone book that we've used for this demonstration. 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 phone. 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,

what's bad about this algorithm? It's just slow. I mean this is crazy slow.