5-1 Boolean expressions

What’s your favorite kind of test? Essay format? Multiple choice? In the world of computer programming, one only takes one kind of test: a boolean test — true or false. A boolean expression (named for mathematician George Boole) is an expression that evaluates to either true or false. Let’s look at some common language examples:

• My favorite color is pink. → true

• I am afraid of computer programming. → false

• This book is a hilarious read. → false

In the formal logic of computer science, relationships between numbers are tested.

• 15 is greater than 20 → false

• 5 equals 5 → true

• 32 is less than or equal to 33 → true

In this chapter, I will show how to use a variable in a boolean expression, allowing a sketch to take different paths depending on the current value stored in the variable.

• x > 20 → depends on current value of x

• y == 5 → depends on current value of y

• z <= 33 → depends on current value of z

The following operators can be used in a boolean expression.

5-2 Conditionals: if, else, else if

Boolean expressions (often referred to as “conditionals”) operate within the sketch as questions. Is 15 greater than 20? If the answer is yes (i.e., true), you can choose to execute certain instructions (such as draw a rectangle); if the answer is no (i.e., false), those instructions are ignored. This introduces the idea of branching; depending on various conditions, the program can follow different paths.

In the physical world, this might amount to instructions like so:

In Processing, you might have something more like:

Or, more formally, with the output shown in Figure 5-1,

Figure 5-1

if (mouseX < width/2) {

 fill(255);

 rect(0, 0, width/2, height);

}

The boolean expression and resulting instructions in the above source code is contained within a block of code with the following syntax and structure:

if (boolean expression) {

 // code to execute if boolean expression is true

}

The structure can be expanded with the keyword else to include code that is executed if the boolean expression is false. This is the equivalent of “otherwise, do such and such.”

if (boolean expression) {

 // code to execute if boolean expression is true

} else {

 // code to execute if boolean expression is false

}

For example, I could say the following, with the output shown in Figure 5-2

Figure 5-2

.

if (mouseX < width/2) {

 background(255);

} else {

 background(0);

}

Finally, for testing multiple conditions, you can employ an else if. When an else if is used, the conditional statements are evaluated in the order presented. As soon as one boolean expression is found to be true, the corresponding code is executed and the remaining boolean expressions are ignored. See Figure 5-3.

Figure 5-3

if (boolean expression #1) {

 // code to execute if boolean expression #1 is

true

} else if (boolean expression #2) {

 // code to execute if boolean expression #2 is

true

} else if (boolean expression #n) {

 // code to execute if boolean expression #n is

true

} else {

 // code to execute if none of the above

 // boolean expressions are true

}

Taking the simple mouse example a step further, I could say the following, with results shown in Figure 5-4

Figure 5-4

.

if (mouseX < width/3) {

 background(255);

} else if (mouseX < 2*width/3) {

 background(127);

} else {

 background(0);

}

Exercise 5-1

Consider a grading system where numbers are turned into letters. Fill in the blanks in the following code to complete the boolean expression.

It’s worth pointing out that in Exercise 5-2 on page 71 when I tested for equality I had to use two equal signs. This is because, when programming, asking if something is equal is different from assigning a value to a variable.

5-3 Conditionals in a sketch

Let’s look at a very simple example of a program that performs different tasks based on the result of certain conditions. The pseudocode is below.

Step 1. Create variables to hold on to red, green, and blue color components. Call them r, g, and b.

Step 2. Continuously draw the background based on those colors.

Step 3. If the mouse is on the right-hand side of the screen, increment the value of r, if it’s on the left-hand side decrement the value of r.

Step 4. Constrain the value r to be within 0 and 255.

This pseudocode is implemented in Processing in Example 5-1.

Example 5-1

Conditionals

Figure 5-5

Constraining the value of a variable, as in Step 4, is a common problem. Here, I do not want color values to increase to unreasonable extremes. In other examples, you might want to constrain the size or location of a shape so that it does not get too big or too small, or wander off the screen.

While using if statements is a perfectly valid solution to the constrain problem, Processing does offer a function entitled constrain() that will get you the same result in one line of code.

constrain() takes three arguments: the value you intend to constrain, the minimum limit, and the maximum limit. The function returns the “constrained” value and is assigned back to the variable r. (Remember what it means for a function to return a value? See the discussion of random().)

Getting into the habit of constraining values is a great way to avoid errors; no matter how sure you are that your variables will stay within a given range, there are no guarantees other than constrain() itself. And someday, as you work on larger software projects with multiple programmers, functions such as constrain() can ensure that sections of code work well together. Handling errors before they happen in code is emblematic of good style.

