need Help troubleshooting this!!! (bouncing)

saiqua

Hi, I really don't understand what i am doing wrong here or where i am going wrong conceptually. I am extremely new to processing and have a hard time thinking in terms of logic; but this is precisely what i'm trying to overcome at the moment.

I am only trying to make this ball bounce back. this is the code i wrote but it's only moving the ball once diagonnally across the screen. it does not bounce back. can someone please help :

int a = 0;
int b = 400;
int z = 5;

void setup () {
    size (400,400); 
}

void draw () {
    background (0);
    fill (255,0,255);
    ellipse (a +z,b-z, 50, 50);

    a = a+5;
    b = b-5;

    if (a>400 || b<0 ) {
        z = -z;
    }
}

i also want to explain what i understand in this logic - please correct me where i am wrong:

a is a number that starts from 0
b is a number that starts from 400
z is 5.

there is an ellipse of 100 diameter that moves from coordinates (0,400) to (400,0) - right across the graph. The ellipse moves in z increments. so we may say:

the new coordinate for the ellipse moving forward is (a+z),(b-z) ?
(assume a = a+5 (as it moves, old value of a replaced by new value of a) and b = b-5)

In that case, if i want the ellipse to move in the opposite direction after values become a = 400, b = 0; does it not mean z = -z ie same values, negative direction?

TfGuy44

Your code is kind of a mess. Follow along!

void setup() { 
  size(400, 400);
}

void draw() { 
  background(0);
}

A blank sketch. Everything here works. No problems.

void setup() { 
  size(400, 400);
}

void draw() { 
  background(0);
  ellipse(100,100,50,50);
}

An ellipse appears! Where is the ellipse? Why, it's at (100,100), of course.

void setup() { 
  size(400, 400);
  fill(255,0,255);
  noStroke();
}

void draw() { 
  background(0);
  ellipse(100,100,50,50);
}

Now it's the right color too.

int position_x;
int position_y;

void setup() { 
  size(400, 400);
  position_x = 200;
  position_y = 200;
  fill(255,0,255);
  noStroke();
}

void draw() { 
  background(0);
  ellipse(position_x,position_y,50,50);
}

Now the dot's position depends on some other variables. Since those variable are where the dot is going to be, I've given them names that indicate what the value those variables are storing is used for. If I had called these variables a and b, I might get confused later.

TfGuy44

int position_x;
int position_y;

void setup() { 
  size(400, 400);
  position_x = 200;
  position_y = 200;
  fill(255,0,255);
  noStroke();
}

void draw() { 
  background(0);
  position_x = position_x + 5;
  position_y = position_y + 5;
  ellipse(position_x,position_y,50,50);
}

Now I am increasing the value stored in those position variables. This makes the ellipse move.

int position_x;
int position_y;
int step_amount;

void setup() { 
  size(400, 400);
  position_x = 200;
  position_y = 200;
  step_amount = 5;
  fill(255,0,255);
  noStroke();
}

void draw() { 
  background(0);
  position_x = position_x + step_amount;
  position_y = position_y + step_amount;
  ellipse(position_x,position_y,50,50);
}

Now the ellipse moves as it did before, but the amount it moves by is controlled by another variable, step_amount. This is where you went wrong before. You would always add 5 to your a and b variables, no matter what the value of z was. You may have had trouble noticing this because z and 5 kind of look the same. With properly named variables, there is less confusion.

int position_x;
int position_y;
int step_amount;

void setup() { 
  size(400, 400);
  position_x = 200;
  position_y = 200;
  step_amount = 5;
  fill(255, 0, 255);
  noStroke();
}

void draw() { 
  background(0);
  update_ellipse_position();
  draw_ellipse();
}

void update_ellipse_position() {
  position_x = position_x + step_amount;
  position_y = position_y + step_amount;
}

void draw_ellipse() {
  ellipse(position_x, position_y, 50, 50);
}

This step is optional, but it makes some sense to move the ellipse's behavior to separate functions. I do this now to further illustrate that this makes it more clear what the sketch is doing.

TfGuy44

