# 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 `key`variable 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.

1 Like