Let’s make my first example a bit more advanced and change all three color components according to the mouse location and click state. Note the use of constrain() for all three variables. The system variable mousePressed is true or false depending on whether the user is holding down the mouse button.

Example 5-2

More conditionals

Figure 5-6

5-4 Logical operators

You have conquered the simple if statement:

Sometimes, however, simply performing a task based on one condition is not enough. For example:

The same idea applies in programming.

Your first instinct might be to write the above code using a nested if statement, like so:

if (mouseX > width/2) {

 if (mouseY > height/2) {

  fill(255);

  rect(width/2,height/2,width/2,height/2);

 }

}

In other words, you would have to get a true answer for two if statements before the code is executed. This works, yes, but can be accomplished in a simpler way using what is called a “logical and,” written as two ampersands (“&&”). A single ampersand (“&”) means something else¹ in Processing so make sure you include two!

A “logical or” is two vertical bars (a.k.a. two “pipes”) “||”. If you can’t find the pipe, it’s typically on the keyboard as shift-backslash.

In addition to && and ||, you also have access to the logical operator “not,” written as an exclamation point: !

A Processing example is:

Notice this example could also be written omitting the not, saying:

5-5 Multiple rollovers

Let’s solve a simple problem together, a slightly more advanced version of Exercise 5-5 on page 77. Consider the four screenshots shown in Figure 5-7 from one single sketch. A black square is displayed in one of four quadrants, according to the mouse location.

Figure 5-7

Let’s first write the logic of the program in pseudocode (i.e., English).

Setup:

1. Set up a window of 200 × 200 pixels.

Draw:

1. Draw a white background.

2. Draw horizontal and vertical lines to divide the window in four quadrants.

3. If the mouse is in the top left corner, draw a black rectangle in the top left corner.

4. If the mouse is in the top right corner, draw a black rectangle in the top right corner.

5. If the mouse is in the bottom left corner, draw a black rectangle in the bottom left corner.

6. If the mouse is in the bottom right corner, draw a black rectangle in the bottom right corner.

For instructions 3-6, I’ll ask the question: “How do you know if the mouse is in a given corner?” To accomplish this, you need to develop a more specific if statement. For example, you might say: “If the mouseX location is greater than 100 pixels and the mouseY location is greater than 100 pixels, draw a black rectangle in the bottom right corner. As an exercise, you may want to try writing this program yourself based on the above pseudocode. The answer, for your reference, is given in Example 5-3.

Example 5-3

Rollovers

Exercise 5-6: Rewrite Example 5-3 so that the squares fade from white to black when the mouse leaves their area. Hint:you need four variables, one for each rectangle’s color.

5-6 Boolean variables

The natural next step up from programming a rollover is a button. After all, a button is just a rollover that responds when clicked. Now, it may feel ever so slightly disappointing to be programming rollovers and buttons. Perhaps you’re thinking: “Can’t I just select ‘Add Button’ from the menu or something?” For us, right now, the answer is no. Yes, I will eventually cover how to use code from a library (and you might use a library to make buttons in your sketches more easily), but there is value in learning how to program GUI (graphical user interface) elements from scratch.

For one, practicing programming buttons, rollovers, and sliders is an excellent way to learn the basics of variables and conditionals. And two, using the same old buttons and rollovers that every program has is not terribly exciting. If you care about and are interested in developing new interfaces, understanding how to build an interface from scratch is a skill you will need.

OK, with that out of the way, I am going to look at how to use a boolean variable to program a button. A boolean variable (or a variable of type boolean) is a variable that can only be true or false. Think of it as a switch. It is either on or off. Press the button, turn the switch on. Press the button again, turn it off. I just used a boolean variable in Example 5-2: the built-in variable mousePressed. mousePressed is true when the mouse is pressed and false when the mouse is not.

And so my button example will include one boolean variable with a starting value of false (the assumption being that the button starts in the off state).

In the case of a rollover, any time the mouse hovered over the rectangle, it turned white. The sketch will turn the background white when the button is pressed and black when it is not.

I can then check to see if the mouse location is inside the rectangle and if the mouse is pressed, setting the value of button to true or false accordingly. Here is the full example:

Example 5-4

Hold down the button

This example simulates a button connected to a light that is only on when the button is pressed. As soon as you let go, the light goes off. While this might be a perfectly appropriate form of interaction for some instances, it’s not what I am really going for in this section. What I want is a button that operates like a switch; when you flip the switch (press the button), if the light is off, it turns on. If it’s on, it turns off.

For this to work properly, I must check to see if the mouse is located inside the rectangle inside mousePressed() rather than as above in draw(). By definition, when the user clicks the mouse, the code inside mousePressed() is executed once and only once (see Section 3-4 on page 42). When the mouse is clicked, I want the switch to turn on or off (once and only once).

