see here for explanations

using Processing from http://www.processing.org

Our ball code up to now :

```int x = 0;

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

void draw(){

background(0);
fill(255);
ellipse(x,10,20,20);
x += 1;

}
```

How do balls bounce ? – An exploration of Programming Logic

The ball above starts at 10,10 and moves to the right forever. However, let us say that you want it to bounce back, how do you do?

First let us define our box or walls. The screen will be our box. The box bouncing back means that after hitting the end of the screen, it’s x-coordinate decreases again

10   to   end-of-screen-to-the-right

end-of-screen-to-the-right    to   end-of-screen-to-the-left

then when it reaches the other end, it rebounces back, meaning,

end-of-screen-to-the-left    to   end-of-screen-to-the-right

and so on forever.

Coordinately speaking, for x, the left edge is 0 while the right edge is the size you specified in size( , );

it can be retrieved using the keyword width , simple!

if  x > width, x reverses direction // x decreases

if x < 0, x reverses direction //x increases

by x decrease we can do

if ( x > width){

x = x -1;

}

but it won’t work as it will conflict with the x+=1 above. The above code will do it’s job separately, and the if separately, that’s why we need variables for the speed.

Introducing the speed variable

first we add a new variable

float xspeed = 1;

//float used for decimal, our speed can be 2.3 for example

we also change the data type for our x from int to float

```float x = 0;
```

and the conditionals as follows :

``` if ( x > width){
xspeed=-1;
}

if (x < 0){
xspeed=1;
}
```

Click on play, it runs !!! Now the ball bounces right and left . …

Our code up to now :

```float x = 0;
float xspeed = 1;
```
```void setup(){
size(400,400);
}

void draw(){

background(0);
fill(255);
ellipse(x,10,20,20);
x = x + xspeed; //shortcut : x+= xspeed
if ( x > width){
xspeed=-1;
}

if (x < 0){
xspeed=1;
}

}

```

Simplifying the logic of conditionals

Well, you can actually merge the two ifs into one, we do so by taking direction as direction!

How can we change 1 to -1 and vice-versa?

by multiplying by -1,of course

we introduce OR, the OR of Processing is written as ||

simce we will make the 1 and -1 line into one, we also merge the conditionals

```if ( x > width || x < 0 ){
xspeed = xspeed * -1; //shortcut : xspeed *= -1
}

// remember || means OR
```

And yes, it works !!!

Towards reality – the introduction of y

Well, balls can move in very direction they want,

so we can add a variable for y

```float y =0;
```

we then replace the y coordinate of the ball by that variable

``` ellipse(x,y,20,20);
```

we than add a yspeed variable

```float yspeed = 1;
```

we then put a y = y + yspeed

```y+= yspeed;
```

``` if ( y > height || y < 0 ){
yspeed = yspeed * -1;
}
```

And bingo, our ball can now really bounce anywhere it wishes!

The 2D bouncing ball code :

```float x = 0;
float xspeed = 2.6; // change those values to see
float y =0;
float yspeed = -1; // change those values to see

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

void draw(){

background(0);
//display part
fill(255);
ellipse(x,y,20,20);

//update part
x += xspeed;
y+= yspeed;

//edges part
if ( x > width || x < 0 ){
xspeed = xspeed * -1;
}
if ( y > height || y < 0 ){
yspeed = yspeed * -1;
}

}

```

Characteristics of a bouncing ball

The charcteristics of a bouncing ball code are 3

1 The moving or updating part

2 The bounce edges checking part and

3 The display part //it won’t draw the ball if you don’t tell!

Result

While waiting for some sort of video (if you have screen recorder recommendations comment below), here is the path taken by the ball :

Hehe,  just remove or comment out the background !