Using processing found at http://www.processing.org

Our code up to now :

```float x = 0;
float xspeed = 2.6;
float xacceleration = 1;
float y =0;
float yspeed = -1;
float yacceleration = 0;

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

void draw(){

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

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

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

}
```

see explanations here.

Vectors

just as we have our x and y coordinates declared separately, we can combine them into a simple expression called a vector.

A vector represents a coordinate relative to the origin i.e. it says :

x3,y5 says that i am 3 units from the origin on the x-axis and y units from the origin on the y-axis.

Vectors in Processing has several methods like :

// don’t be afraid looking at them, they are very easy.

sub()

mult()

div()

normalise()

random2D()

dot()

among others

see the full reference here : https://processing.org/reference/PVector.html

1)

For our case, instead of declaring two variables for the location of the ball, we’ll be declaring one vector.

```float x = 0;
float y = 0;
```

becomes

```PVector location = new PVector(0,0);
```

it can also be done in two steps.

```PVector location;
location = new PVector(0,0);

//which separates declaration and assignment which turns out useful in classes```

..the P stands for Processing i think.

2)

```float xspeed = 2.6;
float yspeed = -1;
```

becomes

```PVector velocity = new PVector(2.6,-1);
```

3)

```float xacceleration = 1;
float yacceleration = 0;
```

becomes

```PVector acceleration = new PVector(1,0);
```

.

Some dissections

```PVector location=new PVector(0,0);
```

The new keyword is used as PVector is actually a class.

Now, you can still access the x and y components by

location.x   and   location.y  . Similarly for velocity and acceleration.

Continueing . . .

>> x becomes

`location.x`

>> y becomes

`location.y`

>> xspeed becomes

`velocity.x`

>> yspeed becomes

`velocity.y`

>> xacceleration becomes

`acceleration.x`

>> yacceleration becomes

`acceleration.y`

.

Here is our code after full replacements

```PVector location=new PVector(0,0);
PVector velocity = new PVector(2.6,-1);
PVector acceleration = new PVector(1,0);

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

void draw(){

background(0);

fill(255);
ellipse(location.x,location.y,20,20);

location.x = location.x + velocity.x;
velocity.x = velocity.x + acceleration.x;

location.y = location.y + velocity.y;
velocity.y = velocity.y + acceleration.y;

if ( location.x > width || location.x < 0 ){
velocity.x = velocity.x * -1;
}
if ( location.y > height || location.y < 0 ){
velocity.y = velocity.y * -1;
}

}
```

When you press run, it will do the same thing as the previous code. No difference. However, we can use the methods already provided.

Simplifying using provided methods !

```location.x = location.x + velocity.x;
velocity.x = velocity.x + acceleration.x;

location.y = location.y + velocity.y;
velocity.y = velocity.y + acceleration.y;```

rewriting :

```location.x = location.x + velocity.x;
location.y = location.y + velocity.y;

velocity.x = velocity.x + acceleration.x;
velocity.y = velocity.y + acceleration.y;```

what we are doing here is that we are adding the x and y components of velocity to location and we are adding the x and y components of location to velocity

in other words, we are :

which can be done by :

```location.add(velocity);
```

same result. so the derivation of the add() is that it adds both separately as seen above!

Complete code with vectors:

```PVector location=new PVector(0,0);
PVector velocity = new PVector(2.6,-1);
PVector acceleration = new PVector(1,0);

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

void draw(){

background(0);

fill(255);
ellipse(location.x,location.y,20,20);

if ( location.x > width || location.x < 0 ){
velocity.x = velocity.x * -1;
}
if ( location.y > height || location.y < 0 ){
velocity.y = velocity.y * -1;
}

}

```

a mere much more readeable 28-line code.