Simple physics with HTML5/JavaScript canvas

 
If you can read this, your browser doesn't support the canvas element. Try Google Chrome
 

Usage

You can pick up the ball with the left mouse and 'throw' it, alternately you can drag the right mouse to apply a force vector to the ball.

Info

This is a basic example of what the HTML5 canvas element can do in tandem with Javascript using the example of a simple physics process. The ball's movement is modelled by calculations of forces acting upon it (i.e. gravity), and then using a process called Verlet integration to solve the resulting differential equations in real time, at a series of timesteps. Some very simple collision detection and response is included, but obstacles are represented as lines, not as shapes, so it is possible for the ball to pass through the obstacles if either it is travelling very fast or if your computer is rendering the scene slowly, because, like I said, it's very simple and for basic demostrative purposes only.

Brief high-level explanation of the source code

The code here uses an imperative/global style for directness. The place to begin is the main loop (which is a function called repeatedly by setInterval rather than an actual loop, this so in-between calls the browser can carry on as usual, i.e. we don't lock everything up). The main loop is called every 0.010 seconds. We refer to each call/iteration of the main-loop as a timestep of the simulation. The idea is to progress the simulation in real time, calculating the appropriate object positions for right now. The main loop has four sub-routines:

  1. Evaluate and resolve active forces (do_forces())
  2. Move the object according to its forces (move())
  3. Move the object according to collision detection (do_collision_detection())
  4. Update the display (draw())

As well as this, there are several event handlers, which deal with mouse input.

In 'real' usage you'd probably want to employ an OO approach for neatness/scalability. Ideally, each physics-enabled object should be represented by OO, and should contain properties like mass, forces, and the co-ordinate/velocity/acceleration vectors. It should contain methods like resolveForces() and move().

Secondly it is usually preferable to disable physics simulation on objects that are near-stationary. The numerical methods don't tend to 'do' stationary objects, which appear to judder a bit.

Source code

 1 
 2 
 3 
 4 
 5 
 6 
 7 
 8 
 9 
 10 
 11 
 12 
 13 
 14 
 15 
 16 
 17 
 18 
 19 
 20 
 21 
 22 
 23 
 24 
 25 
 26 
 27 
 28 
 29 
 30 
 31 
 32 
 33 
 34 
 35 
 36 
 37 
 38 
 39 
 40 
 41 
 42 
 43 
 44 
 45 
 46 
 47 
 48 
 49 
 50 
 51 
 52 
 53 
 54 
 55 
 56 
 57 
 58 
 59 
 60 
 61 
 62 
 63 
 64 
 65 
 66 
 67 
 68 
 69 
 70 
 71 
 72 
 73 
 74 
 75 
 76 
 77 
 78 
 79 
 80 
 81 
 82 
 83 
 84 
 85 
 86 
 87 
 88 
 89 
 90 
 91 
 92 
 93 
 94 
 95 
 96 
 97 
 98 
 99 
 100 
 101 
 102 
 103 
 104 
 105 
 106 
 107 
 108 
 109 
 110 
 111 
 112 
 113 
 114 
 115 
 116 
 117 
 118 
 119 
 120 
 121 
 122 
 123 
 124 
 125 
 126 
 127 
 128 
 129 
 130 
 131 
 132 
 133 
 134 
 135 
 136 
 137 
 138 
 139 
 140 
 141 
 142 
 143 
 144 
 145 
 146 
 147 
 148 
 149 
 150 
 151 
 152 
 153 
 154 
 155 
 156 
 157 
 158 
 159 
 160 
 161 
 162 
 163 
 164 
 165 
 166 
 167 
 168 
 169 
 170 
 171 
 172 
 173 
 174 
 175 
 176 
 177 
 178 
 179 
 180 
 181 
 182 
 183 
 184 
 185 
 186 
 187 
 188 
 189 
 190 
 191 
 192 
 193 
 194 
 195 
 196 
 197 
 198 
 199 
 200 
 201 
 202 
 203 
 204 
 205 
 206 
 207 
 208 
 209 
 210 
 211 
 212 
 213 
 214 
 215 
 216 
 217 
 218 
 219 
 220 
 221 
 222 
 223 
 224 
 225 
 226 
 227 
 228 
 229 
 230 
 231 
 232 
 233 
 234 
 235 
 236 
 237 
 238 
 239 
 240 
 241 
 242 
 243 
 244 
 245 
 246 
 247 
 248 
 249 
 250 
 251 
 252 
 253 
 254 
 255 
 256 
 257 
 258 
 259 
 260 
 261 
 262 
 263 
 264 
 265 
 266 
 267 
 268 
 269 
 270 
 271 
 272 
 273 
 274 
 275 
 276 
 277 
 278 
 279 
 280 
 281 
 282 
 283 
 284 
 285 
 286 
 287 
 288 
 289 
 290 
 291 
 292 
 293 
 294 
 295 
 296 
 297 
 298 
 299 
 300 
 301 
 302 
 303 
 304 
 305 
 306 
 307 
 308 
 309 
 310 
 311 
 312 
 313 
 314 
 315 
 316 
 317 
 318 
 319 
 320 
 321 
 322 
 323 
 324 
 325 
 326 
 327 
 328 
 329 
 330 
 331 
 332 
 333 
 334 
 335 
 336 
 337 
 338 
 339 
 340 
 341 
 342 
 343 
 344 
 345 
 346 
 347 
 348 
 349 
 350 
 351 
 352 
 353 
 354 
 355 
 356 
 357 
 358 
 359 
 360 
 361 
 362 
 363 
 364 
 365 
 366 
 367 
 368 
 369 
 370 
 371 
 372 
 373 
 374 
 375 
 376 
 377 
 378 
 379 
 380 
 381 
 382 
 383 
 384 
 385 
 386 
 387 
 388 
 389 
 390 
 391 
 392 
 393 
 394 
 395 
 396 
 397 
 398 
 399 
 400 
 401 
 402 
 403 
 404 
 405 
 406 
 407 
 408 
 409 
 410 
 411 
 412 
 413 
 414 
 415 
 416 
 417 
 418 
 419 
 420 
 421 
 422 
 423 
 424 
 425 
 426 
 427 
 428 
 429 
 430 
 431 
 432 
 433 
 434 
 435 
 436 
 437 
 438 
 439 
 440 
 441 
 442 
 443 
 444 
 445 
 446 
 447 
 448 
 449 
 450 
 451 
 452 
 453 
 454 
 455 
 456 
 457 
 458 
 459 
 460 
 461 
 462 
 463 
 464 
 465 
 466 
 467 
 468 
 469 
 470 
 471 
 472 
 473 
 474 
 475 
 476 
 477 
 478 
 479 
 480 
 481 
 482 
 483 
 484 
 485 
 486 
 487 
 488 
 489 
 490 
 491 
 492 
 493 
 494 
 495 
 496 
 497 
 498 
 499 
 500 
 501 
 502 
 503 
 504 
 505 
 506 
 507 
 508 
 509 
 510 
 511 
 512 
 513 
 514 
 515 
 516 
 517 
 518 
 519 
 520 
 521 
 522 
 523 
 524 
 525 
 526 
 527 
 528 
 529 
 530 
 531 
 532 
 533 
 534 
 535 
 536 
 537 
 538 
 539 
 540 
 541 
 542 
 543 
 544 
 545 
 546 
 547 
 548 
 549 
 550 
 551 
 552 
 553 
 554 
 555 
 556 
 557 
 558 
 559 
 560 
 561 
 562 
 563 
<!DOCTYPE HTML>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
    <title>JavaScript Canvas/Bouncing Ball</title>
    <script src="/js/jquery-1.4.2.min.js"></script>

    <script src="/code/luminous/client/luminous.js"></script>

    <link rel='stylesheet' href='/style/style.css'>
    <link rel='stylesheet' href='/code/luminous/style/luminous.css'>
    <link rel='stylesheet' href='/code/luminous/style/luminous_light.css'>

  </head>

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

<div class='cms-ad w-468'>
  <script type="text/javascript"><!--
  google_ad_client = "ca-pub-0570916025388963";
  /* Site CMS */
  google_ad_slot = "1955348831";
  google_ad_width = 468;
  google_ad_height = 60;
  //-->
  </script>
  <script type="text/javascript"
  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
  </script>
</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>

<script type='text/javascript'>

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

var timestep = 0.005;
// 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 = [0, 0]; // seconds, frames


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

// position, velocity and acceleration vectors
var coords = [0, 0];
var last_coords = [0, 0];
var velocity = [0, 0];
var accel = [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 = [
  [0, gravity*mass, false],
];

// set initial position
coords = [width/2, radius];



/////////////
// User response related things
var drag = false;
var drag_coords = [0, 0];
var throw_ = false;
// throw/kick vector
var throw_coords = [0, 0];


var objects = [];



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

  objects.push(
  {
    points:
    [
      [0, height/2], [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, 0, width, height);
  context.save();
  context.fillStyle = "rgb(0, 0, 255)";

  // this draws the ball
  context.beginPath();
  context.arc(coords[0], coords[1], radius, 0, Math.PI*2, true);
  context.closePath();
  context.fill();
  context.restore();

  for (var i=0; i<objects.length; i++)
  {
    context.save();

    var o = objects[i];
    for (var j=0; j<o.points.length-1; j++)
    {
      var p = o['points'][j];
      var p1 = o['points'][j+1];
      context.moveTo( p[0], p[1] );
      context.lineTo(p1[0], p1[1]);
      context.stroke();

    }
    context.restore();
  }

  // draw the throw/force vector
  if (throw_)
  {
    context.save();
    context.moveTo(coords[0], coords[1]);
    context.lineTo(throw_coords[0], throw_coords[1]);
    context.stroke();
    context.restore();
  }
}



// Moves the ball for the given timestep with the overall force given as
// resolved_force.
// This is a differential equation which we evaluate using Velocity-Verlet
// integration,
// http://en.wikipedia.org/wiki/Verlet_integration#Velocity_Verlet
function move(dt, resolved_force)
{
  var coords_new = [coords[0] + velocity[0]*dt + 0.5*accel[0]*dt*dt,
            coords[1] + velocity[1]*dt + 0.5*accel[1]*dt*dt
            ];
  // f = ma
  var accel_new = [ resolved_force[0]/(mass*dt),
    resolved_force[1]/(mass*dt)];


  coords = coords_new;

  velocity = [velocity[0] + 0.5* (accel[0] + accel_new[0])*dt,
    velocity[1] + 0.5* (accel[1] + accel_new[1])*dt];

  accel = accel_new;

}

function sgn(x)
{
  return x < 0 ? -1 : 1;
}

// very simple collision detection and response for rebounding off the walls
// and applying some damping according to bounce_factor
function do_collision_detection()
{
  if (coords[0] <= radius)
  {
    coords[0] = radius;
    velocity[0] *= -bounce_factor;
    velocity[1] *= bounce_factor;
  }

  if (coords[0] >= width-radius)
  {
    coords[0] = width-radius;
    velocity[0] *= -bounce_factor;
    velocity[1] *= bounce_factor;
  }
  if (coords[1] <= radius)
  {
    coords[1] = radius;
    velocity[0] *= bounce_factor;
    velocity[1] *= -bounce_factor;
  }
  if (coords[1] > height-radius)
  {
    coords[1] = height-radius;
    velocity[0] *= bounce_factor;
    velocity[1]*=-bounce_factor;
  }




  // very primitive collision detection based on line intersection
  for(var i=0; i<objects.length; i++)
  {
    var o = objects[i];
    for (var j=0; j<o.points.length-1; j++)
    {
      var p = o.points[j];
      var p1 = o.points[j+1];
      var x1, x2, y1, y2;

      // http://mathworld.wolfram.com/Circle-LineIntersection.html

      // we normalise the lines so the circle is at 0,0
      x1 = p[0] - coords[0];
      x2 = p1[0] - coords[0];
      y1 = p[1] - coords[1];
      y2 = p1[1] - coords[1];
      var rsq = radius*radius;
      var d_x = x2 - x1;
      var d_y = y2 - y1;
      var d_r_sq = d_x*d_x + d_y*d_y;
      var D = x1 * y2 - x2 * y1;
      var Dsq = D*D;
      var determinant = rsq * d_r_sq - Dsq;

      // Check if there are solutions (i.e. an intersection)
      if (determinant >= 0)
      {

        // in reality, if we get to here there only MIGHT be an intersection.
        // The line intersection check above assumes the line stretches out
        // infinitely, so if this is not the case then we'd have to solve a
        // pair of quadratics for x and y (see mathworld link) and check
        // whether there exist solutions x and y such that x and y are between
        // the start/end point of our line.
        // this is omitted for simplicity and lines have been chosen such that
        // this is not an issue.

        // if there is an intersection we roll back the coordinates
        coords[0] = last_coords[0];
        coords[1] = last_coords[1];

        // and rebound the ball via its velocity.

        var vx = velocity[0];
        var vy = velocity[1];
        var m = Math.sqrt(vx*vx + vy*vy);

        var veloc_normalised = [vx/m, vy/m];
        var line_normalised = [d_x/Math.sqrt(d_r_sq), d_y/Math.sqrt(d_r_sq)];

        // Angle of impact between velocity and line
        var angle = Math.atan2(line_normalised[1],
                               line_normalised[0])
                    - Math.atan2(veloc_normalised[1],
                                veloc_normalised[0]);

        // Angle to reflect/bounce
        var reflection = Math.PI + angle;
        // sin^2(x) + cos^2(x) = 1 so this is a normal vector, which we then
        // scale up by the velocity's original
        // magnititude and then scale down according to the
        // bounce_factor/damping.
        velocity[0] = Math.sin(reflection) * m * bounce_factor;
        velocity[1] = Math.cos(reflection) * m * bounce_factor;
      }
    }
  }
}


// evaluates the forces array, removes any 'dead' forces, and
// returns the resolved force for this timestep.
function do_forces(dt)
{
  var resolved = [0,0];
  var new_forces = [];
  for (var i=0; i<forces.length; i++)
  {
    var f = forces[i];

    if (f[2] !== false)
      f[2] -= dt;

    resolved[0] += f[0];
    resolved[1] += f[1];
    if (f[2] < 0)
      continue;
    new_forces.push(f);
  }
  forces = new_forces;
  return resolved;
}

// Main loop.
function main()
{
  // calculate time elpased since last run
  var t1 = new Date().getTime();
  var dt = t1-t0;
  dt /= 1000.0;
  if (dt < timestep)
    dt = timestep;

  frame_counter[0] += dt;
  frame_counter[1]++;

  if (frame_counter[0] > 1.0)
  {
    frame_counter[0] = 0;
    $('#fps').html(frame_counter[1] + " frames per second");
    frame_counter[1] = 0;
  }

  t0 = t1;

  resolved_force = do_forces(dt);
  move(dt, resolved_force);
  do_collision_detection();
  last_coords[0] = coords[0];
  last_coords[1] = coords[1];

  draw();

}

// initiates the main loop.
function go()
{

  t0 = new Date().getTime();
  timer = setInterval(main, timestep*1000);
}

function stop()
{
  clearInterval(timer);
  timer = null;
  accel = [0, 0];
  velocity = [0, 0];
}


////////////////////////////
/// UI handlers follow.


// responds to mouse dragging
function startdragging(e)
{
  // mouse input uses layerX in Firefox/chrome and offsetX in Opera.
  var x = e.layerX !== undefined? e.layerX : e.offsetX;
  var y = e.layerY !== undefined? e.layerY : e.offsetY;

  if (e.which == 1)
  {
    if (x >= coords[0]-radius && x <= coords[0] + radius
      &&
      y >= coords[1]-radius && y <= coords[1] + radius
      )
    {
      drag = true;
      drag_coords = [x, y];
    }

  }
  else if (e.which == 3)
  {
    throw_ = true;
    throw_coords = [x, y];
  }

  if (drag || throw_)
    stop();

  return false;
}

$('#example').mousedown(startdragging);
$('#example').click(function(e) { return false });

// Disable rightclick so that we can use the right button as input on the
// canvas
$('#example').bind("contextmenu", function(e) { return false });

// called every time the mouse is moved, deals with dragging of the ball
// and throw vectors
$('#example').mousemove( function (e) {

  var x = e.layerX !== undefined? e.layerX : e.offsetX;
  var y = e.layerY !== undefined? e.layerY : e.offsetY;


//   $('#coord_out').html( x + ", " + y);
  if (!drag && !throw_)
    return;

  if (throw_)
    throw_coords = [x, y];

  else if (drag)
  {
    coords = [x, y];

    var dx, dy;
    dx = x - drag_coords[0];
    dy = y - drag_coords[1];
    var dt = timestep;
    // scale this down a bit or it seems like the user has super-strength
    velocity = [dx/dt*0.2, dy/dt * 0.2];
    drag_coords = [x, y];

  }

  draw();
  return false;
});

// Releases the drag event.
$('#example').mouseup( function (e) {

  if (!drag && !throw_)
    return;

  if (throw_)
  {
    var x = e.layerX !== undefined? e.layerX : e.offsetX;
    var y = e.layerY !== undefined? e.layerY : e.offsetY;

    // give it a bit more oomph.
    var scale = 10;
    var throw_vector_x = (coords[0]-x)*scale;
    var throw_vector_y = (coords[1]-y)*scale;
    forces.push( [throw_vector_x, throw_vector_y, 0.10] );
    throw_ = false;
    drag = false;
  }
  else if (drag)
    drag = false;

  go();

  return false;
});





function add_objects_handler()
{
  add_objects();
  draw();

  $('#addobjs').val('Remove obstacles').click(remove_objects_handler);

}

function remove_objects_handler()
{
  objects = [];
  draw();
  $('#addobjs').val('Add obstacles').click(add_objects_handler);

}

$('#addobjs').click(add_objects_handler);

draw();

</script>


<h2>Usage</h2>
You can pick up the ball with the left mouse and 'throw' it, alternately you can drag the right mouse to apply a force
vector to the ball.

<h2>Info</h2>
<p>
This is a basic example of what the HTML5 canvas element can do in tandem with Javascript using the example of a simple
physics process. The ball's movement is modelled by calculations of forces acting upon it (i.e. gravity), and then using
a process called Verlet integration to solve the resulting differential equations in real time, at a series of
timesteps. Some very simple collision detection and response is included, but obstacles are represented as lines, not
as shapes, so it is possible for the ball to pass through the obstacles if either it is travelling very fast or if your
computer is rendering the scene slowly, because, like I said, it's very simple and for basic demostrative purposes only.

<h3>Brief high-level explanation of the source code</h3>
<p> The code here uses an imperative/global style for directness.  The
place to begin is the main loop (which is a function called repeatedly by setInterval rather than an actual loop, this
so in-between calls the browser can carry on as usual, i.e. we don't lock everything up). The main loop is called every
0.010 seconds. We refer to each call/iteration of the main-loop as a timestep of the simulation. The idea is to
progress the simulation in real time, calculating the appropriate object positions for <em>right now</em>. The main loop
has four sub-routines:

<ol>
<li> Evaluate and resolve active forces (do_forces())</li>
<li> Move the object according to its forces (move()) </li>
<li> Move the object according to collision detection (do_collision_detection()) </li>
<li> Update the display (draw()) </li>
</ol>

<p> As well as this, there are several event handlers, which deal with mouse input.

<p> In 'real' usage you'd probably want to employ an OO approach for neatness/scalability. Ideally, each physics-enabled object
should be represented by OO, and should contain properties like mass, forces, and the co-ordinate/velocity/acceleration
vectors. It should contain methods like resolveForces() and move().

<p>Secondly it is usually preferable to disable physics simulation on objects that are near-stationary. The numerical
methods don't tend to 'do' stationary objects, which appear to judder a bit.


<h2>Source code</h2>
$SOURCECODE

</div>
<script src='/cookie-consent.js'></script>
<script> cookieConsent({link: '/cookies.html'}); </script>
</body>
</html>