# Rollover not working when applied in an array of circles

**URL:** https://discourse.processing.org/t/rollover-not-working-when-applied-in-an-array-of-circles/35840
**Category:** Coding Questions
**Tags:** homework
**Created:** [March 19, 2022, 3:36pm UTC](https://discourse.processing.org/t/rollover-not-working-when-applied-in-an-array-of-circles/35840 "2022-03-19T15:36:40Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![Erif](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/erif/32/15932_2.png) [@Erif](https://discourse.processing.org/u/Erif)
#### Post date: [March 19, 2022, 3:36pm UTC](https://discourse.processing.org/t/rollover-not-working-when-applied-in-an-array-of-circles/35840/1 "2022-03-19T15:36:40Z")

</div>

Hi all, coding with Processing for just over a month only so lots of things to learn 😅

I’ve created a simple rollover so when the mouse is within the circle it changes color. It works… however when adjusting the setup() loop to instead of 1 circle at x=250, y=250 I make x,y a function of i I do get multiple circles but when I roll over one, it’s the adjacent circle the one changing the color 😂. Any ideas? Full code below. Appreciate any help!

```auto
Button[] buttons = new Button[4];
boolean rollover = false;

void setup() {
  size(500,500,P2D);

  //this loop works with i.e. x=250, y=250, but not like this ;(
  for(int i = 0; i < buttons.length; i++) {
    buttons[i] = new Button(100+100*i, 100+100*i, 50, color(#BC021B), color(#396AE3));
  }
}

void draw() {
  background(255);

  for (int i = 0; i < buttons.length; i++) {
    buttons[i].display();
    buttons[i].withinCircle();
  }
}

  class Button {
    //variables
    float x;
    float y;
    float diam; //width and height = diameter for circles
    color c;
    color c1;
    
    //constructor
    Button(float tempX, float tempY, float tempDiam, color tempC, color tempC1) {
      x = tempX;
      y = tempY;
      diam = tempDiam;
      c = tempC;
      c1 = tempC1;
    }
  
    //methods
    //function that displays the circle and fills the color based on condition
    void display() {
      if(rollover) {
        fill(c);
      } else {
        fill(c1);
        }
      
      noStroke();
      ellipseMode(CENTER);
      ellipse(x,y,diam,diam);
    }
    //function that calculates if the mouse coordinates are within the circle or not
    void withinCircle() {
      float distance = dist(x,y,mouseX,mouseY);
      if(distance < diam/2) {
        rollover = true;
      } else {
        rollover = false;
        }
    }
  }

```

---

<div class="post-metadata">

### Author: ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)
#### Post date: [March 19, 2022, 3:53pm UTC](https://discourse.processing.org/t/rollover-not-working-when-applied-in-an-array-of-circles/35840/2 "2022-03-19T15:53:55Z")

</div>

Hello @Erif,

Give consideration to the order of these:

> [@Erif](#):
>
> ```auto
> buttons[i].display();
> buttons[i].withinCircle();
> 
> ```

Which one do you want to do first?

`:)`

---

<div class="post-metadata">

### Author: ![Erif](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/erif/32/15932_2.png) [@Erif](https://discourse.processing.org/u/Erif)
#### Post date: [March 19, 2022, 4:13pm UTC](https://discourse.processing.org/t/rollover-not-working-when-applied-in-an-array-of-circles/35840/3 "2022-03-19T16:13:51Z")

</div>

Ooooh… magic!! ✨  
I need to first calculate if the mouse is within the circle then display the circle with the rollover condition.  
It works perfectly by inverting those 2 function calls.  
Thanks a lot @glv