I now need to write some code that “toggles” the switch, changes its state from on to off, or off to on. This code will go inside mousePressed().

If the variable button equals true, it should be set to false. If it is false, it should be set to true.

There is a simpler way to go which is the following:

Here, the value of button is set to not itself. In other words, if the button is true then I set it to not true (false). If it is false then I set it to not false (true). Armed with this odd but effective line of code, you are ready to look at the button in action in Example 5-5.

Example 5-5

Button as switch

Figure 5-8

5-7 A bouncing ball

It’s time again to return to my friend Zoog. Let’s review what you have done so far. First, you learned to draw Zoog with shape functions available from the Processing reference. Afterward, you realized you could use variables instead of hard-coded values. Having these variables allowed you to move Zoog. If Zoog’s location is x, draw it at x, then at x + 1, then at x + 2, and so on.

It was an exciting, yet sad moment. The pleasure you experienced from discovering the motion was quickly replaced by the lonely feeling of watching Zoog leave the screen. Fortunately, conditional statements are here to save the day, allowing me to ask the question: Has Zoog reached the edge of the screen? If so, turn Zoog around!

To simplify things, let’s start with a simple circle instead of Zoog’s entire pattern.

From the previous chapter on variables, you know you need global variables to keep track of Zoog’s location.

int x = 0;

Is this enough? No. In the previous example Zoog always moved one pixel.

x = x + 1;

This tells Zoog to move to the right. But what if I want it to move to the left? Easy, right?

x = x − 1;

In other words, sometimes Zoog moves with a speed of “+1” and sometimes “−1.” The speed of Zoog varies. Yes, bells are ringing. In order to switch the direction of Zoog’s speed, I need another variable: speed.

Now that I have variables, I can move on to the rest of the code. Assuming setup() sets the size of the window, I can go directly to examining the steps required inside of draw(). I can also refer to Zoog as a ball in this instance since I am just going to draw a circle.

Elementary stuff. Now, in order for the ball to move, the value of its x location should change each cycle through draw().

x = x + speed;

If you ran the program now, the circle would start on the left side of the window, move toward the right, and continue off the edge of the screen — this is the result I achieved in Chapter 4. In order for it to turn around, I need a conditional statement.

Or more formally…

Running the sketch, I now have a circle that turns around when it reaches the right-most edge, but runs off the left-most edge of the screen. I’ll need to revise the conditional slightly.

Or more formally…

Example 5-6 puts it all together.

Example 5-6

Bouncing ball

Exercise 5-9: Rewrite Example 5-6 so that the ball not only moves horizontally, but vertically as well. Can you implement additional features, such as changing the size or color of the ball based on certain conditions? Can you make the ball speed up or slow down in addition to changing direction?

The “bouncing ball” logic of incrementing and decrementing a variable can be applied in many ways beyond the motion of shapes onscreen. For example, just as a square moves from left to right, a color can go from less red to more red. Example 5-7 takes the same bouncing ball algorithm and applies it to changing color.

Example 5-7

“Bouncing” color

Figure 5-9

Having the conditional statement in your collection of programming tools allows for more complex motion. For example, consider a rectangle that follows the edges of a window.

One way to solve this problem is to think of the rectangle’s motion as having four possible states, numbered 0 through 3. See Figure 5-10.

Figure 5-10

• State #0: left to right.

• State #1: top to bottom.

• State #2: right to left.

• State #3: bottom to top.

I can use a variable to keep track of the state number and adjust the (x,y) coordinate of the rectangle according to that state. For example: “If the state equals 2, set x equal to itself minus 1.”

Once the rectangle reaches the endpoint for that state, I can change the state variable. “If the state equals 2: (a) set x equal to itself minus 1, (b) if x is less than zero, set state equal to 3.”

The following example implements this logic.

Figure 5-11

Example 5-8

Square following edge, uses a “state” variable

5-8 Physics 101

For me, one of the happiest moments of my programming life was the moment I realized I could code gravity. And in fact, armed with variables and conditionals, you are now ready for this moment.

The bouncing ball sketch demonstrated that an object moves by altering its location according to speed.

Gravity is a force of attraction between all masses. When you drop a pen, the force of gravity from the earth (which is overwhelmingly larger than the pen) causes the pen to accelerate toward the ground. What I must add to the bouncing ball is the concept of “acceleration” (which is caused by gravity, but could be caused by any number of forces). Acceleration increases (or decreases) speed. In other words, acceleration is the rate of change of speed. And speed is the rate of change of location. So I just need another line of code:

And now I have a simple gravity simulation.

Figure 5-12

Example 5-9

Simple gravity

Here is a simple version with Zoog.

Example 5-10

Zoog and conditionals