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

Download Processing here.

Our code up to now :

float x = 0; float xspeed = 2.6; float xacceleration = 1; float y =0; float yspeed = -1; float yacceleration = 0; voidsetup(){ size(400,400); } voiddraw(){ 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.

add() // adding two vectors together

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

adding velocity to location

adding acceleration to velocity

which can be done by :

location.add(velocity); velocity.add(acceleration);

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); voidsetup(){ size(400,400); } voiddraw(){ background(0); fill(255); ellipse(location.x,location.y,20,20); location.add(velocity); velocity.add(acceleration); 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.

Join us on Whatsapp :

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