>> SPEAKER: I'm [INAUDIBLE].
And I'm a senior at Leverett House.
I study computer science, and I'm a TF for CS50.
As a freshman, I didn't even have a laptop or a smartphone.
I had no programming experience.
CS50 was the most memorable course that I took at Harvard because it was
a struggle, but it was a really fun struggle at the same time.
And I made a lot of amazing, permanent friends, and I learned a lot of really
applicable skills.
I'm just so glad that I didn't let my lack of background be an excuse for me
not take CS50.
I'm [INAUDIBLE].
I'm a senior at Leverett House, class of 2014.
And I took CS50.
>> DAVID MALAN: So this is CS50.
This is the end of week zero.
And recall where we began the last time, was with these lamps, which were
so popular that we went and bought some more today.
So I think this will be our thing this year--
desk lamps if you come up on stage, at least until we run out.
>> But we used these recall, to introduce the basics of representation of data.
We needed way to start representing information inside of a computer.
And the simplest way to do that was with one ingredient, electricity.
And the simplest thing you can do with electricity is turn it on and it off.
Let the electrons flow or not.
And using those two basic states, off and on, or false and true, or zero and
one, we began to see that we could build up, in this case, with light
bulbs, more numbers than just zero and one.
We counted as high as seven, for instance, last time.
But all we have to do is keep throwing more and more light bulbs at that
problem and, really, we can represent any number that we
might possibly want.
>> Well, we transitioned quickly then on Wednesday to this byte of volunteers.
8 bits is what we generally call a byte, so here we had eight volunteers
on Wednesday who collectively were representing eight bits.
And when their hands went up, they were a one.
And when their hands were down, there were a zero.
And we had these folks come up on stage why?
What we're able to do with this sequence of bits?
>> To create an alphabet.
We were able to build on top of that previous lesson learned and actually
start to make more interesting information that's at least more
familiar to us humans.
And this is going to be a recurring theme throughout 50, but also computer
science more generally, this idea of layering, where, at the end of the
day, if you really started the basics with a computer, yes,
it's zeros and ones.
And beneath that it's just electricity.
But we very quickly start to take those low level details for granted
and start to layer on top of past worked done so that we, ultimately, by
the end of the semester and, really, more generally as computer scientists
and programmers, can do some really powerful things by leveraging work
that we ourselves have done and also standing on the shoulders of others.
>> Now we quickly transitioned on Wednesday from just needing to
represent information to wanting to do something with it.
So what did we define an algorithm as?
A series of instructions.
So it's a series of instructions, a number of steps that you, a human, or
a computer, more typically, would execute one after the other in order
to achieve some goal.
And we had a few goals last time, one of which was to count
people in the room.
And another such example was to find Mike Smith in a phone book.
>> So you may recall that I tore a phone book in half toward this end up
finding Mike Smith.
The purpose of that visual was to demonstrate, again, that we were
literally tearing this problem in half, in half, in half, and very
quickly going from like 1,000 pages to just one single page.
Those of you who missed this on Wednesday, I thought we'd play back
some footage of what you missed.
Let's take a look.
>> [VIDEO PLAYBACK]
>> -There we go.
1500 pages, Nice clean line, legitimate tear.
>> [END VIDEO PLAYBACK]
>> DAVID MALAN: So that was Wednesday.
We transition, though, on Wednesday now to wanting to represent algorithms
in some somewhat standard way, not just describing them verbally, but
trying to express them in writing or on a computer screen so that we could
begin to improve upon, and modify them, and, eventually, actually
analyze just how correct or how fast they were.
>> So we introduced this notion of pseudocode, which, in
layman's terms, is what?
OK, words.
Let's go a little deeper than that.
English, sure, are but toward what end?
Words with which to create or to represent algorithms.
So there's no one language known as pseudocode in the world.
It's just that you, in English, or whatever your spoken language is, use
a sort of cursory notation to convey an idea very succinctly.
But we'll see that, certainly with an English pseudocode, and it turns out
most programming languages themselves are derivative of English itself,
we'll find that there's some standard ways of representing pseudocode and
also programming code.
So as you begin to see even the simplest examples today, realize these
same patterns will recur next week.
>> So pseudocode was some kind of language resembling
a programming language.
And the first example we saw visually written down was this one.
It was only a three step program, the goal of which was to count the number
of people in a dorm room for that video on Wednesday.
But there were a few interesting aspects of this simplest program.
>> And this will be recurring themes.
So for those that are unfamiliar with this, one, we introduced a variable.
And probably everyone in this room is familiar with a variable in the
context of algebra.
But here in programming, variables are, one, can be
called anything we want.
We've been using n as a counter.
But we could use the word counter, or, as you'll see, most any phrase that
you might like so long as it's descriptive, but it's really just a
storage container.
It's a chunk of memory, some number of bits, and it varies by computer, how
many bits there are that compose that variable.
>> But we can put values in it.
Thus far, we've only put numbers.
But we can put actual words.
We can put paragraphs.
We can put images--
anything, really, we can represent with zeros and ones, we can put in
this higher level notion of a variable.
>> So pretty straight forward there.
And that's line one.
But we very quickly moved on from line one to actually do
something with that variable.
And in line three, we updated N. We incremented N. And we could write this
any number of ways.
But perhaps the most obvious is just to say, set N equal to
whatever N is plus 1.
So that was our increment.
>> Meanwhile, there was a loop.
And this one, too, is probably pretty intuitive.
A loop is just something in a program that happens again and again, some
kind of cycle.
And this key phrase here, for each, is actually very common throughout most
programming languages, including ones we'll see in the course.
Anytime you see the word for, it typically conveys the idea that a
loop, something cyclical, is about to happen.
>> But it's worth noting one other syntactic detail.
The fact that third line there is actually indented by having hit the
space bar few times is deliberate.
Because human convention is such that, when you're doing something again and
again, in a loop, as begun on line two, you indent anything that belonged
to that loop just to make clear that it's line three and not, for instance,
line four or five, if there were lines for or five, that are
part of that loops.
So this simple indentation conveys that basic idea.
>> So we applied this algorithm, now, to a few examples.
And this, too, simple example in the real world.
But it's going to be representative of how you would go about testing your
own increasingly complex programs.
You try a few scenarios, some representatives inputs, and see if you
get the desired outputs.
>> So this example had two people sitting in the dorm room.
On the left is that same pseudo code.
And this is a screen shot of the very last step of the application of this
algorithm to those inputs, where there were two people in the room and,
recall, as we step through lines one, and two, and three, and two
and three and done--
by the end of that algorithm, we had indeed counted the two fellows who are
in the room.
>> So then we tried another example.
And we said what if there are zero people in the room?
Is this code still correct?
And indeed it was.
It just so happens that line two and, thus, line three or
not going to execute.
They're not going to happen at all because they're just not applicable if
there's zero people in the room.
>> But not a big deal.
Line one initialized N to zero, so even though only one line of this
program actually ends up being useful, it still yields the correct answer, as
indicated by the orange zero at the bottom.
But then we decided that was kind of a stupid algorithm.
It was pretty slow.
Surely, I can do two, four, six, eight, ten, when
counting people in a room.
>> So we tweaked the algorithm, the pseudocode, to say, now in line two,
for each pair of people in the room, proceed to, in line three, increment
in by two on each iteration.
So that would have worked here for this pair of persons in the room.
>> But then, if you start thinking about this, and it doesn't take long to
realize, wait a minute this is going to break, it breaks
at what simple case?
If there's three people in the room or, more generally, when there's an
odd number of people in the room, including one.
We would miss that person here because there are no such pairs.
So we quickly addressed by instead introducing what additional
programming constructs to the pseudo code.
>> So a condition, we called it, or a branch.
And it's meant to convey, visually, the idea of branch, a fork in the road
where you can either do this or, maybe, something else.
And indeed, we address this issue by adding line 4, by saying, really, at
the very end, if one person remains, then go ahead and count them special.
So you sort of special case them, so to speak, so that now we can handle
both an even number of people and an odd number of people.
>> Now there are any number of ways we could have expressed this.
And frankly, I could've been even more nit picky when it came to my choice of
English for the pseudocode.
But at least the spirit of the idea is conveyed.
If you handed this code to a friend who's not in CS, or has never taken
CS, odds are they could figure out, given three people in the room, how to
count those people based on these instructions.
And that's all really we want to achieve with pseudocode, somehow
standardize how we're going about representing ideas so that we can
begin to do more complicated thing still.
>> So that leads us then, today, to actual code.
We begin to program today, albeit in a friendly environment.
And then we transition very quickly to a more arcane syntax, but one that
you'll see is fundamentally the same as the ideas will see manifested with
this other language today.
It's just going to look a little different.
>> So rather than just call this code, I'm going to be a little more precise
and say, henceforth, when writing a program, you're writing source code.
It's kind of like pseudocode.
But we'll see it's not sort of loose when it comes to choosing the words
that you use.
When programing in a language, you have to use the words, the phrases,
the syntax, that other people have decided represent
that particular language.
So pseudocodes is up to you.
An actual programming language like C, as we'll eventually see, is
standardized by other people.
>> So how do we go about writing some source code?
Well I'm going to go ahead and do this.
I'm going to go ahead and open up a window here.
More on this next week.
But this is a device called the CS50 appliance.
I'm running a piece of software on my Mac, though you can do the same thing
on a Windows computer, that is giving me the illusion running a different
operating system altogether right here in a window on my Mac.
I've just full screened it so you don't actually see Mac OS right now.
>> This is an operating system called Linux.
It's very popular.
It's very fast.
It's very free, which has made it very compelling, especially in the
commercial world.
And more on that toward the end of the semester when we use Linux quite a bit
for web programming and hosting of actual websites and projects.
So now, just know that this is a desktop that's meant to look vaguely
familiar to Windows and Mac OS.
It just has some different names and icons for things.
But this is the so-called CS50 appliance, a virtual machine that,
starting next week, you guys will run inside of a window on
your own Mac or PC.
>> For today, I'm going to open up the simplest of programs.
It's called gedit.
And this is just a graphical editor.
It's kind of like Microsoft Word, but simpler.
It's kind of like text edit or notepad.
It's just a very simple program with which to write words on the screen.
It just so what happens that if I save files that I create when this program
in a special extension like .c, instead of .doc, or .xls, or whatever
you're familiar with, I can actually create programs using even this simple
text editor.
>> So let me do that.
Let me go ahead and save this file first as hello.c.
And again, this user interface will become familiar to you quickly.
But for now, I'm just typing in a file name.
I'm going to save it into my John Harvard home directory.
And now I have this tab that indicates I'm indeed editing
a file called hello.c.
So nothing too interesting yet.
>> And now it's going to get pretty cryptic.
I'm going to zoom in, just so it's more visible.
And I'm going to start typing include stdio.h, int main, void, open curly
brace, one, two, three, four spaces of indentation, print f, for print
something formatted, quote unquote, "hello, world" backslash, n, close
quote, closed parenthesis, semicolon, enter backspace, backspace, backspace,
backspace, closed curly brace--
I have programmed.
>> All right so this is a super simple program, really, the program that
anyone starts off programming with.
And all it does, for all its complexity, is print out on the
screen, guess what?
Hello world.
But it's not sufficient just to write a program.
So this is code.
This is source code in a language called c.
It's saved currently in a file called hello.c.
>> Now look at the bottom of the screen here.
More on this, again, in the weeks to come.
But this is what we'll call a terminal window.
It's a blinking, black and white prompt.
It's sort of an old school interface to a computer that generally doesn't
use a mouse or other graphical elements.
It just uses your keyboard.
And I can type commands at this blinking prompt.
>> And for today's purposes, I'm just going to type the following--
make hello.
And that program, make, is just a program that, in the real world these
days, we would double click on.
But in this interface for today, we're going to type its name at this prompt.
make hello is literally going to make me a program called hello.
And it's going to do so by looking for a file, just by
default, called hello.c.
It's going to assume I want a C program by nature of how this computer
is configured.
>> So I go ahead and hit enter.
I see some cryptic output, but this will become all too
familiar before long.
This happened to run a compiler, more on that in a moment, called Clang.
But now, I've got just another blinking prompt.
And I can go ahead now and type dot slash, for uninteresting reasons we'll
come back to next week--
hello.
>> So all of this effort thus far just to write the simplest of programs that,
as soon as I hit Enter, does that.
So I've written my first program.
So I'm deliberately poking fun at this very simple program
for a couple of reasons.
One, it's hard to get excited about taking a class if
this is the end game.
>> But more than that, there's a lot of distractions up here.
The first time you learn to program, for those of you less comfortable, and
even I, back in the day, when I first saw something like this-- you can kind
of figure that, all right, this is in a print hello world.
But there's so much distraction.
There's so much syntax on the screen that it gets in the way of very
simple, otherwise simple, ideas.
>> So what we're going to do today is we're going to put aside C and come
back to that on Monday.
And we're going to use a graphical programming language called Scratch.
This is a programming language, that I alluded to on Wednesday, that's going
to allow us to do the same kind of stuff but turn a blind eye, for today,
to the curly braces, the parentheses, the semicolons, and all these stupid
distractions that get in the way, in this first day, of some basic, pretty
interesting ideas.
>> So toward that end, I'm going to go back to my desktop over here and
introduce you to the alternative to that program, which is going to look a
little something light this.
That's how we're going to implement that same program today-- two puzzle
pieces that, when interlocked and clicked on, will say to the world,
hello world.
>> So let's actually go there.
So I'm going to go ahead and open a website known as scratch.mit.edu.
And this will lead me to this website here.
In advance, I've logged into this website and the first problems that
will walk you through some of these steps.
I'm going to go ahead and click on my scratch folder here.
>> And this is going to show me some projects that I've
actually created in advance.
And it turns out that this graphical programming language not only is going
to let us program by dragging and dropping these puzzle pieces, you
don't even need special software.
It's all embedded within a browser so that you can do this, in theory, on
your computers right now, as some of you may well be, without even needing
software like the CS50 appliance, which will come next week.
>> So I'm going to go up to the top corner here and click on Create.
And in a moment I'm going to get a blank screen via which I can start
programming in this graphical programming environment.
But this time, it's going to be much, much simpler to actually do so.
So in just a moment, when the Wi-Fi cooperates, we now have this screen.
So a quick verbal tour, but I dare say, certainly when you dive into the
first problem set, you'll find this all very
accessible and fairly intuitive.
But let's paint a mental picture for just a moment.
>> So beneath this prompt saying save changes, you're about to see scratch.
This is a sprite.
It's a character.
And he lives on what we'll call a stage, this big white rectangle on
which he can move up, down, left, right, and do, really,
other types of actions.
>> Meanwhile, in the middle of this user interface, we have a whole bunch of
puzzle pieces.
And you'll see that they say things like move 10 steps, turned 15 degrees,
point in a certain direction.
But there's categories of blocks up here too.
So if I go to Looks, you'll see that there's other puzzle pieces that
apparently will tell this cit to say hello, to think, to show
himself, hide himself.
If I go down to Sounds, it turns out there's ways to play sounds like meow,
to stop all sounds, to play a drum.
>> So, long story short, there's a whole bunch of puzzle pieces that allow you
to tell this cat, or any number of other characters, what to do.
But to make this all happen you need to start programming.
And this big white box, or grey box, on the right hand side, this is where
I'm going to actually drag and drop those puzzle pieces.
That is my blank text window equivalent.
>> So I'm going to go ahead and click Control in the middle.
Or rather, let me start up under Events.
Under Events bench, you'll notice a few things that are deliberately
curved on the top in such a way that they probably don't interlock on the
top of the puzzle pieces.
And that's because they demark the start of a program, the start of a
script, so to speak.
So if I go ahead and drag, when green flag clicked over here, and then I
want this cat to say something at first.
So I'm going to go under the looks panel.
And I'm going to go ahead and grab the say hello block, and drag, and drop,
and let go so that it automatically interlocks there.
>> And then notice I can click on the text.
And I can override it to be more specific like, say, hello world.
And now we have the program that I claim is equivalent to that much more
arcane program I implemented in C a moment ago.
>> If I go over now to the left hand side, notice there's a big stop sign
and a big green flag.
Let me zoom in for clarity.
And when I now click this green flag, you can probably guess what this first
program is now going to do.
So there, too, we're programming, but we're not actually getting bogged down
in some of those syntactic, minute details.
>> But let's try something a little more interesting.
Let me go into my Scratch folder here.
And actually, let me so let me open up a separate program here for just a
moment, Maximize this window, File Open, and I'm going to go into today's
source directory.
As always, you'll find, today and onward, that all of today's examples
are accessible inside of the course's website.
>> And I'm going to go ahead here and pick up a little something different.
This one here, for which I need a volunteer.
Who would like a desk lamp today?
OK, how about someone a little-- are you on the end?
Come on down.
Now, would you like to participate, or just say start with the desk lamp?
>> VANESSA: [INAUDIBLE].
>> DAVID MALAN: OK.
Excellent, what's you name?
Vanessa?
David.
Nice to meet you.
So come on up and Vanessa's going to take control of my
keyboard for just a moment.
And what I've done here, just for time's sake, as I've realized the
Wi-Fi was a bit slow, Scratch, the programming environment that we're
using, can also be downloaded and run on your local computer.
So what I did in advance of lecture, in case that happens, is I downloaded
all the files we're about to play with so that they can run a little more
quickly right here on my laptop.
So that's why now I'm seeing a Mac-specific interface.
>> So I'm going to go ahead and open up this one.
I'm going to go ahead now and full screen the window.
And as you'll see, we can very quickly, as this student did, one of
your predecessors, go from hello world to a much much more compelling
application.
So here are the instructions.
Oh, and we have one other thing.
I thought it would be fun, since, normally, we'll be filming
cameras this way.
I thought it would be fun if, Vanessa, we could see the world
through your eyes.
So here we have some Google Glass.
>> [ASTONISHED GASPS]
>> DAVID MALAN: We will only be giving away desk lamps today.
>> [LAUGHTER]
>> So let me cue this up.
All right, so touch this.
OK, Glass, record a video.
All right, Vanessa?
Now, as an aside that has got nothing to do with Scratch, if you look
slightly up and to the right, you'll see the literal glass, and you should
see a little rectangular window.
You should see all your classmates being filmed right now?
Yes.
>> VANESSA: Yes.
>> DAVID MALAN: OK.
So that's fine.
We'll release this footage later.
For now, turn your attention to the screen here.
And what your predecessor has done is put some instructions on the screen
just by using a paint program.
So you're going to, in a moment, press the space bar to begin.
And then some puzzle pieces are going to start moving up the screen.
And you want to hit the arrow keys, just like in real DDR, in accordance
with things lining up with those arrows.
>> VANESSA: OK.
>> DAVID MALAN: You've play this before.
>> VANESSA: Yeah.
>> DAVID MALAN: All right, Vanessa, go ahead and take it away.
>> [MUSIC - KAYNE WEST, "STRONGER"]
>> [APPLAUSE]
>> DAVID MALAN: So let's now take a step from that.
So clearly, that's the end game.
The end game is not hello world.
But you don't have to necessarily do things that are so interactive.
You can also do animation.
So for instance, another one of your successors made this program here,
which tells a story more than it does implemented a game.
So let me go ahead and open up here a program in our same source directory
from today.
This one call, and let's start with, a cookie love story.
>> And not to make this too academic, but, as you watch this one, think to
yourself which of those simple programming concepts we've talked
about thus far--
variables, and loops, and conditions, did your predecessor probably use just
to implement some of the visualizations.
You see here.
So I give you A cookie love story.
>> [MUSIC - GREEN DAY, "HOLIDAY"]
>> [CRASH]
>> [MUSIC - THE TURTLES, "HAPPY TOGETHER"]
>> DAVID MALAN: All right, so there, we had a cookie love story.
But even there--
>> [APPLAUSE]
>> DAVID MALAN: All right, even there, think about, as those hearts went from
the bottom to the top of the screen, there was actually a bit of
randomness going on.
And indeed, we'll see that even in the simplest of environments, like
Scratch, as in C, you can generate random numbers, or the illusion of
random numbers, so that the game is a little more interesting than it might
be if you had absolutely hard coded everything.
>> In the movement that you see, there there's some kind of responsiveness.
As soon as the gingerbread man touches the gingerbread woman, she
seems to move away.
And so, indeed, you can implement, in most programming languages, the notion
of events, whereby if one hand touches the other hand, that can trigger some
of your source code to actually execute.
You can listen for such things on the screen.
>> So let's take a quick tour, then, of some of the building blocks we can use
to achieve some of these goals.
So here's what we'll henceforth call a statement.
A statement happens to be purple in Scratch, a little something like this,
but that's arbitrary.
A statement is just a puzzle piece or, more generally, an instruction, that
tells the computer to do something, a statement.
>> So here's a simple sample.
Say hello world.
Another one might be wait one second.
So this puzzle piece, which is supported in Scratch, we'll let your
characters pause for some number of seconds.
This, too, is just a statement.
>> Here next, we have another more interesting one, play sound meow, and
the little arrow means that in Scratch, this is a drop down menu.
So you can import sounds.
You can record sounds and do other fun things in Scratch.
And that, too, though, at the end of the day, is just a statement.
But now let's introduce a more interesting piece, that known as a
Boolean expression.
Capital B, named after a fellow named Bool.
>> And a Boolean expression is just a puzzle piece or, more generally, a
piece of information that is either true or false--
one or zero, yes or no.
So it's just one of those two opposites.
So one such Boolean expression in the world of Scratch looks like this blue
puzzle piece.
And it's asking a question, mouse down, and that can either be, of
course, true or false.
So with this puzzle piece in Scratch, well, you'll be able to detect if a
puzzle if the mouse is, in fact, being held down by the human interacting
with your program.
>> This one's a little more abstract, but those two white boxes
are just for numbers.
So you can do things like is this number less than the other?
And if so, Scratch will behave one way or the other.
This one's a little more graphical.
It's if the sprite, if the cat, for instance, is actually touching the
mouse pointer.
So if the little arrow head is hovering over the cat, then this
puzzle piece will evaluate to true.
It will be true, in which case, if you use this Boolean expression, as we'll
see in a moment, in a branch, you can either do this, or you can do that,
much like we had a condition that checked, is there one more last person
in the room?
If so, add one.
Otherwise, don't worry further.
>> So a Boolean expression can also be and-ed together or or-ed together.
So you can combine Boolean expressions and say this and this must be true for
the whole thing to be true.
And here is a more real world example.
If you've used CS50 Courses to do course shopping, these check boxes
there, where if you check that box next to courses, that will say, yes,
only show me courses for which the Q value is 4.5 or higher.
If you uncheck it, no, don't worry about that.
Or similarly, on the right, Doesn't Conflict With Courses I'm Taking,
that's either true or false.
It's just a Boolean expression.
So all this time when you've used websites with check boxes, you're just
toggling the equivalent of a Boolean expression on and off.
>> So in what form do you use these?
Well, in Scratch, we'll see in a moment that there are conditions that
look like this.
And that's kind of sensible because much like in pseudocode, we indented
the sort of U-shaped puzzle pieces, mean that anything inside of that U is
going to execute, or not, depending on where it is.
So if Boolean expression, then whatever's inside will get executed.
>> Meanwhile, there's an if/else block.
So if you want a branch that goes this way or that, Scratch gives us that.
And by this logic, now, even though that puzzle piece is clearly too small
to wedge something else inside of it, the scratch puzzle pieces, they're
just going to grow.
When you drag and drop over something, it will just grow to fit whatever it
is you're trying to do.
>> So we can take two of these things and make a three way fork in the road so
that you either do this, or that, or this other thing just by nesting them
in that way.
Of course, if you do that too much, it starts to get ugly.
But at that point, you're actually probably not programming very well.
And so that will be recurring theme, too, that of style.
Just how well do actually format your code?
Or how well do you design your code?
But more on that in the future.
>> And now we have loops.
There's a nice forever loop in Scratch which literally means that-- do
whatever's inside of this again, and again, and again.
You can be more concrete and say, do the following thing 10 times.
You can also use variables.
You can come up with any name in that little drop down and say, give me a
variable called n and set it equal to some value.
And then you can have functions.
But more on those in just a moment.
>> Let me go back to my Scratch interface.
And let me go ahead this time.
And let's go ahead and open up, let's say, an example from--
that's a little more interesting.
Let me go ahead, and, actually, let me just make it myself.
I don't need to open this one.
Let me go to File, New.
I'm going to go to Events.
I'm going to go to when green flag clicked, and I'm going to go to Sound.
And I'm going to drag and drop this puzzle piece, play sound meow.
It latches together.
And now, if I click the green flag--
>> [MEOW SOUND]
>> DAVID MALAN: Adorable.
OK, so now let's do something a little more logical just to demonstrate that
we can, for now.
I'm going to unlatch this from that guy.
I'm going to go to Control.
And I'm going to grab a condition.
So if something then.
So that's how it looks there.
So I need a Boolean expression.
And let me go ahead and say, let me go to Operators.
I'm going to do something slightly mathy, just for kicks.
I'm going to go in here and say, if something is less than something else,
go ahead and do something.
So now, you know what, a random block.
So notice how, if I hover over this thing here, that will snap in there.
>> So now, notice, I'm starting to do something already more logically
interesting.
If a random number between 1 and 10 is less than, let's say six.
If I choose six, that essentially means, do the following with 50%
probability.
It's like flipping a coin.
Now, I can do something conditionally.
And that something I'm going to do is play the sound.
So now, when I click on the screen flag, it's like tossing a coin.
>> [MEOW SOUND]
>> DAVID MALAN: It was heads or whatnot there.
Let's do it again.
>> [MEOW SOUND]
>> DAVID MALAN: Heads again.
>> [MEOW SOUND]
>> DAVID MALAN: Heads again.
Phew, OK.
Tails that time.
So 50% of the time, if we do this infinitely long, we will get 50% meows
and 50% silences.
So there, just a basic building block that lets us do that.
But this is kind of tedious that I have to keep clicking that button.
So let's just drag and throw all of those away.
If you dragged them to the middle, they'll just delete themselves.
>> Let me go up to control.
Let me go to forever.
And this time, I'm going to do something minorly annoying.
>> [LAUGHTER]
>> DAVID MALAN: And let me go ahead and do control.
Wait one second, just so it's not too grating.
>> [MEOW SOUND]
>> DAVID MALAN: That's not natural.
OK.
>> [MEOW SOUND]
>> DAVID MALAN: And notice what's, nice about Scratch, for those of you who
have prior programing experience, you don't need to start and stop.
You don't need to compile.
You just change it, and the program will adapt dynamically.
So this is getting a little interesting.
But let's take it one step further.
Let me go ahead and get rid of that program.
>> [MEOW SOUND]
>> DAVID MALAN: That's what we'll call a bug in Scratch.
He should not keep making that sound.
So we we'll tell him to stop.
All right, so now I'm going to go into--
I'll let MIT know.
We'll go over here to Forever.
And now, I want to do something again and again.
I'm going to go into Control.
>> And let's see, I'm going to drag my if condition there.
So now notice the logic.
When the green flag is clicked, do something forever, but only do that
something if this other thing is true.
I'm going to go to, let's say, sensing.
And I'm going to go ahead and choose touching and drop it there.
That's a Boolean expression.
>> And now, notice, in this drop down menu, there are
some predefined values.
So I can say, are you touching the edge of the screen?
Or are you touching the mouse pointer, the arrow on the screen?
So I'm going to do that.
And if so, then I'm going to go ahead and play sound meow.
So now I kind of have the beginnings of a game--
an adorable game.
>> [MEOW SOUND]
>> DAVID MALAN: OK, an adorable, buggy game.
Let me wait, let's say, one second there.
Now play again, by clicking the green flag.
>> [MEOW SOUND]
>> DAVID MALAN: So now it's like petting a cat.
>> [MEOW SOUND]
>> DAVID MALAN: All right, now this one I did make in advance.
Very late, it gets kind of easy to do stupid things.
So let me go in here.
Let's say, that was Pet the Cat.
Let's now open Don't Pet the Cat.
Now, if we play this one, you can guess, if you're
looking at the screen--
>> [MEOW SOUND]
>> DAVID MALAN: Now, if I pet the cat
>> [LION'S ROAR]
>> DAVID MALAN: So don't actually pet the cat in that case.
So now we just have an example of a branch that's going in two directions.
Now let me go ahead and open another one here.
This one, also, among our source code files for the day.
So let me go back into my Source directory and go into, let's choose
this guy here and see what's different.
>> Wow, all right, so now it's getting a little more complex.
And before we see what this guy does, let's try to infer, from the program
at the right hand side.
And now scratch clearly allows us to have multiple scripts, multiple
programs associated with one sprite, with one character, and, apparently,
they're both going to run in lockstep.
Because both of these programs starts with when green flag clicks, this is
hinting at a more advanced topic, with which some of you might be familiar,
known as threading, or multi-threading.
>> Turns out, long story short, computers today can essentially do multiple
things at once.
Or they can do one thing at a time so fast that you don't even notice that
it's actually doing one thing at a time.
But for now, let's assume that both of these programs are going to execute at
the same time.
And notice, both of them have forever puzzle pieces.
So they're both going to keep running until I hit the red stop sign.
>> So what are they going to do?
On the left hand side, I'm apparently declaring a variable called muted.
So I didn't call it something like boring like N. I called it muted this
time to convey meaning.
I set it equal to zero.
Let's think of that as False, or let's think of that as False.
>> Now, forever do the following.
If the keyboard's space bar is pressed, then if muted equals zero,
then change muted to equal one.
Else, set muted to zero.
So logically, even though that's a whole bunch of puzzle pieces that's
just saying, when I hit the Space bar, what should I do to the variable
called muted?
Change it from one to zero, or zero to one.
That's all.
So it's like turning a light switch on or off and remembering, with a
variable, that I've done that.
>> Meanwhile, on the right hand side, in layman's terms, what is the purpose of
the script on the right?
>> STUDENT: To play the sea lion sound.
>> DAVID MALAN: To play Sea Lion sound, if he is not muted, by
nature of that variable.
So we're sharing state, so to speak, sharing information across these two
scripts because, notice here, we are forever doing the following.
If muted is zero, so if it's not muted-- if muted is false, then play
this Sea Lion sound.
And think to yourself, hi, hi, hi, for two seconds, wait a moment, and then
check again.
So if we go now over here to the left, to where this guy is, and hit the
green flag,
>> [SEA LION SOUND]
>> DAVID MALAN: At what point does this get really annoying?
Because this will just go on forever.
So sometimes, infinite loops, so to speak, are deliberate.
But in this case, as soon as I hit the Space bar, he stops.
Now the program has not quit.
It's still running in these loops.
But if I get the space bar again--
>> [SEA LION SOUND]
>> DAVID MALAN: He's going to pick up where he left off.
So there is one way for us to do something again and again but, that
time, only conditionally.
Well, while we're in this vein of doing things again and again, let me
go into another such example here.
This one we'll call counting sheep.
>> And notice what this guy does.
It's actually a bit more like the pseudocode we played with on
Wednesday, whereby he sets some counter, think of it is as N again, to
zero, he forever does the following.
He says the counter's value for one second, waits a second, and then
changes the counter by one.
And in this context, that just means increments it.
So he adds one to it.
So this is literally--
it's not quite what we think of as counting sheep.
It's the sheep doing the counting, forever, up from zero.
>> So we can do similar things there, logically.
But now let's try to clean some of these things up.
Let me go ahead now into a simple example where our cat is just going to
start coughing.
All right, so here we have cough 0--
computer scientists start counting from 0.
So this cat is just going to cough three times.
And here's how I implemented that.
When green flag is clicked, cough, wait, cough, wait, cough, wait.
And I did this just by dragging and dropping puzzle pieces.
Or if you start to tinker with Scratch, you'll see you can actually
duplicate pieces so that you can do things more quickly without dragging
and dropping ad nauseum.
>> But we're not on the best path here.
Because how do I make him cough a fourth time?
Well, I could sort of go down here.
I could duplicate and then paste this in there.
How do I make him cough a fifth time?
Well, copy and paste again.
Or drag drop again.
And very quickly, this program starts to get really, really redundant,
really long, but really uninteresting.
But there's a way to clean this up.
What's the obvious way to clean this up?
>> OK, so we could actually really go out and, when you hit the space
bar, have him cough.
But if I just want to do something repetitively, recall that we do have
some control constructs.
Let me move this out of the way, go under Control.
Let me just do a repeat, say, three times.
And now let me steal some of these puzzle pieces.
Let me snap this in here.
Let me throw these away altogether.
>> And now, I have a better designed program.
Why?
If I want to change the number of times this cat coughs, all I have to
do is change one variable, or one value, rather from three, to four, or
five, or six.
Or I could do something conditionally, even, with the space
bar if I wanted to.
>> So this is a general principle.
Once you start copying and pasting code, whether it's in Scratch, or in
C, you're doing something wrong, most likely.
Or at least, once you've exceeded some reasonable numbers of copies and
pastes, you're probably doing something wrong.
>> But you know what?
I don't really like this.
This isn't the cleanest design.
I wish there were a puzzle piece called cough because then I wouldn't
have to implement this myself, the old fashioned way, by
having say, and wait--
what if they were just a cough puzzle piece.
>> Well, I can actually do that.
Let me go under more blocks, click Make a Block, and now I get this
window here.
I'm going to call this thing cough.
I'm going to go ahead and click OK.
And now notice, I get a new starting piece that's curved on the top.
And what I'm going to do with this, I'm going to just steal these blocks.
I'm going to put them here.
>> And now, with these three pieces, I've implemented what I'm going to call a
function, or a procedure, or some of you might know it as a method.
Slight differences among the words.
But for now, let's just call this a function.
This is just a new puzzle piece.
Now it is implemented like this.
>> But notice that Scratch has given us a physical representation of that whole
block over here.
So now, I can just drag this over here, say, repeat three times, and
what's going to happen now, when I play this script, is only one program
is running at a time.
There's only one when green flag clicked.
But that purple block called cough is effectively telling Scratch, every
time you see that puzzle piece, actually execute these steps that I
happen to implement manually.
>> So that's kind of neat.
But now, suppose that I decided, I don't want this cat just to cough.
I want him to be able to sneeze as well.
Well, how could we go about implementing sneeze?
Well I could pretty much do the same thing.
I could make another block.
I could call this sneeze, click OK.
>> Then, over here I could actually have, let me duplicate this--
and there's where you should feel like you're probably not doing something in
the best way.
I could say something like, achoo, for one second.
Wait one second.
Now I have a new block called sneeze.
And indeed, there it is.
>> But this, too, should start to feel-- maybe not the first week of class, but
by the second-- just a little redundant.
Clearly, there's some redundancy here.
So let me propose, instead, that we refine this definition as follows.
>> Let me go up to my file menu.
I'm not going to save this version.
I'm going to go into one of my premade files here.
And I'm going to go ahead and open up cough 2.
Whoops that was cough 2.
Let me go ahead and open up cough 3, which is this source directory.
Cough 3 and notice-- oh, I told the story in the wrong order.
Let me recover from this story.
>> The story I meant to tell ends with cough 4--
there it is.
So what if I, instead, define a bigger puzzle piece called
define, say word n times.
Sneezing is just, apparently, in Scratch, achoo.
So we express it as a word, just because that's the
constraint of the program.
And a cough is [COUGH], but cough, C-O-U-G-H. So that's just two
different words doing, essentially, the same thing.
>> So I can actually make a new block like this.
I didn't use this menu option before.
But when you click Make Block, you can choose some options.
And you can say that this block actually takes some inputs, otherwise
known as arguments, or parameters, so that you can modify the behavior of
your block.
>> So what I did a moment ago was I called this block Say.
And then I said, it takes a string input.
And now notice, by default, it says string 1.
A string is just a word, or a phrase, for our purposes.
But I'm just going to put some placeholder text there, just like in a
website, when you see username, or password, and then it disappears when
you start typing.
That's all that is.
>> And now I'm going to add a number input.
And I'm going to call this n-- but that's pretty arbitrary.
And then just a label, just to make this block a little more self
explanatory--
times, that's what I just did.
And the end result is that I get a block that looks like this.
>> And now notice, I'm using a repeat block.
But rather than hard coding three, I'm dragging and dropping n in there so I
can parametrize the function.
I can make this function do something a different number of times based on
that value.
>> And notice, say, this is what I did here, if I drag word, I can say not a
hard coded word, but whatever is passed in for one second.
Meanwhile, how do I re-implement cough?
I instead define cough as saying cough n times.
>> So in short, I'm going through this quickly, but the basic idea is as soon
as you start seeing in your program that, wait a minute, I've done
something quite like this before, can I factor out some common
functionality?
Can I decompose what I'm doing into some basic ideas?
That's what we're doing here.
And I've stacked these things, visually, on top of one another
because it's testament to that idea of starting with binary, going to ASCII,
making graphical programs, sort of layering increasingly complex ideas on
top of one another.
>> Same idea here.
I started from Scratch, implementing coughing, then realized coughing is
really just saying something.
So let me instead implement the notion of saying something.
And on top of that, can I implement achoo, or cough?
And we could do more such variants still.
>> So from this basic principle, we can start to do
increasingly complex programs.
Let me open up this one.
We can actually have multiple sprites interacting on the screen at once.
If I go into my source directory and grab one called Threads, recall that a
thread is just really the ability of two scripts to run side by
side at the same time.
>> Notice now, have both a bird sprite and a cat sprite, both of which have
their own scripts.
So notice, when I click the cat, I get these scripts.
When I click the bird, I get these scripts.
So each of these guys has his own programs.
When I now click the green flag, notice that what this program does is
have the cat, incredibly slowly, chase the bird.
But the cat has the advantage of having been programmed in such a way
that no matter where the bird is, the cat goes toward him.
>> We can play that game much faster.
So if I'm on the cat, notice that I'm using, let's say move one steps.
Let's have him move five steps at a time, so five dots at a time.
Let me click play.
>> [LION'S ROAR]
>> DAVID MALAN: All right, now we can really give the cat the advantage.
10 steps at a time.
>> [LION'S ROAR]
>> DAVID MALAN: All right, so very quickly, it gets a little advantage
for the cat.
But I'll wave my hand at some of the details.
But the reason that that path is starting a little different each time
is that I'm doing a bit of randomness.
I'm actually pointing the cat in a different direction based on where I
want him to begin so that each time the game, or the animation, is a
little bit different.
>> Now, let me introduce one other construct here.
So in this case, we had functions.
There's also going to be a puzzle piece known as an array, or a list,
that allows you to store multiple values inside of a variable.
We saw threads, and now there's Events.
>> So here's an event using these two guys here.
And if I open up the file called Events from today's examples, we will
see a program that looks a little like this.
And now notice this guy--
so notice I have the blue Muppet clicked--
he only does the following.
He doesn't have one of those green flag puzzle pieces.
He has a when I receive event--
so some arbitrary word.
I just typed out event there--
he's going to say, Polo, for two seconds.
>> So those of you who are familiar with this game might know
where this is going.
If I now click on the orange Muppet, his program does this.
Forever, if the keyboard space bar suppressed, he is going to say, Marco,
for two seconds on the screen.
But he's also going to use this fancier block known as broadcast.
He's going to broadcast quote unquote, "event."
>> Meanwhile, the blue guy, recall, is listening for quote unquote, "event."
So somehow, now, we can have two sprites interacting.
And when we get to web programming, later in the term, similarly will this
be advantageous to have your website do something in response to, for
instance, a click of the keyboard.
>> So let me go ahead and hit the space bar.
Orange guy says Marco.
Blue guy says Polo.
If I do it again orange guy says Marco, blue guy says polo.
So let's take this one step further.
This time, we'll go, probably, just a few more minutes here.
Do we have--
desk lamp, come on down.
You are right on the end.
OK, you can both come up.
We have desk lamps for everyone.
Come on.
I don't know if we can keep this ridiculous gag up
all semester, though.
All right, come on down.
>> And in the meantime, we have the following examples to pull up, just to
accelerate things now, such that we have a manifestation from another
predecessor of yours using the same basic building blocks.
What's your name?
>> JOHN: John.
>> DAVID MALAN: John.
Nice to me you.
And?
>> SETZ: Setz.
>> DAVID MALAN: Setz, nice to me you.
John, if you'd like to come up first, this is an old
school game named Frogger.
You use the keyboard for this as well.
And the goal is to get across the street and water.
>> [FROGGER MUSIC AND SOUND PLAYS]
>> DAVID MALAN: I'm sorry, no desk lamp for you today.
All right, Setz, would you like to come on up?
All right, let's do it again.
>> SETZ: Do I use the arrows?
>> DAVID MALAN: Just the arrow keys.
Up, down, left, right.
>> [FROGGER MUSIC AND SOUND PLAYS]
>> DAVID MALAN: We'll call them consolation prizes today,
then, very well done.
Here, for both of you, John and Setz.
Congratulations, all right.
So again, as this game plays, think about what's going on?
>> One, there's clearly a lot of motion.
But we've seen how, with the cat and the bird example, how you can make the
illusion of motion by just moving some number of pixels again and again.
And if you have a forever block, you could have these
cars doing this forever.
We have the ability to have some randomness.
So this game doesn't have to be exactly the same each time.
Those logs, those cars, can start at slightly different times so that the
game itself is more interesting with each game play.
>> And Meanwhile, we've seen the ability to listen to the space bar.
But clearly, in Scratch, can you also listen for up, down, left, right, and
really any key on the keyboard.
And you can also do some other things.
Let me go ahead and go back to the web version.
>> Let me go into our collection of examples here.
And under My Studio, video which is, essentially, a folder on
scratch.mit.edu.
We have the web versions of all of these projects.
And let's see if I can get my computer to cooperate here.
This is written by one of our friends at MIT, called Move the Butterfly.
>> And once this opens up, this is going to actually use more of
my computer's hardware.
Scratch happens to be implemented with Flash.
Flash can talk to your webcam, if you have one.
So if I go ahead and full screen this here, click the green flag, notice
that Flash's security message is saying, do you want to
allow to use my webcam?
>> Normally, you should probably say Deny.
But in this case, we'll say allow.
Then I'm going to tell Chrome to allow this as well.
And now, in just a moment, you see me, yep, me.
And if my hand goes up--
I've got to not move my head at the same time.
There's also a reflection on the screen.
Come on, there we go--
you can move it on the screen because there's also puzzle pieces-- oh, you
know what it is, it's because you also see the projector screen behind me.
So we have a little infinite thing going on there.
>> All right, so I'll play down here.
There we go.
So there's also a puzzle piece that says, when you see movement beneath
one of the sprites, you can have it go up, down, left, right or the like.
So we have a bit of virtual reality going on here as well, all within the
confines of my browser, just here using my webcam.
So what's then on the horizon.
The first problem set, as you'll see, or the website will go online later
tonight at cs50.net, is pretty much going to be open ended.
And implement a Scratch project of interest to you, a game, an
interaction, something artistic, and challenge yourself to use any number
of these puzzle pieces.
And it can either be interactive in this way.
Or it can be something more deliberately made to tell a story.
>> And indeed, that's where we'll end off today, with one final example.
Let me go into Scratch locally.
Let me go ahead and open this, and play one last program written by one
of your predecessors, namely that one here.
Good, raise the volume for this one.
>> [MUSIC PLAYING]
>> NARRATOR: At the next CS50, David invites a volunteer onstage.
>> DAVID MALAN: For this demonstration, we're going to need one volunteer.
Would you like to come on down?
What's your name?
Moving on.