I dont understand why my objects are out of sync?

Processing Coding Questions
1

Excuse my formatting as this is my first forum post, thank you in advance.

I have written some code to generate balls that form a circle around (0,0), and then move a set distance away from (0,0) before reversing their velocity in a loop. I’m having an issue where the balls are out of sync and I’m not quite sure why this is happening. my code is as follows:

    //Value for the degrees of rotation, and how many balls to spawn in the 'for' statement
int deg = 45;

//Positional values for the balls
int posX = 10;
int posY = 10;

//Value to increment movement
int inc = 1;

//max distance away from (0,0) a ball can reach before reversing velocity
int max = 100;

void setup() {

  fullScreen();
  pixelDensity(2);
  frameRate(60);
  background(255);
}

void draw() {

  translate (width/2, height/2);

  background(255);

  for (int x = 0; x < 360/deg; x = x + 1) {

    ellipseMode(CENTER);
    fill(255, 0);
    strokeWeight(1);
    rotate(radians(deg));
    ellipse(posX, posY, 20, 20);

    posX = posX + inc;

    if ((posX >= max) || (posX <= -max)) {

      inc = inc * -1;
    }
    
    println(posX);
  }
}

Any help would be greatly appreciated. I know there exists something called pVector, but I haven't quite reached that lesson yet in the tutorials I'm watching.
2

Hi, SpaceWave!
I think just moving several lines out of the For Loop will solve your problem.

Check this out:

//Value for the degrees of rotation, and how many balls to spawn in the 'for' statement
int deg = 45;

//Positional values for the balls
int posX = 10;
int posY = 10;

//Value to increment movement
int inc = 1;

//max distance away from (0,0) a ball can reach before reversing velocity
int max = 100;

void setup() {
  fullScreen();
  pixelDensity(2);
  frameRate(60);
  background(255);
}

void draw() {

  translate (width/2, height/2);

  background(255);

  for (int x = 0; x < 360/deg; x = x + 1) {

    ellipseMode(CENTER);
    fill(255, 0);
    strokeWeight(1);
    rotate(radians(deg));
    ellipse(posX, posY, 20, 20);
    
    //println(posX);
  }
  
  //this part should be taken out of the For Loop
  posX = posX + inc; 
  if ((posX >= max) || (posX <= -max)) {
      inc = inc * -1;
  }
}
1 Like
3

That’s perfect! I’m trying to understand why the movement increment needs to be outside of the for loop; is it because the position gets incremented every time to loop runs (so in this case 8 times) before the exit condition is met?

If you have time for another small issue with the same code, I don’t really understand why they all seem to avoid the origin, it seems like they skirt right past (0,0) without ever hitting it?

EDIT: on further examination (and my morning coffee) I can see now its because I had posY assigned to 10 which offset it from the origin.

1 Like
4

Those several lines should be moved out of the loop because the For Loop here is designed to draw the circles instead of calculating their positions. The draw() is called in every single frame. If you put those lines in the For Loop, within the frame, the position gets incremented every time to loop runs (so in this case 8 times). So the circles will appear like a spiral whirlpool.

(if you play with your original codes and set the “inc” to 4 or even bigger, you may see it clearly)
like this:

//Value for the degrees of rotation, and how many balls to spawn in the 'for' statement
int deg = 12;

//Positional values for the balls
int posX = 10;
int posY = 10;

//Value to increment movement
int inc = 4;

//max distance away from (0,0) a ball can reach before reversing velocity
int max = 500;

void setup() {

  fullScreen();
  pixelDensity(2);
  frameRate(10);
  background(255);
}

void draw() {

  translate (width/2, height/2);

  background(255);

  for (int x = 0; x < 360/deg; x = x + 1) {

    ellipseMode(CENTER);
    fill(255, 0);
    strokeWeight(1);
    rotate(radians(deg));
    ellipse(posX, posY, 20, 20);

    posX = posX + inc;

    if ((posX >= max) || (posX <= -max)) {

      inc = inc * -1;
    }
    
    println(posX);
  }
}
1 Like