In these notes you will learn:

- How to test if a point has hit an edge of the screen.
- Some basic uses of if-statements.
- The terminology of the if-statement.
- The meaning of the basic relational operators.
- The meaning of the basic boolean operators.

So far, the animated objects we’ve created disappear from view once
they hit an edge of the screen. In these notes we’ll see how to get an
object to recognize the edge of the screen. To do these we will
introduce *if-statement*s and *comparison operators*.

Lets start with a program we’ve already seen. When this program runs a ball moves slowly down the screen, and then disappears:

```
color orange = color(255, 165, 0);
color white = color(255, 255, 255);
// y is the vertical position of the ball
float y;
void setup() {
size(500, 500);
smooth(); // draw things with smooth edges
// the ball starts near the top of the screen
y = 1;
}
void draw() {
// re-draw the background
background(white);
// draw the ball
noStroke();
fill(orange);
ellipse(250, y, 50, 50);
// add 1 to y to make the ball move downwards
y += 1;
}
```

How can we get the ball to do something — say, stop — when it hits the bottom of the screen?

This boils down to the following question: when does the point (x, y), the center of the ball, hit the bottom edge?

Since the y-values screen increase downwards, (x, y) is on the bottom
edge when y = 499. If y > 499, then it is past the bottom edge and off
the screen. It’s unlikely that an animated object will *precisely* hit
an edge, and so we usually combine these two cases and say that (x, y)
has hit the bottom edge as soon as y >= 499.

The ball needs to check if it is off the screen *every* time it
moves. When it does hit an edge, then we do something, e.g. stop it,
change its direction, make it explode, or whatever we want.

We use an *if-statement* to check the value of `y` each time
it changes:

```
void draw() {
// re-draw the background
background(white);
// draw the ball
noStroke();
fill(orange);
ellipse(250, y, 50, 50);
// add 1 to y to make the ball move downwards
y += 1;
if (y >= 499) {
// uh oh: the ball has gone off the edge of the screen!
// Do something!
}
}
```

In English, the if-statement reads like this: “If `y` is greater
than, or equal to, 499, then do the following ...”. Note the open
`{` on the line with the `if` and the matching `}` under
it. These two *braces* mark the beginning and end of the
*block of code* that will be run if `y >= 499` is true.

Suppose that we want the ball to stop dead when it hits the bottom of the screen. That means that we want its y-value to be fixed at, say, 499. So we put this code inside the if-statement in the previous program:

```
if (y >= 499) {
y = 499;
}
```

This works, but there is a small annoyance: it stops the ball *after*
it travels half-way through the bottom edge:

This happens because y is the y-value of the *center* of the
ball.

Instead, suppose we want the ball to stop as soon as its lowest point hits the bottom of the screen. To do this we need to figure out the coordinates of the lowest point on the circle. Since the center point is (250, y), then, because the circle has diameter 50 in our program, it must be (250, y + 25):

So we modify the if-statement to check for the lowest point on the circle:

```
if (y + 25 >= 499) {
y = 499;
}
```

If you make this change and run the program, you will see that it
*doesn’t work*! The ball falls as usual, but when it gets to the
bottom it suddenly lurches down and stops half-way through the bottom
edge as before.

The problem is that we are setting `y` to be the wrong value inside
the if-statement. Currently, we set `y = 499`, and that sets the
y-value of the *center* of the circle to be 499. We don’t want that:
we want the *lowest point on the circle* to have y-value 499. If this
point has y-value 499, then the center must have y-value 499 - 25
(because it is 25 pixels away). So we need to make one more change to
our if-statement:

```
if (y + 25 >= 499) {
y = 499 - 25;
}
```

This works!

Note

We wrote 499 - 25 in the assignment to `y` to make it
clear how we got its value. Processing automatically does the
arithmetic for us. However, we could also have written it like
this:

```
if (y + 25 >= 499) {
y = 474;
}
```

Or even this:

```
if (y >= 474) { // harder to read: where does 474 come from?
y = 474;
}
```

The main problem with these two way of writing the if-statement is that it is not at all clear where the number 474 came from.

Another nice effect is to have the ball wrap-around to the top of the
screen after it hits the bottom edge. This turns out to be a very
simple modification: inside the if-statement we set `y` to be 1 (or
some other value close to the top of the screen):

```
if (y + 25 >= 499) {
y = 1; // wrap-around to the top of the screen
}
```

The if-statement in our program has this form:

```
// ... previous statements ...
if (cond) { // first line is the header
body statements // code between { and } is the "body"
}
// ... following statements ...
```

