Download Subtitles for CS50x 2026 Lecture 0 - Scratch Video

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

of money, whatever your constrained

resource is, solving a problem better.

So that first algorithm step-by-step

instructions was all about doing

something like this whereby the first

algorithm if we plot things on a grid

like this we have on the x-axis a

representation of the size of the

problem. So this would mean small

problem like zero pages. This would mean

big problem like a thousand pages. And

on the y or vertical axis we have some

measurement of time. So this is the

number of seconds or the number of page

turns whatever your metric actually is.

So this would be uh not much time at

all, so fast. This would be a lot of

time, so slow. So what's the

relationship if we just roughly draw

these three algorithms? Well, the first

one is technically a straight line. And

we'll describe that as n. The slope is n

because if you think of n as a number

for the number of pages, well, there's a

one toone relationship in the first

algorithm as to how many times I have to

turn the page based on how many pages

there actually is. And you can think

about this in the extreme. If I was

looking for someone whose name started

with Z, I might have to go through like

a thousand darn pages to get to that

person whose name started with Z, unless

again I do something hackish and just

kind of cheat and go to the end. If we

execute these algorithms again and again

the same way, that's going to be pretty

slow. But the second algorithm was

pretty much twice as fast plus that one

extra step potentially. But it's still a

straight line because if there's a

thousand pages and I'm dividing the

problem and I'm doing two pages at a

time, well that's like n divided by two

steps plus one give or take. But it's

still a straight line because but it's

still better. Notice if this is the size

of the problem, a thousand pages for

instance, we'll notice that the first

algorithm took literally twice as much

time as the second algorithm. So we're

doing better already. But the third

algorithm fundamentally is going to look

something like this. And if you remember

your logarithm so to speak, sort of the

opposite of an exponential. This curve

is so much lower and flatter if you will

than either of these two mathematically.

More on this another time. The slope is

going to be like log base 2 of n or just

logarithmic in nature. But what it means

is that it's growing very very very

slowly. It's still going up. It's never

going to flatline and go perfectly

horizontal, but it goes up very slowly.

Why? Well, if you think about two towns

nearby, like Cambridge on this side of

the river and the town of Alustin on the

other. Suppose that they still have

phone books like this one, and they

merge their phone books for whatever

reason. So, overnight, we go from a

thousandpage phone book to a 2,000page

phone book. The first algorithm is going

to take literally twice as long as will

the second one because we're only going

through it one or two pages at a time.

But if the phone book size doubles from

this year, for instance, to next year,

you can kind of in your mind's eye think

about the green line. It's not going to

go up that much higher. Why? Well,

practically speaking, even if the phone

book becomes 2,000 pages long. Well, how

many more times do you have to tear or

divide that problem in half?

>> Just one. Because you're taking a,000

page bite out of it, or a 500 than a

250. taking much bigger bites out of it

than just one or two at a time. And so

what computer science and what

algorithms and about good design is

about is figuring out what is the logic

via which you can solve problems not

only correctly but efficiently as well.

And that then gives us these things

called algorithms. And when it comes

time to code, which we're about to do

too, code is just an implementation and

a language the computer understands of

an algorithm. Now this assumes that

we've come up with some digital way that

is to say zero in onebased way to

represent names and numbers. But

honestly we already did that. We came up

with a asky and then unicode to

represent the names. Representing

numbers is even easier than that. That's

really where we started. So code is just

about taking as input some standardized

representation of names and numbers and

spitting out answers. And that's truly

what iOS and Android are doing. When you

start doing autocomplete, they could be

searching from the top to the bottom,

which is fine if you've only got a few

friends and family in the phone. But if

you've got a thousand or if you've got

10,000 or if it's not a phone book

anymore, it's some database with lots

and lots of data. Well, it stands to

reason that it'd be nice maybe if the

computer kept it all alphabetized just

like that book and jumped to the middle,

then the middle of the middle, then the

middle of the middle of the middle, and

so forth. Why? because the speed is

going to be much much faster,

logarithmic in nature and not linear so

to speak in nature. But we'll revisit

those topics as well. But for now,

before we get into actual code, let's

talk for a moment about pseudo code. So

pseudo code is not one formal thing.

Every human will come up with their own

way of representing pseudo code. It's an

