The JavaScript blog.


html5 webgl physics


Posted on .

The Matter.js Wrecking Ball demo.

Matter.js (GitHub: liabru / matter-js, License: MIT) by Liam Brummitt is a stable and flexible rigid body physics engine for browsers. The author describes it as an alpha project that came about as a result of learning game programming.

If you're interested in reading more about physics for game programming, Liam has collected some useful resources in Game physics for beginners.

Matter.js uses time-corrected Verlet integration, adaptive grid broad-phase detection, AABB mid-phase detection, SAT narrow-phase detection, and other algorithms for managing collisions and physical simulation. More well-known engines like Box2D support these features, but if you take a look at the some of the classes Liam has written then you'll see how clean and readable his version is.

I've been looking at the source to see how to use it, and the API seems friendly to me:

var Bodies = Matter.Bodies;  
var Engine = Matter.Engine;  
var engine = Engine.create(container, options);  
var World = Matter.World;

World.addBody(engine.world, Bodies.rectangle(300, 180, 700, 20, { isStatic: true, angle: Math.PI * 0.06 }));  
World.addBody(enigne.world, Bodies.rectangle(300, 70, 40, 40, { friction: 0.001 }));  

The demo is cool, so try it out if you want to experiment!


libraries graphics node modules physics fastfood

pde-engine, colormap, Dimsum

Posted on .

pde-engine and colormap

Wave example running on benpostlethwaite.ca

Ben Postlethwaite sent in two libraries this week. The first, pde-engine (GitHub: bpostlethwaite / pde-engine, License: MIT, npm: pde-engine), can be used to create "nice looking physically realistic effects in websites or games".

Ben's site, benpostlethwaite.ca has live examples for the "wave" and "heat" equations, and the project takes advantage of Typed Arrays to improve performance. Ben suggests using browserify to generate a browser-friendly version of code using pde-engine.

The colours in Ben's examples come from his second project, colormap (GitHub: bpostlethwaite / colormap, License: MIT, npm: colormap). This project generates color values based on Matlab's plot colours, and apparently works well with D3.js.

Both projects come with example code and documentation in the readme files.


I don't mind a bit of dim sum now and again, particularly those steamed buns with custard fillings. My computer can't yet 3D print Chinese dumplings though, so instead I recommend Dimsum (GitHub: ninjascribble / dimsum, License: MIT, npm: dimsum) by Scott Grogan. It generates lorem ipsum text, and can be used with Node or browsers.

Dimsum includes two flavours: latin and jabberwocky. New flavours can also be added, so you could dump in some generic marketing text to get a more accurate mockup going.

Scott has thoughtfully included Mocha tests as well.


libraries webgl physics SCXML

Physijs, SCION, mmd, Sorting

Posted on .

Physijs Tutorial


Jerome Etienne has written some introductory tutorials on physics and WebGL. In 3D Physics With Three.js and Physijs, he discusses using Physijs with his tQuery project.

The tutorial includes creating a world with lighting, textures, object spawning, and using collision events.


SCION (License: Apache 2, npm: scion) by Jacob Beard is an implementation of State Chart XML (SCXML).

SCXML provides a declarative markup for Statecharts, a powerful modelling language for developing complex, timed, reactive, state-based systems, and can offer elegant solutions to many problems faced in development of JavaScript-based applications across various domains.

The project's documentation demonstrates how to use SCXML to implement drag and drop in browsers using XML. SCION can load this XML with scion.urlToModel, then interpret it and connect the relevant event listeners in an asynchronous callback. The project also works with Rhino 1.7R3.


mmd by Alex Lawrence is a small patch to enable AMD modules to function when an AMD implementation isn't available (or perhaps desired). When the author sent us this project he lamented the fact it's 143 characters long -- three characters over a tweet's limit.

Can anyone make it shorter?

Sorting - We're Doing It Wrong

Rodney Rehm has written a detailed guide to sorting in JavaScript: Sorting - We're Doing It Wrong. He covers sorting different types, sorting strings, sorting DOM elements, boosting jQuery's performance, and more besides.

The post has some interesting comments about the finer points raised in the article, and Rodney has included some benchmarks on jsPerf.