It begins with the *token* `if`, and is immediately followed
by `(cond)`, where `cond` is a *boolean expression*, i.e. an
expression that evaluates to either `true` or `false` (like `y >=
499`).

The line with the condition is sometimes referred to as the
if-statement’s *header* line. After the header line comes the *body*
of the if-statement. The code in the body is only executed when
`cond` is `true`; if `cond` is `false`, then the body is not
executed.

Also notice that the body statements are *indented* a few
spaces. While this is strictly optional, it is very useful:
indentation visually groups related statements, which does wonders for
your program’s readability. As our programs get bigger we will see
that indentation is a useful technique for making readable code.

When we first wrote our if-statement body, we didn’t put any code into
it. Instead, we wrote a *source code comment*, i.e. a note to
us, the programmers, about should happen. We then replaced the comment
later when we decided what we wanted the ball to do when it hit the
edge.

Note

When the body of an if-statement consists of exactly *one*
statement, it is *not* necessary to write the `{` and `}`. For
instance, we could write the if-statement from above like this:

```
if (y >= 499)
y = 0;
```

Or even more succinctly like this:

```
if (y >= 499) y = 0;
```

However, if you are not careful this can lead to confusion about
what statements are part of the body. In this course we will
occasionally write if-statements without the `{` and `}`; when
we do, we will almost always but the body statement on the same
line as the condition.

Since *boolean expression*s turn out to be quite important,
let’s discuss them in a little more detail.

We’ve just seen `>=`, which compares numbers and means “greater than
or equal to”, e.g. `x >= y` is `true` just when `x` is greater
than, or equal to, `y`, and `false` otherwise.

Similarly, the expression `x <= y` evaluates to `true` if `x` is
less than, or equal to, `y`, and `false` otherwise.

Here’s a list a few common boolean expressions. We assume both `x`
and `y` are numbers:

```
x >= y // x greater than, or equal to, y ?
x <= y // x less than, or equal to, y ?
x > y // x greater than y ?
x < y // x less than y ?
x == y // x equal to y ?
x != y // x not equal to y ?
```

`>=`, `<=`, `<`, `>`, `==`, and `!=` are sometimes
referred to as *relational operators*, or *comparison
operators*.

Warning

The expressions `x = y` and `x == y` are *not* the
same in Processing. The expression `x == y` *tests* if `x` and
`y` have the same value, while `x = y` *assigns* the value of
`y` to `x`. This is very different than what = usually means in
mathematics: the mathematical = means the same as `==`.

Warning

You *cannot* chain *relational operators* together
as in mathematics, i.e. this does *not* work in Processing:

```
1 < 2 < 3 // bad!
```

This is an error. To evaluate such an expression you must write
this (where `&&` means “and”):

```
1 < 2 && 2 < 3 // okay!
```

Most mainstream programming languages have the same restriction, i.e. expressions like 1 < 2 < 3 either cause an error, or don’t work the way you would expect.

We can also use *logical operators* to combine boolean
expressions. For instance, suppose both `a` and `b` are boolean
expressions. Then the following are also boolean expressions:

```
!a // not a; negation of a
a && b // a and b; conjunction of a and b
a || b // a or b; disjunction of a and b
```

These three logical operators have precise meanings:

`!a`evaluates to`true`when`a`is`false`, and`false`when`a`is`true`.`a && b`evaluates to`true`just when*both*`a`and`b`evaluate to`true`. It evaluates to`false`if either`a`, or`b`, or both`a`and`b`, are`false`.`a || b`evaluates to`true`when`a`is`true`, or`b`is`true`, or both`a`and`b`are`true`. The only time it is`false`is when*both*`a`and`b`are`false`.

We can summarize these logical operators using *truth-table*s. For example, here is the truth table for `&&`:

a b a && b false false false false true false true false false true true true

And for `||`:

a b a || b false false false false true true true false true true true true

And `!`:

a !a false true true false

Boolean operators are used all the time in programming, and so you should memorize exactly how they work.

Here’s a simple example of how you might use `||`, i.e. “or”. Instead of
writing `y >= 499` in an if-statement, we could write it like this:

```
if (y == 499 || y > 499) {
y = 499;
}
```

The expression `y == 499 || y > 499` is logically equivalent to `y >=
499`. You could write either one in the program, but `y >= 499` is less
typing and quite clear, so most programmers prefer it.

As another example, suppose you want to test if `y` is between, say, 100 and
200. Then you could write this:

```
if (y > 100 && y < 200) {
// y is between 100 and 200 ... do what you want to do
}
```

The expression `y > 100 && y < 200` is true just when `y` is greater 100
*and* less then 200.