English-like or humanlike formulation of

step-by-step instructions just using tur

correct English or whatever human

language. So, for instance, if I want to

translate what I did somewhat

intuitively with that phone book by just

dividing in half, dividing in half into

step-by-step instructions, I could hand

you or now it is like a robot or

something like that. Well, step one was

essentially to pick up the phone book,

which I did. Step two was I open to the

middle of the phone book in the third

and final algorithm. Step three was look

at the page as I did. Step four got a

little more interesting. Even though I

didn't verbalize this, presumably I was

asking myself a question. If the person

I'm looking for, John Harbert, is on the

page, then I would have called him right

then. But if he weren't on the page, if

he instead were earlier in the book, as

did happen, well, then I'm going to go

to the left, so to speak, but more

methodically, I'm going to open to the

middle of the left half of the book.

Then I'm going to go back to line three.

That's interesting. We'll come back to

that in a moment. But else if the person

is later in the book, well, I'm going to

open to the middle of the right half of

the book. and then go back to line

three. Now, let's pause here. Why do I

keep going back to line three? This

would seem to get me doing the same

thing forever endlessly,

but not quite. Why?

>> As soon as you hit the one, the

condition on line.

>> Yeah. So, because I am dividing the

problem in half, for instance, on line

six or line N implicitly, just based on

how I've written this, the problem's

getting smaller and smaller and smaller.

So, it's fine if I keep doing the same

logic again and again because if the

problem's getting smaller, eventually

it's going to bottom out and I'm going

to have just one person on that page

that I want to call and so the algorithm

is done. But there is a perverse corner

case, if you will. And this is where

it's ever more important to be precise

when writing code and anticipate what

could go wrong. I should probably ask

one more question in this code, not just

these three. What might that question

be?

Yeah.

>> If John Harvard is in the book.

>> Yeah. So, if John Harvard is not in the

book, there's this corner case where

what if I'm just wasting my time

entirely and I get to the end of the

phone book and John Harvard's not there.

What should the computer do? Well, as an

aside, if you've ever been using your

Mac or PC or phone and the thing just

freezes or like the stupid little beach

ball starts spinning or something like

that and you're like, "What is going

on?" Some human at Google or Microsoft

or Apple or the like made a mistake.

they forgot for instance that fourth

uncommon but possible situation wherein

if they don't tell the computer how to

handle it the computer's effectively

going to freak out and do something

undefined like just hang or reboot or do

something else. So we do want to add

this else quit altogether. So you have

welldefined behavior and truly think

that the next time your computer or

phone spontaneously reboots or dies or

does something wrong, it's probably not

your fault per se. It's some other human

elsewhere did not write correct code.

They didn't anticipate cases like these.

But now let's use some terminology here.

There's some salient ideas that we're

going to see in Scratch and C and Python

and these other languages I alluded to

earlier. Everything I've just

highlighted here henceforth we're going

to think of as functions. Functions are

verbs or actions that really get some

small piece of work done for you.

Functions are verbs or actions. Here

though highlighted is the beginning of

what we'll call conditionals.

Conditional is like a fork in the road.

Do I go this way? Do I go this way or

some other way altogether? How do you

decide what road to go down? We're going

to call these questions you ask yourself

boolean expressions. Named after a

mathematician Bull. And a boolean

expression is just a question that has a

yes or no answer or a true or false

answer or a one or zero answer just it's

a binary state yes or no typically.

Otherwise we have this go back to go

back to which is what we're generally

going to call a loop which somehow

induces cyclical behavior again and

again. And those functions and those

conditionals, boolean expressions, and

loops and a few other concepts are

pretty much what will underly all of the

code that we write, whether it is in

Scratch, C, or something else

altogether. But we need to get to that

point. And in fact, let's go and infer

what this program here does. At the end

of the day, computers only understand

zeros and ones. So I claim here is a

program of zeros and ones. What does it

do?

Anyone

want to guess? I mean, we could spend

all day converting all of these zeros

and ones to numbers, but they're not

going to be numbers if it's code. What

do you think?

>> That's amazing. It does in fact print

hello world.

All right. So, no one except like maybe

you and me and a few others in the room

should know, and that was probably guess

admittedly or advancing on the slide.

But why is that? Well, it turns out that

