# trajectory.js

Created: 2012-03-25 17:03
Updated: 2017-06-14 19:21

# Trajectory.js

### Live Demo

#### Supported Browsers

The following browsers are supported (according to caniuse.com):

• Chrome (4+)
• Safari (5+)
• Opera (10.6+)
• Firefox (3.5+)
• Internet Explorer (10+)

### Explanation

This program is designed to compute the trajectories of projectiles and generate graphs inside your browser! I created it as a weekend project to help me cheat at archery. It actually functions as a practical tool and I’ve found that it matches both the real-world data and the results of my 40# English longbow on the range quite well. It is also suitable for modelling other sub-sonic projectiles, such as tennis balls and air rifle pellets, providing that you know its drag coefficient (e.g. 0.5 for a sphere).

### Instructions

To use the program, simply enter the projectile’s parameters and click ‘Plot Trajectory’. To generate a copy of your graph that can be saved, click ‘Generate PNG’. After the image pops up, you can save it by right-clicking it and selecting ‘Save As…’ (the exact phrase varies with different web browsers).

I’ve put the default values to those of a 3/8" steel ball-bearing, shot at an angle of 5 degrees with an initial velocity of 85 metres/second, as an example. The blue line represents the trajectory with air resistance; the red line the trajectory without air resistance, i.e. in a vacuum; and the purple line the projectile’s kinetic energy, expressed as a percentage of its initial (this might be useful for hunters).

## Graph Class

I actually wrote my own graph-drawing class for this project, mainly as a learning exercise to familiarise myself with the `<canvas>` element and its API. Unfortunately, I feel that the API still has a way to go. It lacks features that I would consider basic, such as the ability to measure the height of text (`measureText()` only reports the width) – which makes writing an adaptive layout engine slightly tricky!

#### How it Works

I may give a more detailed explanation, when I can find the time. But until then, the code in `/js/main.js` should, hopefully, be clear enough to see how it works.

##### Basic Usage

###### Instantiate a new Graph Object
```// Don’t forget to include graph.js

// Overide the default settings, to customise the Graph.
var settings = {
xAxis1: {  // Bottom axis
min: 0,
max: 10,
title: "n",
},

yAxis1: {  // Left axis
min: 0,
max: 100,
title: "n\u00B2",
},

// To hide an axis, set its value to null.
xAxis2: null,
yAxis2: null
};

var width = 500;
var height = 300;

var g = new Graph(width, height, settings);

// Draw the Graph, so that it is ready for plotting.
g.draw();```
###### Plot Data
```// Plotting an asymptotic curve as an example.
var data = [
[0, 0],
[1, 1],
[2, 4],
[3, 9],
[4, 16],
[5, 25],
[6, 36],
[7, 49],
[8, 64],
[9, 81],
[10, 100]
];

// Plot the curve, using a nice green colour.
g.plotData(data, Graph.colours.green);

// Finally, inset the Graph into the document, so that the user can see it.
g.appendTo(document.body);```

### Licence

All of the code is available under GNU GPL v3.0 so feel free to use and modify it as you wish!