4b – Using boolean variables

A boolean is a special type of variable that can either be true or false. We declare it by naming it, and can then set it to either true or false or to 1 or 0 (where 1 is true and 0 is false).

boolean button = false; // a boolean variable is either off or on

Why is this useful?

Well, when we design something like a button, we want it to have a state – so it can either be off or on. This gets useful in the case of having many buttons. In order to keep track of our button and whether it is pressed or not, we define it’s state using a boolean variable.

if (button) {   // If the value of button is true, the background is white. If it is false, black.
  background(255);
} else {
  background(0);
}

We 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
//Daniel Shiffman, Learning Processing, Page 71
 
boolean button = false;
int x = 50;
int y = 50;
int w = 100;
int h = 75;
void setup() {
  size(200, 200);
}
void draw() {
  if (mouseX > x && mouseX < x+w && mouseY > y &&mouseY < y+h && mousePressed) {
    button = true;
  } else {
    button = false;
  }
  if (button) {
    background(255);
    stroke(0);
  } else {
    background(0);
    stroke(255);
  }
  fill(175);
  rect(x, y, w, h);
}

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 is not what we are really going for in this section. What we 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 is on, it turns off.

For this to work properly, we 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 the section on mouse interaction). When the mouse is clicked, we want the switch to turn on or off (once and only once).

We 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, we should set it to false. If it is false, we should set it to true.

if (button) {
  button = false;
} else {
  button = true;
}

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

button = !button;

The full example is:

//Example 5-5: Button as switch
//Daniel Shiffman, Learning Processing, Page 72
 
boolean button = false;
int x = 50;
int y = 50;
int w = 100;
int h = 75;
 
void setup() {
  size(200,200);
}
 
void draw() {
  if (button) {
   background(255);
   stroke(0);
  } else {
   background(0);
   stroke(255);
  }
  fill(175);
  rect(x,y,w,h);
  }
 

 
void mousePressed() {
  if (mouseX > x && mouseX &lt; x+w && mouseY > y && mouseY< y+h){
    button = !button; 
//When the mouse is pressed, the state of the button is toggled.
//Try moving this code to draw( ) like in the rollover example. 
  }
}

Exercise

1. Create a reactive square, such that two clicks are required to turn it from white to black, but three clicks are required to turn it from black to white. (HINT – you have to create a counter variable that starts at zero and gets bigger with every mouse click).

Extension:

Can you make additional graphic elements appear on the screen when the rectangle is black, and then make even more appear when it goes white.

2. Create a reactive square that starts our black and slowly fades whenever the mouse is dragged. (HINT. Use mouseDragged function to modify a color variable)

'+
1
'+
2 - 3
4 - 5
6 - 7
8 - 9
10 - 11
12 - 13
13 - 14
[x]