not only do computers standardize

information, data like numbers and

letters and colors and other things,

they also standardize instructions. And

so, if you've heard of companies like

Intel or AMD or Nvidia or others, among

the things they do is they decide as a

company what pattern of zeros and ones

shall represent what functionality. And

it's very low-level functionality. those

companies and others decide that some

pattern of zeros and ones means add two

numbers together or subtract or

multiply. Another pattern might mean

load information from the computer's

hard drive into memory. Another might

mean store it somewhere else. Another

might mean print something out to the

screen. So nested somewhere in here and

admittedly I have no idea which pattern

off because it's not interesting enough

to go figure it out at this level says

print. And somewhere in there, like this

gentleman proposed, I bet we could find

the representation of H, which was 72

and E and L and L and O and everything

that composes hello world. Because, as

it turns out in programming circles, the

very first program that students

typically write is that of hello world.

Now, this one here is written in a much

more intelligible way. Even if you're

not a programmer, odds are if I asked

you, what does this program do? you

would have said,

"Oh, hello world." Even though there's a

lot of clutter here, like no idea what

this is until next week. Int main void.

That looks cryptic. There's these weird

curly braces, which we rarely use in the

real world, but at least I understand a

few words like hello in world. And this

is kind of familiar. Print f, but it's

not print, but it's probably the same

thing. So, here too is an example of

this hierarchy. Back in the day, in the

earliest days of computers, humans were

writing code by representing zeros and

ones. If you've ever heard your parents

talk about punch cards or the like,

you're effectively representing patterns

that tell the computer what to do or

what to represent, like literally holes

in paper. Well, pretty quickly early on,

this got really tedious, only writing

code at such a low level. So, someone

decided, you know what, I'm going to put

in the effort. I'm going to figure out

what patterns of zeros and ones I can

put together so as to be able to convert

something more user friendly to those

zeros and ones. And as a teaser for next

week, that person invented the first

compiler. A compiler is just a program

that translates one language to another.

And more modernly, this is a language

called C, which we'll spend a few weeks

on together because it's so fundamental

to how the computer works. Even this is

going to get tedious by like week six of

the class. And this is going to get

stupid. This is going to get annoying.

This is going to get cryptic. We're just

going to write print hello on the screen

in order to use a different language

called Python. Why? because someone

wrote in C a program that can convert

Python, this is a white lie, to C which

can then be converted to zeros and ones

and so forth. So in computing there's

this principle of abstraction where we

start with the basics and thank god we

can all trust that someone else solved

these really hard problems or way uh

long ago. Then they wrote programs to

make it easier. We wrote programs to

make it easier. You can now write code

like I did with the chatbot to make

things even easier. Why? because OpenAI

and other companies have abstracted away

a lot of the lower level implementation

details. And that's where I think this

stuff gets really exciting. We can stand

on the shoulders of others so long as we

know how to use and assemble these kinds

of building blocks. And speaking of

building blocks, let's start here. Now,

odds are some of you might have started

here in like grade school playing with

Scratch. And it's great for like after

school programs learning how to program.

And you probably used it this language

to make games and graphics and just

maybe playful art or the like. But in

Scratch, which is a graphical

programming language designed about 20

years ago from our friends down the road

at MIT's Media Lab, it represents pretty

much everything we're going to be doing

fundamentally over the next several

weeks in more modern languages like C

and Python, more textual languages, if

you will. I bet I could ask the group

here, what does this program do when you

click a green flag? Well, it says hello

world on the screen. Because with

Scratch, you have the ability to express

yourself with functions and loops and

conditionals and all of this, but by

using drag and drop puzzle pieces. So,

what we're about to do is this. We're

going to go on my screen to

scratch.mmit.edu.

It's a browser-based programming

environment and we're only going to

spend one week or really a few days in

CS50 on this language, but the

overarching goal is to one make sure

everyone's comfortable applying some of

these building blocks and actually

developing something that's interesting

and visual and audio as well, but to

also give us some visuals that we can

rely on and fall back on when all of

those curly braces and parentheses and

sort of stupid syntax comes back. that's

necessary in many languages, but can

very quickly become a distraction early

on from the interesting and useful

ideas. So, what we're about to see is

this in a browser. This is the Scratch

programming environment, and there's a

