Why are my buttons connected?

Processing Coding Questions
1

I followed this example when making my own buttons: Processing buttons example

I want the colour of the button to change, when the mouse is hovering above it, and the background to change when the first button is pressed. However, instead all buttons are connected, and only change colour when the mouse is hovering above the third of the buttons (but the first button still works).

image
image.png2458×640 38.5 KB

image
image.png2438×650 40 KB

Here is some of my code (didn’t know what exactly to include)

int buttonSize = 260;   // Diameter af alle knapper
int button1X = 185;     // X positionen af knappen
int button2X = 495;     // X positionen af knappen
int button3X = 805;
int buttonY = 500;    

color button1Color, button2Color, button3Color, baseColor;

color button1Highlight;
color button2Highlight;
color button3Highlight;
color current1Color;

boolean button1Over = false;
boolean button2Over = false;
boolean button3Over = false;

void setup() {
  size(1250,800);
button1Color = color(255);
  button2Color = color(255);
  button3Color = color(255);
  
  button1Highlight = color(204);
  button2Highlight = color(204);
  button3Highlight = color(204);
  
  baseColor = color(#D5ECF9);
  current1Color = baseColor;

}

void draw() {
  update(mouseX, mouseY);
  background(current1Color);
  
  if (button1Over) {
    fill(button1Highlight);
  } else {
    fill(button1Color);
  }
  
  if (button2Over) {
    fill(button2Highlight);
  } else  {
    fill(button2Color);
  }
  
  if (button3Over) {
    fill(button3Highlight);
  } else  {
    fill(button3Color);
  }
  
  stroke(0);
  strokeWeight(stroke);
  rect(button1X, buttonY, buttonSize, buttonSize, 35);
  rect(button2X, buttonY, buttonSize, buttonSize, 35);
  rect(button3X, buttonY, buttonSize, buttonSize, 35);
}

void update(int x, int y) {
  if ( overButton1(button1X, buttonY, buttonSize, buttonSize) ) {
    button1Over = true;
    button2Over = false;
    button3Over = false;
  }
  else if ( overButton2(button2X, buttonY, buttonSize, buttonSize) ) {
    button2Over = true;
    button1Over = false;
    button3Over = false;
  }
  else if ( overButton3(button3X, buttonY, buttonSize, buttonSize) ) {
    button3Over = true;
    button1Over = false;
    button2Over = false;
  } 
  else {
    button1Over = button2Over = button3Over = false;
  }
}

void mousePressed() {
  if (button1Over) {
    current1Color = button1Color;
  }
}

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

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

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

it will be easier to spot the mistake if you make button class. i suggest you to pack each button into objects so you can control and made the codes tidier
refer: https://processing.org/reference/class.html

3

Heres my old button code. May this help you

Button button1, button2;
void setup() {
  fullScreen();
  button1 = new Button(width/2 - 200, height/3, "Shuffle", "button1", "OUTLINE_NOFILL"); // Button(x, y, Caption, Name, Style)
  button2 = new Button(width/2 + 100, height/3, "Shuffle", "button2", "SOLID_FILL");
}

color elColor = color(0);
color elColor2 = color(0);
void draw() {
  background(255);
  
  button1.update();
  button2.update();
  
  // two ellipse
  fill(elColor);
  noStroke();
  ellipse(width/2 - 150, height/2, 100, 100);
  
  fill(elColor2);
  noStroke();
  ellipse(width/2 + 150, height/2, 100, 100);
}

//-------------------------------- For button events

void button1_clicked(){
  elColor = color(random(255), random(255), random(255));
  //button1.shake(); // shaking
}

void button2_clicked(){
  elColor2 = color(random(255), random(255), random(255));
  button2.shake(); // shaking
}


//-------------------------------------------------------
public void callByName(Object obj, String funcName) throws Exception {
    obj.getClass().getDeclaredMethod(funcName).invoke(obj);
}

void raiseEvent(String funcName) {
  try {
    callByName(this, funcName);
  } 
  catch (Exception ex) {
    println("No action executed!" );
  }
}

Button Class

class Button {
  float x, y;
  float w = 100, h = 30;
  float shake = 0;

  String name, caption;
  String face;


  boolean hide;
  boolean buttonState;
  boolean lastButtonState = false;
  boolean enabled = true;
  boolean hover = false;

  int lastDebounceTime = 0; 
  int debounceDelay = 20;

  color baseColor;
  color hoverColor;
  color neutralColor;
  color clickedColor;
  color disabledColor;

  Button(float x, float y, String caption, String name, String face) {
    this.x = x; 
    this.y = y;
    this.face = face;
    this.caption = caption; // display text 
    this.name = name; // Button unique name
    this.baseColor = color(0, 100, 255); // button current color
    this.hoverColor = color(0, 200, 255); // when mouse hover
    this.neutralColor = color(0, 100, 255); // default color
    this.clickedColor = color(0, 90, 220); // when clicked
    this.disabledColor = color(130); // when disabled
  }

  // face, stylize this
  void display() {
    stroke(baseColor);
    float noise = random(-shake, shake);

    strokeWeight(1.3);

    switch(face) {
    case  "SOLID_FILL"  :
      fill(baseColor);
      rect(x+noise, y, w, h);
      fill(255);
      break;
    case "OUTLINE_NOFILL" : 
      noFill();
      rect(x+noise, y, w, h, 8);
      fill(baseColor);
      break;
    }


    textSize(15);
    textAlign(CENTER, CENTER);
    text(caption, x+noise + w/2, y+h/2 - 2);
  }

  // button update
  void update() {
    if (!hide) {
      display();
      if (enabled) {
        isHovering();
        clicked();
        shake = constrain(shake - 0.7, 0, 10);
      }
    }
  }

  // for disabling the functionality
  void disable() {
    enabled = false;
    baseColor = disabledColor;
  }

  // for enabling the functionality
  void enable() {
    enabled = true;
    baseColor = neutralColor;
  }

  // is hovering?
  void isHovering() {
    if (mouseX > x && mouseX < x + w && mouseY > y && mouseY < y+h) {
      baseColor = lerpColor(baseColor, hoverColor, 0.1);
      hover = true;
    } else {
      baseColor = lerpColor(baseColor, neutralColor, 0.1);
      hover =  false;
    }
  }

  // hide button and disable functionality
  void hide() {
    hide = true;
  }

  // unhide button and enable functionality
  void show() {
    hide = false;
  }

  // Shake the button
  void shake() {
    shake = 20;
  }

  // is clicked?
  boolean clicked() {
    boolean state = hover && mousePressed;
    if (state != lastButtonState) {
      lastDebounceTime = millis();
    }

    if ((millis() - lastDebounceTime) > debounceDelay) {
      if (state != buttonState) {
        buttonState = state;
        if (buttonState == true) {
          baseColor = clickedColor;
          raiseEvent(name + "_clicked");
          return true;
        }
      }
    }
    lastButtonState = state;
    return false;
  }
}
2 Likes
4

Thank you very much, that is a nice programme!

Just to understand your code a bit better;
is it only the “shuffle” buttons that are buttons, or are the circles clickable?, and why do you hide the buttons?

5

you can change the caption whatever you want, caption are differ from Name. Caption is what appears, and name is unique, it is for the click event.
hide(); enable(); shake(); disable(), etc, are functionalities. you can use if you need. try yourself

6

what does the “hide”, “display” and dis/enable mean? I don’t understand how to do the void update

7

You have to learn Object Oriented Programming first:
refer: https://processing.org/tutorials/objects/

8

talking about button, there are some basics functionalities. like enable() disable() hide etc

  • disable()
    sometime we need to disable the button from being clicked by the user, like what we usually see here (opposite = enable())
    disablegadget
  • hide()
    is used to hide the button from the user. user cannot see the button anymore (opposite = show())

and other basics functionalities of the button itself

2 Likes