Hello again.
So this video, I am now starting a new little section of videos
about working with code and programming and all that fun
stuff in p5.js.
And the topic here is conditional statements.
Conditional statements, Boolean expressions, true or false,
if this, then that, if this, then that, otherwise this.
How does a program make decisions while it's running?
So in the previous videos when we started
working with variables, the topic was kind of, OK,
how do we store information?
And that information changes over time.
Now we start to think about this new question,
how can a program take different paths, right?
The only path we really have right
now is starting and setup.
That's the first thing that happens.
Moving on to draw and looping over and over again,
draw repeats over and over again.
We saw that you have these event functions.
There was also the event function, mousepressed.
So if you clicked the mouse, the code
would take a break from draw, go execute something down here,
and continue and draw again.
But now I want to ask the question,
how can the code execute differently each time
through draw?
So one time through draw, it might draw a purple circle.
And the next time through draw, it might draw a pink circle.
And in fact, this I would like to be the first example that I
make in this particular video.
I don't know if I can get purple and pink just right,
but I want to have a circle that's
drawn with two different colors based on something
that the user is doing.
Perhaps where the user is positioning
the mouse would be a good place to start.
So in order to do this, we need to learn
about conditional logic.
Another sort of term we can think of in this case
is Boolean expression.
Boolean logic from the mathematician
logician George Boolos, which I'm probably not getting right.
Internet will correct me, I assume.
Dub this over, or put some sort of popup thing.
I don't know, whatever fancy thing that works here.
So Boolean-- the word Boolean indicates that something
is true or false.
This is often also thought of as 1 or 0, 0 being false,
1 being true.
And what I'm going to show you how to write
is an expression that says if something is true,
do this code.
If something is not true, don't do this code.
So let's think about how the kinds of things,
the kinds of Boolean expressions that might
evaluate to true or false.
So I'm going to give you a Boolean expression right now.
And in your mind, you will think about
whether it's true or false.
And hopefully, this will be a rather easy one.
5 is greater than 6.
This is not true.
This evaluates to false.
Here's another one.
7 is less than 210.
This is true.
So you can see I'm starting by creating these Boolean
expressions using something called a relational operator.
Relational operator, it's an operator that is, in this case,
is going to compare two numbers.
There's lots of ways eventually in code
that you'll see that you can have
something that's true or false.
But a good way to start is just comparing numbers.
Are these numbers equal?
Is one number bigger than the other one?
Or is one number less than the other one?
So now that we have this idea of how
we can create a Boolean expression,
a mathematical operation that evaluates to either only two
answers--
true or false-- we can learn the syntax
for writing that statement into our code.
And this is how the syntax works.
If-- we've got a word in the English language, if,
that means exactly what it says.
If, some Boolean expression that is inside parentheses.
This is our Boolean expression--
if Boolean expression open curly bracket, close curly bracket.
So we've created another block of code.
This is a block of code with a beginning or an end,
just like setup and draw our blocks of code with beginning
and ends.
And the key thing here is if this Boolean expression
evaluates to true, then the code here should be executed.
If this Boolean expression evaluates to false,
then the code here should not be executed.
So let's say I write something like if 5 is greater than 6,
fill 255, 0, 0.
So only ever if 5 is greater than 6,
should you set a red color.
Now if you're thinking about this piece of code here,
you're realizing what I've created
in this scenario was kind of ridiculous and useless,
in a way.
Like 5-- no matter how much we try
over and over and over again, 5 is never
going to be greater than 6, ever.
Maybe there'll be another universe,
or a parallel universe, or some other kind
of wormhole thing we go through, and 5 will be greater than 6.
But right now, in this room, where
I am under these very hot lights that
are making me feel a little faint for a second,
5 is not greater than 6.
So you can see this while this is the correct syntax--
this is showing us the idea here--
this doesn't really make any sense.
The point of what I'm trying to show you is that if a variable
is part of this Boolean expression--
a variable has different values at different times of the day
and different moments, depending on what other things are
happening in the code--
then that variable might sometimes be greater than 6
or might sometimes not be greater than 6.
And so we can change this expression
to say something like if mouse x is greater than 100.
So now as the user is moving the mouse,
it's not greater than 100.
It's not greater than 100.
It is greater than 100.
So this code, even though it's sitting there
in the draw loop--
I haven't put it there yet, but that's where it will live--
this code will not necessarily be executed.
In fact, you could run the program.
If the mouse never goes past 100,
that code will never happen.
It will just sit there, never get executed.
This is the power of a conditional statement.
So let's go and look, and put this into our example.
And I think that will actually wrap up this video, just
sort of the very, very basics.
And there's more to it than this,
but I'll get to that later.
OK, so here we are.
I a nice, simple example that I prepared in advance.
This is me actually preparing to make quantities
with you in advance.
I've got createCanvas up here.
And I'm drawing a circle, so nofill.
So what I would like to do now is add something down here.
If mouseX is greater than-- and let's say 300--
which is the middle of the window, fill 255, 0.
Let's try to give ourselves some purplish color.
And we can see this is what I've added here.
This is the syntax.
So you can see-- whoops.
Let's move over here.
You can see a couple things here.
So the Boolean expression is in between parentheses.
The if statement opens with a curly bracket,
ends with a curly bracket.
And notice how fill gets indented.
So the indentation has not changed the way the code runs,
but it helps you visually see.
You could have a lot of lines of code.
You could have a lot of things happen
within that if statement.
So those curly brackets say this is the code that
should be executed.
And remember if this evaluates to false, this doesn't happen.
Draw is looping over and over again.
It might be true.
It might not be true.
So let's run this and see what we get.
This is very exciting.
OK, where's my mouse?
I don't know.
I think it's out at like 50, so we're not there yet.
OK.
I think it's like 100, 150, down to 200.
OK, we're getting there.
It's almost there.
Ah, yes, we got it!
All right.
So you can see that as the mouse gets beyond 300,
that circle turns this purplish pinkish color.
When I move the mouse back, it's off.
So this is pretty exciting.
And you could think like, you almost
have this sense of like making a rollover here.
I mean, we don't at all, but you can
start to imagine like, what's that if statement
that says if the mouse is inside the circle, highlight it?
So these are the kinds of things,
all of these interface elements that you
might be used to using on your computer,
this is how they work.
And I don't know if I will actually
solve this particular problem in a video.
It involves looking up the distance function
because you've got to test the distance of the mouse
from the center of that circle.
But that could be something, if you
want a kind of tricky problem to look at, you might sort of see.
Later, I'm going to definitely get
to an example that uses a rectangle
to try to see if the mouse is within the bounds
of the rectangle.
I think that's in my mind of future videos.
So there's one other thing I want to mention, just
to kind of make sure this video kind of wraps itself
up and doesn't leave off any details.
I showed you these relational operators.
There are other ones.
There is greater than and equals.
There is less than or equals.
So in other words, 5 is greater than or equals 6.
This is actually true.
No, it's not.
I meant to say like--
that's not true.
5 is greater than or equal 5, right?
Because it is equal.
I was doing so well with this video,
and now I'm kind of losing my mind here a little bit.
So but there are other relational operators
that you could use.
These are probably the most common ones.
You're going to get pretty far.
And then there's also double equals.
There's a funny distinction between the double equals
and the triple equals in JavaScript
I'm going to leave out of this video
and just use double equals.
Because the distinction-- and maybe this is a bad idea.
I don't have to rerecord this or write something
in the video's description.
But there's a key sort of thing here.
If I want to check this, if mouseX is equal to 200,
I cannot say mouseX e--
I cannot use this as my expression.
The reason I cannot use this as my expression is a single
equals means an assignment operation,
meaning I want to assign the value 200 to mouseX,
which is not something I want to do.
mouseX doesn't even get assigned.
It just picks up the value where the mouse is.
So if you want to test if a variable is equal to something,
you need to use the double equals.
And I don't know, maybe when I get to strings, that's
when I'll look at the distinction between double
equals and triple equals.
And some might say that you should actually
use the triple equals, instead of the double equals.
I've really gone off the deep end.
If I'd really thought about this,
I wouldn't have mentioned this in the first place.
So these are some things you could look at,
but honestly, this is generally not such a good idea.
Because when are you really trying
to test if the mouse is on an exact pixel?
Generally, you're looking for ranges.
And I think what you could get started
with is take something you made earlier, where something is
growing or something is moving, according to the mouse,
and see if you can have a color change, or a shape change,
or something you could do that's kind of interesting.
Here's an exercise for you, is have this shape change,
have it be a circle, or a square,
or possibly even as a-- because you have three possibilities--
or a triangle, depending on where
the mouseX is or the mouseY is.
That's something you could try doing
as a quick little exercise after this video.
OK, this was 11 minutes and 20 seconds,
which is I'm trying to keep these to 10 minutes,
so I almost sort of got that.
And I'm going to hit stop now and record the next one.
The stop button's over here.
OK.