# How can I make my circles move slightly?

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) {”

``````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
}
}
``````
1 Like

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:

``````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);
}
``````
1 Like

Okay I’ll try again, thanks!