Modelling a Trajectory

Today we’re going to learn how to simulate throwing a ball using a computer. This is not just a cartoon, we’ll use the compute animation to model the path of the ball in precise, mathematical detail.

We’ll be learning both physics and some programming. Let’s get started!

Newton’s Laws

Newton modeled the universe with three laws that can be translated into mathematics.

Newton’s First Law says:

“An object at rest stays at rest or a object in motion stays in motion along a straight line, unless acted on by a force.”

For us this means that forces cause changes in motion. When we roll a ball on the floor, it slows down because of the force of friction. When we throw a ball in the air, it comes back down to Earth because the force of gravity pulls it down.

Newton’s Second Law says:

“A force accelerates an object in proportion to its mass.”

Mathematically we take this to mean that

“Force = mass x acceleration”

Acceleration just means the rate at which motion changes. For example. If a car accelerates from 0 to 60 miles per hour in 10 seconds, we say the average acceleration of that car is 6 mph per second.

Exercise 1: Explain why going from 0 to 60 means an acceleration of 6 mph per second. Then, convert those units into feet per second per second. (Hint: 5280 feet = 1 mile. 1 hour = 3600 seconds).

Newton’s Third Law says:

“For every action there is an equal and opposite reaction.”

Newton’s third Law is tricky. It forces us to think about forces as interactions between two objects. For example: there is a force of gravity that pulls the Earth towards the Sun. This is why the Earth orbits the sun. What Newton’s third law tells us is that there is also a gravitational force on the Sun from the Earth! The Earth doesn’t affect the Sun much because of Newton’s second law.

Exercise 2: Look up the masses of the Earth and the SUn. Compute the ratio Earth’s mass to the Sun’s mass and argue why the Earth moves around the sun. What do you think happens when the masses of two planets are nearly the same?

Another way to think of Newton’s third Law involves collisions. If you hold a bowling ball above the ground and let go, gravity pulls it to the ground. But the ground stops it! So the ground also exerts a force on the ball which causes it to stop. It decelerates.

Newton’s third law would state that the ball then also exerts a force on the ground. This is true, but harder to see. One way to think about that is if your foot was accidentally standing where the ball fell. Your foot would certainly hurt after being smashed by the bowling ball!

Throwing a Ball with JavaScript

Newton’s Laws translate into mathematical equations that we use to predict what happens in the real world. While we don’t expect you to be familiar with the algebra involved, we will explain each equation in terms of elementary arithmetic.

Programming involves lots of equations.

For us there will be a few important numbers.

1. $v$: The initial speed at which you throw the ball

2. $\theta$: the angle above the ground at which you throw the ball

3. $y(0)$: the initial height of your hand when the ball is thrown

4. $x(0)$: the initial location of your hand when the ball is thrown.

5. $g$: the strength of the gravitational force.

The motion of the ball can be described by two equations that we’ll see in our code.

\begin{equation}\label{x}x(t) = x(0) + v\cos\theta t.\end{equation}

\begin{equation}\label{y}y(t) = y(0) + v\sin\theta t - \frac{1}{2}gt^{2}.\end{equation}

The p5.js Code

To run this simulation locally, copy and paste the code below into the p5.js editor.

// this is a COMMENT. It's notes we put in the code.

let bg;
let pageNumber = 1;

// ------ THESE ARE THE NUMBERS TO CHANGE ----------- //
let x0 = 300; // inital x-position
let y0 = 300; // inital y-position
let v = -1; // inital speed
let theta = 0.5; // angle thrown
let g = 1; // gravitational parameter
let maximumTime = 100; // when we stop the clock.
// -------------------------------------------------//

// these are empty arrays to be filled by the program
let x = [];
let y = [];

function setup() {
// first we set up the paths.
// we do this with a LOOP that runs over values of t (time)

for(t = 0 ; t< maximumTime ; t++) {
x[t] = x0 + v*cos(theta)*t; // update the x-position
y[t] = 500 - (y0 + v*sin(theta)*t - 0.5*g*t*t); //update the y-position
// NOTE: for some reason the y direction is backwards on the screen.
// So we actually write "500 - y(t)" for y(t).
}

createCanvas(500,288);
frameRate(520);
}

function draw() {
background(220);
pageNumber += 1
// in this loop, we draw all past positions as small circles
for( j = 0 ; j < pageNumber ; j++) {
ellipse(x[j],y[j],10);
fill(400); }

// finally, draw the current position as a bigger circle.
ellipse(x[pageNumber],y[pageNumber],25);
}