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. 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.