few different parts of this world. This

is the blocks pallet, so to speak. Uh

that is to say, there's a bunch of

puzzle pieces or building blocks that

represent functions and conditionals and

v and uh loops and other such

constructs. There's going to be the

programming area here where you can

actually write your code by dragging and

dropping these puzzle pieces. There's a

whole world of sprites here. By default,

Scratch is uh and is a cat by design,

but you can make Scratch look like a

dog, a bird, a garbage can, or anything

else as we'll soon see. And then this is

the world in which Scratch itself lives.

So Scratch can go up, down, left, right,

and generally be animated within that

world. For the curious, kind of like

high school geometry class, there's sort

of this XY plane here. So 0 0 would be

in the middle. 0 180 is here. 0 comma

180 is here. Uh -240 is here. And

positive 240 here. Generally you don't

need to worry about the numbers but they

exist. So that when you say up or down,

you can actually tell the program go up

one pixel or 10 pixels or 100 pixels so

that you have some definition of what

this world actually is. All right. So

let's actually put this to the test. Let

me go ahead here and flip over to in

just a moment the actual Scratch website

whereby I'm going to have on my screen

in just a moment that same user

interface once I've logged in that via

which I can actually write some code of

my own. Let me go ahead and zoom in on

the screen a little bit here and let's

make the simplest of these programs

first. Maybe a program that simply says

hello world. Now at a glance it's kind

of overwhelming how many puzzle pieces

there are. And honestly, even over 20

years, I've never used them all. And MIT

occasionally adds to it. But the point

is that they're colorcoded to resemble

the type of functionality that they

offer. And also, it's meant to be the

sort of thing where you can just kind of

scroll through and get a visual sense of

like what you could do and then figure

out how you might assemble these puzzle

pieces together. So, I'm going to go

under this yellow or orangish category

here to begin with. So there exists in

the world of Scratch, not quite the same

jargon that I'm using now, functions and

conditionals and loops. That's more of

the programmer's way. This is more of

the child-friendly way, but it's really

the same idea. Under events, you have

puzzle pieces that represent things that

can happen while the world is running.

So for instance, the first one here is

sort of the canonical when the green

flag is clicked. Why is that relevant?

Well, in the two-dimensional world that

Scratch lives in, there's a stop sign,

which means stop, and there's a green

flag, which means go. So, I can

therefore drag one of these puzzle

pieces over here, so that when I click

that green flag, the cat will in fact do

something for me. Doesn't really matter

where I drop it, so long as it's

somewhere in the middle here. I'm going

to go ahead and let go. Now, I want the

look of the cat to change. I want to see

like a cartoon speech bubble come out

for now. So, I'm going to go under looks

here, and there's a bunch of different

ways to say things and think things. I'm

going to keep it simple and just drag

this one here. And now notice when I get

close enough to that first puzzle piece,

they're sort of magnetic and they want

to snap together. So I can just let go

and boom, because they're a similar

shape, they will lock together

automatically. And notice too, if I zoom

in here, the white oval, which by

default says hello, is actually editable

by me because it turns out that some

functions can take arguments or more

generally inputs that influence their

behavior. So, if I kind of click or

double click on this, I can change it to

the more canonical hello world or hello

David or hello whatever I want the

message to be. I'm going to go ahead and

zoom out. And now over here at top

right, notice that I can very simply

click the green flag. And I'll have

written my first program in Scratch. I

clicked the green flag, it said go. And

now notice it's sort of stuck on that

because I never said stop saying go. But

that's where I can click the red stop

sign and sort of get the cat back to

where I want it. So think about for just

a moment what it is we just did. So at

the one hand we have a very obvious

puzzle piece that says say and it said

something but it really is a function

and that function does take an input

represented by the white oval here

otherwise known as an argument or a

parameter. But what this really is is

just an input to the function. And so we

can map even this simple simple scratch

program onto our model of problem

solving before with an addition of what

we'll call moving forward a side effect.

A side effect in a computer program is

often something that happens visually on

the screen or maybe audibly out of a

speaker. It's something that just kind

of happens as a result of you using a

function like a speech bubble appearing

on the screen. So here more generally is

what we claimed it represents the

solving of a problem. And let's just

consider what the input is. The input to

this problem say something on the screen

