Bouncing ball physics

Insipred by http://asgaard.co.uk/misc/html5canvas.php

by Tobias Beuving

HTML

<div class='page' style='margin-top:3em; margin-bottom:3em'>
<h1> Simple physics with HTML5/JavaScript canvas </h1>
<div class='cms-ad w-468'>

    
    </div>
<div style='text-align:center'>
  <!-- We have to set the canvas to relative for the layerx/y mouse event 
    properties to work properly -->
  <div id='fps' style='text-align:right'>&nbsp;</div>
  
  <canvas id="example" width="700" height="500" 
    style='border:1px solid black; position:relative;'>
  If you can read this, your browser doesn't support the canvas element. Try
  <a href="http://www.google.com/chrome" target=_blank>Google Chrome</a>  </canvas>
</div>

<input type=button id='addobjs' value='Add obstacles'>
<div id='coord_out'>&nbsp;</div>

JavaScript

function Point(xIn,yIn) {
    this.x=xIn;
    this.y=yIn;
}

//Forces acting on the ball as array of:
//[x, y, time]  if time==false, the force is always present.
//time is a 'time to live', in seconds.

function Force(xIn, yIn, ttlIn) {
    this.x = xIn;
    
    this.y = yIn;
    
    this.ttl = ttlIn;
}


//////////////////////////////
// Simulation variables

var timestep = 0.001;
// Absolute time at last timestep
var t0 = 0;

var timer = null; // setInterval return handle.
var width = $('#example').width(); /// width of canvas 
var height = $('#example').height(); // height of canvas
var frame_counter = new Point(0,0); // seconds, frames


///////////////////////////////
// Physical variables

// position, velocity and acceleration vectors
var coords = new Point(0,0);
var last_coords = new Point(0,0);
var velocity = new Point(0,0);
var accel = new Point(0,0);

// Damping due to impacts
var bounce_factor = 0.8;

var mass = 10;
var gravity = 10;
var radius = 15;

// Forces acting on the ball as array of:
// [x, y, time]  if time==false, the force is always present.
// time is a 'time to live', in seconds.
var forces = [];
forces.push(new Force(0, gravity*mass, false)); // gravity

// set initial position
coords = new Point(width/2, radius);  



/////////////
// User response related things
var drag = false;
var drag_coords = new Point(0,0);
var throw_ = true;
// throw/kick vector
var throw_coords = new Point(0,0);


var objects = [];
  


function add_objects()
{
  objects = [];
  objects.push(
 { 
    points:
    [       
      new Point(width, 0), 
      new Point(width-width/4, height)
    ]
  });
  
  objects.push(
  { 
    points:
    [       
      new Point(0, height/2), 
      new Point(width/2, height)
    ]
  }  
  );
  
  objects.push
  
}


function get_context()
{
  var example = $('#example')[0];
  return example.getContext('2d');
}

// Draws the ball.
function draw()
{
  var context = get_context();
  // clear the canvas
  context.clearRect(0,...