The `!` operator means *not*. So, for example, to test if `y` is not equal
to 499 we could write this:

```
if (!(y == 499)) {
// y is not equal to 499 ... do what you want to do
}
```

Equivalently, we could write this using the `!=` (*not equal*) operator:

```
if (y != 499) {
// y is not equal to 499 ... do what you want to do
}
```

This second if-statement is better because it is shorter and clearer than the
one with `!` in the front.

To implement other behaviours — such as bouncing — we need to make another
change to our program. Instead of adding 1 each time to `y`, we are going to
add `dy`, which is a `float` variable that we create. It represents the
velocity of the ball along the y-axis:

```
color orange = color(255, 165, 0);
color white = color(255, 255, 255);
// y is the vertical position of the ball
float y;
float dy;
void setup() {
size(500, 500);
smooth();
// the ball starts near the top of the screen
y = 1;
dy = 1;
}
void draw() {
// re-draw the background
background(white);
// draw the ball
noStroke();
fill(orange);
ellipse(250, y, 50, 50);
// add 1 to y to make the ball move downwards
y += dy;
if (y >= 499) {
y = 1;
}
}
```

This program behaves exactly the same as the previous one. The difference here
is `y` gets increased by the value of `dy` each time `draw()` is called.

Now we can change the ball’s velocity by setting `dy`. For example, to make
the ball stop dead when it hits the bottom of the screen, we do this:

```
if (y >= 499) {
dy = 0;
}
```

When `dy` is 0, the position of the ball never changes.

To make the ball bounce is almost as easy:

```
if (y >= 499) {
dy = -dy;
}
```

The statement `dy = -dy;` just changes the sign of `dy`, i.e. if `dy` is
1, then after `dy = -dy;` it will be -1. This causes the ball to move up the
screen.

Write out the general form of an if-statement. Indicate its header and body.

Why is the body of an if-statement indented?

When testing if the ball has hit the bottom of the screen, we used this code:

if (y >= 499) { // ... }

Why does this use the condition

`y >= 499`instead of`y == 499`?For each of the following expressions, say whether it is

*true*or*false*:`1 == 2``1 != 2``1 + 3 < 13``5 > 5``(1 + 2) == (4 - 1)`

Suppose

`x`and`y`are both variables of type`float`. They’ve been assigned*different*values, but we don’t know exactly what they are. For each of the following expressions, say whether it is*true*or*false*:`x == y``x != y``x == x``y >= y``(x + y) == (y + x)`

Briefly describe the meaning of

`!`,`&&`, and`||`.What are all the possible values of

`a`and`b`that make the expression`a || b``false`?The expression

`(x < y) || (x == y)`can be written as the shorter and logically equivalent expression`x <= y`. Re-write each of the following expression as a shorter equivalent expression:`(x > y) || (x == y)``!(x == y)``(x <= y) && (x != y)``!(x == y) && (x >= y)``x != x`

Write an if-statement that tests if

`x`, a`float`variable that has been given some value (you don’t know what it is) is equal to -2, 7, or 15. Only execute the body of the if-statement if`x`is one of those three values. The if-statements body can just be a source-code comment.Re-do the previous question, except this time only execute the body of the if-statement if

`x`is*not*one of -2, 7, or 15. Give two different answers:- One answer that uses
`!=`; - A different answer that uses
`!`and either`||`or`&&`. Don’t uses`!=`in this answer.

- One answer that uses
Explain the purpose of the variable

`dy`in the final sample program of the notes.Write an if-statement that could be put into

`draw()`to test if the ball has hit the*top*of the screen. Don’t worry about what goes inside the body of the if-statement.

- Write a program that makes a ball rise upwards and when it hits the top of the screen it gets replaced by a fish (or some other image). Make sure no part of the ball is no longer visible after it hits the top of the screen.
- Write a program that makes a rectangle move from left to right across the middle of the screen. When it hits the right edge of the screen make the rectangle wrap-around to the left side.
- Modify
*the version of the program that introduces dy*so that the speed of the ball depends on the value of`mouseY`. Using the map function, map the value of`mouseY`into the range 0 to 10. This will make the ball go fast when the pointer is near the bottom of the screen, and slow when it is near the top (the ball stops moving completely when the pointer is at the very top of the screen). - Modify
*the version of the program that introduces dy*so that when the ball hits the bottom of the screen it bounces up, and when it hits the*top*of the screen it bounces down. - Modify
*the version of the program that introduces dy*so that when the ball hits the bottom of the screen it turns into a frog and stays sitting at the bottom. You will, of course, need to find (or make) an image of a frog to answer this question.