is this white oval here that I typed in

hello world. The algorithm, the

step-by-step instructions are not

something really I wrote like our

friends at MIT implemented that purple

say block. So someone there knows how to

get the cat to say something out of its

uh comical mouth. So the algorithm

implemented in code is really equivalent

to the say function. So a function is

just a piece of functionality

implemented in code which in turn

implements an algorithm. So algorithm is

sort of the concept and the function is

actually the incarnation of it in code.

What's the output? Well, hopefully it's

this side effect seeing the speech

bubble come out of the cat's mouth like

this. All right, so that's one such

program, but it's always going to play

and look the same. What if I actually

want to prompt the human for their

actual name? Well, let me go back to the

puzzle pieces here. Let me go ahead and

throw this whole thing away. Okay. And

if you want to delete blocks, you can

either rightclick or control-click and

choose from a menu. Or you can just drag

them there and sort of let go and

they'll disappear. I'm going to go back

in and get another uh another event

block, even though I could have reused

that same one. I'm going to go ahead and

go under sensing now. And if I zoom in

over here, you'll see a whole bunch of

things like I can sense distance and

colors. But more pragmatically, I can

use this function in blue, ask

something, and then wait for the answer.

And what's different about this puzzle

piece is that it two is yes a function.

It too takes an argument, but instead of

having an immediate side effect like

displaying something on the screen, it's

essentially inside of the computer going

to hand me back the response. It's going

to return a value, so to speak. And a

return value is something that the code

can see, but the human can't. A side

effect is something the human sees, but

a return value is something only the

computer sees. It's like the computer is

handing me back the user's input. So,

how does this work? Well, notice, and

this is a bit strange. This isn't

usually how variables work, but Scratch

2 supports variables, and that was a

word I used quickly at the very start

when we were making the chatbot. A

variable like in math, X, Y, or Z, just

store some value, but it doesn't have to

store a number. In code, it can store

like a human name. So, what's going to

happen when I use this puzzle piece is

that once the human types in their name

and hits enter, MIT, or really Scratch

is going to store the answer, the

so-called return value in a variable

that's designed to be called answer.

But, as we'll see, you can make your own

variables down the line if you want and

call them anything you want. But, let me

go ahead and zoom out. Let me drag this

over here. I'm going to use the default

question, what's your name? But I could

certainly change the text there. And let

me go under looks again. Let me go ahead

and grab the say block and let me go

ahead and say just for consistency like

hello,

okay? And now let me go under maybe

sensing I want to say how do I want to

say this answer. Well, notice this. The

shapes are important. This too is an

oval even though it's not white but

that's just because it's not editable.

It's going to be handed to me by the ask

function. Let me zoom out and grab a

second say block like this. And notice

it will magnetically clip together. I

don't want to say hello again. So, I

could delete that. But now it's still

the same shape even though it's a little

smaller. Let me go back to sensing. And

notice what can happen here. When you

have values like words inside of a

so-called variable, you can use those

instead of manual input at your

keyboard. And notice it too wants to

magnetically snap into place. It'll grow

to fit that variable because the shape

is the same. And now let's do this. Let

me click the green flag at right. I'm

seeing quote unquote what's your name?

I'm getting a text box this time, like

on a web page for instance. Let me type

in my name and watch closely what comes

out of the cat's mouth as soon as I

click the check mark or hit enter.

Huh. Okay, I got my name right, but let

me do it once more. Let me stop and

start. Dav

enter. No, it didn't work. Let me try

one other. Maybe it's my name. Let's try

Kelly. Enter. What's missing? Obviously,

the the hello. There's a bug, a mistake

in this program. But is there like what

explains this? Even if you've never

programmed before, intuitively, what

could explain why I'm not seeing hello?

>> Exactly. It's on two different lines.

So, it's doing one after the other. So,

it is happening. It's just you and I is

the slowest things in the room are just

not seeing it in time because it's

happening so darn fast. Because my

computer is so, you know, so new and so

fast, it's happening, but way too

quickly. So, how can we solve this? So,

we can solve this in a few different

ways. And this is where in Scratch, at

least for problems at zero, when wherein

you'll have an opportunity to play

around with this, I can scroll around

here. And okay, under control, I see

something like weight. So, I can just

