Welcome back. Now, that you know how to repeat steps with a for loop, the only piece remaining to implement the green screen algorithm is to be able to make decisions based on a condition. In this algorithm, we wanted to look at a pixel, see if it's green, and then do different steps based on whether it was or was not green. Now, let's learn how to implement decision making. Decision making is done with if/else statements. Here, you see an if/else statement which looks at the condition, is x less than y? And then, decides which of the statements it should do based on whether that is true or false. This example assumes that the variables are declared and initialized previously. Let's break down the syntax. First, you have the keyword if, which tells JavaScript that you are writing an if out statement. Next, you have the condition to make a decision based on here it is x less than y. This condition is an expression written inside a parenthesis. After the conditional expression, you have the "then clause". The "then clause" is a set of statements to execute if the condition is true. These are written inside of curly braces. After the then clause is the keyword else. Then the else clause. The else clause is a set of statements to execute if the condition is false. Again, these are written in curly braces. Sometimes, you may see an if statement with no else clause, in which case both the keyword else and the else clause are omitted. This is shorthand for an empty else clause. Whenever the programmer does not want to do anything in the case of a false condition. Okay, now, that you have the basic syntax, let's look at the semantics. Here, we have just reach this if statement. With our variables having the values shown on the right. The first thing that happens is we evaluate the conditional expression. Is x less than y? To evaluate this, we look at the values of these variables. The values they have in their boxes. And see that we are checking if 2 is less than 7. 2 is less than 7, so this expression evaluates to true. Since the condition is true, we go inside the data clause and begin executing statements there. We execute the statements here according to their normal rules. This next statement is an assignment statement z = 2. So we update z's box to have 2. Now, we are at the close curly brace of the then clause. We are done with the statements here and need to skip over the else clause. Since those statements are only for when the condition is false. So we jump down past the end of the else clause. We would then keep executing whatever code comes next. Now, let's look at the example again but with different values for our variables. We again begin by evaluating the condition expression, is x less than y? However, this time x is 42, and y is 7. So we're evaluating is 42 less than 7? This expression evaluates the false, since 42 is not less than 7. Since a conditional expression evaluated defaults, we jump into the else clause and begin executing statements there. Again, we execute statements according to their normal rules. First, a equals y + 1, which updates a to be 8. Then y equals x- 3, which updates y to be 39. Now, we are at the end of the else clause. So you can just go past the closed curly brace of the else clause and begin executing whatever code comes next. You have seen several important concepts separately. But it is instructive to see them all put together, as in this example. One important thing to remember when putting pieces together is that they generally follow the same rules, no matter how they are combined. A concept called compositionality. Let's see what this code does. First, we declare a variable called img. Initialize it to a a new SimpleImage. Which is the two by two image you saw on previous examples. Next, there is a four loop which iterates over each pixel and img.values. You've already seen how this works. And we will again follow the same rules. We create a box for the pixel variable, initialize it to the first pixel in our image and go into the body of the loop. Now, we have an if statement. It does not matter what this if statement is inside a for loop, it still follows the same rules. Is zero greater than or equal to two divided by two? No, that is false. So we go into the else clause and execute statements there. This will set the pixels blue to the pixels red value, which is 255. Changing it from red to magenta. Now we're at the end [L's clause?], so we go outside of it which brings us to the close curly brace of the four loop. So we go to the next pixel and back to the top of the loop. We again go into the loop body but now the pixel's x is one. So we're asking, is one greater than or equal to two, divided by two? That's true. So we go into the then clause and execute the statements there. pixel.getRed divided by 2 is 0/2 which is zero. So we set the pixels red to zero which does not change anything since it was already zero. We are now at the end of the then clause. So we jump just past the close curly brace of the else clause. We have again reached the end of the fort loop so we go to the next pixel and jump back to the top. This pixel's x is 0 so we are again evaluating is 0 greater than or equal to 2/2, which is false. So we go into the else clause. We execute that statement and leave the else clause and go to the next pixel as jump back to the top of the loop. Going back into the loop for the last pixel, we evaluate the condition which is true so we enter the then clause. We're going to set the red to 127.5. But pixel set red will round that to 127 since the pixel only works with integer RGB values. Now, the pixel is light cyan instead of white. We have reached the end of the then clause, so we jump past the end of the else clause which brings us to the end of the for loop. We go back to the top and there's no more pixels. So we jump past the end of the loop and begin executing whatever code might be there. Thank you.
