Professional Documents
Culture Documents
[AUDIENCE EXCLAIMING]
[APPLAUSE]
La-da-da-da-da-da-da.
La-da-da-da-da-da-da.
La-da-da-da-da-da-da.
La-da-da-da-da-da-da.
OK.
And a round of applause for, Spot, as well.
[LAUGHS]
[APPLAUSE]
So this is to say, no matter how--
thank you, Spot.
No matter how fancy today's hardware or software is,
it really just boils down to representing
information and instructions.
And computers, and phones, and the like really are just
operating on those same pieces of information,
whether implemented in 0's and 1's or with, really, anything else.
All right.
So, where can we take this, once we have this agreed-upon system
for representing [LAUGHS] information?
Well, it turns out that using three bits, three 0's and 1's, at a time,
isn't actually all that useful.
And you and I, even in conversation, don't often say the word "bit."
We say the word "byte."
And what is a byte, if familiar?
Yeah?
AUDIENCE: It's eight bits.
DAVID J. MALAN: So it's just eight bits.
It's just a more useful unit of measure.
And it happens to be a power of 2, 2 to the third,
which just makes math work out cleanly.
But it's just a convention, to have more interesting units of measure
than individual bits.
So a byte is eight bits.
So, for instance, this represents, using eight bits, eight light bulbs,
the number you and I know is 0.
And this byte of all 1 bits--
now you've got to do some quick math-- represents what number, instead?
So it's all 1's; eight of them, total.
How about over here, on the end?
AUDIENCE: 255.
DAVID J. MALAN: So it's, indeed, 255.
Now, that's not the kind of math that you
need to do in your head for a class like this, but you could.
This is the ones place, twos, fours, eight, 16, 32, 64, 128.
And because they're all 1, you just have to add up all of those columns' values.
And you get 255.
But a little mental trick, too, is that, if you've got eight bits
and each of them can be two possible values, 0 or 1,
that's like 2 possibilities here times 2 times 2 times 2 times 2, eight times.
So that's 2 to the eighth, so that is maybe a little easier to do.
That's 256.
Or easier, in the sense that you get used to seeing these numbers in CS.
That's 256.
But wait a minute.
How do I reconcile this with your 255?
Because you start at 0.
So you lose one on the high end because we started counting and representing
the number, like 0.
All right.
Questions on how we've represented just numbers or, for instance,
instructions to Spot, thus far?
Any questions on binary, unary, or the like?
No?
All right, so seeing none, let's let things escalate a bit.
So how do you represent letters because, obviously, this
makes our devices more useful, whether it's
in English or any other human language.
How could we go about representing the letter A, for instance?
If, at the end of the day, all our computers,
all our phones have access to is electricity; or, equivalently,
switches; or, metaphorically, tiny little light bulbs
inside of them that can be on and off-- that's it.
There's no more building blocks to give you.
How could we represent something like the letter A?
Yeah, how about here?
Yeah?
AUDIENCE: You could assign a number.
DAVID J. MALAN: Perfect.
So we could just assign every letter a number.
And we could do this super simply.
Maybe 0 is A, and 1 is B. Or maybe 1 is A,
and 2 is B. It doesn't really matter, so long as we all agree and we all
use the same types of computers, in some sense, ultimately.
Well, for various reasons, the humans that designed this system,
they went with the number 65.
So, nowadays, anytime your computer is showing you the capital letter
A on the screen, underneath the hood, so to speak,
it's actually storing a pattern of 0's and 1's that represents the number 65.
And it tends to use seven bits or, typically, eight bits, total,
even if it doesn't need all of those bits in total.
So how do we get there?
Well, here, for instance, is that same pattern.
Here is that pattern of bits that represents 65.
And why?
Well, quick check here.
This is the ones place, twos, fours, eights, 16, 32, 64's place.
OK, so 64 plus 1 gives me 65.
So that is to say here's how a computer, using some light switches, so to speak,
would represent the number 65.
And our Macs, our PCs, our phones just all know this.
So whenever they see that in their memory, so to speak,
they show a capital letter A on the screen.
So that's it.
That's the system known as ASCII, the American Standard
Code for Information Interchange.
And the A is actually operative there because we're only talking, thus far,
about English letters in our alphabet.
And, in fact, I claimed, a moment ago, that we only use
seven, maybe eight bits to represent letters of an alphabet.
So, just to come back to you, if I may, how many
possible letters of the alphabet could-- how
many possible letters of any alphabet could we represent with eight bits?
AUDIENCE: 256.
DAVID J. MALAN: 256, the numbers 0 through 255.
Now, that's more than enough for English because we've
got A through Z, uppercase, lowercase, a bunch of numbers,
a bunch of punctuation symbols.
But in a lot of languages, with accented characters, a lot of Asian characters,
this is not nearly enough memory or bits with which
to represent all of those possible values.
So we need to do a little better than ASCII,
but we can build on top of what they did years ago.
So here is a chart of ASCII codes.
It's just a bunch of columns showing us the mapping between letters
and numbers.
So, for instance, up here is the capital letter A, 65; capital B, 66;
capital C, 67; dot, dot, dot.
72 is H. 73 is I and so forth.
There's some weird things over here, like special symbols,
that we'll learn about over time.
But there's a mapping between every English letter
of the alphabet and some number, just as you'd propose,
both for uppercase and lowercase.
So, for instance, if we highlight just a few of these for now
and I say that I've just received a text message or an email that,
underneath the hood, so to speak, if I have the ability
to look at what switches are on and off, I received this message here.
Well, first-- and this is not what CS is about, but just fun fact.
Does anyone know what number this would represent in decimal,
if this is the binary pattern, like ones place, twos place?
AUDIENCE: 72?
DAVID J. MALAN: 72 is correct.
And again, not, intellectually, all that interesting
and this is not the kind of math that we spend all day as CS--
a computer scientist doing.
But it's just following the same darn pattern, which
is to say it might look cryptic, but, conceptually,
intellectually, it ultimately is exactly as we did before.
So, yes, I'll spoil the rest of the math.
It's 72, 73, 33.
Now, anyone remember, in your mind's eye, what message we just spelled?
AUDIENCE: Hi.
AUDIENCE: Hi.
DAVID J. MALAN: Yeah, so it is, in fact, "Hi!"
Though, no one really said that excitedly.
What's the 33, if you noticed?
AUDIENCE: Exclamation point.
DAVID J. MALAN: OK, so a lot of people noticed.
Yes, it's an exclamation point.
And that's, indeed, noticeable right here.
33 is the exclamation point.
And that's just something, eventually, that might sink in.
But, for the most part, if you remember capital A is 65,
you can figure out at least 25 other answers to these kinds of questions
because they're all contiguous like that.
So there's the exclamation point.
But at the end of the day, we might just have this mapping known as ASCII.
And it's how our phones, and computers, and devices, more
generally, actually store information.
So we thought we'd make--
maybe take a little pressure off of me here.
And could we maybe flip things around?
How about we try applying this newfound knowledge--
if it's, indeed, new to you-- with seven volunteers, seven bits, if we could?
OK.
I saw your hand first.
Come on down.
Maybe your hand, there.
OK, three, come on down over here.
How about four and five?
Yep, come on down.
Yep, in the black shirt, yep.
How about let me go farther back?
How about in the green, over there?
And how about you, seven, over here?
All right.
Come on down.
[CHATTER]
Come on down.
So a round of applause for our brave volunteers.
[APPLAUSE]
All right.
So if you'd like to stand, roughly, side by side, here in the middle
of the stage.
[PAPER RUSTLING]
What number do these guys seem to be representing?
AUDIENCE: 68.
DAVID J. MALAN: 66, I think.
64 plus 2, so 66, which is the letter--
AUDIENCE: B.
DAVID J. MALAN: OK, so, B. OK, so, B. All right.
Hands down.
Second letter is going to be spelled how?
All right.
So it's hard to escape a discussion of artificial intelligence, nowadays,
but we thought we'd use this as an opportunity
to connect some of these dots.
Because, indeed, over the course of the semester,
we'll be-- not only be talking about artificial intelligence or AI,
but really using it all the more constructively
to help you solve problems, help you get unblocked
when you hit a wall, cognitively or syntactically, when writing code.
And, indeed, it's no accident that we have this duck here,
looming large, which is really the embodiment of the sort of AI
that you'll experience within CS50, itself, this year.
So let's talk about the so-called chatbots that
inspired some of those headlines with which we began
class, that weren't quite on the nose.
So the class will still be taught by us humans,
but helped by this CS50 duck, a chatbot of sorts.
Now what do I mean by this?
Well, it turns out that, when it comes to implementing something
like an artificial intelligence, we don't quite
have all of the building blocks yet, certainly after just today's week zero,
to implement something like that.
But I think we can skate in that direction, intellectually.
So, for instance, if we were to take a stab at implementing our own chatbot--
some interactive text-based program that talks to us,
and answers questions, and the like-- we could
try borrowing some of today's ideas already, those functions, conditionals,
loops, and more.
And I could write something like this.
If I am writing code or pseudocode for a chatbot,
I could program the chatbot to do something like this.
If the student says, hello, to the chatbot,
then the chatbot should say, hello, back.
Else, if the student says, goodbye, well, the chatbot
should say, goodbye, back.
Else, if the student asks how you are, the chat bot should say that it's well.
But things get a little harder when you start
asking more interesting questions, like, else,
if the student asks why 111 in binary is 7 in decimal.
Now, you could imagine that we just have a conditional,
with this Boolean expression, that programs the chatbot to just give you
the answer and explain, in an English sentence, why that, in fact, is.
But what if you, the student, asks why 110 is 6 in decimal or why 010 is 2?
I mean, you can just imagine the explosion in the amount of code
that we would have to write to just anticipate every darn question that you
might ask about today and every other class, not to mention all
of the knowledge in the universe.
So, surely, there are other ways to implement algorithms
that allow something like a chatbot or AI,
more generally, to be fed input, still, like all of the internet, all
of the worldwide web, all of the pages and textual content therein,
but to let it just figure out how to answer our questions based
on those kinds of inputs, assuming the inputs, themselves, are accurate.
So "large language models" is a term you might
have heard bandied about over the past several months, or LLMs.
And a large language model really is an implementation, in software,
of code that actually takes, as input, lots and lots of language--
like the text of lots and lots of web pages, dictionaries, encyclopedias,
Wikipedias, and the like--
and infers, from the patterns of English words or any human language,
what a typical human might actually say when asked a question.
And some of these questions are easy, right?
Probably, on the internet, alone, not to mention everyday life, if someone
extends their hand and says, "Hi.
How are you," odds are, with 90% probability, you're going to say,
"Good.
Thanks.
How are you?"
So I bet we could write software that just
infers what it should say, probabilistically, statistically, based
on those kinds of patterns online.
And that's, indeed, where the world is starting
to go, when it comes to the most sophisticated
of algorithms, where you and I, the humans,
we don't try to anticipate every possible input.
Rather, we give it a more general purpose
input, like all human knowledge, and ideally just let it figure things out.
Now, we're not quite there, yet.
And odds are you've heard of hallucinations or just mistakes
that these large language models make.
But their inputs are imperfect.
And sometimes there's a bit of randomness sprinkled
in because you don't want the thing to always say the exact same thing.
Even you and I might say, "Eh, I'm not that great today" 10% of the time.
So you need to perturb the output in some way.
But within CS50 and within this world of large language models,
we do have these tools like ChatGPT, and Bing, chat, and others.
And we'll stipulate that, for CS50's purposes,
the direction we're going this year is that this
is what's in the syllabus, dot, dot, dot;
that it will not be allowed, it will be considered
not reasonable to use AI-based software, other than CS50's own.
So the goal here is not to simply take away
tools that are clearly inevitable, in my view, and clearly helpful
and productivity savers.
But we'd like there to be some guardrails, intellectually, on just how
helpful these chatbots are.
Because as you've probably seen, if you ask it a question,
these chatbots are already pretty good at not just helping
you finish your current thought, but it'll
hand you your second and your third thought and do the assignment for you.
But I think, through prompting, so to speak,
we'll be able to coax some of our own tools,
being computer scientists, ourself, in a direction
that you actually find to be the right balance, akin to having
a good tutor by your side 24/7, who doesn't just hand you answers,
but, indeed, tries to lead you to the same.
So you actually get something out of the experience,
and, ideally, three-plus months from now,
those training wheels can come off, too.
And you're able to still stand on your own.
So it will be reasonable to use CS50's own AI-based software which
will actually take the form of a CS50 duck, which is actually available now--
and we'll use it throughout the term-- at CS50.ai, a web-based application
that's quite similar to ChatGPT, but that
has the personality of a CS50 teaching fellow or TF, or teaching assistant,
TA, that also happens to think of itself as a duck.
And for reasons we'll get to in a couple of weeks time,
but rubber ducks, in particular, are a thing in programming.
But more on that, before long, as you can even see from the one
there on my desk.
With that said, too, well, I'm going to call out CS50's own Brenda
Anderson, whose daughter, Sophie, kindly not only created
the first incarnation, digitally, of this duck, but also,
most recently, once it actually did more than quack a random number
of times in response to questions, has now
been virtually brought to life, too.
So, all that and more, over the coming weeks, but you'll find, ultimately,
that the goal is to really bring to life the availability of an AI-based tutor
that you have access to, a friend in your--
next to you, that will help guide you through a lot of the course's
challenges along the way.
And we actually rolled it out this past summer,
already, with some of your predecessors, through the Harvard Summer School.
One student wrote, at summer's end, that this duck
"felt like having a personal tutor--
I love how AI bots will answer questions without ego and without judgment
generally entertaining even the stupidest of questions
without treating them like they're stupid.
It has, as one could expect, an inhuman level of patience."
So there's actually something really there because as many teachers
as there are in CS50--
myself, the course's preceptors, teaching fellows, teaching assistants,
and course assistants-- there's only so many of us.
And we're only awake so many hours of the day.
And I think you'll find, too, that we're on the cusp of something
pretty remarkable, in the coming years, where
it's going to get a lot more enabling, now, to learn material
not only within the confines of a class, but on your own, ultimately, as well.
And as one other student put it, at summer's end, with respect to the duck,
"Love love loved the duck.
We're friends now."
So that, too, awaits.
But, first, we're going to need to start with the basics.
And we started today by talking about binary.
And darn it, here it is again.
So we can't actually get to the point of using, or solving, or implementing AI
until we understand this.
And odds are most of you won't know, at a glance, what this piece of software
does.
But these are the 0's and 1's that represent, perhaps,
the first program that any programmer writes, which is now a clue to some
of you who have dabbled in code before.
What does this pattern of 0's and 1's tell a typical computer to do?
Might someone guess?
AUDIENCE: "Hello, world."
DAVID J. MALAN: It's going to have it say, "hello, world,"
which is one of the very first programmer-- programs
that most any programmer writes.
Should you be able to recognize these 0's and 1's?
Do I recognize these 0's and 1's?
No, not at all.
I just happen to know that they are the same.
And that was a leading question.
But they are representing data and instructions, ultimately,
data like H-E-L-L-O, comma, W-O-R-L-D and an instruction like,
"Print that data to the screen."
As for what these patterns of 0's and 1's are,
this is not something that a computer scientist or programmer worries about.
We just stipulate that, OK, someone, somewhere knows how to do this.
And it's probably someone like Intel, who makes
the hardware inside of the computers.
But you and I, starting now, already, in week zero,
can start to view binary more abstractly.
We don't care about the 0's and 1's.
We only care that you can use 0's and 1's
to represent more useful quantities, like numbers,
and letters, colors, and more.
So this, next week, is going to be the code we actually
start writing at a keyboard.
And this is that language called C. It's the same language I, myself, learned
years ago, when taking CS50, when all we learned at the time was C.
But this, too, has some crypticness to it.
And if you've never programmed before, you can probably wrap your mind around,
OK, I'm guessing the "printf" prints out the "hello, world."
But what's with the semicolon, the quotes, the backslash,
and the curly braces, the #include, and all of this stupid syntax?
A lot of this, in the beginning of any class, is really a distraction.
It is not intellectually interesting.
But it's the stupid kind of stuff that's going to trip you up quite often.
And so, today, what we'll do is focus not
on syntax, characters on the keyboard, but ideas
because what really matters in this program
is that "printf" is a function here for our purposes.
And that function is to display information on the screen.
Everything else, as we'll soon see, has value
and will be understood by you, before long, but for now, it's a distraction.
Let's focus on those building blocks.
When it comes time to write code, though, for the curious,
especially if you've programmed before, we'll
use a very popular free and open-source tool
called Visual Studio Code, or VS Code.
We'll use a cloud-based version of it that we pre-install everything
you need in the cloud for you so you don't
have to deal with headaches like getting your Mac or PC to work.
You'll use instead this URL, cs50.dev, but more
on that in next week, week one.
For now, we'll use another cloud-based editor called Scratch.
And odds are some number of you use this probably
as early as like middle school or the like.
And that was fine to create your own animations, games,
interactive art, or the like.
But we'll use it today for just a bit.
And we'll use it in the course's first homework,
AKA problem set 0, to explore now some of these same ideas.
And among the goals today for the remainder of today
is not to focus so much on Scratch and the particulars
because this is not a language that you're
going to use often but to give you very visual representations of ideas
so that when things do escalate next week to C, to the more cryptic,
it's the same ideas just typed out instead of dragged and dropped.
So by that, I mean this.
I'm going to go ahead and share in just a moment the user interface of Scratch.
But what's nice about Scratch is that this
is how we're going to implement that same program today.
These are two blocks or puzzle pieces on the screen,
and they've been interconnected to tell the computer to say "hello, world"
on the screen.
The user interface that we're about to use
will look generally something like this.
It's a web-based editor that you can also
download it locally to use offline.
And you'll see that at the left here are a whole bunch of puzzle pieces
or blocks.
They're categorized by color, and the blue ones
tend to relate to motion, for instance.
The purple ones represent looks.
The pink one represents sounds.
The yellow one represents events.
More on that soon.
The orange ones represent control, and then
there's operators, variables, my blocks, and even some extensions
we can install as well.
So it just categorizes things visually and colorfully so that you
can find what you're looking for.
But we're going to use these puzzle pieces to drag and drop them
onto this area here.
And we're going to connect them when we want them to do something.
What can they do?
Well, by default, Scratch comes with this cat here, otherwise known
as a sprite, which is a character in a game or in a graphics context.
And this cat lives in this two-dimensional world in which
the cat can go up, down, left, right.
And you can actually change the cat's costume
to be a dog, a bird, or anything else.
It really is more of an idea than it is a specific animal in this case.
But the world that Scratch lives in looks a little something like this.
It's like a Cartesian plane with x-coordinates and y-coordinates.
And the numbers don't so much matter fundamentally,
except that when you want the cat or any character to go up,
down, left, or right by some amount, it's
useful to know, for instance, that 0, 0 is the middle, 0 comma 0 for x comma y.
All the way up is a y value of 180.
All the way down is -180.
All the way to the left is -240.
All the way to the right is 240.
And generally, you're not going to have to worry about numbers.
You're going to use these relatively-- go right, go left, go up, or down.
But that's just the world that Scratch itself lives in here.
So let's go about using Scratch here.
I'm going to change over to my cloud-based editor
here, where I've gone to scratch.mit.edu.
And I've clicked Create in order to create a project.
And that gives me this blank canvas here.
And I'm going to do these somewhat quickly because I kind of know
what I'm looking for.
But part of the process with problem set zero is going to be clicking,
and dragging, and sort of scrolling around
to see what building blocks exist.
But I know under Events there's this puzzle piece here
when green flag clicked.
Why is that germane?
Well, if I zoom out, and go back to Scratch's world at the right here,
notice that above Scratch's world there's
a green flag, which is going to mean go, and a red stop sign, which,
of course, is going to mean stop.
So if I drag this puzzle piece anywhere into the middle,
it's just going to plop where I put it.
But what that means semantically is when someone clicks that green flag,
I want Scratch the cat to do this other thing.
Well, what do I want it to do?
Well, let me go under Looks.
And looks here in purple have some puzzle pieces like this.
Well, I can say hello for some number of seconds,
or I can just go ahead and say hello.
So let's do that.
I'm going to drag this say block.
And notice that as soon as I get close enough,
it's going to magnetically want to connect.
So I can let go, and they snap together automatically
because they're the right shape.
I don't have to say hello, exclamation point.
I can change it to the more canonical, hello comma world.
So anything in this white oval is editable
that you can change as just text there.
If I now zoom out, let me go ahead and click the green flag.
And voila-- this should be my first program in Scratch.
Hello, world.
Without any of the distractions of syntax
or weird characters on the screen, it's just done what I want it to do.
All right.
Let me go ahead and click Stop there.
And let me make it a little more connected
to what we've discussed thus far.
So this puzzle piece here, say hello, world,
represents what type of building block using the vocabulary of today?
So it's a function.
So these purple blocks are functions, say, hello, world.
And let me give you another piece of terminology.
These white ovals that take textual input--
in general, those are called parameters or arguments.
And they customize the behavior of a function.
So a parameter or an argument customizes,
modifies the default behavior of a function, like in this case, say.
Similarly, in the C code from earlier that we'll see next week,
the printf function took a quoted phrase like, hello, world, similarly as input.
But more on that in the future.
So how does this connect to the mental model we presented earlier?
Well, here's problem-solving as I described it earlier, inputs to outputs
with algorithms or code in the middle.
Well, what we've got here really is an input of, hello, world, the white oval.
The function or algorithm that it's going into as input is the say block.
And what is the output of using this say block, the say function?
It's the visual effect of having the cat have the little speech bubble appear
above its head, saying, hello, world.
So everything we do, in fact, can be mapped back
to that very simple idea of inputs and outputs.
Well, let's make it a little more interesting, though.
It's a little boring to just say "hello, world" all the time.
Let me go ahead and drag this away.
And if you just drag it to the left and let go, it gets automatically deleted.
Let me go under Sensing in light blue here.
And you'll see there's a bunch of blocks, one of which
is an ask block, an ask function, which is going to prompt
the human, me, for some input.
So let me go ahead and drag that over here, and it snaps together.
I could change the question, but I'm OK with that question.
We'll use what's your name.
But notice that this block, ask, is a little special.
It is not just going to display like a speech bubble on the screen.
It's actually going to return a value, and this is
another term of art today and onward.
A return value is some value that can be handed back to you conceptually
from a function so that you can do something with it.
It's as though the ask function asks someone for their name,
writes it down on a piece of paper, and hands you the piece of paper.
You can do anything now that you want with that name.
And here is how you access the name in this special block called
answer, which, again, will start calling a return value.
So if I want to say "hello" to someone specific, I'm going to do this.
Let me zoom out.
Let me go back to Looks, and let me go back to Say.
And I'm going to change the say block here to "hello, comma."
Then I'm going to zoom out.
Well, I need two inputs, I think.
So I'm going to grab another say block, and I'm going to put it below.
And I could just type "David," but this is
going to defeat the whole point of asking me for the name.
And it will only work for me.
So I don't want to do that.
So let me go back to Sensing, and notice the shape is important here.
Even if it's not quite the same size, the shape matters.
And I can actually drag this and change the input of this say function
to be whatever that return value is, that piece of paper
that has the person's name on it.
And it grows to fill, but now we have a program
that I think when I click the green flag-- watch-- is going to prompt me.
What's your name?
And now I have room to type down here.
So I'm going to type D-A-V-I-D. I'm going to hit Enter,
and it should say "hello, Dave."
Wait.
Hmm.
Huh.
Maybe it was-- didn't work.
D-A-V-I-D. Here we go.
Hello, David.
Hmm.
It's missing the hello, but I'm quite sure we have a hello right there.
So what explains this bug or mistake?
Yeah.
AUDIENCE: [INAUDIBLE].
So they overlap.
DAVID J. MALAN: Exactly.
Put another way, my Mac, my PC, it's just so darn
fast that it did exactly what it was supposed to.
But it said "hello, David" so fast that we didn't even see, we being the human,
the slowest part of the puzzle, see the actual hello.
So there's a few different ways to fix this, as you know.
We could have it say "hello" for some number of seconds.
So I could kind of do that.
So let me do this.
I can decouple these by just dragging and letting it go
so that they're magnetically far apart.
Let me go ahead and drag this one, say hello for two seconds.
I'm going to change the grammar here to be hello comma again.
I'm going to go ahead and disconnect these two.
I'm going to throw away the old one that I don't want to use.
And I'm going to reconnect this so that now--
OK.
It's going to say hello for two seconds and then my name, hopefully.
So let me click Stop and Start.
D-A-V-I-D. Enter.
OK.
So it's better, but it's kind of poorly implemented.
Like, come on.
I just wanted to say hello comma David.
Why is that hard?
Well, maybe we can actually combine these a little differently.
And let me propose this.
Let me actually get rid of these blocks again.
And let me go ahead and just say one thing.
But can I somehow combine this to say hello comma David all in one breath?
Well, it turns out if I go under Operators,
I know from having played with this before that there's this puzzle
piece down here called join.
It's an oval.
It's a little big, but, again, it will grow to fill.
And by default, it wants to join two words, "apple" and "banana."
But those are just placeholders.
So let me go ahead and drag this over the default hello.
Let me change "apple" to hello comma space and then banana.
Let me go back to Sensing.
Let me grab answer and drag and drop that.
So now notice that I'm kind of layering my ideas.
And put another way, the output of this join block
is presumably going to join two things together,
apple and banana or hello comma David.
And then the output of join is going to become the input to say.
So aesthetically, it just looks better.
It's still correct, but it's just better.
So if I type "David," and hit Enter, hello, David.
This is what a normal program would presumably
do, not show you part of the phrase and then the rest of the phrase.
Like, it's just better in this way.
So let's connect this now to this same puzzle piece and this methodology.
So here's that same puzzle piece, ask.
How do we fit it into this input and output flow with algorithms?
Well, the input to that puzzle piece is something like, what's your name,
question mark.
Then the algorithm or the code implementation thereof
is this ask block and wait so the human has a moment to type their response in.
The output of that function recall is a return value.
You don't see anything on the screen by default because we've not used say yet,
but we get this return value.
And let me scooch everything over now so that we can now
join those inputs together.
So here's this puzzle piece.
Let me go ahead and propose that the inputs now to the join block
are two arguments or two parameters, so to speak, hello and answer.
They go into that join puzzle piece, whose purpose in life
is to return one joined version thereof.
Let me slide this all over logically now so
that now that output becomes the input to the say block
and now is why the cat has the speech bubble saying all at once,
hello comma David.
So what we've done here is kind of composed the output
and from one function into the input of another.
And you can think of this in a couple of different ways,
left to right, as I did there, or kind of
like stacking these things on top of one another.
But at the end of the day, even as programming
gets more and more powerful for us, it's just inputs and outputs, inputs
and outputs.
And thankfully, with built-in functionality from our friends
at MIT who designed Scratch, I can even do something playful like this.
I can go to that Extensions button at the bottom.
And there's a lot of fancy things I can add here, like text-to-speech.
So let me go ahead and choose text-to-speech.
And let me go ahead here and change the say block in purple.
Let me get rid of the say block, and let me borrow this.
Let me get the speak block like this.
And now let me drag and drop this oval.
It's going to grow to fill.
And I think it's just about to be a little more interesting.
Let me click Play now, and hopefully this isn't too loud.
D-A-V-I-D. Enter.
SPEAKER: Hello, David.
DAVID J. MALAN: OK.
[APPLAUSE]
Thank you.
Thank you.
That's a low bar.
[CHUCKLES] Let me go ahead and set the voice too.
And you might now remember how we began class, where
we had a robotic, computerized voice.
Well, we didn't use Scratch at the time, but we could change this in Scratch
alone to be a little different.
So D-A-V-I-D.
SPEAKER: Hello, David.
DAVID J. MALAN: OK.
Little creepy, but we can play all day long with that.
But the point is that these functions are just
now doing something a little different.
But it's just these inputs and outputs.
Well, let's make the cat more like a cat.
Let me go ahead and throw away all of this asking question stuff.
Let me go up to Sound, and let me go ahead
and drag the play sound meow until done.
And here too it comes with meow.
You can add your own sounds as well.
But I'm just going to use the default meow and here too.
Hopefully, this won't be too loud.
Let's make the cat meow by clicking Play.
[MEOWING]
OK.
It's a little piercing, but it's cute.
And if I want the cat to meow twice, I could just play the game twice.
[MEOWING]
All right.
But it would be nice to just get it to meow automatically two, or three,
or more times.
So you know what I could do?
I could just drag a second one of these.
Actually, you know what?
I could even just right-click or Control-click and duplicate them.
But I'll just keep dragging and dropping.
There's different ways to solve problems.
And now let me click Play.
[MEOWING]
OK.
Cat does not sound particularly happy.
So we could go under--
how about Control?
We could wait one second.
Now, there's no room, but it will sort of expand to give room for me.
So let me try this.
And now it's going to wait one second in between meows.
[MEOWING]
OK.
Let me stipulate that is correct.
If my goal is to get the cat to meow three times, it meowed three times.
But per our discussion earlier of algorithms and the design thereof,
this is not the best design.
[MEOWING]
OK?
[LAUGHTER]
Thank you for playing along at home.
Yeah.
In what sense is this arguably not well-designed?
Yeah.
AUDIENCE: You repeated yourself.
DAVID J. MALAN: I repeated myself, which actually in programming
tends not to be a good thing.
Now, it was easy.
I almost resorted to copy-paste, which saves me time upfront.
But just imagine a contrived scenario.
Now, what if I want it to wait like two seconds in between?
All right.
It's not that big a deal.
I change it here, and I change it here.
But what if the program is meant to meow 10 times?
Then I have to change it here, and here, and here, and here, and here.
And eventually I'm going to screw up.
Humans are fallible.
I'm going to overlook one of them.
One time, it's going to be one second.
Another is going to be two, and just stupid things will happen.
You're setting yourself up for failure if you design things poorly.
And so I would propose that we use another type of building block
to solve this instead.
Yeah.
AUDIENCE: [INAUDIBLE]
DAVID J. MALAN: Yeah.
So we could use a loop and just write minimal code
but to accomplish even more functionality.
So let me throw away most of these blocks.
And let's go and grab this repeat block, which we haven't used yet,
but it's right there.
And as the name suggests, this will allow
me to repeat something some number of times.
Let me put these two puzzle pieces inside.
It'll grow to fill.
Let me reconnect it to the green flag.
I'll change the default 10 to a 3.
And now--
[MEOWING]
It's just sort of better because if now you want it to meow more times,
you change it one place.
If you want it to slow down, you change it in one place.
There's no room for error.
And that's generally a good thing.
But this is silly.
Like, Scratch comes with a cat.
Why didn't MIT give us a puzzle piece called "meow?"
Like, why am I implementing the idea of meowing myself?
Like, that took me what?
1, 2, 3, 4 puzzle pieces.
Why isn't there just one puzzle piece that meows for me?
This too we can do in code, be it in Scratch, or C, or other languages too.
I'm going to go down to these pink my blocks here,
where I can create my own puzzle piece.
And I'm going to call this literally "meow."
And I'm going to go ahead and just click OK.
And notice that it's given me this new type of start connector.
It's a start puzzle piece that nothing goes above it.
But you can put anything you want below it.
And I'm going to go ahead and cheat here.
I'm just going to grab my existing code, so to speak.
This is code I'm writing, even though it's puzzle pieces.
And now let me just claim, and I'll move this aside.
Here is now an implementation of my own function,
my own block called "meow," whose purpose in life
is to meow until done and then wait one second.
But what's powerful now is notice at top left, now that I've made the block,
I can use it any number of times.
So I can grab this meow block, drag it over here, and you know what?
Now that "meow" exists as an idea, I can abstract that away.
And I'm just going to arbitrarily drag it way to the bottom.
I'm not deleting it.
I'm just putting it out of sight, out of mind so
that we can focus now on this idea.
And I claim that this implementation of meowing
is sort of better because it's more compact, it does what it says,
and I don't care about the implementation details of "meow."
So this idea of abstraction, something we're going to use frequently.
To abstract something away is to simplify.
Don't think about the underlying implementation details.
Just care about what it does or what it's called.
Someone has to care about the implementation details,
like me 30 seconds ago.
But here on out, I don't need to care.
And so in fact, you and I are using the abstraction
that is Scratch because I don't know how to put a speech bubble on the screen.
I don't know how to create that sound, meow.
MIT did that, and they abstracted those pieces
of functionality away already for us by just giving us
these puzzle pieces we see here.
So the code will work the exact same.
[MEOWING]
But it's sort of better designed now because now I've
abstracted away the idea of meowing.
But I bet I can improve this further.
Can I get rid of the repeat block altogether?
And let me just tell the meow block how many times to meow.
Well, let me go down to the bottom and look at the implementation details.
I'm going to right-click or Control-click on this,
and I'm going to edit it.
So I'm going to make a change.
And I didn't do this before, but I'm going to call it "meow," as before.
I'm going to add an input.
And just so I know what it says what it does,
I'm going to add the word "times" here.
And I'm going to change this placeholder to n.
n for "number" is the go-to placeholder any time
we want to talk about a number in CS.
So now notice the puzzle piece looks a little different.
It takes an argument or a parameter called
n, which represents the number of times you want the thing to meow.
Now, that doesn't do that yet.
So let me go back to my other code.
Let me just decouple these temporarily.
I'm going to move my loop into my implementation of meowing.
But I don't want to hard code, that is literally write the number 3 anymore.
I'm going to grab this oval and put it there.
So now I've generalized the function.
So now it will meow any number of times, 0 on up, by executing that loop
and now more powerfully.
Out of sight, out of mind.
Notice that my code just became so darn simple.
Like, my function is called "meow."
It meows some number of times.
All I have to do is type a number there, and it just works.
And I don't care any more about those lower-level, so to speak,
implementation details.
So here, no surprise.
If I type in the number 3, zoom out, and hit Play--
[MEOWING]
--it still works just fine.
So any questions on what we've just done here?
It's still just meowing, but that's besides the point.
It's this creation of our own functions, this modularity,
this abstraction that's going to be the idea that keeps coming back to us.
No?
All right.
So let's make this a little more cat-like.
Let me throw away all of this code.
And let me go ahead--
oops-- let me throw away this code first and then the rest of this code.
And let me go ahead and give myself another green flag block.
And let me go ahead, and let's create a cat that allows us to pet it
by moving my cursor over the cat.
And maybe it likes that, so it'll meow when I do that.
So let me go under Control, and let me grab this if conditional,
which we talked about as a building block earlier.
Let me go to Sensing, and we haven't used this before.
But here is a weird sort of diagonal shape
that says touching mouse pointer question mark.
So that's a Boolean expression.
So I'm going to drag that, and it's definitely the wrong size.
But it is the right shape, so it will grow to fill.
And the question I want to ask is if the cat is touching the mouse pointer,
then go ahead and meow happily.
So let me grab the meow sound, put it in there.
And so I think when I click the green flag to start the program,
and now I let the mouse pointer touch the cat, we should hear--
huh.
huh.
Doesn't seem to be working.
There's a bug or a mistake in this program too.
What did I do wrong?
Yeah.
AUDIENCE: You didn't specify the sprite [INAUDIBLE]..
DAVID J. MALAN: I don't need to specify the sprite explicitly
because a detail I didn't discuss earlier.
In the bottom right of the screen, notice
that the cat is already selected.
So this code relates to that cat.
So your instinct is good if we had two or more sprites,
but I just have one, so I'm covered there.
Other thoughts.
Yeah.
AUDIENCE: It only checks once.
DAVID J. MALAN: It only checks?
AUDIENCE: Once.
DAVID J. MALAN: Once.
So I click the green flag.
The computer did what I told it to do.
The mouse pointer was not touching the cat at that moment
because it was touching the green flag.
So, of course, it didn't meow.
So what maybe is the fix here?
What puzzle piece can we add?
AUDIENCE: After the green flag is [INAUDIBLE]..
DAVID J. MALAN: OK.
OK.
Interesting solution.
So let me go ahead, and under Control let me grab a-- wait one second.
I'm going to change the 1 to 5, and now I'm going to click the green flag.
So here we go.
1, 2, 3, 4, 5.
Damn it.
[MEOWING]
OK.
That was yours, not mine.
[LAUGHTER]
It didn't work.
AUDIENCE: [INAUDIBLE]
DAVID J. MALAN: Sorry?
AUDIENCE: [INAUDIBLE]
DAVID J. MALAN: Oh, maybe forever.
So your approach would work, but it's very much a hack, if you will.
Like, I would have to time it perfectly so that the mouse pointer is touching
it, or, conversely, I have to drag it there and just
leave it there for five seconds.
And that's a little weird because you don't just touch a cat
and then five seconds later it meows at you.
Like, presumably, we want it to be more interactive.
So I like this idea of a loop.
Right?
Why don't we just tell the cat to forever listen for the cursor
as by using not repeat but forever?
Let me move this in here.
So now the cat's going to be told when the green flag is clicked just forever,
if touching, if touching, if touching.
Oh, meow when actually touched.
So now if I zoom out and hit Play, nothing's happening.
I don't have to wait any number of seconds.
But when I do touch the cat--
[MEOWING]
[APPLAUSE]
[CHUCKLES] Fan section here.
Thank you.
[MEOWING]
So now it's actually working quite well.
So there we have sort of a logical bug.
But it does make sense if you think about what it was
you told the computer to actually do.
Well, let's make things even more interesting
by using one of these extensions.
In this bottom left corner, this is how I got to text-to-speech earlier.
Let me go to Video Sensing over here too.
And I can actually-- there we go-- literally, the video has come on.
Let me go ahead and do this.
Get rid of this code, and let me step out of the frame.
When video motion is greater than--
well, this is CS50, so let's just type in 50,
which is just a measure of motion.
Let me go and play sound meow.
OK.
And let me stop and restart.
All right.
So there's the cat.
[MEOWING]
OK.
It worked.
The cat's a little insensitive.
[MEOWING]
There we go.
Actually, you know what?
Maybe it's just-- let me put-- let's change it.
20.
Oh, my God.
Oh, that's OK.
[MEOWING]
There we go.
All right.
There we go.
So now it's a little more sensitive to the petting by using the camera.
Now, this is kind of a weird example.
And if I just start moving around crazily, like,
it's just going to meow incessantly, which was what was happening--
[MEOWING]
Stop.
[LAUGHTER]
OK.
When in doubt, this is when you reload the page.
[LAUGHTER]
All right.
So now we're back to where we wanted to be.
But where can we now use these kinds of building blocks?
Like, we were doing such tiny little programs.
But even that we could turn into a whole game, I bet.
Could we get like one volunteer to come on up?
One volunteer?
Everyone's looking down.
OK.
On the end here.
Come on down.
Yeah.
All right.
Round of applause for our one brave volunteer here.
[APPLAUSE]
All right.
These Super Mario cookies are on the line for you,
depending on how this goes.
So I'm going to have you come over here.
And in advance on Scratch's website, we have some pre-made games,
one of them written by one of your predecessors, a former student,
that they implemented this sort of "Whac-A-Mole" game.
So what you're about to see is the camera turn on on you.
And you're going to see four moles above, below, left, and right.
And using only your head--
up, down, left, right-- the goal is to whack a mole
to get a point every time your head touches one of these sprites.
So you're about to see things get very interesting very quickly.
But using these building blocks, just those simple
blocks but have four sprites, not four cats but four moles in this case.
We can actually turn these into actual games.
[MUSIC PLAYING]
So here we go.
Click Beginner.
OK.
And we just need you to center your head first.
[MUSIC PLAYING]
[INDISTINCT CHATTER]
[CHUCKLES]
[MUSIC PLAYING]
Nice.
Ten seconds.
[MUSIC PLAYING]
Nice.
Two seconds.
AUDIENCE: [LAUGHS]
DAVID J. MALAN: All right.
A round of applause.
[APPLAUSE]
Thank you.
You want to introduce yourself?
AUDIENCE: Hi, everybody.
My name is [? Vanilla. ?] I'm a first year,
and I'm going to be majoring in computer science and economics.
DAVID J. MALAN: Nice to meet you.
Here we go.
Thank you.
AUDIENCE: Nice to meet you.
[APPLAUSE, CHEERING]
DAVID J. MALAN: So we won't look at the code for that actual game.
It was written by one of your predecessors.
And you can see it online if you're curious.
But you can think about now with our functions, conditionals,
Boolean expressions, loops how you could kind of compose that kind of program.
So odds are there was a loop that was just constantly listening
for that kind of connectivity, or it was one
of those extensions that was waiting for motion to go
touch one of those sprites.
Notice that there's these numbers up here.
And we haven't talked about this yet.
But just like in math, where you can have variables x, y, and z,
in programming, you can create variables using other puzzle pieces
in Scratch that just keep track of how many seconds are left,
that keeps track of how many times her head hit one of the moles.
And so you can implement the mechanics of games using very simple building
blocks.
But how do you go about building something
that's more interesting and interactive like that?
Let me go ahead and bring up, for instance,
one of the very first things I wrote years ago
when I was in graduate school and Scratch had just come out.
I was taking a class at MIT's Media Lab.
And they invited us to beta test-- that is, try out the software before it then
became part of the world.
And the game I made was this one here.
Let me find the right version of "Oscartime."
So "Oscartime" is a game that took me tens of hours probably in the end.
It was a little bit addictive, but let me go ahead and full-screen it.
And I won't play the whole game.
But it looked a little something like this.
OSCAR: (SINGS) Oh, I love--
DAVID J. MALAN: Where trash is falling from the sky.
And I can click on it and drag it.
And notice as I get close, the lid opens up like this.
And if I let it keep falling, it goes in, and Oscar gives me a point.
And I can do this again.
OSCAR: If you really want to see something trashy--
DAVID J. MALAN: All right.
Here comes something else.
OSCAR: I have here a sneaker that--
DAVID J. MALAN: So now there's two pieces of trash.
OSCAR: It's all full of holes, and the laces are--
DAVID J. MALAN: And it just keeps going, and going, and going.
And if we can lower the volume for just a moment, we'll let more trash fall.
But to your comment earlier about one sprite or more
sprites, that's what we're seeing here.
Even though our examples thus far are just one cat, one or two puzzle
pieces, or a few puzzle pieces.
Here is, I claim, a sprite.
Here is another sprite.
Here is another sprite.
And by toggling among them in that bottom right-hand corner,
I can just associate different puzzle pieces with each of these sprites.
Now, I didn't start off by implementing this whole game.
And in just a moment, if we can raise the volume a little bit,
we'll see even more trash is falling.
So this is what--
I hate this song now, like 10 plus hours listening to this song on loop
just to get the timing right.
But it brings to life all of these different sprites.
And if you play it again and again, it's always a little bit different
because I'm using some randomness.
So this newspaper doesn't always fall from there.
Sometimes it's here.
Sometimes it's here.
And so here, again, we have mechanics of a game where
things are being perturbed a little, randomized a little bit
to keep things more interesting.
And let me go ahead.
OSCAR: (SINGS) I love trash.
DAVID J. MALAN: There we go.
How. about raise a little volume?
One more piece of trash.
So a clock.
It just goes on forever, this kind of game.
But let's go ahead and consider.
Let me close that.
Let me go ahead and consider.
How I went about implementing that from the get-go.
So I will stipulate--
let me open a few of these versions here-- that the very first thing I did
was pretty much just implement the stage.
Right?
I was kind of procrastinating, so I poked around.
I found the Sesame Street lamppost, and I dragged it into the world.
And done.
Version one is done.
It didn't do anything, but at least I had the world sort of laid out.
That is to say I took a baby step toward my goal.
Then I started thinking about, all right,
how do I bring the trash to life, even if it doesn't do much of anything else?
And so I created another sprite by clicking the appropriate button
in that bottom right-hand corner.
And I thought about, well, what do I want this trash to do?
I want it to just kind of fall from the sky.
And so what I did here was the following.
If I go to this trash piece here or-- actually, sorry.
Out of order.
What I actually did first was I didn't even have the trash fall.
If I play this game, the trash just stays there in the air.
But I can do this.
I can drag it, and as before, as I touch the other sprite,
I get the trash can lid to go up.
So how do I do that?
Well, let me click on Oscar down there, my first sprite.
And here are the puzzle pieces via which I implemented this idea.
I changed Oscar's costume, his appearance,
to be just number one, which was one of the images I imported into the program.
And then I forever did this.
If Oscar is touching the mouse pointer, then
change Oscar's costume to number two, otherwise change it back to one.
So it's super simple animation.
I'm just toggling between lid up, lid down, lid up, lid down,
but it kind of feels interactive.
And if I wanted to really make this pretty,
I could have 30 different costumes where the lid is ever so slightly higher.
Then it would look even more like a movie or fluid motion.
But this was enough to get the job done, which
is to say I didn't try to implement all of "Oscartime" together.
I just took a second baby step toward my goal.
And then my next version of "Oscartime" might
have looked a little something like this, where now the trash--
there's more going on here.
Let's look at two of these blocks of code.
The first thing I did was I enabled drag mode to draggable,
and I had to Google to figure this out because otherwise it
didn't let me drag the trash while playing the game.
But once I figured that out, I tell the trash
to go to a random x-coordinate between 0 and 240
from left to right and then the y location 180
because I always want the trash falling from the sky.
And then what do I do?
I told the trash to forever change its y-coordinate, its vertical coordinate,
by negative 1, negative 1, negative 1, one pixel
at a time, which creates the illusion of it falling from the sky.
But I needed to do one other thing, and let me scroll up.
Each of your sprites can have multiple programs, multiple scripts,
so to speak, that are not attached to one another.
They will happen in parallel for you.
The second one is saying this.
Forever if the trash is touching Oscar, what should it do?
Go to a completely different x and y location at the very top.
Why?
Well, as soon as I drag the trash over the Oscar,
I want it to disappear as though it's going into the can.
And I then want it to reappear at the top so more trash falls.
So I just thought about what would it mean
for the trash to go into the trash can.
Well, who cares?
What really matters to the human user is that it just
disappears and teleports elsewhere.
And so that's the idea I implemented here.
So if you can reduce intuitive ideas to just basic building blocks like this,
you can start to make things much more interactive.
And lastly, if I look at this version here,
you'll see that we've combined these.
And so indeed, if I actually go ahead and play this now,
not only is it falling.
I can let it fall right on top of Oscar and watch it disappear.
But notice Oscar doesn't pop out yet because that was the fourth version
and then the fifth version.
And then I added the annoying music and so forth but sort of
composed this program step by step by step
so as to accomplish my larger goal.
And this is going to be true of all of the code you write,
be it in Scratch, or C, or Python, or in the like, trying to come up with--
or rather, trying to reduce your ideas, your grand vision to just baby steps,
building blocks so that you start with version one,
and maybe you submit version 10 or 20.
But you don't try to implement version 10 or 20 at the get-go.
You take those incremental steps.
All right.
How about one other?
Well, let me propose this.
Let me go ahead and open three games that represent one
that your predecessors also implemented, which looks a little something
like this in version zero.
Suppose I wanted to implement a game that
simply has these kinds of mechanics.
I'm touching my arrow keys on my keyboard-- up, down, left, and right.
And I'm moving the Harvard logo.
Let me zoom in a bit.
So if I hit the up arrow, the Harvard shield goes up.
If I hit the down arrow, the shield goes down.
If I go all the way to the left, it goes left
until it hits the wall and same thing on the right.
So this is like the beginnings of a game or a beginning
of a maze, something like that.
Well, how might I implement this?
Well, let me look inside this one.
And there's a lot going on, but, again, I sort of took simple steps.
Notice that I've got three sprites--
a left wall, which is just a straight line,
the right wall, which is a straight line.
And just intuitively, why did I implement those as sprites?
Why do they need to exist as entities themselves?
Yeah, in front.
AUDIENCE: [INAUDIBLE]
DAVID J. MALAN: Yeah.
I want it to interact with the shield.
So I need to be able to ask that Boolean expression, like,
not touching mouse pointer but touching shield, for instance,
a different type of yes/no question.
And so what is the code for the shield actually doing?
Well, there's a lot of duplication, and let me focus on the abstraction first.
Notice that I've got this one green flag clicked.
I want the shield to go dead center, 0 comma 0,
and then forever listen for the human's keyboard, and feel for the wall.
So I decided to implement my own pink puzzle pieces that
implement the two separate ideas.
One, just listen for the keyboard-- up, down, left,
right-- and then do something.
And then feel for walls is this idea of whenever I go up,
down, left, or right, if I touch a wall, I
need to stop doing whatever the keystrokes are telling me to do.
So now if we dive into those implementation details, listen and feel
are abstractions, custom puzzle pieces.
Let's look at the implementation details.
Well, here's the keyboard.
If the key arrow up is pressed, change y by 1.
If key down arrow is pressed, change y by negative 1.
And you can probably see where this is going.
Right arrow is x by 1.
Left arrow is x by negative 1, and that's
sort of all that's involved with up, down, left, right.
But wait a minute.
Why is there no loop in this listen for keyboard puzzle piece?
I needed a loop last time so it constantly works.
AUDIENCE: [INAUDIBLE]
DAVID J. MALAN: Exactly.
I put the loop in my main part of my program
up top so something is telling me to keep listening again and again.
So it's got to be somewhere, but it doesn't have
to be in the actual implementation.
And lastly, how about this feel for walls?
Well, if touching left wall, which is just another sprite, change x by 1.
So that is to say if I'm touching the left wall,
I want to bounce it back the other direction
and same thing on the right wall.
If I'm touching the right wall, I want to bounce it
back to the left, which effectively means that even if the human's hitting
the key, it's like fighting with this code,
but it's never going to go through the wall based on that math.
It's going to stop it right there.
All right.
Let's add something else to the mix.
Suppose I want the game to change to be a little something like this,
where Yale is some kind of block in between me and the exit.
So some dramatic race here.
OK.
I just got by, but the Yale logo doesn't seem
to be doing all that much except bouncing.
So I'm guessing there's a loop, maybe a conditional checking for those walls
too.
So let's go ahead and zoom out, see inside.
Let's not worry about Harvard because it's pretty much the same.
Let's look at the Yale puzzle pieces.
And sure enough, go to the middle.
0 comma zero.
Point in direction 90, so point horizontally on the grid.
And then if touching left wall or touching right wall--
I'm kind of cheating this time, but cleverly, just spin around and do 180
so you effectively bounce off the wall.
This just tightened up my code.
I don't need to do the negative 1 or the plus 1.
I just say bounce in this form of code, otherwise just
constantly move one step.
Now, if this is a game where Yale is supposed to be better and faster,
well, let's change the 1 to 5.
Move 5 pixels at a time.
Let's move it 10 back and forth.
Let's maybe 100.
Uh-oh.
So what just happened?
That is a bug, which we can avoid by just not doing that.
But why did it break out of the wall?
Yeah.
AUDIENCE: [INAUDIBLE].
At first it was [INAUDIBLE].
DAVID J. MALAN: Exactly.
Because I'm doing 100 steps at a time, I'm
never actually touching the other sprite because I'm
sort of stepping way over it.
So there's never a moment where they're actually touching.
So previously, I was just getting lucky by doing fewer steps because it's
gradually going over the wall, which gives me
just enough time to detect as much.
So I would have to kind of tinker, and he'll
handle this a little bit differently.
So it's a bug if it's too fast.
But at least if I keep it slow and reasonable
the math actually does work out, so long as it starts again in the middle.
Well, let's do one final flourish here, whereby let's bring MIT into the mix.
Right?
They're super smart, so maybe they can kind of
track us and follow wherever I'm going.
So how might this work?
All right.
So nothing happens yet because we haven't finished composing the game.
And notice here--
OK.
Now MIT is struggling.
It's kind of twitching there because it's going just above, and below,
and then above, and below.
So we could fix that too if we want.
But that's just a function of my math, one pixel at a time.
Let me open up this one, see inside, and click on MIT.
And it doesn't take much to implement MIT, it seems.
So go to random position, forever point towards the Harvard logo outline,
AKA the shield, and then move one step.
So if I wanted to make MIT even smarter, even faster, what do I change here?
AUDIENCE: [INAUDIBLE]
DAVID J. MALAN: Yeah.
Change one step to two steps to double their speed or five steps, 10 steps,
or 100 steps.
And the game is going to be over like that.
But that's all it takes to now make these kinds of elements.
So if you are a game player on your phone, or consoles,
or computer, or whatever, if you think about almost any game,
you can probably now start to think about how they implemented
those mechanics because it's just being reduced to functions, conditionals,
loops, variables, and the like in this case.
So let's go ahead here and have maybe one final volunteer.
We've got one more bag of Oreos here.
OK.
That was super fast.
Do you want to come on up?
All right.
Brave volunteer.
Come on up.
[APPLAUSE]
All right.
Let me find the full-fledged version of this that one of your predecessors
made.
And let me get the right one.
OK.
Here we go.
We'll see some instructions on the screen in just a moment.
And when we hit Play, you'll see that the mechanics are all combined now
into one full-fledged game.
But first, an introduction.
It's on.
SAM: Hi, everyone.
I'm Sam.
I live in [INAUDIBLE].
I'm a freshman, and I'm from Nepal.
DAVID J. MALAN: All right.
Welcome to the stage.
[APPLAUSE]
SAM: Thank you.
DAVID J. MALAN: All right.
So here we go.
Yep.
Go ahead and click the green flag.
[MUSIC PLAYING]
[MC HAMMER, "U CAN'T TOUCH THIS"] You can't touch this.
DAVID J. MALAN: You see the grid is just bigger this time.
(SINGING) You can't touch this.
DAVID J. MALAN: Nice.
Now there's that Yale element.
(SINGING) You can't touch this.
My, my, my my music hits me so hard.
Makes me say, oh, my Lord.
Thank you for blessing me with a mind to rhyme and two hyped feet.
It feels good when you know you're down, a super dope homeboy from the Oaktown.
DAVID J. MALAN: OK.
Third Yale.
All started at slightly different positions.
(SINGING) I told you, homeboy.
You can't touch this.
DAVID J. MALAN: Nice.
All right.
There's MIT.
(SINGING) And ya know you can't touch this.
[CHEERING, APPLAUSE]
DAVID J. MALAN: Oh.
(SINGING) You can't touch this.
Yo.
Let me bust the funky lyrics.
DAVID J. MALAN: Gotta go fast.
Oh.
No.
Oh.
[CHUCKLES]
(SINGING) Cold on a mission, so fall on back.
Let them know that you're too much, and this is a beat they can't touch.
DAVID J. MALAN: Nice.
[EXCLAIMING]
(SINGING) You can't touch this.
DAVID J. MALAN: No more walls but two MITs.
(SINGING) Yo, sound the bell.
School's in, sucker.
DAVID J. MALAN: Princeton now.
(SINGING) Give me a song or rhythm.
Making them sweat, that's what I'm giving them.
Now, they know you talk about the Hammer when you're talkin'
'bout a show that's hyped and tight.
Singers are sweatin', so pass them a wipe or a tape to learn.
DAVID J. MALAN: Second to last level.
(SINGING) The chart's legit.
Either work hard, or you might as well quit.
That's word because you know you can't touch this.
Break it down.
DAVID J. MALAN: All right.
Clear.
There we go.
Nice.
Oh, oh.
Oh.
Few more lives.
Oh.
(SINGING) Stop.
Hammer time.
DAVID J. MALAN: Here we go.
There we go.
[EXCLAIMING]
All right.
Couple more tries.
Yes!
Oh, no.
(SINGING) This is it for a winner.
Dance to this, and you're gonna get thinner.
Now move, slide your rump.
DAVID J. MALAN: Starts getting stressful.
(SINGING) Just for a minute, let's all do the bump.
Bump, bump, bump.
Yeah.
You can't touch this.
Look, man.
You can't touch this.
You'll probably get hyped, boy.
DAVID J. MALAN: One more try.
(SINGING) You can't touch this.
Ring the bell.
School's back in.
DAVID J. MALAN: All right.
A round of applause, nonetheless.
[APPLAUSE]
Nicely done.
Thank you.
[HARMONICA NOTE]
[VOCALIZING]
SPEAKER: (SINGING) There's a certain someone who I'm indebted to.
And since the old [? BNC ?] has 50, I have this friend for you.
[CHEERING, APPLAUSE]
[VOCALIZING]
(SINGING) It's the first day of class, and I'm brand new to code.
Is this for me?
So many people around.
Can I get through the workload?
But it's my dream.
I tend to stick to English, not science.
But my [INAUDIBLE] friends told me to try this.
Hey, dancing robot dog, you kind of look like you have your life together,
I guess.
I really need some advice.
(ALL SINGING) We know you're feeling unsure,
but this is really the right call.
In CS50, you'll meet new friends, get free food.
You'll be all set for this fall in CS50.
You have a thousand TAs who will help you.
You'll get cupcakes, duckies, Chinese food.
And you can always take this class and set aside.