kind of slow things down. And now

notice, too, if you hover over the

middle of two blocks, if it's the right

shape, it'll just snap into the middle

two. Or you can, just so you know, kind

of drag things away to magnetically

separate them. But this might solve

this. So, let me hit stop and then

start. DAV. Enter.

Hello, David. All right, that was a

little Let's do like maybe two seconds

to see it again. Green flag. DAV ID.

Enter. Hello,

David. All right, it's working better.

It's sort of more correct because I'm

seeing the hello and the David, but kind

of stupid, right, to see one and then

the other. Wouldn't it be nice to say it

all in one breath, so to speak? Well,

here's where we can maybe compose some

ideas. So, let me get rid of this weight

and the additional block. Let's confine

ourselves to just one say block. But let

me go down to operations where we

haven't been before. And this is

interesting. There's this bigger oval

here that says join two things like

apple and banana. And those are just

random placeholder words that you can

override with anything you want. But

they're both ovals and white, which

means I can edit them. So let me go

ahead and do this. Let me drag this on

top of the say block. And this is just

going to therefore uh override the hello

I put there. Now I don't want to say

apple or banana but I do want to say

hello

and I then want to say my name. Okay. So

now I can go back to sensing go back to

answer drag and drop this here. That'll

snap into place. And let me zoom in. Now

what I've done is take a function and on

top of it I've nested another function

the join function that takes two

arguments or inputs and presumably joins

them together as per its name. So let's

see what this does for us. Let me click

stop and start. I'll type in David

enter. And it's so close. Now, this is

just kind of an aesthetic bug. What have

I done wrong here?

There's no space. So, it looks a little

wrong, but that's an easy fix. I just

need to literally go into the hello

block after the comma, hit the space

bar, so that now when I stop and start

again and type in David, now I see

something that's closer to the grammar

we might typically expect syntactically

here. All right. So, let's model this

after what we just saw earlier. We've

now introduced a so-called return value.

And this return value is something we

can then use in the way we want. It's

not happening immediately like the

speech bubble. It's clearly being passed

to me in some way that I can use to plug

in somewhere else like into that join

block. So if we consider the role of

these variables playing, let's consider

the picture now as follows. If the input

now to the first function, the ask block

is what's your name? Quote unquote,

that's indeed being fed into the ask

block. And the result this time is not a

speech bubble. It's not some immediate

visual side effect. It is the answer

itself stored in a so-called variable as

represented by this blue oval.

Meanwhile, what I want to do is combine

that answer with some text I came up

with in advance by kind of stacking

these things together. Now, visually in

Scratch, you're stacking them on top,

but it's really that you're passing one

into the other into the other because

much like math when you have the

parenthesis and you're supposed to do

what's inside the parenthesis and then

work your way out. Same idea here. You

want to join hello and answer together.

And whatever that output is, that then

becomes the input to the say block,

which like in math is outside of the

join block itself. So pictorially, it

might now look like this. There's two

inputs to this story. Hello, comma,

space, and the answer variable. The

puzzle piece in question is join. Its

goal in life had better be to give me

the full phrase that I want. Hello,

David. Let's shift everything over now

because that output is about to become

the input to the say block which itself

will now have the so-called side effect.

And so this too is what programming and

in turn what computer science is about

is composing with the solutions to

smaller problems solutions to bigger

problems using those component pieces.

And that's what each of these puzzle

pieces represents is a smaller problem

that someone else or maybe even you has

already solved. Now, we can kind of

spice things up here. If I go back to

Scratch's interface, we don't have to

use just the puzzle piece here. I can do

something like this. Let me go ahead and

drag these apart and get rid of the say

block down here. Just for fun, there's

all these extensions that you can add

over the internet to your own Scratch

environment. And if I go to like text to

speech down here, I can, for instance,

do uh a speak block instead of a say

block colored here in green. I can now

reconnect the join block in here. And if

we could raise the volume just a little

bit. Let me stop the old version, start

the new version, type in my name, and

hear what Scratch actually sounds like.

>> Hello, David.

>> Okay, not very cat-like, but we can kind

of waste some time on this by like

dragging the set voice to box. And I can

put this anywhere I want above the speak

block. So, I'm just going to put it

here, even though I've already asked a

question. Maybe kitten sounds

