Hi.
So I made a couple, a bunch of videos
about conditional statements.
And I recalled, or I thought of during one of them
that there's sort of a key element
here that I think would be worth noting and spending
a little bit of time on in its own, short, little video, which
I am attempting to make right now.
I was trying to be perky because I'm really, inside,
I feel like lying down and taking a nap.
OK.
So what is the topic of this video?
And what I want to talk about is what if you had a variable
and instead of assigning the value of that variable
to say a number or perhaps a string or perhaps an image--
these are some things that you may or may not
have seen so far--
what if the value of that variable, I'm
going to call it like going, were equal to true itself
or false?
So in fact, this is a data type.
Now as you know, anytime you declare a variable,
you just say var and the name of the variable.
And then it's up to you to assign it a value.
Most of the examples we've seen so far,
we give those variables numbers.
Numbers are useful.
They can be used to specify coordinates
on the screen, sizes of shapes, colors, red components
of the color, the transparency of the color.
Numbers generally are being used over and over again,
everywhere in the code.
However, it can be useful to have your own variable that
is either set to true or false.
Now before I get to that, one of the reasons
why I'm mentioning this to you is
there also happens to be a variable built into P5.
Right?
There are the variables built into P5 that you likely know
about, mouse x and mouse y.
These variables are numbers.
They hold the coordinate as to where
the mouse is on the screen.
But there is also a variable called mouse is pressed.
And this particular variable is, its data type is Boolean,
meaning it's either true or false.
So if this is relevant because--
why is this relevant?
This is relevant because sometimes you want to know,
is the mouse being pressed or is it not.
Now, earlier in a previous video-- at some point,
in some life where I made this other video--
there happened to be a function, a function
called mouse pressed.
And I stated at the time that this function is an event,
meaning the code that you write inside this function gets
executed instantly the moment the mouse is pressed.
So why is there a mouse pressed event, but also
a Boolean variable to check whether the mouse is pressed
or not?
And the distinction comes down to the following.
And this is a really key distinction,
which is totally built into the way that you live your life
and use a computer but you may not
have thought about it in such detail
because it's kind of like just sort
of like inherent way of being.
But there's a difference between clicking the mouse--
I want to click the mouse to instigate something-- versus I
want to hold down the mouse to have something happen
continuously while I'm holding down the mouse.
And in essence, the Boolean variable
is something you want to use when
you want to test if the mouse is being held down.
And the function mouse pressed is the function
you want to use when the mouse, for the event,
the moment is the mouse is being clicked.
All the stuff that happens after that, is it being held down?
There's also a mouse released function
for knowing when it's released.
But I digress.
So let's look at the distinction between these two.
And I'm not sure exactly how I'm going to do this.
But I'm going to go back to the example, the rollover example
and see if we can kind of play around with this idea of it
as a button versus a rollover.
OK.
So let's look, let's review this example.
Since the last time you saw this example-- because in my fantasy
world people are just watching these videos
one after another in sequence, which
I don't know if it's true.
I don't know if anybody's watching.
I'm doing this anyway.
You don't have to watch.
It's just something I do to entertain myself during my day.
And so I'm going to hit run this.
And you can see I did a couple things.
One is I used this function rectMode.
So now the rectangle is being drawn according to its center.
And then I adjusted the coordinates
and I added the y-coordinate.
So this if statement has become very long.
I'm checking if mouse x is between the left and right hand
side of the rectangle, between the top and bottom.
So you can see this works perfectly now.
It only changes color if the mouse is anywhere
within that rectangle.
So we've got a rollover.
Now what if I wanted to, when you're inside the circle,
do something when the mouse is pressed?
Sorry.
OK.
I know what I'm doing here.
So let's look at that if mouse is pressed variable.
So I'm going to actually add just a completely separate
if statement.
And I'm going to say, if mouse is pressed background.
And I actually, I think I want to put this--
yeah.
I want to put this above that one.
Actually, it doesn't really matter.
But I'm going to put it up here just for a second, just
to kind of keep it all together.
So look, I've added another if statement.
Sorry.
I lost my train of thought here, but everything will come back.
So if the mouse is pressed, change the background.
So remember, this is different than I click the mouse
and one thing happens at the event.
Now I'm checking, this is the mouse pressed, in draw.
So what I'm trying to do here is check,
is the user holding down the mouse.
This is how this is used.
OK?
So now, if I click the mouse--
I'm holding it down, you can't see here-- watch this.
This is going to be a really crazy moment for you.
This is my computer rising in this like mechanical desk
thing.
Yeah.
This didn't really help.
But to show you this computer, I'm
going to now hold down the mouse.
It is green.
I am now letting go.
It is not green.
So I have this interaction, which
is different than I click the mouse and it's green forever.
We're going to have to sort of see how to do that.
The other thing what I want to do
is only actually have this happen when I'm on,
if I'm on this rollover.
So let's figure that out.
So it's kind of silly but the way
I'm going to do it right now is take this if statement, whoa,
and put it inside this if statement.
Now I probably could figure out a way of joining this
with another and, but what I'm saying here is look at this.
Look at this.
This is kind of exciting and different.
If the mouse-- let me put this back down--
if the mouse is within that rectangle and it's pressed,
change the background.
But it doesn't matter whether it's pressed or not.
If it's within that rectangle, always change the highlight.
So we can see the logic here that I now have--
I always have this rollover.
It's going to get highlighted as soon as the mouse is
over there.
I could click anywhere around it , it doesn't change color.
But now when I click here, but only when I'm holding it down.
OK?
So now, that's using the if mouse is pressed.
What if I wanted this--
this is like a button that you hold down.
It's like if you had a light at home
and wanted to have the light on, you just
always had to hold down the button, the switch.
As soon as you left, it like turned off.
So with your light at home, you want to press it, it goes on.
You leave and come back later, you could press it again.
Now for this to happen, we need an entire other kind of,
we need another variable.
OK?
And we need to use the mouse pressed event.
So we're going to piece these things together.
So now we have a rollover where you hold down-- how am I,
seven minutes--
you hold down the mouse, it turns the light on.
What I want to do is press the little button,
turn the light on, press the button, turn the light off.
This is kind of like strangely such a simple thing.
So a bit of a tricky interaction problem, tricky programming
logic, something like that problem.
Let's figure it out.
OK.
So ultimately, what I want now is
to have my own-- the way to do this is not to use the mouse
is pressed variable.
That has a value that's just built into the operating
system, into P5, into JavaScript, into the browser.
It knows whether the mouse is pressed or not.
I want to have my own variable.
I want to have a variable and call it on.
Might be something, might be an issue with using this term on.
But for now, I think it's going to be OK.
And I'm going to start with on equal to false.
So when the program first runs, the light is off.
When on is false, the light is off.
And in Draw, what I essentially want to do
is I want to say if on, then set the background
to some other color.
Otherwise, set the background to some other color.
So this is the idea here.
If I have my own Boolean variable that's
either false or true, I could just
change the value of that variable
somewhere else in the code.
When I click the mouse, turn this to true
and the light will always be on.
Then I have to figure out when do I
set it back equal to false.
So let's take a look at doing this with this.
Now in theory, I should upload all these code examples
somewhere.
And I've got to figure out a way to do that.
But at the very least, what I'm going to do
is Save Project As Conditionals button.
And hopefully, that previous one will be saved.
So I'm going to take some of this code for a second
and just stick it at the bottom and put it in comments.
Because I might need to refer to it later.
So down here, we might need to get back this rollover code.
And maybe we need to look at the if mouse is pressed thing
again.
But right now, instead, what I want
to do is just add at the top, var on equals false.
And here, I want to say if on, background, a green background,
otherwise a black background.
So let's look at that.
This is just a simple if statement.
If on, otherwise background.
Now there's actually like, I can't believe I didn't even
mention this really.
Because we've looked at this with mouse is pressed.
And we looked at this with, on is just
sort of intuitive to me.
But always before, when you had a Boolean expression,
you needed to have some sort of like relational operator
like if mouse x is greater than 100.
Here I just said that the whole point of this
is this evaluates to true or false.
That's sort of off the edge or there's a bit of glare there.
But this evaluates to true or false.
A variable with type Boolean, you
don't need to check anything about it.
It itself just has the value true or false.
It evaluates to true or false.
That's what it, that's its total purpose in life.
You could technically say this.
You could say if on equals true--
and this would be the same thing,
like if on has the value true.
But this is redundant.
So this might actually help you sort of think about it.
Because this is really what's going on.
But code-wise, it's a little bit shorter to just write if on,
and then open curly bracket.
OK?
So now I'm coming back over here.
And we see that now if on, green, otherwise, black.
So I'm going to run this.
You can see there's no green because on is set to false
and I'm not setting it to true anywhere.
Now, if on is set to true, I'm going to hard code that.
Now, the background is green.
Because on is true, so this code is being executed.
So now the difference between wanting to do something
when the mouse is held down versus instigated event
the moment the mouse is clicked is I
need to add function mouse pressed.
So instead of before--
remember with the holding down the mouse,
I had this if mouse pressed in Draw--
now I want to have this event.
And what I can't do, I don't want
to put draw the green background here.
Right?
Remember, draw is always looping.
So drawing code here in this case
doesn't really make sense because it will just
get overwritten by what happens in Draw.
What I want to do is change the state of the program.
How do I change the state of the program?
Well, on starts as false.
That's its initial value.
And when I run the program, it's false, it's black.
What I want to do is say, when I click the mouse,
set on equal to true, or on equals true.
So now, on equals true.
Let's click the mouse.
Ta-da, it's on.
Click the mouse again, it didn't turn off.
Also, when I run this again, I can click out here
and it turns to on.
So how do I get it only to turn to
on if I'm within the bounds of that rectangle?
Well, that's an easy thing.
That's why saved this code.
We can now, inside mouse pressed, test for--
oops-- we can test for the location.
So the thing that I've added right here
is now when the mouse is pressed, first check
to see where the mouse is.
And only if it's within that rectangle, set it equal to on.
So let's run this again.
OK.
I'm clicking all around the outside.
Nothing's happening.
Now I'm going to click in the center.
Here it comes.
It turns on.
Now I want it to turn off.
So this is a tricky one.
If it's on, if it's true, it should go off.
Otherwise, if it's off, it should become--
I already confused myself.
We wanted to toggle its state.
True becomes false, false becomes true.
And I could actually type this out.
I could diagram this for you.
But I'm just going to kind of type it out.
I'm going to say, if on is true, on should be false.
Otherwise, on should be true.
Now this is kind of like, aw.
The camera shut off.
Here, I'm turning it back on.
So this is definitely, again, is like a point of confusion.
Now the camera turned off.
But I don't need to go over there anymore.
This is definitely a point of confusion.
It's tricky, like sort of very circular weird logic.
But think about it.
If it's on, turn it off.
Otherwise, it must have been off so turn it on.
So let's see if that works.
Yay.
So now I have this button.
Every time I press it, I change the state of the program.
Pretty exciting.
Now this, however, can be condensed
all into one line of code.
And it involves an operator that I--
this is perfect cause I was like,
what operator did I forget--
the not operator is something that I forgot.
So let me-- oh, I do need to come over here.
So I need to turn this camera back on.
So I want to look here at the not operator.
So we know that I could say something
like if mouse x is greater than 100, do something.
And I could invert this, like the opposite
of if it's greater than 100 would be kind of like less than
or equal to 100.
But I can also say if it's not true
that it's greater than 100, do something.
And then not operator is an exclamation point.
So for example, if not on, what does this mean?
Do something.
So I have a variable on.
It's equal to false.
Does this code get executed, yes or no?
Not false is true.
So this expression together evaluates to true.
Therefore this code does get evaluated.
So let me make another statement to you.
And this is like whoo, really, this is like very uncomfortable
here.
We're going to do it on equals not on.
What does that mean?
I want to set the value of this variable to not itself.
So if its value is false, not false is true.
If its value is true, not true is false.
So this, much like we had that expression speed equals
speed times negative 1, this reversed the polarity
of a number.
3 becomes negative 3, negative 3 becomes 3.
Take a number, multiply it by negative 1,
makes a negative positive, a positive negative.
This expression takes a Boolean value,
makes false true or true false.
So if I come back over here and look at this,
I could take all of this right here,
which has this effect of toggling the Boolean variable,
and I could just change it to one line of code,
on equals not on.
And I'm going to run this.
The light goes on and off.
I've got a button.
I can click outside and nothing happens.
I click inside-- now we lost our little rollover.
So I'm going to also add that back in,
which is just about highlighting the color.
And so we don't need the mouse is pressed part anymore.
And so all we're doing here-- sorry--
is I wanted to add it also.
So notice, if I want to check is the mouse over it,
continuously, that's something I need to do in draw.
But at the moment the mouse is pressed,
I also need to check is the mouse over it for the button.
So this now has the functionality
of if I'm over it, it's highlighted.
But only if I click does that button engage.
So I have a couple of things to say about this.
Number one is anytime you notice two pieces of code
in your program that are basically identical, you should
ask yourself the question, is there a better way to do this.
Now we haven't, we need to get further down the road here.
But maybe there's a way we could create
our own function that tested if the mouse is over a given
point.
And we kind of can do that in two places
without having to copy and paste in the same code.
That's something we're going to see later, that I'm
going to show you later.
The other thing to think about here that's super interesting,
again, I think it's a point that I
started with is we just spent--
oh my god, this is 20 minutes, this video crazy--
20 minutes just looking at how to make a button
happen, you know, rollover versus a button.
And what's interesting about working in P5
and in the browser is later, as I get to further topics,
I would like to show you how you can add buttons and interface
elements that you get essentially
for free that are part of the native browser environments.
They're HTML elements.
There are elements that you can add to a web page
with a little bit of--
actually, code in P5 will let you just create one.
And you can kind of hook different events.
And the P5 is going to take care of a lot of this
is the mouse over it or did the mouse press it,
that type of thing.
But I think there's a moment here,
as you're just starting out programming, working
in the raw canvas, that it's worthwhile to try
to program some of these button and rollover kind of elements.
And it's just good practice and kind of gets you working
with all this logic stuff.
And it'll be interesting to compare to it later.
So I would say if you're trying to think of an exercise
to sort of piggyback off of this is you might have some stuff,
try putting this kind of button on a sketch
where there's something moving around the screen.
And when you press the button, can you
make the thing move in a different direction
or change its size or what kind of other types of things can
you hook into like a button like this besides just changing
the background color.
OK.
Hopefully that was useful to you.
I am now going to stop this video
and I'm going to move on to making some videos about loops.
Stop recording.