# How can I make my circles move slightly?

**URL:** https://discourse.processing.org/t/how-can-i-make-my-circles-move-slightly/10301
**Category:** Coding Questions
**Created:** [April 15, 2019, 4:16pm UTC](https://discourse.processing.org/t/how-can-i-make-my-circles-move-slightly/10301 "2019-04-15T16:16:49Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![dana](https://avatars.discourse-cdn.com/v4/letter/d/9de053/32.png) [@dana](https://discourse.processing.org/u/dana)
#### Post date: [April 15, 2019, 4:16pm UTC](https://discourse.processing.org/t/how-can-i-make-my-circles-move-slightly/10301/1 "2019-04-15T16:16:50Z")

</div>

Okay so I found some code and I’ll like to change it to do something else. Right now there’s a class of circles that appear at random places on the screen, and when the mouse hovers over the screen, the colours of the circles around it change a bit.  
I wanna see if I’d be able to make the circles move around (not much, kinda just to hover around a tad). The problem is I’m pretty new to this stuff so I don’t know where to start. Here’s the code so far though.

I was thinking that I would be adding the movement around “Circle(float x, float y) {”

```auto
int numCircles = 500;
Circle[] circles = new Circle[numCircles]; // define the array

void setup() {
  size(1439,800);
  smooth();
  noStroke();
  for (int i=0; i<numCircles; i++) {
    circles[i] = new Circle(random(width),random(height)); // fill the array with circles at random positions
  }
}

void draw() {
  background(205);
  for (int i=0; i<numCircles; i++) {
    square(100, 100, 100);
    circles[i].display(); // display all the circles
  }
}

class Circle {
  float x,y; // location
  float dim; // dimension
  color c; // color
 
  Circle(float x, float y) {
    this.x = x;
    this.y = y;
    dim = random(20,50);
    c = color(random(255));
  }

  
  void display() {
    float distance = dist(x,y,mouseX,mouseY); // distance between circle and mouse
    if (distance < 255) { // if distance is smaller than 255
      fill(255-distance);
    } else { // if distance is bigger than 255
      fill(c);
    }
    ellipse(x,y,dim,dim); // a circle at position xy
  }
}

```

---

<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: [April 15, 2019, 4:33pm UTC](https://discourse.processing.org/t/how-can-i-make-my-circles-move-slightly/10301/2 "2019-04-15T16:33:07Z")

</div>

Hi,

My advice would be to start by something simple and build onto that. Specially if you are new to this.

For example here a starting point:

```auto
int posX, posY, speedX, speedY;

void setup() {
  size(1200, 800);
  background(20);
  
  posX = 10;
  posY = 10;
  speedX = 2;
  speedY = 1;
}

void draw() {
  background(20);
  
  posX += speedX;
  posY += speedY;
  
  fill(200);
  noStroke();
  ellipse(posX, posY, 20, 20);
}

```

---

<div class="post-metadata">

### Author: ![dana](https://avatars.discourse-cdn.com/v4/letter/d/9de053/32.png) [@dana](https://discourse.processing.org/u/dana)
#### Post date: [April 16, 2019, 6:10pm UTC](https://discourse.processing.org/t/how-can-i-make-my-circles-move-slightly/10301/3 "2019-04-16T18:10:49Z")

</div>

Okay I’ll try again, thanks!

---

<div class="post-metadata">

### Author: ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)
#### Post date: [April 16, 2019, 9:27pm UTC](https://discourse.processing.org/t/how-can-i-make-my-circles-move-slightly/10301/4 "2019-04-16T21:27:42Z")

</div>

Starting simple is good advice.

When you want to bring what you learn back to the circle Class, notice the “if” in the Circle.display. Currently, you have the color inside the “if/else”. What if you put the ellipse drawing in there as well? You could add “random” to jitter… or modify the x,y values to drift… or change x,y in relation to mouseX,mouseY in order to attract repel… et cetera.