appropriate. Let's try again. D-av

>> meow meow.

>> Okay. And then let's see. Uh, giant

little creepier. Here we go. DAV. And

lastly,

>> hello David.

>> All right. Little ransomlike instead.

All right. So, that's just some

additional puzzle pieces, but really

just the same idea, but I like that

we've introduced some sound. So, let's

do this. Let me go ahead and throw away

a lot of those puzzle pieces, leave

ourselves with just the when green flag

clicked, and play around with some other

building blocks that we've seen already

thus far. Let me go ahead for instance

under sound and let's make the cow

actually meow. So it turns out Scratch

being a cat by default comes with some

sounds by default like meowing. So if we

go ahead and click the green flag after

programming this program. Let's hear

what he sounds like now.

Okay, kind of cute. And if you want it

scratch to meow twice, you can just play

the game again

and a third time. All right, but that's

going to get a little tedious as cute as

it is. So I can solve that. Let's just

grab three of the puzzle pieces and just

drag them together and let them connect.

And now click the green flag.

All right. Doesn't it gets less cute

quickly, but maybe we can slow it down

so that the cat doesn't sound so so

hungry. Maybe let me go under uh let's

see under control. Let's grab one of

those. Wait one second and maybe plop a

couple of these in the middle here. That

might help things. And now click the

green flag.

Okay, still a little hungry. But let's

see if we change it to two. And then I

change it to two down here in both

places. Let's play it again.

Okay, cuter maybe. But now I'm venturing

into badly programmed territory. This is

correct. If my goal is to get the cat to

meow three times, pausing in between,

sorry, three times pausing in between.

What is bad about this code? Even if

you've never programmed before though.

Yeah. In the middle.

>> Yeah. I literally had to repeat myself

three times. Essentially copy pasting.

And frankly, I could have been really

lazy and I could rightclick or

control-click and I could have chosen

duplicate. But generally when you copy

paste code or when you duplicate puzzle

pieces probably doing something wrong.

Why? It's solving the problem correctly.

But it's not well designed even if for

only because when I changed the number

of seconds now I had to change it in two

places. So, I had one initially, then I

had to change it to two. And if you just

imagine in your mind's eye having not

like six puzzle pieces, but 60 or 600 or

6,000, you're going to screw up

eventually if it's on you to remember to

change something here and here and here

and here. Like, you're going to mess up.

It's better to keep things simple and

ideally centralized by factoring out

common functionality. And clearly,

playing sound and waiting is something

I'm doing at least twice, if not a third

time here as well. So, how can we do

this better? Well, remember this thing,

loops. Maybe we can just do something a

little more cycllically. So, I tell the

computer to do something once, but I

tell it how many times to do that al

together. So, notice here by coincidence

under control, I have a repeat block,

which doesn't say loop, but that's

certainly the right semantics. Let me go

ahead and drag the repeat block in, and

I'll change the 10 to three just for

consistency here. I'm going to go back

to sound. I'm going to go ahead and play

sound meow until done, just as before.

And just so it's not meowing too fast

under control, I'm going to grab a

weight one second and keep it inside the

loop. And notice that the loop here is

sort of hugging these puzzle pieces by

growing to fill however many pieces I

actually cram in there. So now if I

click play, the effect is going to be

the same, but it's arguably not only

correct, but also well

designed because now if I want to change

the weight, change it in one place. If I

want to change the total number of

times, change it in one place. So I've

modularized the code and made it better

designed in this case. But now this is

silly because even though I want the cat

to meow, it feels like any program in

which I want this cat to meow, I have to

make these same puzzle pieces and

connect them together. Wouldn't it be

nice to invent the notion of meowing

once and then actually have a puzzle

piece called meow? So when I want the

cat to meow, it will just meow. Well, I

can do that, too. Let me scroll down to

my blocks here in pink. I'm going to

click make a block and I'm going to

literally make a new puzzle piece that

MIT didn't think of called meow. And I'm

going to go ahead and click okay. Now I

have in my code area here a define block

which literally means define meow as

follows. So how am I going to do this?

Well, I'm going to propose that meowing

just means to play the sound meow until

done and then wait 1 second. And notice

now I have nothing inside my actual

program which begins when I click the

green flag. But notice at top left