Bouncing ball physics
Insipred by http://asgaard.co.uk/misc/html5canvas.php
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'> </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'> </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,...