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;

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.

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);

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 :

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);

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

void draw(){
  
 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

 

Advertisements