tnSuperman tanktn oParticles uExtrusion j3d sandy flExtrusion fuelyoursenses meshCam bufferSnake dMap2 dMap pv2 cursorFire opticks faceGame FPSnake pv preOpticks painty youtuber fractalFIngers 2dbals

January 30, 2011

Javascript physics!

Filed under: doodles,Games,Uncategorized — Tags: , , , , , — Brandel Zachernuk @ 3:12 pm

A few years ago my friends Bill and Aidan and I started mucking about with the new javascript canvas class, and this is what we came up with. While there are other more robust physics engines out there – even in Javascript – it’s good to know how straightforward it is to get some of that behaviour working. If for any reason you want to use this, please do!

Usage: Click and hold inside the grey square to create a ball. The longer you hold down the mouse, the bigger the ball. Click, drag around, and release a ball to ‘throw’ it. You can change gravity and the drag coefficients by changing the numbers in the boxes below. Gravity can be any number, negative, positive or zero. Drag coefficient is only going to make sense as a number between 0 and 1. Greater than 1 means that energy is added to the system and things get a little crazy!

Note: to see this you will need to be using Firefox, Chrome or Opera.

Click and drag inside this box to make a ball
drag and release to move and throw a ball.

Disclaimer: Given that this was such a casual collaboration, please excuse the messiness of the code. It was just the fastest way to get this kind of thing happening. If you want a more coherent mechanism for control, Box2DJS is the way to go.

(this is just so that a link to this post has a pretty picture to show!)


  1. Why not comment your code so others can learn from it?

    Comment by cube — June 3, 2011 @ 12:44 am

  2. I can do – though the degree of commenting generally depends on the purpose of the code. Most of the experiments I put online tend to be what some people call ‘spike code’ – messy, exploratory code that makes more sense to the programmer (and hopefully the computer) than it would to anyone else. It’s not the kind of code you’d share or contribute to a larger project. There’s a good post about what spike code is and what to do with on OdeToCode.

    Comment by Brandel Zachernuk — June 3, 2011 @ 7:46 am

  3. What I am trying to do is have the ball collide with whatever is placed in the canvas. Let’s say we did this inside the draw function: context.fillStyle = “rgb(200,0,0)”;context.fillRect (200, 200, 55, 50);context.fillStyle = “rgba(0, 0, 200, 0.5)”;context.fillRect (30, 30, 55, 50);

    How would I have the ball collide with any random shapes that would be placed inside the canvas?


    Comment by cube — June 4, 2011 @ 7:23 am

  4. by any random shape you mean something other than a circle? If so, it’s probably beyond the system I’ve built, which only covers interactions between circles. If you’re keen to stick to Javascript I strongly recommend box2dJS.. I’ve used the Flash and C# variants and they’re pretty good.

    Comment by Brandel Zachernuk — June 19, 2011 @ 3:14 pm

RSS feed for comments on this post. TrackBack URL

Sorry, the comment form is closed at this time.

Powered by WordPress