int position_x;
int position_y;
int step_amount;

void setup() { 
  size(400, 400);
  initialize_ellipse_variables();
}

void draw() { 
  background(0);
  update_ellipse_position();
  draw_ellipse();
}

void initialize_ellipse_variables(){
  position_x = 200;
  position_y = 200;
  step_amount = 5;
}  

void update_ellipse_position() {
  position_x = position_x + step_amount;
  position_y = position_y + step_amount;
}

void draw_ellipse() {
  fill(255, 0, 255);
  noStroke();
  ellipse(position_x, position_y, 50, 50);
}

Here's even a bit more optional shuffling. Give yourself a gold star if you can see where I'm going with this.

TfGuy44

int position_x;
int position_y;
int step_amount;

void setup() { 
  size(400, 400);
  initialize_ellipse_variables();
}

void draw() { 
  background(0);
  check_for_bounce();
  update_ellipse_position();
  draw_ellipse();
}

void initialize_ellipse_variables(){
  position_x = 200;
  position_y = 200;
  step_amount = 5;
}  

void check_for_bounce(){
  if( position_x > 400 ){
    step_amount = step_amount * -1;
  }
}

void update_ellipse_position() {
  position_x = position_x + step_amount;
  position_y = position_y + step_amount;
}

void draw_ellipse() {
  fill(255, 0, 255);
  noStroke();
  ellipse(position_x, position_y, 50, 50);
}

Hey look, it bounces!

TfGuy44

int position_x;
int position_y;
int step_amount;

void setup() { 
  size(400, 400);
  initialize_ellipse_variables();
}

void draw() { 
  background(0);
  check_for_bounce();
  update_ellipse_position();
  draw_ellipse();
}

void initialize_ellipse_variables(){
  position_x = 200;
  position_y = 200;
  step_amount = 5;
}  

void check_for_bounce(){
  if( position_x > 400 || position_x < 0 ){
    step_amount = step_amount * -1;
  }
  if( position_y > 400 || position_y < 0 ){
    step_amount = step_amount * -1;
  }  
}

void update_ellipse_position() {
  position_x = position_x + step_amount;
  position_y = position_y + step_amount;
}

void draw_ellipse() {
  fill(255, 0, 255);
  noStroke();
  ellipse(position_x, position_y, 50, 50);
}

Now it bounces on all the edges! Yeah! ... What?

It DOESN'T?!?

OH NO! NO NO NO! WE BROKE IT!!!

ACK! PANIC!

WHAT'S WRONG???

saiqua

thank you so much for such a wonderfully illustrated response.

Can you tell me if i got this:

My mistake was i put z as a solid number -- 5 whereas i should be telling the computer "No matter what the value of z is, when a = 400 and be = 0 --z should be in the negative direction" So the computer does not accept my code because it is not explaining the function sufficiently?

TfGuy44

Thankfully we know that the problem is because of something that was changed in the check_for_bounce() function. Nothing else was changed! See if you can work out what went wrong. Hint: What happens if both position_x and position_y are greater than 400?

Anyway, using one step_amount variable isn't going to cut it.

int position_x;
int position_y;
int step_x;
int step_y;

void setup() { 
  size(400, 400);
  initialize_ellipse_variables();
}

void draw() { 
  background(0);
  check_for_bounce();
  update_ellipse_position();
  draw_ellipse();
}

void initialize_ellipse_variables(){
  position_x = 200;
  position_y = 200;
  step_x = 5;
  step_y = -3;
}

void check_for_bounce(){
  if( position_x > 400 || position_x < 0 ){
    step_x = step_x * -1;
  }
  if( position_y > 400 || position_y < 0 ){
    step_y = step_y * -1;
  }  
}

void update_ellipse_position() {
  position_x = position_x + step_x;
  position_y = position_y + step_y;
}

void draw_ellipse() {
  fill(255, 0, 255);
  noStroke();
  ellipse(position_x, position_y, 50, 50);
}

That's better. Now, last chance to earn that gold star...

TfGuy44

Dot dot;

