Array of Circle-Buttons do not work!

Processing Coding Questions
1

Hello,
the following program creates four circle-buttons in an array. The first three buttons are unvisible and they won’t work. I can not find the mistake!

The code:

color myColor = color(102);
int myCircleSize = 100;
circleButtons [] myCircleButton;

void setup() {
  fullScreen();
  myCircleButton = new circleButtons [4];
  for (int i = 0; i < 4; i++) {
    myCircleButton[i] = new circleButtons(100 + i*100, 100, myCircleSize, myColor);
  }
}

void draw() {
  for (int i = 0; i < 4; i++) { 
    myCircleButton[i].update(mouseX, mouseY);
  }
}
class circleButtons {
  int circleX, circleY;  // Position of circle button
  int circleSize;   // Diameter of circle

  color circleColor;
  color baseColor;

  boolean circleOver = false;

  circleButtons(int posX, int posY, int theSize, color base) {
    circleX = posX;
    circleY = posY;
    println("circleX = " + circleX);//the x-coordinate
    circleSize = theSize;
    circleColor = color(255, 255);
    baseColor = base;
    ellipseMode(CENTER);
  }

  void update(int x, int y) {
    if ( overCircle(circleX, circleY, circleSize) == true ) {
      circleOver = true;
      //println(this);
    } else {
      circleOver = false;
    }
    noStroke();
    if (circleOver) {
      background(circleColor);
    } else {
      background(baseColor);
    }
    fill(circleColor);
    ellipse(circleX, circleY, circleSize, circleSize);
  }



  boolean overCircle(int x, int y, int diameter) {
    //println(circleX);
    float disX = x - mouseX;
    float disY = y - mouseY;
    if (sqrt(sq(disX) + sq(disY)) < diameter/2 ) {
      println("true! circleX " + circleX);// all buttons exist!
      return true;
    } else {
      return false;
    }
  }
}
1 Like
2

The background in the class is the Problem! In ‘update’ the background hides the previous buttons.

2 Likes
3

Have you solved it yet? If not, a possibility is to create a PShape that functions as a background. A button hover can swap the color using .setFill().

There’s probably a more elegant solution though, this PShape feels like a workaround :grimacing:

1 Like
4

Thank you! The problem is solved.

1 Like
6

I went over your code and changed a few things.

I put in remarks what I did change and why.

Did you have the color changed when the mouse was over a button? I added this.

Regards, Chrisir

// Naming conventions; I changed this throughout :  
//   class = UpperCase and singular (contains only ONE circle) - CircleButton
//   array = lowerCase and plural (contains many circles)      - myCircleButtons 
//   object / variable = lowerCase and singular                - button / myCircleSize 

CircleButton[] myCircleButtons = new CircleButton[4]; // took that line "...new CircleButton[4]" up from setup and unified  here

void setup() {
  fullScreen();
  background(120);  // new 

  int myCircleSize = 100; // moved this from before setup into setup -> only locally known now
  color myColor = color(0, 255, 0);  // the same 
  for (int i = 0; i < myCircleButtons.length; i++) {
      myCircleButtons[i] = new CircleButton(110 + i*(myCircleSize+14), 110, // using line breaks here - for better readability (new line after position variables and after myCircleSize)
      myCircleSize, 
      myColor);
  }//for
}//function 

void draw() {
  background(120); // the image is more crisp with background 

  for (CircleButton button : myCircleButtons) {    // cooler way of a for-loop (for **each** button (of type CircleButton) in the array myCircleButtons do the following)
     button.update();
   }//for
}//function 

// ======================================================================== // line to show: here starts a class

class CircleButton {

  int circleX, circleY;  // Position of circle button
  int circleSize;     // Diameter of circle

  color circleColor=color(255, 0, 0);  // RED when over!!!!!!!!!!!!!!!
  color baseColor;  // when not over - gets defined in the constructor

  boolean circleOver = false; // not really in use, never mind 

  // constructor
  CircleButton(int posX_, int posY_, // linebreaks for better readability. Marking parameters with a _ sign. 
    int theSize_, 
    color baseColor_) { 
    // constructor 
    circleX = posX_;
    circleY = posY_;
    circleSize = theSize_;
    baseColor = baseColor_;
    ellipseMode(CENTER);
  }// constructor

  void update() {   // not in use: int x, int y 
    // instead of using background, make use of circleColor and  baseColor
    if (overCircle()) {
      // background(circleColor);
      fill( circleColor ); // over 
      stroke(255);
    } else {
      // background(baseColor);
      fill( baseColor ); // not over
      noStroke();
    }
    //  fill(circleColor);  // NO. 
    ellipse(circleX, circleY, circleSize, circleSize);
  }//method

  boolean overCircle() { // Parameters not needed - we are inside the class 
    if (dist(mouseX, mouseY, circleX, circleY) < circleSize/2 ) { // using in-build function dist() here!
      circleOver = true;
      return true;
    } else {
      circleOver = false;
      return false;
    }
  }//method
  //
}//class // marking the end of the class 
//
4 Likes