Bouncing ellipses

Hi everybody! I’m a new user in this forum and I’d like to know if someone could help me with this:

A red ellipse that bounces vertically when you press “A”
A blue ellipse that bounces horizontally when pressing “B”
A green ellipse that bounces diagonally when pressing “C”.

“D” stops all the movement.

I’ve tried with a code but there are some fails. : roll_eyes:

Is this homework? This sounds a bit like homework.

Can you share the code you wrote that failed, and give what the error message was that got you stuck?

1 Like

Yes, this is homework. But i think it doesn’t matter. Here is the code:

float circleX;
float xspeed = 1;

float circleY;
float yspeed = 1;

float circleXY;
float xyspeed = 1;

void setup() {
  size(640, 360);
  circleX = 0;
}

void draw() {
  background(51);
  fill(48, 90, 206);
  stroke(255);
  ellipse(circleX, 180, 32, 32);
   if(key == 'a') {
     circleX = circleX + xspeed;
     if(circleX > width || circleX < 0)
     xspeed = xspeed * -1.0;
  }
  fill(255,0,2);
  ellipse(300, circleY, 32, 32);
  if(key == 'b') {
     circleY = circleY + yspeed;
     if(circleY > height || circleY < 0)
     yspeed = yspeed * -1.0;
  }
  fill(0,400,0);
  ellipse(circleXY, circleXY, 32, 32);
  if(key == 'c') {
     circleXY = circleXY + xyspeed;
     if(circleXY > height || circleXY < 0)
     xyspeed = xyspeed * -1.0;
  }
}

The problem with this code is that it doesn’t keep the 3 balls moving at the same time and I don’t know how to use the D to stop the whole movement.

1 Like

Ok nice try for a beginner. There is just one major mistake you made:
The key variable stores the key that was most recently pressed. So when A is pressed, the first circle starts moving, but then when you press B, the keyvariable now holds ‘b’ and not ‘a’ anymore. So the first circle stops moving.

A way to fix this problem (and also the other one that d stops all circles) is to give each each ball a variable that tells wether they are currently moving or not. The datatype we’d use for this is boolean, since it is either true or false. You can name those for example

boolean circlexMoving;
boolean circleyMoving;
boolean circlexyMoving;

These will automatically be set to false when the sketch is started. (Btw, the second line in your code in void setup() is actually not necessary, since floats and ints always start at a value of 0).

The next change you need to make is that when the buttons a, b or c are being pressed, instead of moving the balls in the corresponding direction, you set the corresponding boolean to true.
For example:

if (key == 'a') {
  circlexMoving = true;
}

Now you shouldn’t delete the code that makes the balls move. Instead you should replace the condition in the if statements with the corresponding booleans.
For example:

if (circlexMoving) {
  circleX = circleX + xspeed;
  if(circleX > width || circleX < 0) {
    xspeed = xspeed * -1.0;
  }
}

Just so that you know, if (circlexMoving) is the same as if (circlexMoving == true)

And finally, it’s time to implement the last feature. This is now very simple, as you can just add a condition that checks if D is being pressed and if it is, then set all ballMoving variables to false.
This should look something like this:

if (key == 'd') {
  circlexMoving = false;
  circleyMoving = false;
  circlexyMoving = false;
}

Here’s what the final code looks like:

float circleX;
float xspeed = 1;
boolean circlexMoving;
float circleY;
float yspeed = 1;
boolean circleyMoving;
float circleXY;
float xyspeed = 1;
boolean circlexyMoving;

void setup() {
  size(640, 360); 
}

void draw() {
  background(51);
  fill(48, 90, 206);
  stroke(255);
  ellipse(circleX, 180, 32, 32);
  if (key == 'a') {
    circlexMoving = true;
  }
  if (circlexMoving) {
    circleX = circleX + xspeed;
    if (circleX > width || circleX < 0) {
      xspeed = xspeed * -1.0;
    }
  }
  fill(255, 0, 2);
  ellipse(300, circleY, 32, 32);
  if (key == 'b') {
    circleyMoving = true;
  }
  if (circleyMoving) {
    circleY = circleY + yspeed;
    if (circleY > height || circleY < 0) {
      yspeed = yspeed * -1.0;
    }
  }
  fill(0, 400, 0);
  ellipse(circleXY, circleXY, 32, 32);
  if (key == 'c') {
    circlexyMoving = true;
  }
  if (circlexyMoving) {
    circleXY = circleXY + xyspeed;
    if (circleXY > height || circleXY < 0) {
      xyspeed = xyspeed * -1.0;
    }
  }
  if (key == 'd') {
    circlexMoving = false;
    circleyMoving = false;
    circlexyMoving = false;
  }
}
3 Likes

Well, I just took a bit minutes to read the code to compare with the other I did and now I clearly understand why it wasn’t doing what I looked for. Despite the fact that my code is wrong, I’ll save it as a sample of my first mistake because I think I must learn from them. Thanks!

Ok I think that’s not even a bad idea
You’re welcome!

Sharing a trimmed down version with keyPressed() function.

This will also toggle state with a single key press.
https://processing.org/reference/keyPressed_.html
https://processing.org/reference/keyPressed.html

float circleX;
float xspeed = 1;

boolean moveX;

void setup() 
  {
  size(640, 360);
  circleX = 0;
  }

void draw() 
  {
  background(51);
  fill(48, 90, 206);

// Update based on keyPressed states
  if (moveX)
    {
    circleX = circleX + xspeed;
    if(circleX > width || circleX < 0)
    xspeed = xspeed * -1.0;
    }
  
// Draw
    stroke(255);
    ellipse(circleX, 180, 32, 32);
    }
  
void keyPressed()
  {
  if(key == 'a') moveX = !moveX;
  if(key == 'd') moveX = false;
  }

You won’t be able to toggle state so easily if checking for keyPressed in draw().
Run code below to see behaviour of these.

//Observe console output:

void setup() 
  {
  size(200, 200);
  background(255, 255, 0);
  } 

void draw()
  {
  if (keyPressed) 
    println(frameCount, key);
  }
//Observe console output:
void setup() 
  {
  size(200, 200);
  background(255, 255, 0);
  } 

void draw()
  {
  } 
  
void keyPressed()
  {
  println(frameCount, key);
  }

A similar discussion came up in another topic with mousePressed variable and mousePressed() function so just sharing for future consideration to anyone reading these posts.

:slight_smile:

1 Like