Learning Processing Chapter 5.6

BOOLEAN VARIABLES:

Just a short post today, lots of work to get on with.

This little segment teaches you how to program a button in processing, a basic of UI design.

Boolean variables are either true or false, nothing in between.

mousePressed is a boolean variable, it is true when a mouse button is pressed and false when they are not. We use this in the button example, this is an emulation of a light switch in a dark room, when you press the switch the light comes on, when you let go, the light goes off and the room goes dark. This is implemented using similar code to the roll-over example:

Shiffmans code:

 // Learning Processing
// Daniel Shiffman
// http://www.learningprocessing.com

// Example 5-4: Hold down the button
boolean button = false;

int x = 50;
int y = 50;
int w = 100;
int h = 75;

void setup() {
size(200,200);
}

void draw() {
// The button is pressed if (mouseX,mouseY) is inside the rectangle and mousePressed is true.
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);
}

(Taken from the learning processing site, all credit to Daniel Shiffman)

This code is fairly self-explanatory after the rollover exercises, the only thing I am a little unsure about it is this line:

if (button) {

I assume that (button) is the same as writing (button == true)

looking on this link it appears so, and (!button) would be the same as writing (button == false).

The next step on is to implement a switch feature so that when the button is pressed, it latches and stays on until you click it again. This makes use of putting code in the mousePressed function.

 void mousePressed() {
if (mouseX > x && mouseX < x+w && mouseY > y && mouseY < y+h && mousePressed) {
button = !button;
}

We just add this to the end of the code and get rid of the first conditional in the draw() loop as it is no longer needed.

Shiffman's Code:

 // Learning Processing
// Daniel Shiffman
// http://www.learningprocessing.com

// Example 5-5: Button as switch
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);
}

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

So this time, when the mouse is pressed inside the rectangle, button is set to set to the opposite of what it was, if it was true then it would become false and vica versa.

I had to think about this for a bit to understand how it works, Draw is continually looping looking at button's value (true or false).The 'mousePressed' code is only initiated when (as you already knew) the button is pressed, (let's say the original value was false) clicking inside the rectangle changes the code to the opposite of what it was, so, it becomes true. Draw() loops and reads that button == true from the line "if(button) {" and then changes the background colour and stroke colour accordingly.

Here's what it produces:

(Taken from the learning processing site, all credit to Daniel Shiffman)