Hi again.
So in this video, I would like to look
at a kind of classic problem that comes up in programming
graphics when you're first getting started that requires
a conditional statement.
You really need an if statement for this problem.
And the problem is this.
So here I have a little bit of an example here.
We can see there's one variable, x equals 0.
There's a canvas.
I'm drawing a circle at that x, and x, every time through draw
is increasing, incrementing by three.
What will the result of that be?
This circle that moves across the screen and it
leaves and it never comes back.
So the problem that we need to look at here
in this particular video is, how do we get that circle
to turn around and come back?
OK, so I'm going to come over here for a second.
And the topic, if you just watched the previous video,
we are looking at conditional statements.
Conditional statements.
An if statement has this format, if open parentheses closed
parentheses open curly bracket closed curly bracket,
and some sort of Boolean expression, true or false,
goes in here.
So let's think about, what is the condition that
has to be met in order for that circle--
the ball, so to speak-- to turn around.
So if this is the canvas, here is the circle.
It's moving along.
If the location of this circle is at the edge,
that's the condition.
So that's the condition for which it should turn around.
So you might think, what's the name of the variable?
x.
So if x is equal to width.
You might think that this is where you want to get started
and this is not completely illegitimate.
I mean, this could work and it's sort of the right idea.
If the circle location equals the width of the window,
that's when you want to turn around.
I don't know why I feel like I want to start this one over
again, but I'm just going to keep going.
I'm not starting over.
OK.
So this isn't really good.
Think about it.
First of all, in the program that I just showed you,
x is going up by three each time.
x equals x plus 3.
It goes up by three, goes up by three, goes up by three.
So if the width of the window is, like, 200,
x might not ever actually equal 200.
It might be at, like, 197--
well then it'll be at 200, but you know,
whatever is divisible by 3 up there near 200.
So this isn't really good.
We need a condition that will no matter what
catch that circle before it goes too far off the screen.
And if you could think about that, a nice condition for that
might be, if x is greater than-- you could use greater than
or equals, but I'm just going to use greater than.
If x is greater than width, what?
Do something.
So first let's just make sure this is the right idea.
So let's come back over here.
And now we can add-- hi, back over here.
We can add this to this particular program.
And I'm standing in front of it too much.
Let me scooch this over.
Scooch this over.
That's a little bit better.
So I'm going to add, if x is greater than width--
and remember, width is a built-in variable in P5
that knows inherently the width of the canvas.
And where does it get that value?
It gets it from here.
And I could have put 600.
I don't know where I'm looking.
I could have put 600 down there, but if I ever change the canvas
size, then I won't have to change the number elsewhere
in the program.
So using these built-in variables are a useful thing.
So you may not have seen this, but I'm
going to add a print statement.
So something you can always do in P5
is say println, which means print line.
I'm going to print a line down here in the console that's
going to say off the screen.
So we should only see that message print
if x is greater than width.
So let's run this.
And we can see, I don't see the message,
I don't see the message, I don't see the message,
I see the message.
So you can see our if statement works.
It only triggered printing that as soon as it left the screen.
So now you have to ask yourself, what's the thing we put there?
What do you put there in order to have it to go backwards?
OK.
So here's what you might be thinking.
It's not right, but here's what you might be thinking.
If going forwards is x equals x plus 3, then going backwards
is maybe x equals x minus 3, right?
So if x is greater than width, then go backwards.
OK, technical mishap, but the camera is working again.
Now where were we?
We were looking at this particular scenario.
We need to get that circle to turn around.
We know it's moving to the right because it's increasing
by three every time through draw,
so when it gets to the edge, it should decrease by three,
x equals x minus 3.
Now this is flawed logic but it sort of
has this almost intuitive idea that it might be right.
And we need to figure out, why is it wrong
and what's the correct way to do it, which will hopefully
help you understand about how conditional statements work
even more.
So let me run it and let's see what the problem is.
So it's moving to the edge.
Now that if statement is true and it moves back by three.
But what does it do the next line?
It moves up by three again.
Then it comes around, does draw again.
Is it over the edge?
Yeah, move back by three and then move up by three.
So this didn't really solve our problem,
I just moved it back once, and then this line of code
is still executing.
What we need to do is figure out a way
to permanently have the circle stop increasing by three.
Permanently stop this decrease by three.
We need the number 3 to turn into a negative 3
for the next many cycles through draw.
And how do we do that?
How do you need to do that?
The way to do that is with a variable.
So let's look at this again.
Let's say I say, if I have a variable speed equals 3,
and then I say x equals x plus speed,
and I'm going to take this out.
So x is always changing by whatever
the value of that variable, speed, is.
And when the program starts, that speed variable is 3.
It's 3, it's 3, it's 3, it's 3.
Oh, what do we want it to be?
We want it to turn around.
What if we made that speed variable negative 3 now?
x equals x plus negative 3 is the equivalent
of x equals x minus 3.
So all I need to do here is say speed equals negative 3.
So at a certain moment, speed equals negative 3.
And when we get to the edge, you go, ah, then it's moving around
and now it's coming back and goodbye.
So for you, with this exercise, you
might think about, OK, what if it's also moving up and down?
How do you deal with the top and bottom edges?
How do you deal just with the right and left edge?
How might you have a changed color or changed size?
How could you have other things about the circle
change every time it hits a boundary?
Maybe its speed even changes, so each time it hits,
it starts going faster and faster.
There are lots of little variations
on this that you could try that I might recommend
doing to kind of keep playing with this idea
of a conditional statement.
And in the next video, what I want
to look at is something that is kind of missing here,
is, what if I want to say, if it's greater than width,
do this.
Otherwise, do something else.
So this idea of an else or an else if is something
we need to look at.
We can also join Boolean logic with an AND and an OR.
You know, if I'm feeling nervous and scared, then I don't know,
don't make videos about programming.
Anyway, you get the idea, AND Or.
So those are the things I need to look at in the next video,
which I will do.
So I'm going to hit Stop here and you're going
to not be watching anymore.
OK.