Ok, here we are again.
Welcome
we are at the beginning of something what's happening here is
if you recall, we are talking about how to have a program
choose a path essentially.
How do we have a program execute some code sometimes and other code other times
We are doing that with a conditional statement
A conditional statement involves saying:
if this condition is met then execute the lines of code in between
the open and curly close brackets.
We can see an example of that running over here which we built in the last video
I dressed it up a little bit. There is now a white line over here
that shows us if the mouse is over here is less than 100 pixels
and is not executing that code which draws a red background
but as soon as I move the mouse over... clicking the window and have it focused
and move the mouse over we can see we now have a red background.
No red background
Red background
No red background
Red background
Our program is doing something different each time through draw
based on a condition.
This is how everything works.
If you are programming Pong: if the ball hits the paddle
then change the ball direction and if the ball go passed the paddle
change the score, etc.
This is what we're doing: we we just want to be able to set a condition
and execute different code based on those conditions
everything you do is gonna be sort of thinking through
and design that logic.
So that's the beginning of this,
there are a few more pieces that we want to get through
for example: what if we were to say "i wanna draw another line
i wanna draw a line that is a little bit further over
and it is at 200 pixels".
Let me run this now
200 and that's a little mistake there. I wanto also the top of the line
to be at 200 pixels.
So... here we have black background, here we have red background,
here we have... red background.
What if I want a third option: black to red to, say, blue?
I know I can say (typing): if mouseX is greater than 200
draw a blue background.
I think we're gonna have that program working out
black
red
blue
depending on where the mouse is.
black, red, blue.
Here's the thing: what is going on here?
There are two different cases:
if the mouse is greater than 100 execute this code.
If the mouse is greater than 200 execute this code.
but we are actually testing both of these. We are actually drawing a red background
and we are drawing a blue background.
What if we have something different where instead of drawing a background
we want to draw some rectangles.
So let's just say: let's make a red rectangle
and I'll put it somewhere on the screen
and while we're here, we will draw a green rectangle
and we will put it a little bit lower down
So, what's is going on here?
no rectangle
red rectangle
and the green rectangle
no green rectangle
green rectangle
no rectangles.
But if I want the green rectangle to appear here
and the red one disappear.
In this case here what take the mouse's at 400?
If the mouse is at 400 it's greater than 100
and greater than 200
so we are going to see the red rectangle and the green rectangle.
There is another way we can start to make this code work slightly differently.
What if we want to exclusively only execute one of these?
What if we want to, let's say, this:
(writing) else if mouse X is greater than 200.
Now, this look similar
If the mouse is greater than 100 If the mouse is greater than 200
If the mouse is greater than 100 else if the mouse is greater than 200.
We can think of this "else if" as the word otherwise if
I hate this video that I'm making right now
I have to just keep going...
This is gonna be fine, we will remake all of these anyway
If the mouse is greater than 100 otherwise if the mouse is greater than 200
The thing, what's important here, there's is something important here
that we are totally missing.
The thing that's important here with this structure "else if"
with the structure if both of these can happen
With the structure else if only one of these can ever be executed
The interesting thing is: this is a huge mistake we've made here.
Pause the video. Don't pause it yet. Wait.
Take a look at this. Something is horribly wrong.
Syntax is fine... It'll run, Processing will give zero errors
but we are gonna have a problem.
Pause the video and think about that, and then come back.
Ok, you're back. Let's go over here and put that code in
So I'm gonna say... (typing) else if the mouseX is greater than 200
so I revise this code.
The mouse is about 50 pixels it's not greater than 100,
it's not greater than 200, we're just not seeing any rectangles.
The mouse is now greater than 100, we're seeing a red rectangle
that's what we expected to see
Let's stand here, it's better when I stand here.
Now I move over here. What's happening?
The mouse is greater than 200 but there is no green rectangle
Why is that?
Let's think about it.
Let's say for the moment: what happens when the mouse x is 150?
If mouse X is 150 this is true, so we execute this code
we don't execute this code.
With an else if the first thing we find to be true we leave.
If mouse X is 250. 250 is greater than 100
execute this code. We leave. We're done.
What happen if I make this 200 and I make this 100?
All this weird logic stuff that you're stuck thinking about all the time
Let's make this 200
It's just like 7 minutes, this is a disaster.
This should be like a 3 minutes video just going over else if and elses
this is my life right now...
Here we go
Mouse x is here
now I've got a green rectangle
now I've got a red rectangle
green rectangle
red rectangle
Why?
Because when it's 250 we're executing this code
and skipping out
when it's 150, this become false if this's false, we can check the next one
and the next one is true and then we skip out.
With else if when you have an if statement joined with an else if
you only ever do one of these.
And we can even go so far, just to say, else if mouse x is greater than 50...
we can join this as many as we want.
Let's go over here and add that in
We're going to say... let's start with 500 400, just keep adding more of these in
we can see we're gonna have a whole bunch of these
300, 200, and we can have different colors
different locations with different sizes...
Let's see what happens now.
You know what? This was nice having these lines there
so let's add all the lines so we can see where all the stuff is
Set a line at 300 and 400.
And 100 doesn't do anything anymore or maybe it does
we need a line at 500.
This video is a disaster. I have to remake these.
I haven't really though this thru yet, I should this after something or whatever
This is all like a mess and it's all wrong everything is wrong
What's going on here?
These pixels makes no sense
these weird (unintelligible) like one (unintelligible) rectangular design
that we've made. What's going on?
The point that we are emphasizing here is that what we're doing is
with this if statement we're creating a set of possibilities
only one of which can be executed
So first we see if we're greater than 500
if that's not true we see if it's greater than 400
if that's not true 300, etc.
This is essentially the kind of logic you want to start programming
if you want to create rollovers essentially
we've created this regions that when mouse is over them
something happen.
Something you may try to do as an exercise right now
because this video is so clearly explain all this perfectly
and (unintelligible) to miss the important part
which is like what else if is
I should just start this over but I'm not gonna start it over
(rumbling)
This is fine, this is gonna be a long video
later this is gonna be shorter we'll been redoing all these anyway
everything is ok, we're calm we're fine, you're listening
(rumbling)
The exercise for you:
here's your Processing window divide it into four quadrants
and have the quadrants highlight whenever you move the mouse over them
so the mouse should be here, that's the mouse
and this is showing that's highlighted
As you move the mouse over create this regions rollover
it's very similar to what we've done over here
the only differences is instead of these horizontal regions
this vertical line sections
you've got a section screen on a grid
Here's what kind did't say: with any if statement
we can also have an else.