TOOLS TO HELP YOU LEARN

teachers, students, everyone

teachers, students, everyone

Login Status

Tweet
**Coding Gravity
**

Everyone has heard of Newton's Law of Gravity & Motion at some point in their school career. It deals with how force is applied to objects using gravity and friction and also deals with speed, velocity, time and distance. **We will apply these concepts programmatically using javascript to simulate gravity on a ball/circle and attempt to figure out the distance it travels when considering speed, crosswind and distance traveled on X and Y axis. **

Figuring out how to implement gravity on an object using code can be confusing, but it's very pleasing once it works. Let's start with the basics. Gravity for us is Earth's pull on an object. The Earth affects the acceleration of an object which affects the velocity. Velocity is speed with direction. In our example of a falling ball you only need to worry about the Y axis for the most part.

**Let's setup a basic canvas** with a red ball displayed at center of screen 200 pixels down from top.

Next, **let's set the ball in motion.** We have a random y velocity created (between -15 and -5). We just need to add this to our ball.y to put the ball in motion. Let's create a **new method called ballGravity() and call it from the draw method.** We can use code to check some laws of physics. We can get the **distance traveled in each frame** by completing the triangle created by velocity on x-axis and y-axis. This is the Pythagorean theorem in practice. A squared + B squared = C squared OR in our example distance equals square root of vx * vx + vy * vy. When we run this it should simple be equal to the random vy that was generated in our init() method since there is no force acting on x-axis. We use the message variable to print this to screen

function ballGravity(){ ball.x += vx; ball.y += vy; distance = Math.sqrt(vx*vx + vy*vy); message = "frame: " + counter + " vy: " + vy + " distance: " + distance; }The

thus, in init we change vy to

var gravity = 0.5; //random value

this will drag ball down after it goes up for a brief time.

thus, you can

if (ball.x + ball.radius > canvas.width || ball.x - ball.radius < 0 || ball.y + ball.radius > canvas.height){// || // Re-positioning on the base ball.x = canvas.width / 2; ball.y = canvas.height - ball.radius; vy = (Math.random() * -20) - 5; }

This simulates a sort of bouncing of the ball.

But** to have a true bounce simulation we need to introduce a bounce variable and times the inverse of that number to our vy** instead of generating a new random vy variable in the if statement in the ballGravity method.

Thus, **add this to class variables **(below counter variable)

var bounce = 0.7;

And **add this to replace random vy in if statement in ballGravity method**

vy *= -bounce;

That's it.

Part 2 coming soon

Comments:

No comments posted

**Past Posts**

**Dropbox Public Folder Alternative**

Jun 4, 2017

**Getting Started with NodeJS**

May 1, 2017

**Scratch Intro: Racing Game**

Jan 15, 2017

**Five Best Educational Tools For Teachers**

Feb 3, 2017

**Coding Gravity**

Feb 22, 2017

**Drones in Eduction**

March 2, 2017

**Javascript Intro**

April 1, 2017

**iPhone Streaming Audio App**

April 15, 2017

**Installing MySQL**

May 15, 2017

Thank You!