Using the Processing language found at http://www.processing.org

Our code up to now :

see here for explanations

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

}

 What is speed?

Well what we did to make the ball move at the begining was to add something to the ball’s x and y coords each time. Meaning, each time the frame changed  / the ball was redrawn there was a slight change (of 1px) in the 2 values.

Speed is the rate of change of location

Speed is the change of location over time.

We simulated speed by saying to the machine to change the values each time by 1

What is acceleration ?

Acceleration is the rate of change of speed.

Like we added something to lacation and it became speed, similarly, we add something to speed and poof it becomes acceleration !

Well in physics we use the term velocity rather than speed because as soon as you do that, you have a coordinate system and you know where you are going relative to the origin and . . . speed morphs into velocity. Never mind.

Well we begin by introducing our xacceleration and yacceleration

float xacceleration = 1;
float yacceleration = 0;

now we add the acceleration to x and y speeds.

xspeed = xspeed + xacceleration; 
xspeed = xspeed + xacceleration;

note : same as xspeed += xacceleration;

If you run it you’ll see that the ball actually move quicker. 1 is too much try o.1 etc.

Code with acceleration added:

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

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

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

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

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

}

It is just a quicker bounce. Now let us change the accelarations and speed as :

xspeeed to 2.6

xacceleration to 0.1

yspeed to -1

yacceleration to -0.5

The result is :

untitled

i commented out the background so as to view the ball path.

See it’s like gravity moved to the top and the ball bouncing . . .

putting the x acceleration and speed to 0 dives you an up down bouncing ball !

putting

x 200 xspeed 0.3 xacceleration 0.2

y 400 yspeed o.5 yacceleration 0.5

gives

normal-bounce-with-gravity

the normal bounce!

and just putting xacceleration to 0 gives

escabounce

an ordered drawing as no crazy xacceleration . . .

As you would have guessed, putting those in a function or classes makes value changing easier. We’ll cover that by god’s will later on!

Stay tuned.

Join us on Whatsapp :

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

 

Advertisements