How can I make my circles move slightly?

Processing Coding Questions
1

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
2

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
3

Okay I’ll try again, thanks!

4

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.

1 Like