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


Live Demo

Supported Browsers

The following browsers are supported (according to

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


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).


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.
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.

// Finally, inset the Graph into the document, so that the user can see it.


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

© 2013 Sam Christy

Cookies help us deliver our services. By using our services, you agree to our use of cookies Learn more