Moving circles - like bouncing

Question

Just another question! I'm trying to make the circle bounce around, but it's not working I even tried the most basic way, of just adding a value (from a 'step' int) to the circle x, but it's not working. What's the approach I should follow?

I know it's a basic question, but I'm knew to this :)

float time;
PFont font1;
/*float posX, posY, velX, velY, raio;
 int dirX = 1;
 int dirY = -1;*/
int passo = 2;

color c1 = color (253, 196, 80, 40);
color c2 = color(254, 127, 168, 40);

color c3 = color (53, 63, 114, 80);
color c4 = color (206, 186, 221, 80);

void setup() {
  size(600, 800);
  smooth();
  background (#F6C4C7);
  ellipseMode(RADIUS);

 
  noStroke();

  time = 17;
}

//make gradient

void desenhar_grad(float posX, float posY, int raio, color color1, color color2) {
  pushStyle();
  noStroke();
  for (int r = raio; r > 0; r--) {
    int tom = lerpColor(color1, color2, map(r, 0, raio, 0.0, 1.0)); // os últimos dois valores são as cores. o primeiro é o centro, o segundo é o exterior
    fill(tom);
    circle(posX, posY, r * 2);
    
  }
  popStyle();
}

/*void move() {
 posY+=velY*dirY;
 if (posY>height-raio || posY<raio)
 dirY*=-1;
 
 posX+=velX*dirX;
 if (posX>width-raio || posX<raio)
 dirX*=-1;
 }*/



void draw () {

  smooth();

  for (int linha = 0; linha < 3; linha++) {
    for (int coluna = 0; coluna < 3; coluna++) {
      if (time <= 19) {
        desenhar_grad(150 + coluna * 150, 200 + linha * 150, 30, c1, c2);
      } else
        desenhar_grad(150 + coluna * 150, 200 + linha * 150, 30, c4, c3);
    }
  }
}

} ```

Also, should I create a class for the circles in order to optimize the code?

Thank you!

Answer 1

I see your attempt with using the move() function (and related variables).

Again, close, but there are a few gotchas:

• the values used in move() should be initialised: otherwise they'll default to 0 and any number multiplied by 0 is 0 which will result in no movement at all
• once you have computed the correct posX, posY you could use those to translate() everything (i.e. the gradients): once everything is translated the 150, 200 offsets could be removed (and used as posX, posY initial values)
• it's unclear with the "pivot" of the 3x3 gradient grid should be at the centre or the top left corner of the grid. Let's start with the simpler top left option. This can easily be changed later to centre simply by adding had the grid size to posX and posY

Here's a modified version of your sketch using the notes above:

float time;

// initialise movement variables
float posX = 150, posY = 200, velX = 1, velY = 1;
int raio = 30;
int dirX = 1;
int dirY = -1;

color c1 = color (253, 196, 80, 40);
color c2 = color(254, 127, 168, 40);

color c3 = color (53, 63, 114, 80);
color c4 = color (206, 186, 221, 80);

void setup() {
  size(600, 800);
  smooth();
  ellipseMode(RADIUS);

  smooth(); 
  noStroke();

  time = 17;
}

//make gradient
void desenhar_grad(float posX, float posY, int raio, color color1, color color2) {
  pushStyle();
  noStroke();
  for (int r = raio; r > 0; r--) {
    int tom = lerpColor(color1, color2, map(r, 0, raio, 0.0, 1.0)); // os últimos dois valores são as cores. o primeiro é o centro, o segundo é o exterior
    fill(tom);
    circle(posX, posY, r * 2);
  }
  popStyle();
}

void move() {
 posY += velY * dirY;
 if (posY > height - raio || posY < raio)
   dirY *= -1;
 
 posX += velX * dirX;
 if (posX > width - raio || posX < raio)
   dirX *= -1;
 // for testing only:
 println("posX",posX, "width", width, "posY", posY, "height", height);
}



void draw () {
  if(!mousePressed) background (#F6C4C7);
  // update posX, posY taking sketch borders into account 
  move();
  // translate everything to the updated position
  translate(posX, posY);
  
  for (int linha = 0; linha < 3; linha++) {
    for (int coluna = 0; coluna < 3; coluna++) {
      if (time <= 19) {
        desenhar_grad(coluna * 150, linha * 150, raio, c1, c2);
      } else
        desenhar_grad(coluna * 150, linha * 150, raio, c4, c3);
    }
  }
  
}

I've removed unused variables for clarity and added a few comments.

There are still a few confusing, perhaps unrelated items:

• should the screen be cleared or should the grid leave trails ? (for now you can leave trails by holding the mouse pressed, but you can easily choose when to call background() based on the look you're going for)
• how should the time variable be updated ? Currently it's set to 17 in setup() and doesn't change making the if/else condition inside the nested for loops redundant. Perhaps you meant to update in draw() based on some conditions ?
• should the grid move as a whole or should each gradient move on its own ? my assumption is you're trying move the grid altogether however if you want to move each gradient on its own bare in mind you will need to use an array for each variable used in move() so it can be updated independently for each gradient (e.g. float[] posX, posY, velX, velY).)

Side note: If the movement is this simple you could get away with pos and vel variables and not use dir variables:

void move() {
 posY += velY;
 if (posY > height - raio || posY < raio)
   velY *= -1;
 
 posX += velX;
 if (posX > width - raio || posX < raio)
   velY *= -1;
}

Manually updating each x,y variable is a great way to learn. At a later date you might find PVector useful for movement.