teachers, students, everyone
Tools | Blog | Account | Learn
Login Status

Coding Gravity
Programming Gavity with Javascript and HTML Canvas
Feb 1, 2017

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.

Click Here

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 randomly generated vy is negative number to simulate someone throwing the ball in the air and we'll use a new gravity variable to act upon it.
thus, in init we change vy to

Add variable gravity under counter in the code;
var gravity = 0.5; //random value
Add vy += gravity; to ballGravity method
this will drag ball down after it goes up for a brief time. Once it hits the bottom of screen we want ball to bounce up.
thus, you can implement the following if statement to your ballGravity method
         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


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!