Hi.
So this is a third video, I'm going
to wrap up this discussion about conditional statements
in JavaScript and p5.js here.
So we've looked so far at a conditional statement
and what it's allowed us to do.
It's allowed us to have something--
have the draw loop execute differently
depending on something that's happening in the code--
whether it's where the user's mouth is,
or where a given shape is on the screen,
it changes direction, or changes color.
This is-- this has allowed us to create different paths
and have the program do different things based
on certain conditions that evaluate
to either true or false.
And this is the essential topic here,
but there are a few additional features
to the way that you can work with conditional logic that
allow for other possibilities.
And the first one that I want to show you is just the keyword
else.
So if you think about it, you could say, if it's very hot,
turn on the air conditioning.
And I might add to that statement-- if it's very hot,
turn on the air conditioning, otherwise, take a nap.
Now, I don't know why this doesn't make any sense,
but you get the idea--
this idea of otherwise.
Else is essentially that otherwise.
So if I were to say something like if--
this is what we're familiar with--
if mouseX is greater than 200--
if this evaluates to true, execute this code.
And we know that if it's false, we
don't execute the code that's in here.
But what about in this other case of otherwise?
Else gives us an otherwise.
Else do this other code.
So we've now created this sequence nested block.
We have an open curly bracket, and a closed curly bracket,
and then ano-- then an else, and then
another open curly bracket, and a closed code bracket.
So what I want to do is go find that previous example
we made where--
that I made-- where if the mouse gets over
to the right hand side of the screen,
the circle turns purple.
So now what I want to do is say, if it's
on the right hand side of the screen, have it draw a circle
or change the shape.
So I'm going-- based on if it's--
I'm going to use an else--
that if it's on the right hand side of the screen do this,
otherwise, do this other thing.
So this is where the else comes in.
So let's look at that syntax now.
Over here.
So we can see this bit of code right here.
This is where are--
this is where our if statement is.
And now I can add--
I want to add an else right here.
So all I need to do that is type else,
and add another open curly bracket,
and actually notice the editor itself just
filled in that second curly bracket for me.
So you can see if this is true, do this code.
Basically, what we're saying is if that's not true,
do this other code.
And so I could have kept with color, but what I'm going to do
is I'm going to take this ellipse, and put that here,
and then I'm going to here--
I'm going to say draw a rectangle.
So now we can see--
and I'm going to zoom back out--
we can see do this, otherwise, do that.
So let's run this code.
And we can see, OK, well, right now
the mouse is not greater than 300.
So when it starts we're actually the program's executing that
otherwise statement.
And as the mouse moves over, we've got the circle.
So you can see that circle is turning into a square
based on where the mouse is.
We've got this conditional logic.
Now, there are-- there's more to this than that.
So in addition to having an else--
so one thing I should note here is a conditional statement--
you could only ever have one if and one else,
but there's something you can put in between there.
If mouseX is greater than 200, execute this code.
Now, I could say otherwise execute
some other piece of code, but I'm
going to say something different.
I'm going to say, otherwise, if such and such.
Else if mouseX is greater than 100, execute this bit of code.
Else if mouseX is greater than 50, execute this bit of code.
In all other cases else, execute this bit of code.
So these if statements can actually
become this much longer piece of logic
where you're testing a whole bunch of different conditions.
A classic example of this-- it doesn't really
apply to drawing in p5, but to sort of think
and use logic as a program that grades somebody.
So you could say, if the grade is greater than 90,
assign the letter grade A. Otherwise,
if it's greater than 80, assign the letter grade B. Otherwise,
if it's greater than 70, C, et cetera.
So you can imagine there's a bunch of different conditions
that we're testing.
And you have to start with an if.
You don't have to start with an else.
But you can only add one other otherwise in all other cases.
And you have as many else ifs as you want in between.
So again, this idea obviously makes a lot more sense
in the context of a practical example.
And we can look at testing where the mouse is on the screen.
Is it here, or is it here, or is it here, or is it here?
Which one of these conditions does it map?
So I want to actually put this in the code,
but I'm going to do it in a slightly different way.
This is actually correct.
But I'm going to start with mouse X greater than 50,
then 100, then 200-- and reverse this order.
And it's not going to work.
And I want to also discuss why, which is a key aspect about how
else if works.
This is a really tricky, interesting problem,
if you haven't seen this before.
So now I'm over here, and I'm going to add.
I really should have done color here,
because now I have to think of lots more shapes.
But it's fine.
So if mouse X is greater than 50--
a circle.
Else if mouse X is greater than 150--
do a rectangle.
Else if mouse X is greater than 250.
Let's do a line.
And you know what I'm going to do--
just because I'm-- and then in all other cases, do a point.
300, 200, OK.
So now we can see, I've strung together
this conditional logic.
And I'm going to zoom into it a little bit,
to make it a little bigger here.
You can see-- if the mouse is greater than 50.
Otherwise if it's greater than 150.
Otherwise if it's greater than 250.
Otherwise draw a point.
So I should see either an ellipse, a rectangle, a line,
or a point.
Now, this isn't going to work, so keep your mind
churning about why it's not.
So there we go.
We've got a point, which makes sense in all other cases,
right?
Which is, it's not greater than 50, 150, 250--
if it's not greater than any of these, we should see a point.
So now when I get to greater than 50, what do we get?
A circle.
Now, I should get to greater than 150,
I should have a rectangle-- or greater than 250, a line.
So why am I not seeing a rectangle or a line?
Why, why, why?
This is sort of a key distinction here.
So one thing that's true about this
is that as soon as any one of these evaluates to true,
the program kicks out of the if statement
and goes to the next lines of code that
are below that if statement.
As soon as any one of these evaluates to true,
it doesn't check the next one.
So the order of these is very, very important.
Only one of these sections of code
can be executed-- not more than one.
If you want more than one to be executed,
there's a different way of doing it,
which I'll mention it afterwards.
But for a conditional statement--
this is one whole statement where
if is joined with else if, else if, and else.
Only one of these can be evaluated.
So let's go back to here look at this again.
Let's think about if mouse X has the value of 275.
Well, in our minds what we want to happen
is 275 is greater than 250.
So we should see that line.
But let's be the computer for a second,
and go through this logic.
Mouse X is 275.
Is 275 greater than 50?
Yes, it's true.
It is greater than 250.
So an ellipse is drawn.
And remember, as soon as the first thing evaluates to true,
we kick out of that and go to the end.
So none of these other are checked.
So the order of this really matters.
If I had just checked if it was greater than 250 first,
then I would have found that one, right?
The order here is really important.
So just in this particular scenario, the way
that I've written this code, I need to check 250,
then 150, then 50.
And we can run this program.
And we should see first we're starting with a point,
then we get a line, then we get a square--
and put these kind of close together within a circle.
So based on where the mouse is a different shape is drawn.
So this is a really crucial piece
of information as to how these if statements work.
Now, it is true, however, that I could also--
I hesitate to do this.
But I could write this with it not being without these else.
So if I take out these else, but leave maybe else ifs.
I'm going to take out this one.
Just three separate if statements.
Let's look at what happens now.
Think to yourself, what's going to happen here?
So I'm going to run this.
I've got a line.
Now, I see all three of those.
So these now are not related to each other.
They're just three distinct if statements on their own.
So when the mouse is 275, it's greater than 250,
and greater than 150, and greater than 50,
so all of these occur.
However, if I string them together with that else,
then as soon as the first one is executed
the next one is not checked.
So these are essentially the tools you have to work with.
And it really depends what it is you want to implement.
So there's one other tool.
I'm looking at my watch.
We're almost at 10 minutes here, which
is about the length I'm trying to keep these videos.
There's one other tool that I want
to add to this video, which is and and or.
So let's look at this here.
Another thing that you can add into a conditional statement
is an and or an or.
So imagine if you said something like this.
If mouse X is greater than 50--
now, this is incorrect syntax, so I'm just
going to write the word and here for a second-- and mouse X
is less than 100.
What does this mean?
If this is the canvas, and this is pixel 50,
and this is pixel 100, when does this evaluate to true?
Well, this evaluates to true anytime
the mouse is greater than 50.
This evaluates to true anytime the mouse is less than 100.
Both of these together, the whole statement
only evaluates to true if both of those are true--
which is all the area in here.
You can think of it as the intersection.
So with an and, if you join two Boolean expressions
with an and, they both have to evaluate to true,
in order for the full statement to evaluate to true.
Now, you could also have an or here.
If you put an or here, only one of these
needs to evaluate to true in order
for this code to be executed for this to evaluate to true.
So let's think about this, if mouse X is greater than 50
or it's less than 100.
Well, guess what?
That's every number that's ever been invented or talked
about ever in the history of the universe of numbers.
Because try to come up with a number
that's either greater than 50 or less than 100.
Every number-- 2 is less than 100.
57 is greater than 50.
171 Is greater than 50.
So this is kind of not so much of a logical statement,
but it makes a lot of sense with an and.
Now, the one thing that I'll mention here
is even though I'm using the words and and or,
this is not actually the syntax.
So the syntax for writing an and into your code
is two ampersands.
And the syntax for writing an or into your code is to pipes.
Pipe, pipe, ampersand, ampersand.
So I'm going to go now and make two quick examples.
I'm going to add an and to our mouse X example,
and I'm going to add an or to our bouncing-ball example.
And you'll see how both of those work So over here
what I would like to do now is I'm going to go back.
And I'm just going to make a rectangle, which
is that 300, 200, 100, 100.
And I'm going to say, if mouse X is greater than 200
and mouse X is less than 300.
So look at this.
If mouse X is greater than 200 and less than 300, let's
see what that results in.
I'm going to draw the rectangle always.
And I'm going to change the fill color
if this evaluates to true.
So look at this.
It's not greater than 200 right now.
Sorry, I did that wrong.
I want it to be greater than 300 and less than 400.
Sorry about that.
My math was off.
See, look, if the mouse is over the rectangle,
it's turning purple--
otherwise it's not.
Of course, if I'm up here--
you can see that as long as it's in between this side
of the rectangle and the other side of the rectangle,
that fill is executed.
So what I might say to you as an exercise is,
can you add some more ands to check
if mouse Y is greater than the top, and less than the bottom?
And this would be the code for a rollover here.
So one of the things you're going
to see as we work with p5.js more, and more, and more
is that we're going to eventually
be able to get a lot of the stuff for free.
Like, we're in the browser.
I'm working in the browser.
There's rollovers, there's buttons,
there's all sorts of things.
But as you're starting to learn to program--
and just drawing raw shapes, working with the pixels,
getting your hands dirty with the pixels in the canvas--
you might take some time to try to program a rollover.
Try to program a button.
I need a video about checking if the mouse is pressed.
Anyway, there's a bunch of other content
that I realize I need to make.
But this can get you started, so try to make some rollovers.
Can you put more than one on the screen?
Can you get them to change different colors?
Try things like that.
I want to look very quickly at an or.
So I'm going to go back, also, to my other example.
And remember, this example, where
the ball gets to the right and turns around and goes
back, when am I doing that?
I'm doing that if X is greater than width.
So what I want to say now is if X gets
to the right side, turnaround.
Or if it gets to the left side, turnaround.
So what's the left side?
If the right side is greater than width,
the left side is or if X is greater than 0.
And by the way, when I get to the right,
I want speed to become negative 3.
When it gets to the left, I want speed to become positive 3.
So negative 3, positive 3, negative 3, positive 3.
What's a way you can change a number
from positive to negative, to positive to negative,
to positive to negative?
Always just multiply it by negative 1.
So if I take speed and said, equal to itself
times negative 1, what you will see here is speed is 3.
And now speed is negative 3.
And when it gets to the left side, speed is positive 3.
So now you have this circle that's
just bouncing back and forth.
So this is, again, something you might
start to play with with this example
further-- top and bottom, changing sides, changing color.
Can you have more than one circle on the screen?
Which is a little bit tricky right now,
because we haven't looked at an array yet--
which is a list of things.
So this kind of fills in some gaps.
And in my mind, I've thought of a lot of other gaps
with conditional logic, that hopefully is helping you here.
OK, I'm going to stop this video.
And I might make one more.
I thought of a couple other things
that I wanted to mention about conditional logic.
And then, I also need to make some videos about loops.