[MUSIC PLAYING]
BRIAN YU: Welcome back, everyone, to an introduction
to programming with Scratch.
And last time, we took a look at values, pieces of information
that are stored inside of our Scratch programs
that we could use inside of those programs.
Today we'll take that idea one step further and take a look
at how we can use information inside of our Scratch programs
to make decisions by asking questions, and then deciding what to do
based on the answer to those questions.
And people do this type of thing all the time, asking a question
and then making a decision.
When you're deciding when you're trying to leave the home,
you might look outside and ask, is it cold outside?
And if it's cold outside, you might wear a jacket.
Or you might ask, is it raining today?
And if it's raining, well, then you're going
to take the action of bringing an umbrella with you, for example.
And you can think of this type of logic as having two parts.
There's a question that you're asking.
Is it raining outside?
Is it cold outside?
And then there's the logic, the decision that you make
based on the answer to that question.
And computers do the same thing.
Computers ask questions like, is the computer low on battery?
Is the computer connected to the internet?
And based on the answers to those questions,
the computer makes a decision.
And today we'll try to do exactly that sort of thing inside of our Scratch
programs as well-- asking a question and then
making a decision based on the answer to that question.
So let's go ahead and open up Scratch, and we see the familiar Scratch cat
here.
And let's make something happen whenever the Space key is pressed.
That's one of our events.
So I'll drag that when Space key press event out into my code editor.
And when the Space is pressed, let's play a sound.
And we'll play the meow sound.
So now, every time I press the Space key--
[MEOWING]
You'll hear the cat meow.
But now, to make this a little bit more interesting,
let's introduce a new block-- which you can find under the Control section
of the blocks--
and that's this if block.
And what you'll notice in this if block is
that there are two places where we can add additional blocks into this if
block.
You'll notice that next to the word if is a little hexagonal shaped region
where I could drop a block in there.
And we'll do that in just a moment.
And this hexagon is going to represent the question that we're asking.
We're going to ask a question inside of our Scratch program.
It's going to be a yes/no question.
Is the answer to the question yes or no?
Or equivalently, is this question true or false?
And based on the answer to that question,
we might run some additional blocks that are
contained inside of this if block here.
You see this block has a top and a bottom,
and what that's going to allow us to do is enclose other blocks
inside of this if block right here.
So let's take a look at an example of that
and see how we can fill in those two different parts of the if block.
The first thing we need is a question, and for that, we
can go down into the Sensing section of blocks.
And you'll notice there are a couple of blocks that have this hexagon shape.
These are questions that we can ask.
In computer science, we often call these questions Boolean expressions.
A Boolean expression is a fancy way of saying anything that is either true--
meaning yes-- or false, meaning no.
And the very first one here in the Sensing category
is a Boolean expression called touching mouse pointer.
So I'll go ahead and drag that into the hexagon here, in the if statement.
And you'll notice that it snaps into place.
It fits right inside of that if statement,
which grows to fit the size of the hexagon block.
And then I'll take the play sound meow until done block,
and drag it inside of the if statement, and connect all of that
to the event when the Space key is pressed.
So now the logic is this.
When I press the space key, the if block is going to ask that question.
Is the cat touching the mouse pointer, the cursor on the screen?
And if the answer is yes, then we're going
to play the sound meow until done.
But that's only going to happen if this condition is true, if we are actually
touching the mouse pointer.
So if I put my mouse pointer somewhere other than the cat
and I press the Spacebar, you'll notice that I don't hear anything.
But if I move my cursor over the cat and now press the Spacebar--
[MEOWING]
Now, every time I press the Spacebar, you do, in fact, hear the cat meow.
So our programs using these conditions now have the ability to make decisions,
to ask a question and then make a decision based on the answer.
And this touching mouse pointer block can
be used to check if the sprite is touching the mouse pointer,
but also if it's touching another sprite, for example.
Let's say the cat is playing with a balloon.
I can drag a balloon out.
So we've got the cat and the balloon.
And I'll say, for the cat, now, if you're touching the balloon,
then play the meow sound.
So right now I press the Spacebar, and nothing happens,
but if I move the cat so that it's touching the balloon--
[MEOWING]
Well, now we're able to detect that.
We're able to sense that the cat is touching the balloon,
and because of that we're able to make some decisions.
And these sensing blocks give you the ability
to allow your sprites to sense the things around it, figure out how close
or how far away are other rights [INAUDIBLE] the cursor,
figure out what it's touching, whether it's touching a particular sprite
or even touching a particular color.
This block here lets you check if the sprite is touching something
that is a particular color, and you can use
that to build some interesting interfaces as well.
So let's give that a try.
I'll get rid of the balloon for now, and let's add a backdrop
for our cat to play around in.
And I want to try the winter backdrop here.
So you've got a winter backdrop.
And now the code I'm going to write is this.
We're no longer going to respond to the Space key,
so I'll delete that by dragging it off.
But now, when the right arrow key is pressed,
I'd like the cat to move to the right.
This is something we've seen before.
Moving is controlled by a motion block, and we
are going to change the x value by 10.
Remember, the x is, how far to the left or to the right
is this particular sprite?
So when the right arrow's pressed, we're going to change the x value by 10,
but now what I'd like to do is get the cat to detect somehow
when it's touching one of the trees.
There's a tree off to the right.
There's a tree off to the left.
If the cat is ever touching a tree, I'd like the cat to know,
so we can report as much.
It can say that it found a tree, for instance.
How could we do that?
Well, the tree is not a sprite.
It's not one of these sprites that I see down below.
It's just part of the backdrop.
It's just there.
And so if I want to detect it, I can detect it
by looking for a particular color.
So I might say, if--
and then going to Sensing--
touching color.
And if I click on this little color well here in this oval,
I can control what color I'd like to check to see if I'm touching.
And I could try to come up with a green that looks like the green of the tree,
but it'll be difficult for me to get it exactly.
And for that reason, there's a great tool down below.
If I click on this eyedropper button, that
lets me pick a color from the stage.
You'll notice I can drag my cursor over the stage.
It's picking out individual colors.
And I can say, I want you to detect this color right here, this green
that my cursor's hovering over now.
And you'll notice that, when I click there,
now the colors automatically update.
Now my cat is going to be checking if it's ever touching
that green that makes up those trees.
And if it is touching the green that makes up the trees,
well, then let's go ahead and have the cat say something.
And the cat's going to say, I found a tree.
So now the cat can move to the right every time I press the right key.
And it just moves.
That's all it's doing.
But it's also checking.
It's asking that question, is the cat touching the green?
And it's not touching the green, so nothing's happening just yet.
Every time I press the arrow key, we're just changing the x value.
But watch what happens.
Eventually-- and it'll probably happen right there--
the cat touches the green in the tree, and the cat says, I found a tree.
So these sensing blocks allow us to let our sprites
be a little more intelligent about what's around it--
what's in the backdrop, what colors does it happen to be touching,
and what spritz does it happen to be touching.
And we can use that to create some interesting programs as well.
But let's now revisit one of the programs that we already made
and see if we can make it a little better now.
I'll go ahead and delete the cat and change the backdrop.
We'll go back to just the plain white backdrop.
And let's bring back the balloon.
You might remember from when we were working with the balloon
a little bit earlier that we were making the balloon bigger.
Every time we blew, for example, into the microphone,
the balloon was getting bigger and bigger and bigger.
In reality, you can't make a balloon bigger forever.
Eventually, that balloon is going to pop, and so let's
get this balloon to eventually pop.
I'll go ahead and center the balloon by changing the x and the y
values both to 0.
And now I'll have the balloon respond to me pressing the Space key.
The Space key is how I'm going to inflate this balloon.
And when the Space is pressed, I would like to change the size by 10.
This is similar to what we had before where, whenever something happens--
in this case, I'm pressing the Space key-- the balloon just
gets bigger and bigger and bigger.
And you can see the size down below grow.
It's 170 now.
Now it's 180.
Now it's 190.
Now it's 200, for example.
And this maybe feels big enough.
Once it gets to size 200, then I want to have the balloon pop, for example.
So let's bring the size back to 100, back to the original size.
I can ask a question.
I can go to Control and bring out an if statement.
And this time, the question I want to ask is not whether the balloon is
touching something-- it's whether the size is 100--
or 200.
And how could I check to see if the size is 200?
Well, down here in Operators-- we've seen a couple of operators before.
We've seen the operators to do math, like addition, multiplication,
subtraction, and division.
We've seen the operator that picks a random number.
And these were all oval-shaped operators.
But now let's take a look at some of these hexagon-shaped operators.
These hexagon-shaped operators are all Boolean expressions,
things that can be either true or false, answered yes or no.
And one of them here is whether something is equal to something else.
So if I have two values and I want to know, are they equal to each other,
I can use this check here-- this hexagon-shaped block--
to check to see if those two values are equal to each other.
And that's what I want to do here.
I want to take my sprite, the balloon, and check
to see if the size is equal to 200.
So I'll take this block, drag it into the hexagon area
next to the if statement.
And let me grab the size value, which is under the Looks category.
Here's my size value, and I want to check if the size is equal to 200.
And if the size is equal to 200, what do I want to do?
Well, the first thing I'll have this program do is hide.
The balloon's going to hide.
And then, just for fun, let's go into sound
and have the balloon play the sound pop until it's done.
So now, what is the logic of the program?
Well, every time I press the Space key, we're going to run this line--
change the size by 10.
But we're also going to ask that question--
check if the size is equal to 200.
And only if the answer to that question is yes, then we hide the balloon,
and then we play the sound pop until it's done.
So let's give the program a try and see what happens
once I start to inflate this balloon.
It's at size 100 right now.
And remember, you can check that just by looking down below here at the size.
And let's press the Space.
It inflates a little.
Its size is 110, 120, 130, 140, 150.
And now it's at 190, and watch what happens
the next time I try and inflate the balloon one more time,
as by pressing the Space key.
It goes ahead and it hides.
And I could try that again.
We'll go ahead and show the balloon again,
and I can do that by using this Show block here.
I'll just click on Show, and it will show the balloon.
And the balloon inflates, and then it disappears with a pop.
So that's how we can use conditions to check
if two things are equal to each other.
But you probably noticed down in Operators
that we don't just have the ability to check
if two things are equal to each other.
We can check if one number is less than another number or greater than another
number, for example.
And let's give that a try.
Instead of using the balloon, I'll bring out another sprite.
Let's choose the duck this time.
I'll center the duck by moving it to 0 for x and 0 for y.
And when I press the green flag to start this program,
the duck is going to ask a question.
And the question might be, type a number.
So it's asking me to type in a number.
So now, when I press the green flag, the duck asks me to type in a number,
and I could type in a number.
I could type in the number 1, for example, and press Return.
So the duck now has a number, and now we could ask questions about that number.
So if I want to check to see if that number is
positive or negative, for example, I could add a condition.
I could say, if, and then take the greater than block out--
which is under Operators.
And now I want to say, if the answer--
which is in the Sensing category-- if the answer is greater than 0,
well, then whatever number the user typed in-- that's a positive number.
And so we'll go into the Looks section, and let's go ahead
and say positive for two seconds.
So we ask the user for a number, and if the user types in a positive number--
something like the number 2--
well, the duck says positive--
great.
And instead, if we typed in a negative number-- let's say negative 2--
the duck doesn't say anything at all.
So we're able to check to see if their answer is positive,
and if what the user typed in was positive-- if that's true, then
we're going to say positive for two seconds.
But oftentimes, we want to be able to make a decision based
on either answer to the question.
So far, with our if blocks, we've been asking a question,
is the answer to this question yes?
Is it true?
And if so, then we're going to run some code.
There's one block of code that we're running,
if it's the case that the answer to the question is yes.
But sometimes we want to handle both situations.
If the answer to a question is yes, we want to do one thing,
and if the answer to a question is no, then we want to do something else.
And so let's give that a try.
Turns out there's another block that we can use-- not just the if then block,
but another block under Control called if then else.
And the if then else block is structured differently than the other blocks
we've seen so far.
The top part looks very much like the if block we were working with before.
There's a hexagon-shaped space for a question, and then an area beneath it
where we could add a stack of blocks for what should happen
if the answer to that question is yes.
But this block now has another section called else,
which has what appears to be an area for yet another stack of blocks.
So inside of this block can be two separate stacks of blocks--
one stack of blocks that run if the answer to the question is yes,
and another stack of blocks that run if the answer to the question is no.
So regardless of the answer to the question,
we're going to make a decision about which of these two blocks
we're ultimately going to run.
And we can use that now to handle both possibilities-- either the number
is greater than 0 or it's not.
And so here I'll take this answer greater than 0 block,
drag it into this condition.
And in that case, we're going to say positive.
I'll get rid of this if statement, because I no longer need it.
Now I'm going to replace it with this if else.
If the answer is greater than 0, we're going to say positive for two seconds.
Otherwise-- let's go into Looks--
let's say negative for two seconds.
So now we're making a decision-- running some block of code either time,
but making a decision about which block of code we would like to run.
I'll start the program.
It's asking me for a number.
I'll type in a positive number, like the number 2.
And the duck says positive.
We'll try it again.
Asking me for a number--
I'll type in a negative number-- negative 2.
And the duck says negative.
So if the answer to the question is yes, we run one block.
Otherwise, we run another block.
And now, there's a slight bug in this program.
You might have noticed that it does well for positive numbers
and it does well for negative numbers, but there
is one number that's not really positive and it's not really negative,
and that's a 0.
If I type in 0 in press Return, the duck says negative.
Now, why is that?
Well, it's asking, is the answer greater than 0?
Is 0 greater than 0?
Well, no.
0 is not greater than 0.
So instead of running the if block, we instead
run this else block, where we just say negative every time.
And that's maybe not quite what we want.
What I probably want is to ask yet another question-- to ask again,
is the answer less than 0?
If so, then it's negative.
And otherwise, if it's not more than 0 and it's not less than 0,
then it must just be 0.
And to do that, I could add yet another condition inside of this stack here.
I can add anything if else inside of another if else.
And to do that, I'll take another if else, drag it here underneath the else.
And so now, if the number's not positive,
I can ask a second question-- ask yet another question.
Now the question I want to ask is, is my answer--
the answer's in the Sensing category--
is the answer to less than 0?
If the answer is less than 0, then I want to say negative for two seconds,
but otherwise--
let's go into Looks--
I'm just going to say 0.
So this is starting to get more complex I have blocks inside
of blocks inside of other blocks.
And the way to read this now is, what happens if the user types in the number
0?
Well, we start by asking this question here--
is the answer 0 greater than 0?
No, 0 is not greater than 0, so we ignore the if block
and we just look to the else section.
And now we ask another question.
Is the answer 0 less than 0?
Well, no, that's not true either.
So we don't run this block, and we instead go to the else,
and we run this block, which says, say 0 for two seconds.
And that's exactly the behavior we want for the duck.
So we can verify now that it works by pressing the green flag.
And if I type in 0, the duck reports that I
did, in fact, type in the number 0.
If I instead typed a positive number, the duck's is going to say positive.
And if I type the negative number, well, then the duck
is going to say negative instead.
And so using that, I have the ability to ask multiple questions
and make decisions based on the answers to those questions.
So let's use this ability now to build some interesting games that
use our ability to ask questions and make decisions.
And for that, I'll bring back one of our animals.
We'll go to Animals, and let's bring back the hedgehog.
And what I'd like for the hedgehog to do is to race across the stage--
start at one point in the stage, try and get all the way
to the right edge of the stage, and see how quickly we can do that.
So how would I go about creating this game?
Well, when the green flag is clicked, when I start the program,
I would like the hedgehog to move to the left side of the stage
as a place to begin this particular race.
So we'll have it go to a particular location.
And this is about right.
Maybe I'll say negative 150 and negative 25 for y.
And I could play around with that to figure out exactly what I want,
but I'm just choosing nice looking numbers for now.
And then every time--
not the Space key, but maybe the right key is pressed,
I would like for the hedgehog to move a little bit closer
towards the edge of the stage.
So I could have the hedgehog move 10 steps, for example.
And what I would like for the hedgehog to do
is, once it reaches the edge of the stage,
it should report back to me, how long did it take?
How many seconds did it take for the hedgehog
to get from one side of the stage to the other?
And so for that, I can ask a question.
We'll go into Control.
I'll drag an if block out, and the question I want to ask--
which will be located under Sensing--
is not whether the hedgehog is touching the mouse pointer,
but if the hedgehog is touching the edge--
meaning the edge of the stage.
And if the hedgehog is touching the edge of the stage, what would
I like for the hedgehog to do?
Well, I want the hedgehog to say something.
And what do I wanted to say?
Well, I want the hedgehog to say whatever this timer value is.
Remember, the timer is a value that keeps
track of how many seconds have passed since the beginning of my program.
And I could have it say just the timer, but I'm actually
going to use an operator first.
I'm going to have us first round the timer, and then say that result. Why
am I doing that?
Well, the timer normally has something after the decimal point.
Maybe like 5.28 seconds have passed or something like that,
and I don't really care about what's after the decimal point.
I just want to know, has it been five seconds, or six, or seven seconds,
for example?
So now we're going to move the hedgehog every time I press the right arrow key,
and if we're touching the edge, we're going
to say whatever the value of the timer is for two seconds.
So let's give that a try.
We'll start the program, and every time I
press the right arrow, the hedgehog moves a little bit.
And when it reaches the edge, it's going to report how many seconds it took.
In this case, it took nine seconds for the hedgehog
to get all the way to the rightmost edge of the stage.
But we can keep asking more questions here, adding more blocks to the program
to make it a little more interesting.
I'll get rid of this, say, for now, and instead replace it with an if else--
an opportunity to ask another question.
And this time the question I want to ask is this.
Under Operators, I'm going to take the less than block out, and I want to ask,
is the timer less than five?
Remember, this question is only ask one time at the edge.
Once the hedgehog has reached the edge of the stage, we're going to ask,
has it been fewer than five seconds?
And if so, that was pretty fast, so let's go ahead and have the hedgehog
say fast for two seconds.
And otherwise, if the timer was not less than five, then
we were going kind of slowly, so we'll have the hedgehog
say slow for two seconds instead.
So now, if I press the green flag and move quickly--
very quickly try and move the hedgehog across the stage,
well, then the hedgehog says fast.
I managed to make it across in fewer than five seconds.
But if I'm going more slowly--
I'll try it again, and more slowly press the right arrow key.
Well, then it's going to take a little bit longer, and at the end,
the hedgehog does report that I was slow, that I was not
very fast at moving across.
So that's one possible game you could try
to build by asking questions-- questions about whether we're touching
the edge, questions about whether the timer is a particular value-- less
than a particular value, for example.
And let's try one more example of a game we could build with the hedgehog.
Go ahead and get rid of these blocks for now.
Let's try and build a maze for the hedgehog to try and navigate around,
where you're not supposed to hit any of the walls of the maze, for example.
And I could do that by changing the backdrop.
Let's use the backdrop to build a maze for our hedgehog.
I want the walls to be red maybe, and I'll
go ahead and click on this line tool that's going
to let me draw lines on the stage.
Oh, and I should really be changing the outline to make the outline red.
So let me delete this line for now, and try it again.
I want the outline of this to be red.
That's going to give me some red lines.
And I'll go ahead and just try and build a little maze for our hedgehog
to try to navigate around.
And that looks all right.
I'll go back to the code.
Here's our hedgehog.
It's a bit big for this maze right now, so I might
want to make it a little bit smaller.
I can go in the Size here, change the size to-- let's try 40.
Yeah, that's probably a good size for our hedgehog.
And now, how do I want this maze to work?
Well, I'll have it move via the arrow keys.
So whenever the right arrow key is pressed,
our hedgehog is going to change its x position by, let's say, five.
10 is maybe a lot for this.
So it's going to move five spaces to the right.
And what do I want to do?
I want to check now, is the hedgehog touching a wall?
Because if it ends up touching a wall, that's no good.
So I'll ask, if the hedgehog is touching a color--
because the walls are all red.
So I'll grab a color using this eyedropper tool,
grabbing it from the stage.
Let's grab this red right here.
So if the hedgehog is touching the color red,
well, then I want the hedgehog to just, for now, let's say, go
to a random position on the stage.
It's going to somehow magically disappear and reappear somewhere else.
We'll have it go to a random position.
And that's what happens when I press the right arrow.
I'm going to duplicate this whole thing by Control clicking and pressing
Duplicate, and do the same thing for the left arrow.
But this time, we're going to change x by negative five.
And I also want the up and down arrows to work too, so I'll duplicate once.
Let's do this for the up arrow.
When the up arrow happens, I want to not change the x value by something,
but change the y value by negative five.
And one more arrow key-- let's duplicate this one more time and use the same
code for the down arrow--
this time, changing the y by--
actually, here, it should be negative five,
and for up, it should be five-- because when we're going up the,
y value's increasing, when we're going down, the y value's decreasing.
And I could test that out by pressing the up arrow,
and the hedgehog moves up.
I press the down arrow--
the hedgehog moves down.
I press left-- it goes to the left.
I press right-- it goes to the right.
But if ever I hit-- watch what happens if I hit a red wall.
The hedgehog magically vanishes from where it was,
and it reappears somewhere else.
And you could decide on your own what happens when the hedgehog hits a wall.
Maybe it plays a sound effect.
Maybe it does something else.
But you could make this game however you like it.
And here I just have a hedgehog that can navigate through the maze,
and whenever it hits a wall, it reappears somewhere else.
And so these conditions give you a lot of power, the ability
to ask questions and make decisions inside of your programs
based on the answers to those questions.
That's it for today for an introduction to programming with Scratch.
Next time, we'll pick up where we left off
and see what else we can do in the world of putting together these Scratch
blocks.
We'll see you then.