# Array of Circle-Buttons do not work!

**URL:** <https://discourse.processing.org/t/array-of-circle-buttons-do-not-work/15118>\
**Category:** Coding Questions\
**Created:** [November 1, 2019, 2:47pm UTC](https://discourse.processing.org/t/array-of-circle-buttons-do-not-work/15118 "2019-11-01T14:47:45Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Noerre](https://avatars.discourse-cdn.com/v4/letter/n/6f9a4e/32.png) [@Noerre](https://discourse.processing.org/u/Noerre)\
**Post date:** [November 1, 2019, 2:47pm UTC](https://discourse.processing.org/t/array-of-circle-buttons-do-not-work/15118/1 "2019-11-01T14:47:45Z")

</div>

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:

```auto
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;
    }
  }
}

```

---

<div class="post-metadata">

**Author:** ![Noerre](https://avatars.discourse-cdn.com/v4/letter/n/6f9a4e/32.png) [@Noerre](https://discourse.processing.org/u/Noerre)\
**Post date:** [November 1, 2019, 5:32pm UTC](https://discourse.processing.org/t/array-of-circle-buttons-do-not-work/15118/2 "2019-11-01T17:32:13Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Tiemen](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tiemen/32/5477_2.png) [@Tiemen](https://discourse.processing.org/u/Tiemen)\
**Post date:** [November 1, 2019, 9:21pm UTC](https://discourse.processing.org/t/array-of-circle-buttons-do-not-work/15118/3 "2019-11-01T21:21:40Z")

</div>

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()](https://processing.org/reference/PShape_setFill_.html).

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

---

<div class="post-metadata">

**Author:** ![Noerre](https://avatars.discourse-cdn.com/v4/letter/n/6f9a4e/32.png) [@Noerre](https://discourse.processing.org/u/Noerre)\
**Post date:** [November 3, 2019, 9:32am UTC](https://discourse.processing.org/t/array-of-circle-buttons-do-not-work/15118/4 "2019-11-03T09:32:11Z")

</div>

Thank you! The problem is solved.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [November 3, 2019, 1:41pm UTC](https://discourse.processing.org/t/array-of-circle-buttons-do-not-work/15118/6 "2019-11-03T13:41:45Z")

</div>

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

```auto
// 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 
//

```