# Circle will become larger when mouse moves on it (loop question)

**URL:** <https://discourse.processing.org/t/circle-will-become-larger-when-mouse-moves-on-it-loop-question/4231>\
**Category:** Coding Questions\
**Created:** [October 7, 2018, 7:26pm UTC](https://discourse.processing.org/t/circle-will-become-larger-when-mouse-moves-on-it-loop-question/4231 "2018-10-07T19:26:37Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![xhqecho](https://avatars.discourse-cdn.com/v4/letter/x/df788c/32.png) [@xhqecho](https://discourse.processing.org/u/xhqecho)\
**Post date:** [October 7, 2018, 7:26pm UTC](https://discourse.processing.org/t/circle-will-become-larger-when-mouse-moves-on-it-loop-question/4231/1 "2018-10-07T19:26:37Z")

</div>

Hello,

I want to create a project, when the mouse move on the circle, the circle will become larger. I can do it when it’s only one circle, but when I add a loop in it, it cannot work.

```auto
int x=-45;
int a;

void setup() {

  size(720, 720);
}

void draw() {

  background(255);
 
//loop six circle ; the distance of two circle is 45, diameter is 90, 45+90=135;
 for (int x=-45; x<675; x=x+135) {
    fill(0);
    ellipse(x, height/2, 90, 90);
  }
 
 // mouse on the circle mouse circle will have strokeWeight 

 if ((dist(x, height/2, mouseX, mouseY)<45)) {
      x=x+135;
      stroke(0);
      strokeWeight(20);
      cursor(HAND);
    } else {
      noStroke();
      cursor(ARROW);
    }
  }

```

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [October 7, 2018, 7:34pm UTC](https://discourse.processing.org/t/circle-will-become-larger-when-mouse-moves-on-it-loop-question/4231/2 "2018-10-07T19:34:30Z")

</div>

Hi xhqecho,

Can you please format your code? It is all explained in this thread: [Guidelines—Tips on Asking Questions](https://discourse.processing.org/t/guidelines-tips-on-asking-questions/2147)

The problem is that you are using a for loop to draw your shape but you are not having one to check the distance. So you are checking the distance with the last x value the for loop is giving you.

Consider using another loop to check the distance for each one of your circle.

---

<div class="post-metadata">

**Author:** ![xhqecho](https://avatars.discourse-cdn.com/v4/letter/x/df788c/32.png) [@xhqecho](https://discourse.processing.org/u/xhqecho)\
**Post date:** [October 8, 2018, 12:41am UTC](https://discourse.processing.org/t/circle-will-become-larger-when-mouse-moves-on-it-loop-question/4231/3 "2018-10-08T00:41:02Z")

</div>

Hi jb4x,

Thank you.

The distance of each is 45, I have made the six circle have same distance, it just didn’t become larger when the mouse move on it.

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [October 8, 2018, 5:39am UTC](https://discourse.processing.org/t/circle-will-become-larger-when-mouse-moves-on-it-loop-question/4231/4 "2018-10-08T05:39:58Z")

</div>

Working with objects makes this easy.

```java
class Circle {
  float x, y, s;
  Circle(float ix){
    x = ix;
    y = height/2;
    s = 90;
  }
  void draw(){
    if( over() ){
      s++;
    } else if( s > 90 ){
      s--;
    }
    ellipse(x,y,s,s);
  }
  boolean over(){
    return( dist(mouseX, mouseY, x, y) < s / 2.0 );
  }
}

Circle[] circles = new Circle[5]; 

void setup() {
  size(720, 720);
  fill(0);
  for( int i = 0; i < 5; i++) circles[i] = new Circle(90 + 135 * i );
}

void draw() {
  background(255);
  for( Circle c : circles ) c.draw();
}

```

Normally I would walk you through developing this, but I’m pretty tired right now. So just… promise you’ll put effort in to understand this.

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [October 8, 2018, 5:53am UTC](https://discourse.processing.org/t/circle-will-become-larger-when-mouse-moves-on-it-loop-question/4231/5 "2018-10-08T05:53:25Z")

</div>

I get what your code is doing.

Again, you need to use another for loop to check the distance for each one of the circles.

Or use the method of @TfGuy44 using OOP. It is a cleaner way to do what you want to achieve but if you have never heard of `class` and `object` before I strongly advise you to do some reading before using the solution.

---

<div class="post-metadata">

**Author:** ![xhqecho](https://avatars.discourse-cdn.com/v4/letter/x/df788c/32.png) [@xhqecho](https://discourse.processing.org/u/xhqecho)\
**Post date:** [October 9, 2018, 1:29am UTC](https://discourse.processing.org/t/circle-will-become-larger-when-mouse-moves-on-it-loop-question/4231/6 "2018-10-09T01:29:48Z")

</div>

Thank you again! I will try to realize it.

---

<div class="post-metadata">

**Author:** ![xhqecho](https://avatars.discourse-cdn.com/v4/letter/x/df788c/32.png) [@xhqecho](https://discourse.processing.org/u/xhqecho)\
**Post date:** [October 9, 2018, 1:31am UTC](https://discourse.processing.org/t/circle-will-become-larger-when-mouse-moves-on-it-loop-question/4231/7 "2018-10-09T01:31:08Z")

</div>

Thank you for your help! I will try to understand it.