see here for explanations

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

**Our ball code up to now :**

int x = 0; voidsetup(){ size(400,400); } voiddraw(){ 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;

voidsetup(){ size(400,400); } voiddraw(){ 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;

we add the y conditionals

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 voidsetup(){ size(400,400); } voiddraw(){ 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 !

Join our Whatsapp group :

https://chat.whatsapp.com/4HfUmG7MW4h5oO2tjAoXLo

*adapted from the coding train*