void setup() { 
  size(400, 400);
  dot = new Dot();
}

void draw() { 
  background(0);
  dot.draw();
}

// Object encapsulation powers activate!

class Dot {

  int position_x;
  int position_y;
  int step_x;
  int step_y;

  Dot() {
    position_x = 200;
    position_y = 200;
    step_x = 5;
    step_y = -3;
  }

  void draw() {
    check_for_bounce();
    update_ellipse_position();
    draw_ellipse();
  }

  void check_for_bounce() {
    if ( position_x > 400 || position_x < 0 ) {
      step_x = step_x * -1;
    }
    if ( position_y > 400 || position_y < 0 ) {
      step_y = step_y * -1;
    }
  }

  void update_ellipse_position() {
    position_x = position_x + step_x;
    position_y = position_y + step_y;
  }

  void draw_ellipse() {
    fill(255, 0, 255);
    noStroke();
    ellipse(position_x, position_y, 50, 50);
  }
}

It's the same sketch! So what good is this? Well, for one, the draw() and setup() functions are WAY simple looking.

saiqua

oh man you've used commands i haven't studied yet. give me a moment while i figure this out :)

TfGuy44

Dot[] dots = new Dot[100];

void setup() { 
  size(400, 400);
  for (int i=0; i<dots.length; dots[i++] = new Dot() );
}

void draw() { 
  background(0);
  for (int i=0; i<dots.length; dots[i++].draw() );
}

// Object encapsulation powers activate!

class Dot {

  float position_x;
  float position_y;
  float step_x;
  float step_y;
  color my_color;

  Dot() {
    position_x = random(width);
    position_y = random(height);
    step_x = random(-5, 5);
    step_y = random(-5, 5);
    my_color = color(random(255), random(255), random(255));
  }

  void draw() {
    check_for_bounce();
    update_ellipse_position();
    draw_ellipse();
  }

  void check_for_bounce() {
    if ( position_x > width || position_x < 0 ) {
      step_x *= -1;
    }
    if ( position_y > height || position_y < 0 ) {
      step_y *= -1;
    }
  }

  void update_ellipse_position() {
    position_x += step_x;
    position_y += step_y;
  }

  void draw_ellipse() {
    fill(my_color);
    noStroke();
    ellipse(position_x, position_y, 50, 50);
  }
}

Also this. Wheeeeeeeeeeeeeeeeeee!

TfGuy44

int a = 0; 
int b = 400; 
int z = 5;

void setup () { 
  size (400, 400);
}

void draw () { 
  background (0); 
  fill (255, 0, 255);

  // Look here.
  // Your ellipse is supposed to be at (a,b).
  // Why is there a z in here?
  ellipse (a+z, b-z, 50, 50);

  // Look here.
  // You are always adding 5.
  // You probably wanted to be adding z.
  a = a+5;
  // Same thing here, but with subtracting.
  b = b-5;

  if (a>400 || b<0 ) {
    z = -z;
  }
}

saiqua

hey was my main problem my syntax? i got the order wrong or something and confused my variables? I seemed to have understood what's happening correctly. Sorry if i'm asking dummy questions. Hard to move forward without total clarity.

TfGuy44

You were changing your step amount (which you called z) just fine, but you were using the value of 5, not z, when you updated your position variables.

saiqua

i got it right now :D

int locationX = 0; int locationY = 400; int increment = 5;

void setup () { size (400,400);

}

void draw (){

background (0); ellipse (locationX + increment,locationY - increment,50,50);

locationX=locationX+increment; locationY=locationY-increment;

if (locationX >400 && locationY<0){

increment = -increment; }

if (locationX<0 && locationY>400) {increment = -increment;}

}

MAKES SO MUCH MORE SENSE NOW THANK YOU!!!

saiqua

just one m ore dumb question - theoretically, if the 5 was replaced by the z - it wouldn't work right? i did try this and it didn't. i put z = 5 to substitute 5 in all fields - did i confuse myself by doing that?

saiqua

ok no nevermind! it does work! jeeeeez! man numbers confuse me. thanks again!