I'm a beginner to Processing and I've been mixing and matching code to get some sort of a button test. What I've found is that the buttons I created in the code below don't always register mouse clicks. Seems like I have to hold the mouse down longer than normal to get a click to register. Do I need to speed up the event loop somehow? Thanks.

Code:

PImage bg;
int a; 
color currentcolor;

RectButton rect1, rect2, rect3;

boolean locked = false;


void setup() 
{
  size(800,250);
  frameRate(30);
  color baseColor = color(102, 200);
  currentcolor = baseColor;
  // Define and create circle button
  color buttoncolor = color(204, 200);
  color highlight = color(50, 200);

  // Define and create safari rectangle button
  buttoncolor = color(102, 200);
  highlight = color(#Ff8DcE);
  rect2 = new RectButton(20, 20, 30, buttoncolor, highlight);

  // Define and create bluesky rectangle button
  buttoncolor = color(102, 200);
  highlight = color(#357BDB);
  rect1 = new RectButton(20, 60, 30, buttoncolor, highlight);

  // Define and create greenleaf rectangle button
  buttoncolor = color(102, 200);
  highlight = color(#405F2A);
  rect3 = new RectButton(20, 100, 30, buttoncolor, highlight);

  // The background image must be the same size as the parameters
  // into the size() method. In this program, the size of "milan_rubbish.jpg"
  // is 200 x 200 pixels.
  bg = loadImage("greenleaf.jpg");
}

void draw() 
{
  background(bg);
  update(mouseX, mouseY);
  rect1.display();
  rect2.display();
  rect3.display();
}

void update(int x, int y)
{
  if(locked == false) {
    rect1.update();
    rect2.update();
    rect3.update();
  } 
  else {
    locked = false;
  }

  if(mousePressed) {
    if(rect1.pressed()) {
	currentcolor = rect1.basecolor;
	bg = loadImage("bluesky.jpg");
    } 
    else if(rect2.pressed()) {
	currentcolor = rect2.basecolor;
	bg = loadImage("pinksky.jpg");
    }
    else if(rect3.pressed()) {
	currentcolor = rect2.basecolor;
	bg = loadImage("greenleaf.jpg");
    }
  }
}

class Button
{
  int x, y;
  int size;
  color basecolor, highlightcolor;
  color currentcolor;
  boolean over = false;
  boolean pressed = false;   

  void update() 
  {
    if(over()) {
	currentcolor = highlightcolor;
    } 
    else {
	currentcolor = basecolor;
    }
  }

  boolean pressed() 
  {
    if(over) {
	locked = true;
	return true;
    } 
    else {
	locked = false;
	return false;
    }    
  }

  boolean over() 
  { 
    return true; 
  }

  boolean overRect(int x, int y, int width, int height) 
  {
    if (mouseX >= x && mouseX <= x+width && 
	mouseY >= y && mouseY <= y+height) {
	return true;
    } 
    else {
	return false;
    }
  }

}


class RectButton extends Button
{
  RectButton(int ix, int iy, int isize, color icolor, color ihighlight) 
  {
    x = ix;
    y = iy;
    size = isize;
    basecolor = icolor;
    highlightcolor = ihighlight;
    currentcolor = basecolor;
  }

  boolean over() 
  {
    if( overRect(x, y, size*3, size) ) {
	over = true;
	return true;
    } 
    else {
	over = false;
	return false;
    }
  }

  void display() 
  {
    stroke(0);
    fill(currentcolor);
    rect(x, y, size*3, size);
  }
}


 

Thanks for the tip. I changed that around, but it still doesn't seem to address the problem. A button click may or may not be registered, almost as if my clicks are too fast or something.

There is a problem in the example code for 'buttons' in that the mousepressed variable is embedded in the update. It looks like that is where you got your base program.

I ran into the same problem but I was getting multiple button presses. It doesn't exhibit that in the buttons example, but it did when I reused that code elsewhere.

I changed it to check for mouse presses outside that code block (using the mousePressed() function) and all was fine.

mousePressed() fires after the events of draw() and sets the value of the mousePressed variable, as well as any additional instructions you place there.

I also changed the function pressed() as defined in the buttons code from this:

Code:

  boolean pressed() 
  {
    if(over) {
      locked = true;
      return true;
    } 
    else {
      locked = false;
      return false;
    }    
  }
 

to this:

Code:

  boolean pressed() 
  {
    locked = false;
    if(over) {
      locked = true;
    } 
    return locked; 
  }
 

my rationale being that no matter what, the program going to run through the check of the else or the if blocks. So you might as well just set one option straight away eliminating one of those.

That presents the chance to eliminate a return as well. I feel it is functionally the same and three lines shorter.