diff --git a/.gitignore b/.gitignore
index cbb5b49..1b9e401 100644
--- a/.gitignore
+++ b/.gitignore
@@ -7,7 +7,6 @@ RELEASE.md
 build/matter-dev.js
 build/matter-dev.min.js
 demo/js/lib/matter-dev.js
-demo/js/Examples.js
 demo/js/Examples.min.js
 examples/build
 test/browser/diffs
diff --git a/demo/index.html b/demo/index.html
index b6898cf..17d9eb3 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -16,6 +16,9 @@
     <script type="text/javascript" src="./lib/decomp.js"></script>
     <script type="text/javascript" src="./lib/pathseg.js"></script>
 
+    <!-- Examples -->
+    <script src="./js/Examples.js"></script>
+
     <!-- Matter -->
     <script src="../build/matter.js"></script>
     
@@ -28,51 +31,6 @@
     <!-- Plugins -->
     <script src="./lib/matter-wrap.js"></script>
     
-    <!-- Examples -->
-    <script src="../examples/airFriction.js"></script>
-    <script src="../examples/avalanche.js"></script>
-    <script src="../examples/ballPool.js"></script>
-    <script src="../examples/bridge.js"></script>
-    <script src="../examples/broadphase.js"></script>
-    <script src="../examples/car.js"></script>
-    <script src="../examples/catapult.js"></script>
-    <script src="../examples/chains.js"></script>
-    <script src="../examples/circleStack.js"></script>
-    <script src="../examples/cloth.js"></script>
-    <script src="../examples/collisionFiltering.js"></script>
-    <script src="../examples/compositeManipulation.js"></script>
-    <script src="../examples/compound.js"></script>
-    <script src="../examples/compoundStack.js"></script>
-    <script src="../examples/concave.js"></script>
-    <script src="../examples/constraints.js"></script>
-    <script src="../examples/doublePendulum.js"></script>
-    <script src="../examples/events.js"></script>
-    <script src="../examples/friction.js"></script>
-    <script src="../examples/gravity.js"></script>
-    <script src="../examples/gyro.js"></script>
-    <script src="../examples/manipulation.js"></script>
-    <script src="../examples/mixed.js"></script>
-    <script src="../examples/newtonsCradle.js"></script>
-    <script src="../examples/ragdoll.js"></script>
-    <script src="../examples/pyramid.js"></script>
-    <script src="../examples/raycasting.js"></script>
-    <script src="../examples/restitution.js"></script>
-    <script src="../examples/rounded.js"></script>
-    <script src="../examples/sensors.js"></script>
-    <script src="../examples/sleeping.js"></script>
-    <script src="../examples/slingshot.js"></script>
-    <script src="../examples/softBody.js"></script>
-    <script src="../examples/sprites.js"></script>
-    <script src="../examples/stack.js"></script>
-    <script src="../examples/staticFriction.js"></script>
-    <script src="../examples/stress.js"></script>
-    <script src="../examples/stress2.js"></script>
-    <script src="../examples/svg.js"></script>
-    <script src="../examples/terrain.js"></script>
-    <script src="../examples/timescale.js"></script>
-    <script src="../examples/views.js"></script>
-    <script src="../examples/wreckingBall.js"></script>
-    
     <style type="text/css">
       * {
         box-sizing: border-box;
diff --git a/demo/js/Examples.js b/demo/js/Examples.js
new file mode 100644
index 0000000..150579c
--- /dev/null
+++ b/demo/js/Examples.js
@@ -0,0 +1,5705 @@
+/*!
+ * matter-js-examples 0.14.2 by @liabru 2020-12-05
+ * http://brm.io/matter-js/
+ * License MIT
+ * 
+ * The MIT License (MIT)
+ * 
+ * Copyright (c) Liam Brummitt and contributors.
+ * 
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ * 
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+(function webpackUniversalModuleDefinition(root, factory) {
+	if(typeof exports === 'object' && typeof module === 'object')
+		module.exports = factory();
+	else if(typeof define === 'function' && define.amd)
+		define("Example", [], factory);
+	else if(typeof exports === 'object')
+		exports["Example"] = factory();
+	else
+		root["Example"] = factory();
+})(this, function() {
+return /******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+/******/
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId]) {
+/******/ 			return installedModules[moduleId].exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			i: moduleId,
+/******/ 			l: false,
+/******/ 			exports: {}
+/******/ 		};
+/******/
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+/******/
+/******/ 		// Flag the module as loaded
+/******/ 		module.l = true;
+/******/
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/
+/******/
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+/******/
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+/******/
+/******/ 	// define getter function for harmony exports
+/******/ 	__webpack_require__.d = function(exports, name, getter) {
+/******/ 		if(!__webpack_require__.o(exports, name)) {
+/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
+/******/ 		}
+/******/ 	};
+/******/
+/******/ 	// define __esModule on exports
+/******/ 	__webpack_require__.r = function(exports) {
+/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 		}
+/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 	};
+/******/
+/******/ 	// create a fake namespace object
+/******/ 	// mode & 1: value is a module id, require it
+/******/ 	// mode & 2: merge all properties of value into the ns
+/******/ 	// mode & 4: return value when already ns object
+/******/ 	// mode & 8|1: behave like require
+/******/ 	__webpack_require__.t = function(value, mode) {
+/******/ 		if(mode & 1) value = __webpack_require__(value);
+/******/ 		if(mode & 8) return value;
+/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
+/******/ 		var ns = Object.create(null);
+/******/ 		__webpack_require__.r(ns);
+/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
+/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
+/******/ 		return ns;
+/******/ 	};
+/******/
+/******/ 	// getDefaultExport function for compatibility with non-harmony modules
+/******/ 	__webpack_require__.n = function(module) {
+/******/ 		var getter = module && module.__esModule ?
+/******/ 			function getDefault() { return module['default']; } :
+/******/ 			function getModuleExports() { return module; };
+/******/ 		__webpack_require__.d(getter, 'a', getter);
+/******/ 		return getter;
+/******/ 	};
+/******/
+/******/ 	// Object.prototype.hasOwnProperty.call
+/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
+/******/
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+/******/
+/******/
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(__webpack_require__.s = 0);
+/******/ })
+/************************************************************************/
+/******/ ([
+/* 0 */
+/***/ (function(module, exports, __webpack_require__) {
+
+module.exports = {
+    airFriction: __webpack_require__(1),
+    avalanche: __webpack_require__(2),
+    ballPool: __webpack_require__(3),
+    bridge: __webpack_require__(4),
+    broadphase: __webpack_require__(5),
+    car: __webpack_require__(6),
+    catapult: __webpack_require__(7),
+    chains: __webpack_require__(8),
+    circleStack: __webpack_require__(9),
+    cloth: __webpack_require__(10),
+    collisionFiltering: __webpack_require__(11),
+    compositeManipulation: __webpack_require__(12),
+    compound: __webpack_require__(13),
+    compoundStack: __webpack_require__(14),
+    concave: __webpack_require__(15),
+    constraints: __webpack_require__(16),
+    doublePendulum: __webpack_require__(17),
+    events: __webpack_require__(18),
+    friction: __webpack_require__(19),
+    gravity: __webpack_require__(20),
+    gyro: __webpack_require__(21),
+    manipulation: __webpack_require__(22),
+    mixed: __webpack_require__(23),
+    newtonsCradle: __webpack_require__(24),
+    ragdoll: __webpack_require__(25),
+    pyramid: __webpack_require__(26),
+    raycasting: __webpack_require__(27),
+    restitution: __webpack_require__(28),
+    rounded: __webpack_require__(29),
+    sensors: __webpack_require__(30),
+    sleeping: __webpack_require__(31),
+    slingshot: __webpack_require__(32),
+    softBody: __webpack_require__(33),
+    sprites: __webpack_require__(34),
+    stack: __webpack_require__(35),
+    staticFriction: __webpack_require__(36),
+    stress: __webpack_require__(37),
+    stress2: __webpack_require__(38),
+    svg: __webpack_require__(39),
+    terrain: __webpack_require__(40),
+    timescale: __webpack_require__(41),
+    views: __webpack_require__(42),
+    wreckingBall: __webpack_require__(43)
+};
+
+/***/ }),
+/* 1 */
+/***/ (function(module, exports, __webpack_require__) {
+
+var Example = Example || {};
+
+Example.airFriction = function() {
+    var Engine = Matter.Engine,
+        Render = Matter.Render,
+        Runner = Matter.Runner,
+        MouseConstraint = Matter.MouseConstraint,
+        Mouse = Matter.Mouse,
+        World = Matter.World,
+        Bodies = Matter.Bodies;
+
+    // create engine
+    var engine = Engine.create(),
+        world = engine.world;
+
+    // create renderer
+    var render = Render.create({
+        element: document.body,
+        engine: engine,
+        options: {
+            width: 800,
+            height: 600,
+            showVelocity: true
+        }
+    });
+
+    Render.run(render);
+
+    // create runner
+    var runner = Runner.create();
+    Runner.run(runner, engine);
+
+    // add bodies
+    World.add(world, [
+        // falling blocks
+        Bodies.rectangle(200, 100, 60, 60, { frictionAir: 0.001 }),
+        Bodies.rectangle(400, 100, 60, 60, { frictionAir: 0.05 }),
+        Bodies.rectangle(600, 100, 60, 60, { frictionAir: 0.1 }),
+
+        // walls
+        Bodies.rectangle(400, 0, 800, 50, { isStatic: true }),
+        Bodies.rectangle(400, 600, 800, 50, { isStatic: true }),
+        Bodies.rectangle(800, 300, 50, 600, { isStatic: true }),
+        Bodies.rectangle(0, 300, 50, 600, { isStatic: true })
+    ]);
+
+    // add mouse control
+    var mouse = Mouse.create(render.canvas),
+        mouseConstraint = MouseConstraint.create(engine, {
+            mouse: mouse,
+            constraint: {
+                stiffness: 0.2,
+                render: {
+                    visible: false
+                }
+            }
+        });
+
+    World.add(world, mouseConstraint);
+
+    // keep the mouse in sync with rendering
+    render.mouse = mouse;
+
+    // fit the render viewport to the scene
+    Render.lookAt(render, {
+        min: { x: 0, y: 0 },
+        max: { x: 800, y: 600 }
+    });
+
+    // context for MatterTools.Demo
+    return {
+        engine: engine,
+        runner: runner,
+        render: render,
+        canvas: render.canvas,
+        stop: function() {
+            Matter.Render.stop(render);
+            Matter.Runner.stop(runner);
+        }
+    };
+};
+
+if (true) {
+    module.exports = Example[Object.keys(Example)[0]];
+}
+
+/***/ }),
+/* 2 */
+/***/ (function(module, exports, __webpack_require__) {
+
+var Example = Example || {};
+
+Example.avalanche = function() {
+    Matter.use(
+        'matter-wrap'
+    );
+    
+    var Engine = Matter.Engine,
+        Render = Matter.Render,
+        Runner = Matter.Runner,
+        Composite = Matter.Composite,
+        Composites = Matter.Composites,
+        Common = Matter.Common,
+        MouseConstraint = Matter.MouseConstraint,
+        Mouse = Matter.Mouse,
+        World = Matter.World,
+        Bodies = Matter.Bodies;
+
+    // create engine
+    var engine = Engine.create(),
+        world = engine.world;
+
+    // create renderer
+    var render = Render.create({
+        element: document.body,
+        engine: engine,
+        options: {
+            width: 800,
+            height: 600,
+            showAngleIndicator: true
+        }
+    });
+
+    Render.run(render);
+
+    // create runner
+    var runner = Runner.create();
+    Runner.run(runner, engine);
+
+    // add bodies
+    var stack = Composites.stack(20, 20, 20, 5, 0, 0, function(x, y) {
+        return Bodies.circle(x, y, Common.random(10, 20), { friction: 0.00001, restitution: 0.5, density: 0.001 });
+    });
+    
+    World.add(world, stack);
+    
+    World.add(world, [
+        Bodies.rectangle(200, 150, 700, 20, { isStatic: true, angle: Math.PI * 0.06 }),
+        Bodies.rectangle(500, 350, 700, 20, { isStatic: true, angle: -Math.PI * 0.06 }),
+        Bodies.rectangle(340, 580, 700, 20, { isStatic: true, angle: Math.PI * 0.04 })
+    ]);
+
+    // add mouse control
+    var mouse = Mouse.create(render.canvas),
+        mouseConstraint = MouseConstraint.create(engine, {
+            mouse: mouse,
+            constraint: {
+                stiffness: 0.2,
+                render: {
+                    visible: false
+                }
+            }
+        });
+
+    World.add(world, mouseConstraint);
+
+    // keep the mouse in sync with rendering
+    render.mouse = mouse;
+
+    // fit the render viewport to the scene
+    Render.lookAt(render, Composite.allBodies(world));
+
+    // wrapping using matter-wrap plugin
+    for (var i = 0; i < stack.bodies.length; i += 1) {
+        stack.bodies[i].plugin.wrap = {
+            min: { x: render.bounds.min.x, y: render.bounds.min.y },
+            max: { x: render.bounds.max.x, y: render.bounds.max.y }
+        };
+    }
+
+    // context for MatterTools.Demo
+    return {
+        engine: engine,
+        runner: runner,
+        render: render,
+        canvas: render.canvas,
+        stop: function() {
+            Matter.Render.stop(render);
+            Matter.Runner.stop(runner);
+        }
+    };
+};
+
+if (true) {
+    module.exports = Example[Object.keys(Example)[0]];
+}
+
+/***/ }),
+/* 3 */
+/***/ (function(module, exports, __webpack_require__) {
+
+var Example = Example || {};
+
+Example.ballPool = function() {
+    Matter.use(
+        'matter-wrap'
+    );
+    
+    var Engine = Matter.Engine,
+        Render = Matter.Render,
+        Runner = Matter.Runner,
+        Composite = Matter.Composite,
+        Composites = Matter.Composites,
+        Common = Matter.Common,
+        MouseConstraint = Matter.MouseConstraint,
+        Mouse = Matter.Mouse,
+        World = Matter.World,
+        Bodies = Matter.Bodies;
+
+    // create engine
+    var engine = Engine.create(),
+        world = engine.world;
+
+    // create renderer
+    var render = Render.create({
+        element: document.body,
+        engine: engine,
+        options: {
+            width: 800,
+            height: 600,
+            showAngleIndicator: true
+        }
+    });
+
+    Render.run(render);
+
+    // create runner
+    var runner = Runner.create();
+    Runner.run(runner, engine);
+
+    // add bodies
+    World.add(world, [
+        Bodies.rectangle(400, 600, 1200, 50.5, { isStatic: true })
+    ]);
+
+    var stack = Composites.stack(100, 0, 10, 8, 10, 10, function(x, y) {
+        return Bodies.circle(x, y, Common.random(15, 30), { restitution: 0.6, friction: 0.1 });
+    });
+    
+    World.add(world, [
+        stack,
+        Bodies.polygon(200, 460, 3, 60),
+        Bodies.polygon(400, 460, 5, 60),
+        Bodies.rectangle(600, 460, 80, 80)
+    ]);
+
+    // add mouse control
+    var mouse = Mouse.create(render.canvas),
+        mouseConstraint = MouseConstraint.create(engine, {
+            mouse: mouse,
+            constraint: {
+                stiffness: 0.2,
+                render: {
+                    visible: false
+                }
+            }
+        });
+
+    World.add(world, mouseConstraint);
+
+    // keep the mouse in sync with rendering
+    render.mouse = mouse;
+
+    // fit the render viewport to the scene
+    Render.lookAt(render, {
+        min: { x: 0, y: 0 },
+        max: { x: 800, y: 600 }
+    });
+
+    // wrapping using matter-wrap plugin
+    var allBodies = Composite.allBodies(world);
+
+    for (var i = 0; i < allBodies.length; i += 1) {
+        allBodies[i].plugin.wrap = {
+            min: { x: render.bounds.min.x - 100, y: render.bounds.min.y },
+            max: { x: render.bounds.max.x + 100, y: render.bounds.max.y }
+        };
+    }
+
+    // context for MatterTools.Demo
+    return {
+        engine: engine,
+        runner: runner,
+        render: render,
+        canvas: render.canvas,
+        stop: function() {
+            Matter.Render.stop(render);
+            Matter.Runner.stop(runner);
+        }
+    };
+};
+
+if (true) {
+    module.exports = Example[Object.keys(Example)[0]];
+}
+
+/***/ }),
+/* 4 */
+/***/ (function(module, exports, __webpack_require__) {
+
+var Example = Example || {};
+
+Example.bridge = function() {
+    var Engine = Matter.Engine,
+        Render = Matter.Render,
+        Runner = Matter.Runner,
+        Body = Matter.Body,
+        Composites = Matter.Composites,
+        Common = Matter.Common,
+        Constraint = Matter.Constraint,
+        MouseConstraint = Matter.MouseConstraint,
+        Mouse = Matter.Mouse,
+        World = Matter.World,
+        Bodies = Matter.Bodies;
+
+    // create engine
+    var engine = Engine.create(),
+        world = engine.world;
+
+    // create renderer
+    var render = Render.create({
+        element: document.body,
+        engine: engine,
+        options: {
+            width: 800,
+            height: 600,
+            showAngleIndicator: true
+        }
+    });
+
+    Render.run(render);
+
+    // create runner
+    var runner = Runner.create();
+    Runner.run(runner, engine);
+
+    // add bodies
+    var group = Body.nextGroup(true);
+
+    var bridge = Composites.stack(160, 290, 15, 1, 0, 0, function(x, y) {
+        return Bodies.rectangle(x - 20, y, 53, 20, { 
+            collisionFilter: { group: group },
+            chamfer: 5,
+            density: 0.005,
+            frictionAir: 0.05,
+            render: {
+                fillStyle: '#575375'
+            }
+        });
+    });
+    
+    Composites.chain(bridge, 0.3, 0, -0.3, 0, { 
+        stiffness: 1,
+        length: 0,
+        render: {
+            visible: false
+        }
+    });
+    
+    var stack = Composites.stack(250, 50, 6, 3, 0, 0, function(x, y) {
+        return Bodies.rectangle(x, y, 50, 50, Common.random(20, 40));
+    });
+
+    World.add(world, [
+        bridge,
+        stack,
+        Bodies.rectangle(30, 490, 220, 380, { 
+            isStatic: true, 
+            chamfer: { radius: 20 }
+        }),
+        Bodies.rectangle(770, 490, 220, 380, { 
+            isStatic: true, 
+            chamfer: { radius: 20 }
+        }),
+        Constraint.create({ 
+            pointA: { x: 140, y: 300 }, 
+            bodyB: bridge.bodies[0], 
+            pointB: { x: -25, y: 0 },
+            length: 2,
+            stiffness: 0.9
+        }),
+        Constraint.create({ 
+            pointA: { x: 660, y: 300 }, 
+            bodyB: bridge.bodies[bridge.bodies.length - 1], 
+            pointB: { x: 25, y: 0 },
+            length: 2,
+            stiffness: 0.9
+        })
+    ]);
+
+    // add mouse control
+    var mouse = Mouse.create(render.canvas),
+        mouseConstraint = MouseConstraint.create(engine, {
+            mouse: mouse,
+            constraint: {
+                stiffness: 0.1,
+                render: {
+                    visible: false
+                }
+            }
+        });
+
+    World.add(world, mouseConstraint);
+
+    // keep the mouse in sync with rendering
+    render.mouse = mouse;
+
+    // fit the render viewport to the scene
+    Render.lookAt(render, {
+        min: { x: 0, y: 0 },
+        max: { x: 800, y: 600 }
+    });
+
+    // context for MatterTools.Demo
+    return {
+        engine: engine,
+        runner: runner,
+        render: render,
+        canvas: render.canvas,
+        stop: function() {
+            Matter.Render.stop(render);
+            Matter.Runner.stop(runner);
+        }
+    };
+};
+
+if (true) {
+    module.exports = Example[Object.keys(Example)[0]];
+}
+
+/***/ }),
+/* 5 */
+/***/ (function(module, exports, __webpack_require__) {
+
+var Example = Example || {};
+
+Example.broadphase = function() {
+    var Engine = Matter.Engine,
+        Render = Matter.Render,
+        Runner = Matter.Runner,
+        Composites = Matter.Composites,
+        Common = Matter.Common,
+        MouseConstraint = Matter.MouseConstraint,
+        Mouse = Matter.Mouse,
+        World = Matter.World,
+        Bodies = Matter.Bodies;
+
+    // create engine
+    var engine = Engine.create(),
+        world = engine.world;
+
+    // create renderer
+    var render = Render.create({
+        element: document.body,
+        engine: engine,
+        options: {
+            width: 800,
+            height: 600,
+            showAngleIndicator: true,
+            showBroadphase: true
+        }
+    });
+
+    Render.run(render);
+
+    // create runner
+    var runner = Runner.create();
+    Runner.run(runner, engine);
+
+    // add bodies
+    World.add(world, [
+        // walls
+        Bodies.rectangle(400, 0, 800, 50, { isStatic: true }),
+        Bodies.rectangle(400, 600, 800, 50, { isStatic: true }),
+        Bodies.rectangle(800, 300, 50, 600, { isStatic: true }),
+        Bodies.rectangle(0, 300, 50, 600, { isStatic: true })
+    ]);
+
+    var stack = Composites.stack(20, 20, 12, 5, 0, 0, function(x, y) {
+        switch (Math.round(Common.random(0, 1))) {
+
+        case 0:
+            if (Common.random() < 0.8) {
+                return Bodies.rectangle(x, y, Common.random(20, 50), Common.random(20, 50));
+            } else {
+                return Bodies.rectangle(x, y, Common.random(80, 120), Common.random(20, 30));
+            }
+        case 1:
+            return Bodies.polygon(x, y, Math.round(Common.random(1, 8)), Common.random(20, 50));
+
+        }
+    });
+    
+    World.add(world, stack);
+
+    // add mouse control
+    var mouse = Mouse.create(render.canvas),
+        mouseConstraint = MouseConstraint.create(engine, {
+            mouse: mouse,
+            constraint: {
+                stiffness: 0.2,
+                render: {
+                    visible: false
+                }
+            }
+        });
+
+    World.add(world, mouseConstraint);
+
+    // keep the mouse in sync with rendering
+    render.mouse = mouse;
+
+    // fit the render viewport to the scene
+    Render.lookAt(render, {
+        min: { x: 0, y: 0 },
+        max: { x: 800, y: 600 }
+    });
+
+    // context for MatterTools.Demo
+    return {
+        engine: engine,
+        runner: runner,
+        render: render,
+        canvas: render.canvas,
+        stop: function() {
+            Matter.Render.stop(render);
+            Matter.Runner.stop(runner);
+        }
+    };
+};
+
+if (true) {
+    module.exports = Example[Object.keys(Example)[0]];
+}
+
+/***/ }),
+/* 6 */
+/***/ (function(module, exports, __webpack_require__) {
+
+var Example = Example || {};
+
+Example.car = function() {
+    var Engine = Matter.Engine,
+        Render = Matter.Render,
+        Runner = Matter.Runner,
+        Composites = Matter.Composites,
+        MouseConstraint = Matter.MouseConstraint,
+        Mouse = Matter.Mouse,
+        World = Matter.World,
+        Bodies = Matter.Bodies;
+
+    // create engine
+    var engine = Engine.create(),
+        world = engine.world;
+
+    // create renderer
+    var render = Render.create({
+        element: document.body,
+        engine: engine,
+        options: {
+            width: 800,
+            height: 600,
+            showAngleIndicator: true,
+            showCollisions: true
+        }
+    });
+
+    Render.run(render);
+
+    // create runner
+    var runner = Runner.create();
+    Runner.run(runner, engine);
+
+    // add bodies
+    World.add(world, [
+        // walls
+        Bodies.rectangle(400, 0, 800, 50, { isStatic: true }),
+        Bodies.rectangle(400, 600, 800, 50, { isStatic: true }),
+        Bodies.rectangle(800, 300, 50, 600, { isStatic: true }),
+        Bodies.rectangle(0, 300, 50, 600, { isStatic: true })
+    ]);
+
+    var scale = 0.9;
+    World.add(world, Composites.car(150, 100, 150 * scale, 30 * scale, 30 * scale));
+    
+    scale = 0.8;
+    World.add(world, Composites.car(350, 300, 150 * scale, 30 * scale, 30 * scale));
+    
+    World.add(world, [
+        Bodies.rectangle(200, 150, 400, 20, { isStatic: true, angle: Math.PI * 0.06 }),
+        Bodies.rectangle(500, 350, 650, 20, { isStatic: true, angle: -Math.PI * 0.06 }),
+        Bodies.rectangle(300, 560, 600, 20, { isStatic: true, angle: Math.PI * 0.04 })
+    ]);
+
+    // add mouse control
+    var mouse = Mouse.create(render.canvas),
+        mouseConstraint = MouseConstraint.create(engine, {
+            mouse: mouse,
+            constraint: {
+                stiffness: 0.2,
+                render: {
+                    visible: false
+                }
+            }
+        });
+
+    World.add(world, mouseConstraint);
+
+    // keep the mouse in sync with rendering
+    render.mouse = mouse;
+
+    // fit the render viewport to the scene
+    Render.lookAt(render, {
+        min: { x: 0, y: 0 },
+        max: { x: 800, y: 600 }
+    });
+
+    // context for MatterTools.Demo
+    return {
+        engine: engine,
+        runner: runner,
+        render: render,
+        canvas: render.canvas,
+        stop: function() {
+            Matter.Render.stop(render);
+            Matter.Runner.stop(runner);
+        }
+    };
+};
+
+if (true) {
+    module.exports = Example[Object.keys(Example)[0]];
+}
+
+/***/ }),
+/* 7 */
+/***/ (function(module, exports, __webpack_require__) {
+
+var Example = Example || {};
+
+Example.catapult = function() {
+    var Engine = Matter.Engine,
+        Render = Matter.Render,
+        Runner = Matter.Runner,
+        Composites = Matter.Composites,
+        Constraint = Matter.Constraint,
+        MouseConstraint = Matter.MouseConstraint,
+        Mouse = Matter.Mouse,
+        World = Matter.World,
+        Bodies = Matter.Bodies,
+        Body = Matter.Body,
+        Vector = Matter.Vector;
+
+    // create engine
+    var engine = Engine.create(),
+        world = engine.world;
+
+    // create renderer
+    var render = Render.create({
+        element: document.body,
+        engine: engine,
+        options: {
+            width: 800,
+            height: 600,
+            showAngleIndicator: true,
+            showCollisions: true,
+            showVelocity: true
+        }
+    });
+
+    Render.run(render);
+
+    // create runner
+    var runner = Runner.create();
+    Runner.run(runner, engine);
+
+    // add bodies
+    var group = Body.nextGroup(true);
+
+    var stack = Composites.stack(250, 255, 1, 6, 0, 0, function(x, y) {
+        return Bodies.rectangle(x, y, 30, 30);
+    });
+
+    var catapult = Bodies.rectangle(400, 520, 320, 20, { collisionFilter: { group: group } });
+
+    World.add(world, [
+        stack,
+        catapult,
+        Bodies.rectangle(400, 600, 800, 50.5, { isStatic: true }),
+        Bodies.rectangle(250, 555, 20, 50, { isStatic: true }),
+        Bodies.rectangle(400, 535, 20, 80, { isStatic: true, collisionFilter: { group: group } }),
+        Bodies.circle(560, 100, 50, { density: 0.005 }),
+        Constraint.create({ 
+            bodyA: catapult, 
+            pointB: Vector.clone(catapult.position),
+            stiffness: 1,
+            length: 0
+        })
+    ]);
+
+    // add mouse control
+    var mouse = Mouse.create(render.canvas),
+        mouseConstraint = MouseConstraint.create(engine, {
+            mouse: mouse,
+            constraint: {
+                stiffness: 0.2,
+                render: {
+                    visible: false
+                }
+            }
+        });
+
+    World.add(world, mouseConstraint);
+
+    // keep the mouse in sync with rendering
+    render.mouse = mouse;
+
+    // fit the render viewport to the scene
+    Render.lookAt(render, {
+        min: { x: 0, y: 0 },
+        max: { x: 800, y: 600 }
+    });
+
+    // context for MatterTools.Demo
+    return {
+        engine: engine,
+        runner: runner,
+        render: render,
+        canvas: render.canvas,
+        stop: function() {
+            Matter.Render.stop(render);
+            Matter.Runner.stop(runner);
+        }
+    };
+};
+
+if (true) {
+    module.exports = Example[Object.keys(Example)[0]];
+}
+
+/***/ }),
+/* 8 */
+/***/ (function(module, exports, __webpack_require__) {
+
+var Example = Example || {};
+
+Example.chains = function() {
+    var Engine = Matter.Engine,
+        Render = Matter.Render,
+        Runner = Matter.Runner,
+        Body = Matter.Body,
+        Composite = Matter.Composite,
+        Composites = Matter.Composites,
+        Constraint = Matter.Constraint,
+        MouseConstraint = Matter.MouseConstraint,
+        Mouse = Matter.Mouse,
+        World = Matter.World,
+        Bodies = Matter.Bodies;
+
+    // create engine
+    var engine = Engine.create(),
+        world = engine.world;
+
+    // create renderer
+    var render = Render.create({
+        element: document.body,
+        engine: engine,
+        options: {
+            width: 800,
+            height: 600,
+            showAngleIndicator: true,
+            showCollisions: true,
+            showVelocity: true
+        }
+    });
+
+    Render.run(render);
+
+    // create runner
+    var runner = Runner.create();
+    Runner.run(runner, engine);
+
+    // add bodies
+    var group = Body.nextGroup(true);
+        
+    var ropeA = Composites.stack(100, 50, 8, 1, 10, 10, function(x, y) {
+        return Bodies.rectangle(x, y, 50, 20, { collisionFilter: { group: group } });
+    });
+    
+    Composites.chain(ropeA, 0.5, 0, -0.5, 0, { stiffness: 0.8, length: 2, render: { type: 'line' } });
+    Composite.add(ropeA, Constraint.create({ 
+        bodyB: ropeA.bodies[0],
+        pointB: { x: -25, y: 0 },
+        pointA: { x: ropeA.bodies[0].position.x, y: ropeA.bodies[0].position.y },
+        stiffness: 0.5
+    }));
+    
+    group = Body.nextGroup(true);
+    
+    var ropeB = Composites.stack(350, 50, 10, 1, 10, 10, function(x, y) {
+        return Bodies.circle(x, y, 20, { collisionFilter: { group: group } });
+    });
+    
+    Composites.chain(ropeB, 0.5, 0, -0.5, 0, { stiffness: 0.8, length: 2, render: { type: 'line' } });
+    Composite.add(ropeB, Constraint.create({ 
+        bodyB: ropeB.bodies[0],
+        pointB: { x: -20, y: 0 },
+        pointA: { x: ropeB.bodies[0].position.x, y: ropeB.bodies[0].position.y },
+        stiffness: 0.5
+    }));
+    
+    group = Body.nextGroup(true);
+
+    var ropeC = Composites.stack(600, 50, 13, 1, 10, 10, function(x, y) {
+        return Bodies.rectangle(x - 20, y, 50, 20, { collisionFilter: { group: group }, chamfer: 5 });
+    });
+    
+    Composites.chain(ropeC, 0.3, 0, -0.3, 0, { stiffness: 1, length: 0 });
+    Composite.add(ropeC, Constraint.create({ 
+        bodyB: ropeC.bodies[0],
+        pointB: { x: -20, y: 0 },
+        pointA: { x: ropeC.bodies[0].position.x, y: ropeC.bodies[0].position.y },
+        stiffness: 0.5
+    }));
+    
+    World.add(world, [
+        ropeA,
+        ropeB,
+        ropeC,
+        Bodies.rectangle(400, 600, 1200, 50.5, { isStatic: true })
+    ]);
+
+    // add mouse control
+    var mouse = Mouse.create(render.canvas),
+        mouseConstraint = MouseConstraint.create(engine, {
+            mouse: mouse,
+            constraint: {
+                stiffness: 0.2,
+                render: {
+                    visible: false
+                }
+            }
+        });
+
+    World.add(world, mouseConstraint);
+
+    // keep the mouse in sync with rendering
+    render.mouse = mouse;
+
+    // fit the render viewport to the scene
+    Render.lookAt(render, {
+        min: { x: 0, y: 0 },
+        max: { x: 700, y: 600 }
+    });
+
+    // context for MatterTools.Demo
+    return {
+        engine: engine,
+        runner: runner,
+        render: render,
+        canvas: render.canvas,
+        stop: function() {
+            Matter.Render.stop(render);
+            Matter.Runner.stop(runner);
+        }
+    };
+};
+
+if (true) {
+    module.exports = Example[Object.keys(Example)[0]];
+}
+
+/***/ }),
+/* 9 */
+/***/ (function(module, exports, __webpack_require__) {
+
+var Example = Example || {};
+
+Example.circleStack = function() {
+    var Engine = Matter.Engine,
+        Render = Matter.Render,
+        Runner = Matter.Runner,
+        Composites = Matter.Composites,
+        MouseConstraint = Matter.MouseConstraint,
+        Mouse = Matter.Mouse,
+        World = Matter.World,
+        Bodies = Matter.Bodies;
+
+    // create engine
+    var engine = Engine.create(),
+        world = engine.world;
+
+    // create renderer
+    var render = Render.create({
+        element: document.body,
+        engine: engine,
+        options: {
+            width: 800,
+            height: 600,
+            showAngleIndicator: true
+        }
+    });
+
+    Render.run(render);
+
+    // create runner
+    var runner = Runner.create();
+    Runner.run(runner, engine);
+
+    // add bodies
+    var stack = Composites.stack(100, 185, 10, 10, 20, 0, function(x, y) {
+        return Bodies.circle(x, y, 20);
+    });
+    
+    World.add(world, [
+        // walls
+        Bodies.rectangle(400, 0, 800, 50, { isStatic: true }),
+        Bodies.rectangle(400, 600, 800, 50, { isStatic: true }),
+        Bodies.rectangle(800, 300, 50, 600, { isStatic: true }),
+        Bodies.rectangle(0, 300, 50, 600, { isStatic: true }),
+        stack
+    ]);
+
+    // add mouse control
+    var mouse = Mouse.create(render.canvas),
+        mouseConstraint = MouseConstraint.create(engine, {
+            mouse: mouse,
+            constraint: {
+                stiffness: 0.2,
+                render: {
+                    visible: false
+                }
+            }
+        });
+
+    World.add(world, mouseConstraint);
+
+    // keep the mouse in sync with rendering
+    render.mouse = mouse;
+    
+    // fit the render viewport to the scene
+    Render.lookAt(render, {
+        min: { x: 0, y: 0 },
+        max: { x: 800, y: 600 }
+    });
+    
+    // context for MatterTools.Demo
+    return {
+        engine: engine,
+        runner: runner,
+        render: render,
+        canvas: render.canvas,
+        stop: function() {
+            Matter.Render.stop(render);
+            Matter.Runner.stop(runner);
+        }
+    };
+};
+
+if (true) {
+    module.exports = Example[Object.keys(Example)[0]];
+}
+
+/***/ }),
+/* 10 */
+/***/ (function(module, exports, __webpack_require__) {
+
+var Example = Example || {};
+
+Example.cloth = function() {
+    var Engine = Matter.Engine,
+        Render = Matter.Render,
+        Runner = Matter.Runner,
+        Body = Matter.Body,
+        Composites = Matter.Composites,
+        MouseConstraint = Matter.MouseConstraint,
+        Mouse = Matter.Mouse,
+        World = Matter.World,
+        Bodies = Matter.Bodies;
+
+    // create engine
+    var engine = Engine.create(),
+        world = engine.world;
+
+    // create renderer
+    var render = Render.create({
+        element: document.body,
+        engine: engine,
+        options: {
+            width: 800,
+            height: 600
+        }
+    });
+
+    Render.run(render);
+
+    // create runner
+    var runner = Runner.create();
+    Runner.run(runner, engine);
+
+    // add bodies
+    var group = Body.nextGroup(true),
+        particleOptions = { friction: 0.00001, collisionFilter: { group: group }, render: { visible: false }},
+        constraintOptions = { stiffness: 0.06 },
+        cloth = Composites.softBody(200, 200, 20, 12, 5, 5, false, 8, particleOptions, constraintOptions);
+
+    for (var i = 0; i < 20; i++) {
+        cloth.bodies[i].isStatic = true;
+    }
+
+    World.add(world, [
+        cloth,
+        Bodies.circle(300, 500, 80, { isStatic: true }),
+        Bodies.rectangle(500, 480, 80, 80, { isStatic: true }),
+        Bodies.rectangle(400, 609, 800, 50, { isStatic: true })
+    ]);
+
+    // add mouse control
+    var mouse = Mouse.create(render.canvas),
+        mouseConstraint = MouseConstraint.create(engine, {
+            mouse: mouse,
+            constraint: {
+                stiffness: 0.98,
+                render: {
+                    visible: false
+                }
+            }
+        });
+
+    World.add(world, mouseConstraint);
+
+    // keep the mouse in sync with rendering
+    render.mouse = mouse;
+
+    // fit the render viewport to the scene
+    Render.lookAt(render, {
+        min: { x: 0, y: 0 },
+        max: { x: 800, y: 600 }
+    });
+
+    // context for MatterTools.Demo
+    return {
+        engine: engine,
+        runner: runner,
+        render: render,
+        canvas: render.canvas,
+        stop: function() {
+            Matter.Render.stop(render);
+            Matter.Runner.stop(runner);
+        }
+    };
+};
+
+if (true) {
+    module.exports = Example[Object.keys(Example)[0]];
+}
+
+/***/ }),
+/* 11 */
+/***/ (function(module, exports, __webpack_require__) {
+
+var Example = Example || {};
+
+Example.collisionFiltering = function() {
+    var Engine = Matter.Engine,
+        Render = Matter.Render,
+        Runner = Matter.Runner,
+        Composite = Matter.Composite,
+        Composites = Matter.Composites,
+        Common = Matter.Common,
+        MouseConstraint = Matter.MouseConstraint,
+        Mouse = Matter.Mouse,
+        World = Matter.World,
+        Bodies = Matter.Bodies;
+
+    // create engine
+    var engine = Engine.create(),
+        world = engine.world;
+
+    // create renderer
+    var render = Render.create({
+        element: document.body,
+        engine: engine,
+        options: {
+            width: 800,
+            height: 600,
+            wireframes: false,
+            background: '#111'
+        }
+    });
+
+    Render.run(render);
+
+    // create runner
+    var runner = Runner.create();
+    Runner.run(runner, engine);
+
+    // define our categories (as bit fields, there are up to 32 available)
+    var defaultCategory = 0x0001,
+        redCategory = 0x0002,
+        greenCategory = 0x0004,
+        blueCategory = 0x0008;
+
+    var redColor = '#C44D58',
+        blueColor = '#4ECDC4',
+        greenColor = '#C7F464';
+
+    // add floor
+    World.add(world, Bodies.rectangle(400, 600, 900, 50, { 
+        isStatic: true,
+        render: {
+            fillStyle: 'transparent',
+            lineWidth: 1
+        } 
+    }));
+
+    // create a stack with varying body categories (but these bodies can all collide with each other)
+    World.add(world,
+        Composites.stack(275, 100, 5, 9, 10, 10, function(x, y, column, row) {
+            var category = redCategory,
+                color = redColor;
+
+            if (row > 5) {
+                category = blueCategory;
+                color = blueColor;
+            } else if (row > 2) {
+                category = greenCategory;
+                color = greenColor;
+            }
+
+            return Bodies.circle(x, y, 20, {
+                collisionFilter: {
+                    category: category
+                },
+                render: {
+                    strokeStyle: color,
+                    fillStyle: 'transparent',
+                    lineWidth: 1
+                }
+            });
+        })
+    );
+
+    // this body will only collide with the walls and the green bodies
+    World.add(world,
+        Bodies.circle(310, 40, 30, {
+            collisionFilter: {
+                mask: defaultCategory | greenCategory
+            },
+            render: {
+                fillStyle: greenColor
+            }
+        })
+    );
+
+    // this body will only collide with the walls and the red bodies
+    World.add(world,
+        Bodies.circle(400, 40, 30, {
+            collisionFilter: {
+                mask: defaultCategory | redCategory
+            },
+            render: {
+                fillStyle: redColor
+            }
+        })
+    );
+
+    // this body will only collide with the walls and the blue bodies
+    World.add(world,
+        Bodies.circle(480, 40, 30, {
+            collisionFilter: {
+                mask: defaultCategory | blueCategory
+            },
+            render: {
+                fillStyle: blueColor
+            }
+        })
+    );
+
+    // add mouse control
+    var mouse = Mouse.create(render.canvas),
+        mouseConstraint = MouseConstraint.create(engine, {
+            mouse: mouse,
+            constraint: {
+                stiffness: 0.2,
+                render: {
+                    visible: false
+                }
+            }
+        });
+
+    World.add(world, mouseConstraint);
+
+    // keep the mouse in sync with rendering
+    render.mouse = mouse;
+
+    // red category objects should not be draggable with the mouse
+    mouseConstraint.collisionFilter.mask = defaultCategory | blueCategory | greenCategory;
+
+    // fit the render viewport to the scene
+    Render.lookAt(render, {
+        min: { x: 0, y: 0 },
+        max: { x: 800, y: 600 }
+    });
+
+    // context for MatterTools.Demo
+    return {
+        engine: engine,
+        runner: runner,
+        render: render,
+        canvas: render.canvas,
+        stop: function() {
+            Matter.Render.stop(render);
+            Matter.Runner.stop(runner);
+        }
+    };
+};
+
+if (true) {
+    module.exports = Example[Object.keys(Example)[0]];
+}
+
+/***/ }),
+/* 12 */
+/***/ (function(module, exports, __webpack_require__) {
+
+var Example = Example || {};
+
+Example.compositeManipulation = function() {
+    var Engine = Matter.Engine,
+        Render = Matter.Render,
+        Runner = Matter.Runner,
+        Events = Matter.Events,
+        Composite = Matter.Composite,
+        Composites = Matter.Composites,
+        MouseConstraint = Matter.MouseConstraint,
+        Mouse = Matter.Mouse,
+        World = Matter.World,
+        Bodies = Matter.Bodies;
+
+    // create engine
+    var engine = Engine.create(),
+        world = engine.world;
+
+    // create renderer
+    var render = Render.create({
+        element: document.body,
+        engine: engine,
+        options: {
+            width: 800,
+            height: 600,
+            showAngleIndicator: true
+        }
+    });
+
+    Render.run(render);
+
+    // create runner
+    var runner = Runner.create();
+    Runner.run(runner, engine);
+
+    // add bodies
+    World.add(world, [
+        // walls
+        Bodies.rectangle(400, 0, 800, 50, { isStatic: true }),
+        Bodies.rectangle(400, 600, 800, 50, { isStatic: true }),
+        Bodies.rectangle(800, 300, 50, 600, { isStatic: true }),
+        Bodies.rectangle(0, 300, 50, 600, { isStatic: true })
+    ]);
+
+    var stack = Composites.stack(200, 200, 4, 4, 0, 0, function(x, y) {
+        return Bodies.rectangle(x, y, 40, 40);
+    });
+
+    World.add(world, stack);
+
+    world.gravity.y = 0;
+
+    Events.on(engine, 'afterUpdate', function(event) {
+        var time = engine.timing.timestamp;
+
+        Composite.translate(stack, {
+            x: Math.sin(time * 0.001) * 2,
+            y: 0
+        });
+
+        Composite.rotate(stack, Math.sin(time * 0.001) * 0.01, {
+            x: 300,
+            y: 300
+        });
+
+        var scale = 1 + (Math.sin(time * 0.001) * 0.01);
+
+        Composite.scale(stack, scale, scale, {
+            x: 300,
+            y: 300
+        });
+    });
+
+    // add mouse control
+    var mouse = Mouse.create(render.canvas),
+        mouseConstraint = MouseConstraint.create(engine, {
+            mouse: mouse,
+            constraint: {
+                stiffness: 0.2,
+                render: {
+                    visible: false
+                }
+            }
+        });
+
+    World.add(world, mouseConstraint);
+
+    // keep the mouse in sync with rendering
+    render.mouse = mouse;
+    
+    // fit the render viewport to the scene
+    Render.lookAt(render, {
+        min: { x: 0, y: 0 },
+        max: { x: 800, y: 600 }
+    });
+
+    // context for MatterTools.Demo
+    return {
+        engine: engine,
+        runner: runner,
+        render: render,
+        canvas: render.canvas,
+        stop: function() {
+            Matter.Render.stop(render);
+            Matter.Runner.stop(runner);
+        }
+    };
+};
+
+if (true) {
+    module.exports = Example[Object.keys(Example)[0]];
+}
+
+/***/ }),
+/* 13 */
+/***/ (function(module, exports, __webpack_require__) {
+
+var Example = Example || {};
+
+Example.compound = function() {
+    var Engine = Matter.Engine,
+        Render = Matter.Render,
+        Runner = Matter.Runner,
+        Body = Matter.Body,
+        Constraint = Matter.Constraint,
+        MouseConstraint = Matter.MouseConstraint,
+        Mouse = Matter.Mouse,
+        World = Matter.World,
+        Bodies = Matter.Bodies;
+
+    // create engine
+    var engine = Engine.create(),
+        world = engine.world;
+
+    // create renderer
+    var render = Render.create({
+        element: document.body,
+        engine: engine,
+        options: {
+            width: 800,
+            height: 600,
+            showAxes: true,
+            showConvexHulls: true
+        }
+    });
+
+    Render.run(render);
+
+    // create runner
+    var runner = Runner.create();
+    Runner.run(runner, engine);
+
+    // add bodies
+    var size = 200,
+        x = 200,
+        y = 200,
+        partA = Bodies.rectangle(x, y, size, size / 5),
+        partB = Bodies.rectangle(x, y, size / 5, size, { render: partA.render });
+
+    var compoundBodyA = Body.create({
+        parts: [partA, partB]
+    });
+
+    size = 150;
+    x = 400;
+    y = 300;
+
+    var partC = Bodies.circle(x, y, 30),
+        partD = Bodies.circle(x + size, y, 30),
+        partE = Bodies.circle(x + size, y + size, 30),
+        partF = Bodies.circle(x, y + size, 30);
+
+    var compoundBodyB = Body.create({
+        parts: [partC, partD, partE, partF]
+    });
+
+    var constraint = Constraint.create({
+        pointA: { x: 400, y: 100 },
+        bodyB: compoundBodyB,
+        pointB: { x: 0, y: 0 }
+    });
+
+    World.add(world, [
+        compoundBodyA, 
+        compoundBodyB, 
+        constraint,
+        Bodies.rectangle(400, 600, 800, 50.5, { isStatic: true })
+    ]);
+
+    // add mouse control
+    var mouse = Mouse.create(render.canvas),
+        mouseConstraint = MouseConstraint.create(engine, {
+            mouse: mouse,
+            constraint: {
+                stiffness: 0.2,
+                render: {
+                    visible: false
+                }
+            }
+        });
+
+    World.add(world, mouseConstraint);
+
+    // keep the mouse in sync with rendering
+    render.mouse = mouse;
+
+    // fit the render viewport to the scene
+    Render.lookAt(render, {
+        min: { x: 0, y: 0 },
+        max: { x: 800, y: 600 }
+    });
+
+    // context for MatterTools.Demo
+    return {
+        engine: engine,
+        runner: runner,
+        render: render,
+        canvas: render.canvas,
+        stop: function() {
+            Matter.Render.stop(render);
+            Matter.Runner.stop(runner);
+        }
+    };
+};
+
+if (true) {
+    module.exports = Example[Object.keys(Example)[0]];
+}
+
+/***/ }),
+/* 14 */
+/***/ (function(module, exports, __webpack_require__) {
+
+var Example = Example || {};
+
+Example.compoundStack = function() {
+    var Engine = Matter.Engine,
+        Render = Matter.Render,
+        Runner = Matter.Runner,
+        Body = Matter.Body,
+        Composites = Matter.Composites,
+        MouseConstraint = Matter.MouseConstraint,
+        Mouse = Matter.Mouse,
+        World = Matter.World,
+        Bodies = Matter.Bodies;
+
+    // create engine
+    var engine = Engine.create(),
+        world = engine.world;
+
+    // create renderer
+    var render = Render.create({
+        element: document.body,
+        engine: engine,
+        options: {
+            width: 800,
+            height: 600,
+            showAngleIndicator: true
+        }
+    });
+
+    Render.run(render);
+
+    // create runner
+    var runner = Runner.create();
+    Runner.run(runner, engine);
+
+    // add bodies
+    var size = 50;
+
+    var stack = Composites.stack(100, 280, 12, 6, 0, 0, function(x, y) {
+        var partA = Bodies.rectangle(x, y, size, size / 5),
+            partB = Bodies.rectangle(x, y, size / 5, size, { render: partA.render });
+
+        return Body.create({
+            parts: [partA, partB]
+        });
+    });
+
+    World.add(world, [
+        stack,
+        // walls
+        Bodies.rectangle(400, 0, 800, 50, { isStatic: true }),
+        Bodies.rectangle(800, 300, 50, 600, { isStatic: true }),
+        Bodies.rectangle(0, 300, 50, 600, { isStatic: true }),
+        Bodies.rectangle(400, 609, 800, 50, { isStatic: true })
+    ]);
+
+    // add mouse control
+    var mouse = Mouse.create(render.canvas),
+        mouseConstraint = MouseConstraint.create(engine, {
+            mouse: mouse,
+            constraint: {
+                stiffness: 0.2,
+                render: {
+                    visible: false
+                }
+            }
+        });
+
+    World.add(world, mouseConstraint);
+
+    // keep the mouse in sync with rendering
+    render.mouse = mouse;
+
+    // fit the render viewport to the scene
+    Render.lookAt(render, {
+        min: { x: 0, y: 0 },
+        max: { x: 800, y: 600 }
+    });
+
+    // context for MatterTools.Demo
+    return {
+        engine: engine,
+        runner: runner,
+        render: render,
+        canvas: render.canvas,
+        stop: function() {
+            Matter.Render.stop(render);
+            Matter.Runner.stop(runner);
+        }
+    };
+};
+
+if (true) {
+    module.exports = Example[Object.keys(Example)[0]];
+}
+
+/***/ }),
+/* 15 */
+/***/ (function(module, exports, __webpack_require__) {
+
+var Example = Example || {};
+
+Example.concave = function() {
+    var Engine = Matter.Engine,
+        Render = Matter.Render,
+        Runner = Matter.Runner,
+        Composites = Matter.Composites,
+        Common = Matter.Common,
+        MouseConstraint = Matter.MouseConstraint,
+        Mouse = Matter.Mouse,
+        World = Matter.World,
+        Vertices = Matter.Vertices,
+        Bodies = Matter.Bodies;
+
+    // create engine
+    var engine = Engine.create(),
+        world = engine.world;
+
+    // create renderer
+    var render = Render.create({
+        element: document.body,
+        engine: engine,
+        options: {
+            width: 800,
+            height: 600
+        }
+    });
+
+    Render.run(render);
+
+    // create runner
+    var runner = Runner.create();
+    Runner.run(runner, engine);
+
+    // add bodies
+    World.add(world, [
+        // walls
+        Bodies.rectangle(400, 0, 800, 50, { isStatic: true }),
+        Bodies.rectangle(400, 600, 800, 50, { isStatic: true }),
+        Bodies.rectangle(800, 300, 50, 600, { isStatic: true }),
+        Bodies.rectangle(0, 300, 50, 600, { isStatic: true })
+    ]);
+
+    var arrow = Vertices.fromPath('40 0 40 20 100 20 100 80 40 80 40 100 0 50'),
+        chevron = Vertices.fromPath('100 0 75 50 100 100 25 100 0 50 25 0'),
+        star = Vertices.fromPath('50 0 63 38 100 38 69 59 82 100 50 75 18 100 31 59 0 38 37 38'),
+        horseShoe = Vertices.fromPath('35 7 19 17 14 38 14 58 25 79 45 85 65 84 65 66 46 67 34 59 30 44 33 29 45 23 66 23 66 7 53 7');
+
+    var stack = Composites.stack(50, 50, 6, 4, 10, 10, function(x, y) {
+        var color = Common.choose(['#556270', '#4ECDC4', '#C7F464', '#FF6B6B', '#C44D58']);
+        return Bodies.fromVertices(x, y, Common.choose([arrow, chevron, star, horseShoe]), {
+            render: {
+                fillStyle: color,
+                strokeStyle: color,
+                lineWidth: 1
+            }
+        }, true);
+    });
+
+    World.add(world, stack);
+
+    // add mouse control
+    var mouse = Mouse.create(render.canvas),
+        mouseConstraint = MouseConstraint.create(engine, {
+            mouse: mouse,
+            constraint: {
+                stiffness: 0.2,
+                render: {
+                    visible: false
+                }
+            }
+        });
+
+    World.add(world, mouseConstraint);
+
+    // keep the mouse in sync with rendering
+    render.mouse = mouse;
+
+    // fit the render viewport to the scene
+    Render.lookAt(render, {
+        min: { x: 0, y: 0 },
+        max: { x: 800, y: 600 }
+    });
+
+    // context for MatterTools.Demo
+    return {
+        engine: engine,
+        runner: runner,
+        render: render,
+        canvas: render.canvas,
+        stop: function() {
+            Matter.Render.stop(render);
+            Matter.Runner.stop(runner);
+        }
+    };
+};
+
+if (true) {
+    module.exports = Example[Object.keys(Example)[0]];
+}
+
+/***/ }),
+/* 16 */
+/***/ (function(module, exports, __webpack_require__) {
+
+var Example = Example || {};
+
+Example.constraints = function() {
+    var Engine = Matter.Engine,
+        Render = Matter.Render,
+        Runner = Matter.Runner,
+        Composites = Matter.Composites,
+        Common = Matter.Common,
+        Constraint = Matter.Constraint,
+        MouseConstraint = Matter.MouseConstraint,
+        Mouse = Matter.Mouse,
+        World = Matter.World,
+        Bodies = Matter.Bodies;
+
+    // create engine
+    var engine = Engine.create(),
+        world = engine.world;
+
+    // create renderer
+    var render = Render.create({
+        element: document.body,
+        engine: engine,
+        options: {
+            width: 800,
+            height: 600,
+            showAngleIndicator: true
+        }
+    });
+
+    Render.run(render);
+
+    // create runner
+    var runner = Runner.create();
+    Runner.run(runner, engine);
+
+    // add stiff global constraint
+    var body = Bodies.polygon(150, 200, 5, 30);
+
+    var constraint = Constraint.create({
+        pointA: { x: 150, y: 100 },
+        bodyB: body,
+        pointB: { x: -10, y: -10 }
+    });
+
+    World.add(world, [body, constraint]);
+
+    // add soft global constraint
+    var body = Bodies.polygon(280, 100, 3, 30);
+
+    var constraint = Constraint.create({
+        pointA: { x: 280, y: 120 },
+        bodyB: body,
+        pointB: { x: -10, y: -7 },
+        stiffness: 0.001
+    });
+
+    World.add(world, [body, constraint]);
+
+    // add damped soft global constraint
+    var body = Bodies.polygon(400, 100, 4, 30);
+
+    var constraint = Constraint.create({
+        pointA: { x: 400, y: 120 },
+        bodyB: body,
+        pointB: { x: -10, y: -10 },
+        stiffness: 0.001,
+        damping: 0.05
+    });
+
+    World.add(world, [body, constraint]);
+
+    // add revolute constraint
+    var body = Bodies.rectangle(600, 200, 200, 20);
+    var ball = Bodies.circle(550, 150, 20);
+
+    var constraint = Constraint.create({
+        pointA: { x: 600, y: 200 },
+        bodyB: body,
+        length: 0
+    });
+
+    World.add(world, [body, ball, constraint]);
+
+    // add revolute multi-body constraint
+    var body = Bodies.rectangle(500, 400, 100, 20, { collisionFilter: { group: -1 } });
+    var ball = Bodies.circle(600, 400, 20, { collisionFilter: { group: -1 } });
+
+    var constraint = Constraint.create({
+        bodyA: body,
+        bodyB: ball
+    });
+
+    World.add(world, [body, ball, constraint]);
+
+    // add stiff multi-body constraint
+    var bodyA = Bodies.polygon(100, 400, 6, 20);
+    var bodyB = Bodies.polygon(200, 400, 1, 50);
+
+    var constraint = Constraint.create({
+        bodyA: bodyA,
+        pointA: { x: -10, y: -10 },
+        bodyB: bodyB,
+        pointB: { x: -10, y: -10 }
+    });
+
+    World.add(world, [bodyA, bodyB, constraint]);
+
+    // add soft global constraint
+    var bodyA = Bodies.polygon(300, 400, 4, 20);
+    var bodyB = Bodies.polygon(400, 400, 3, 30);
+
+    var constraint = Constraint.create({
+        bodyA: bodyA,
+        pointA: { x: -10, y: -10 },
+        bodyB: bodyB,
+        pointB: { x: -10, y: -7 },
+        stiffness: 0.001
+    });
+
+    World.add(world, [bodyA, bodyB, constraint]);
+
+    // add damped soft global constraint
+    var bodyA = Bodies.polygon(500, 400, 6, 30);
+    var bodyB = Bodies.polygon(600, 400, 7, 60);
+
+    var constraint = Constraint.create({
+        bodyA: bodyA,
+        pointA: { x: -10, y: -10 },
+        bodyB: bodyB,
+        pointB: { x: -10, y: -10 },
+        stiffness: 0.001,
+        damping: 0.1
+    });
+
+    World.add(world, [bodyA, bodyB, constraint]);
+
+    World.add(world, [
+        // walls
+        Bodies.rectangle(400, 0, 800, 50, { isStatic: true }),
+        Bodies.rectangle(400, 600, 800, 50, { isStatic: true }),
+        Bodies.rectangle(800, 300, 50, 600, { isStatic: true }),
+        Bodies.rectangle(0, 300, 50, 600, { isStatic: true })
+    ]);
+
+    // add mouse control
+    var mouse = Mouse.create(render.canvas),
+        mouseConstraint = MouseConstraint.create(engine, {
+            mouse: mouse,
+            constraint: {
+                // allow bodies on mouse to rotate
+                angularStiffness: 0,
+                render: {
+                    visible: false
+                }
+            }
+        });
+
+    World.add(world, mouseConstraint);
+
+    // keep the mouse in sync with rendering
+    render.mouse = mouse;
+
+    // fit the render viewport to the scene
+    Render.lookAt(render, {
+        min: { x: 0, y: 0 },
+        max: { x: 800, y: 600 }
+    });
+
+    // context for MatterTools.Demo
+    return {
+        engine: engine,
+        runner: runner,
+        render: render,
+        canvas: render.canvas,
+        stop: function() {
+            Matter.Render.stop(render);
+            Matter.Runner.stop(runner);
+        }
+    };
+};
+
+if (true) {
+    module.exports = Example[Object.keys(Example)[0]];
+}
+
+/***/ }),
+/* 17 */
+/***/ (function(module, exports, __webpack_require__) {
+
+var Example = Example || {};
+
+Example.doublePendulum = function() {
+    var Engine = Matter.Engine,
+        Events = Matter.Events,
+        Render = Matter.Render,
+        Runner = Matter.Runner,
+        Body = Matter.Body,
+        Composite = Matter.Composite,
+        Composites = Matter.Composites,
+        Constraint = Matter.Constraint,
+        MouseConstraint = Matter.MouseConstraint,
+        Mouse = Matter.Mouse,
+        World = Matter.World,
+        Bodies = Matter.Bodies,
+        Vector = Matter.Vector;
+
+    // create engine
+    var engine = Engine.create(),
+        world = engine.world;
+
+    // create renderer
+    var render = Render.create({
+        element: document.body,
+        engine: engine,
+        options: {
+            width: 800,
+            height: 600,
+            wireframes: false,
+            background: '#0f0f13'
+        }
+    });
+
+    Render.run(render);
+
+    // create runner
+    var runner = Runner.create();
+    Runner.run(runner, engine);
+
+    // add bodies
+    var group = Body.nextGroup(true),
+        length = 200,
+        width = 25;
+        
+    var pendulum = Composites.stack(350, 160, 2, 1, -20, 0, function(x, y) {
+        return Bodies.rectangle(x, y, length, width, { 
+            collisionFilter: { group: group },
+            frictionAir: 0,
+            chamfer: 5,
+            render: {
+                fillStyle: 'transparent',
+                lineWidth: 1
+            }
+        });
+    });
+
+    pendulum.bodies[0].render.strokeStyle = '#4a485b';
+    pendulum.bodies[1].render.strokeStyle = '#4a485b';
+
+    world.gravity.scale = 0.002;
+    
+    Composites.chain(pendulum, 0.45, 0, -0.45, 0, { 
+        stiffness: 0.9, 
+        length: 0,
+        angularStiffness: 0.7,
+        render: {
+            strokeStyle: '#4a485b'
+        }
+    });
+    
+    Composite.add(pendulum, Constraint.create({ 
+        bodyB: pendulum.bodies[0],
+        pointB: { x: -length * 0.42, y: 0 },
+        pointA: { x: pendulum.bodies[0].position.x - length * 0.42, y: pendulum.bodies[0].position.y },
+        stiffness: 0.9,
+        length: 0,
+        render: {
+            strokeStyle: '#4a485b'
+        }
+    }));
+
+    var lowerArm = pendulum.bodies[1];
+
+    Body.rotate(lowerArm, -Math.PI * 0.3, {
+        x: lowerArm.position.x - 100,
+        y: lowerArm.position.y
+    });
+    
+    World.add(world, pendulum);
+
+    var trail = [];
+
+    Events.on(render, 'afterRender', function() {
+        trail.unshift({
+            position: Vector.clone(lowerArm.position),
+            speed: lowerArm.speed
+        });
+
+        Render.startViewTransform(render);
+        render.context.globalAlpha = 0.7;
+
+        for (var i = 0; i < trail.length; i += 1) {
+            var point = trail[i].position,
+                speed = trail[i].speed;
+            
+            var hue = 250 + Math.round((1 - Math.min(1, speed / 10)) * 170);
+            render.context.fillStyle = 'hsl(' + hue + ', 100%, 55%)';
+            render.context.fillRect(point.x, point.y, 2, 2);
+        }
+
+        render.context.globalAlpha = 1;
+        Render.endViewTransform(render);
+
+        if (trail.length > 2000) {
+            trail.pop();
+        }
+    });
+
+    // add mouse control
+    var mouse = Mouse.create(render.canvas),
+        mouseConstraint = MouseConstraint.create(engine, {
+            mouse: mouse,
+            constraint: {
+                stiffness: 0.2,
+                render: {
+                    visible: false
+                }
+            }
+        });
+
+    World.add(world, mouseConstraint);
+
+    // keep the mouse in sync with rendering
+    render.mouse = mouse;
+
+    // fit the render viewport to the scene
+    Render.lookAt(render, {
+        min: { x: 0, y: 0 },
+        max: { x: 700, y: 600 }
+    });
+
+    // context for MatterTools.Demo
+    return {
+        engine: engine,
+        runner: runner,
+        render: render,
+        canvas: render.canvas,
+        stop: function() {
+            Matter.Render.stop(render);
+            Matter.Runner.stop(runner);
+        }
+    };
+};
+
+if (true) {
+    module.exports = Example[Object.keys(Example)[0]];
+}
+
+/***/ }),
+/* 18 */
+/***/ (function(module, exports, __webpack_require__) {
+
+var Example = Example || {};
+
+Example.events = function() {
+    var Engine = Matter.Engine,
+        Render = Matter.Render,
+        Runner = Matter.Runner,
+        Body = Matter.Body,
+        Events = Matter.Events,
+        Composite = Matter.Composite,
+        Composites = Matter.Composites,
+        Common = Matter.Common,
+        MouseConstraint = Matter.MouseConstraint,
+        Mouse = Matter.Mouse,
+        World = Matter.World,
+        Bodies = Matter.Bodies;
+
+    // create engine
+    var engine = Engine.create(),
+        world = engine.world;
+
+    // create renderer
+    var render = Render.create({
+        element: document.body,
+        engine: engine,
+        options: {
+            width: 800,
+            height: 600,
+            wireframes: false
+        }
+    });
+
+    Render.run(render);
+
+    // create runner
+    var runner = Runner.create();
+    Runner.run(runner, engine);
+
+    // an example of using composite events on the world
+    Events.on(world, 'afterAdd', function(event) {
+        console.log('added to world:', event.object);
+    });
+
+    // an example of using beforeUpdate event on an engine
+    Events.on(engine, 'beforeUpdate', function(event) {
+        var engine = event.source;
+
+        // apply random forces every 5 secs
+        if (event.timestamp % 5000 < 50)
+            shakeScene(engine);
+    });
+
+    // an example of using collisionStart event on an engine
+    Events.on(engine, 'collisionStart', function(event) {
+        var pairs = event.pairs;
+
+        // change object colours to show those starting a collision
+        for (var i = 0; i < pairs.length; i++) {
+            var pair = pairs[i];
+            pair.bodyA.render.fillStyle = '#333';
+            pair.bodyB.render.fillStyle = '#333';
+        }
+    });
+
+    // an example of using collisionActive event on an engine
+    Events.on(engine, 'collisionActive', function(event) {
+        var pairs = event.pairs;
+
+        // change object colours to show those in an active collision (e.g. resting contact)
+        for (var i = 0; i < pairs.length; i++) {
+            var pair = pairs[i];
+            pair.bodyA.render.fillStyle = '#333';
+            pair.bodyB.render.fillStyle = '#333';
+        }
+    });
+
+    // an example of using collisionEnd event on an engine
+    Events.on(engine, 'collisionEnd', function(event) {
+        var pairs = event.pairs;
+
+        // change object colours to show those ending a collision
+        for (var i = 0; i < pairs.length; i++) {
+            var pair = pairs[i];
+
+            pair.bodyA.render.fillStyle = '#222';
+            pair.bodyB.render.fillStyle = '#222';
+        }
+    });
+
+    var bodyStyle = { fillStyle: '#222' };
+
+    // scene code
+    World.add(world, [
+        Bodies.rectangle(400, 0, 800, 50, { isStatic: true, render: bodyStyle }),
+        Bodies.rectangle(400, 600, 800, 50, { isStatic: true, render: bodyStyle }),
+        Bodies.rectangle(800, 300, 50, 600, { isStatic: true, render: bodyStyle }),
+        Bodies.rectangle(0, 300, 50, 600, { isStatic: true, render: bodyStyle })
+    ]);
+
+    var stack = Composites.stack(70, 100, 9, 4, 50, 50, function(x, y) {
+        return Bodies.circle(x, y, 15, { restitution: 1, render: bodyStyle });
+    });
+    
+    World.add(world, stack);
+
+    var shakeScene = function(engine) {
+        var bodies = Composite.allBodies(engine.world);
+
+        for (var i = 0; i < bodies.length; i++) {
+            var body = bodies[i];
+
+            if (!body.isStatic && body.position.y >= 500) {
+                var forceMagnitude = 0.02 * body.mass;
+
+                Body.applyForce(body, body.position, { 
+                    x: (forceMagnitude + Common.random() * forceMagnitude) * Common.choose([1, -1]), 
+                    y: -forceMagnitude + Common.random() * -forceMagnitude
+                });
+            }
+        }
+    };
+
+    // add mouse control
+    var mouse = Mouse.create(render.canvas),
+        mouseConstraint = MouseConstraint.create(engine, {
+            mouse: mouse,
+            constraint: {
+                stiffness: 0.2,
+                render: {
+                    visible: false
+                }
+            }
+        });
+
+    World.add(world, mouseConstraint);
+
+    // keep the mouse in sync with rendering
+    render.mouse = mouse;
+
+    // an example of using mouse events on a mouse
+    Events.on(mouseConstraint, 'mousedown', function(event) {
+        var mousePosition = event.mouse.position;
+        console.log('mousedown at ' + mousePosition.x + ' ' + mousePosition.y);
+        shakeScene(engine);
+    });
+
+    // an example of using mouse events on a mouse
+    Events.on(mouseConstraint, 'mouseup', function(event) {
+        var mousePosition = event.mouse.position;
+        console.log('mouseup at ' + mousePosition.x + ' ' + mousePosition.y);
+    });
+
+    // an example of using mouse events on a mouse
+    Events.on(mouseConstraint, 'startdrag', function(event) {
+        console.log('startdrag', event);
+    });
+
+    // an example of using mouse events on a mouse
+    Events.on(mouseConstraint, 'enddrag', function(event) {
+        console.log('enddrag', event);
+    });
+
+    // fit the render viewport to the scene
+    Render.lookAt(render, {
+        min: { x: 0, y: 0 },
+        max: { x: 800, y: 600 }
+    });
+
+    // context for MatterTools.Demo
+    return {
+        engine: engine,
+        runner: runner,
+        render: render,
+        canvas: render.canvas,
+        stop: function() {
+            Matter.Render.stop(render);
+            Matter.Runner.stop(runner);
+        }
+    };
+};
+
+if (true) {
+    module.exports = Example[Object.keys(Example)[0]];
+}
+
+/***/ }),
+/* 19 */
+/***/ (function(module, exports, __webpack_require__) {
+
+var Example = Example || {};
+
+Example.friction = function() {
+    var Engine = Matter.Engine,
+        Render = Matter.Render,
+        Runner = Matter.Runner,
+        MouseConstraint = Matter.MouseConstraint,
+        Mouse = Matter.Mouse,
+        World = Matter.World,
+        Bodies = Matter.Bodies;
+
+    // create engine
+    var engine = Engine.create(),
+        world = engine.world;
+
+    // create renderer
+    var render = Render.create({
+        element: document.body,
+        engine: engine,
+        options: {
+            width: 800,
+            height: 600,
+            showVelocity: true
+        }
+    });
+
+    Render.run(render);
+
+    // create runner
+    var runner = Runner.create();
+    Runner.run(runner, engine);
+
+    // add bodies
+    World.add(world, [
+        // walls
+        Bodies.rectangle(400, 0, 800, 50, { isStatic: true }),
+        Bodies.rectangle(400, 600, 800, 50, { isStatic: true }),
+        Bodies.rectangle(800, 300, 50, 600, { isStatic: true }),
+        Bodies.rectangle(0, 300, 50, 600, { isStatic: true })
+    ]);
+
+    World.add(world, [
+        Bodies.rectangle(300, 180, 700, 20, { isStatic: true, angle: Math.PI * 0.06 }),
+        Bodies.rectangle(300, 70, 40, 40, { friction: 0.001 })
+    ]);
+
+    World.add(world, [
+        Bodies.rectangle(300, 350, 700, 20, { isStatic: true, angle: Math.PI * 0.06 }),
+        Bodies.rectangle(300, 250, 40, 40, { friction: 0.0005 })
+    ]);
+
+    World.add(world, [
+        Bodies.rectangle(300, 520, 700, 20, { isStatic: true, angle: Math.PI * 0.06 }),
+        Bodies.rectangle(300, 430, 40, 40, { friction: 0 })
+    ]);
+
+    // add mouse control
+    var mouse = Mouse.create(render.canvas),
+        mouseConstraint = MouseConstraint.create(engine, {
+            mouse: mouse,
+            constraint: {
+                stiffness: 0.2,
+                render: {
+                    visible: false
+                }
+            }
+        });
+
+    World.add(world, mouseConstraint);
+
+    // keep the mouse in sync with rendering
+    render.mouse = mouse;
+
+    // fit the render viewport to the scene
+    Render.lookAt(render, {
+        min: { x: 0, y: 0 },
+        max: { x: 800, y: 600 }
+    });
+
+    // context for MatterTools.Demo
+    return {
+        engine: engine,
+        runner: runner,
+        render: render,
+        canvas: render.canvas,
+        stop: function() {
+            Matter.Render.stop(render);
+            Matter.Runner.stop(runner);
+        }
+    };
+};
+
+if (true) {
+    module.exports = Example[Object.keys(Example)[0]];
+}
+
+/***/ }),
+/* 20 */
+/***/ (function(module, exports, __webpack_require__) {
+
+var Example = Example || {};
+
+Example.gravity = function() {
+    var Engine = Matter.Engine,
+        Render = Matter.Render,
+        Runner = Matter.Runner,
+        Composites = Matter.Composites,
+        Common = Matter.Common,
+        MouseConstraint = Matter.MouseConstraint,
+        Mouse = Matter.Mouse,
+        World = Matter.World,
+        Bodies = Matter.Bodies;
+
+    // create engine
+    var engine = Engine.create(),
+        world = engine.world;
+
+    // create renderer
+    var render = Render.create({
+        element: document.body,
+        engine: engine,
+        options: {
+            width: 800,
+            height: 600,
+            showVelocity: true,
+            showAngleIndicator: true
+        }
+    });
+
+    Render.run(render);
+
+    // create runner
+    var runner = Runner.create();
+    Runner.run(runner, engine);
+
+    // add bodies
+    World.add(world, [
+        Bodies.rectangle(400, 0, 800, 50, { isStatic: true }),
+        Bodies.rectangle(400, 600, 800, 50.5, { isStatic: true }),
+        Bodies.rectangle(800, 300, 50, 600, { isStatic: true }),
+        Bodies.rectangle(0, 300, 50, 600, { isStatic: true })
+    ]);
+
+    engine.world.gravity.y = -1;
+    
+    var stack = Composites.stack(50, 120, 11, 5, 0, 0, function(x, y) {
+        switch (Math.round(Common.random(0, 1))) {
+
+        case 0:
+            if (Common.random() < 0.8) {
+                return Bodies.rectangle(x, y, Common.random(20, 50), Common.random(20, 50));
+            } else {
+                return Bodies.rectangle(x, y, Common.random(80, 120), Common.random(20, 30));
+            }
+        case 1:
+            return Bodies.polygon(x, y, Math.round(Common.random(1, 8)), Common.random(20, 50));
+
+        }
+    });
+    
+    World.add(world, stack);
+
+    // add mouse control
+    var mouse = Mouse.create(render.canvas),
+        mouseConstraint = MouseConstraint.create(engine, {
+            mouse: mouse,
+            constraint: {
+                stiffness: 0.2,
+                render: {
+                    visible: false
+                }
+            }
+        });
+
+    World.add(world, mouseConstraint);
+
+    // keep the mouse in sync with rendering
+    render.mouse = mouse;
+
+    // fit the render viewport to the scene
+    Render.lookAt(render, {
+        min: { x: 0, y: 0 },
+        max: { x: 800, y: 600 }
+    });
+
+    // context for MatterTools.Demo
+    return {
+        engine: engine,
+        runner: runner,
+        render: render,
+        canvas: render.canvas,
+        stop: function() {
+            Matter.Render.stop(render);
+            Matter.Runner.stop(runner);
+        }
+    };
+};
+
+if (true) {
+    module.exports = Example[Object.keys(Example)[0]];
+}
+
+/***/ }),
+/* 21 */
+/***/ (function(module, exports, __webpack_require__) {
+
+var Example = Example || {};
+
+Example.gyro = function() {
+    var Engine = Matter.Engine,
+        Render = Matter.Render,
+        Runner = Matter.Runner,
+        Composites = Matter.Composites,
+        Common = Matter.Common,
+        MouseConstraint = Matter.MouseConstraint,
+        Mouse = Matter.Mouse,
+        World = Matter.World,
+        Bodies = Matter.Bodies;
+
+    // create engine
+    var engine = Engine.create(),
+        world = engine.world;
+
+    // create renderer
+    var render = Render.create({
+        element: document.body,
+        engine: engine,
+        options: {
+            width: 800,
+            height: 600,
+            showAngleIndicator: true
+        }
+    });
+
+    Render.run(render);
+
+    // create runner
+    var runner = Runner.create();
+    Runner.run(runner, engine);
+
+    // add bodies
+    var stack = Composites.stack(20, 20, 10, 5, 0, 0, function(x, y) {
+        var sides = Math.round(Common.random(1, 8));
+
+        // triangles can be a little unstable, so avoid until fixed
+        sides = (sides === 3) ? 4 : sides;
+
+        // round the edges of some bodies
+        var chamfer = null;
+        if (sides > 2 && Common.random() > 0.7) {
+            chamfer = {
+                radius: 10
+            };
+        }
+
+        switch (Math.round(Common.random(0, 1))) {
+        case 0:
+            if (Common.random() < 0.8) {
+                return Bodies.rectangle(x, y, Common.random(25, 50), Common.random(25, 50), { chamfer: chamfer });
+            } else {
+                return Bodies.rectangle(x, y, Common.random(80, 120), Common.random(25, 30), { chamfer: chamfer });
+            }
+        case 1:
+            return Bodies.polygon(x, y, sides, Common.random(25, 50), { chamfer: chamfer });
+        }
+    });
+
+    World.add(world, [
+        stack,
+        Bodies.rectangle(400, 0, 800, 50, { isStatic: true }),
+        Bodies.rectangle(400, 600, 800, 50, { isStatic: true }),
+        Bodies.rectangle(800, 300, 50, 600, { isStatic: true }),
+        Bodies.rectangle(0, 300, 50, 600, { isStatic: true })
+    ]);
+
+    // add gyro control
+    if (typeof window !== 'undefined') {
+        var updateGravity = function(event) {
+            var orientation = typeof window.orientation !== 'undefined' ? window.orientation : 0,
+                gravity = engine.world.gravity;
+
+            if (orientation === 0) {
+                gravity.x = Common.clamp(event.gamma, -90, 90) / 90;
+                gravity.y = Common.clamp(event.beta, -90, 90) / 90;
+            } else if (orientation === 180) {
+                gravity.x = Common.clamp(event.gamma, -90, 90) / 90;
+                gravity.y = Common.clamp(-event.beta, -90, 90) / 90;
+            } else if (orientation === 90) {
+                gravity.x = Common.clamp(event.beta, -90, 90) / 90;
+                gravity.y = Common.clamp(-event.gamma, -90, 90) / 90;
+            } else if (orientation === -90) {
+                gravity.x = Common.clamp(-event.beta, -90, 90) / 90;
+                gravity.y = Common.clamp(event.gamma, -90, 90) / 90;
+            }
+        };
+
+        window.addEventListener('deviceorientation', updateGravity);
+    }
+
+    // add mouse control
+    var mouse = Mouse.create(render.canvas),
+        mouseConstraint = MouseConstraint.create(engine, {
+            mouse: mouse,
+            constraint: {
+                stiffness: 0.2,
+                render: {
+                    visible: false
+                }
+            }
+        });
+
+    World.add(world, mouseConstraint);
+
+    // keep the mouse in sync with rendering
+    render.mouse = mouse;
+
+    // fit the render viewport to the scene
+    Render.lookAt(render, {
+        min: { x: 0, y: 0 },
+        max: { x: 800, y: 600 }
+    });
+
+    // context for MatterTools.Demo
+    return {
+        engine: engine,
+        runner: runner,
+        render: render,
+        canvas: render.canvas,
+        stop: function() {
+            Matter.Render.stop(render);
+            Matter.Runner.stop(runner);
+            if (typeof window !== 'undefined') {
+                window.removeEventListener('deviceorientation', updateGravity);
+            }
+        }
+    };
+};
+
+if (true) {
+    module.exports = Example[Object.keys(Example)[0]];
+}
+
+/***/ }),
+/* 22 */
+/***/ (function(module, exports, __webpack_require__) {
+
+var Example = Example || {};
+
+Example.manipulation = function() {
+    var Engine = Matter.Engine,
+        Render = Matter.Render,
+        Runner = Matter.Runner,
+        Body = Matter.Body,
+        Events = Matter.Events,
+        MouseConstraint = Matter.MouseConstraint,
+        Mouse = Matter.Mouse,
+        World = Matter.World,
+        Bodies = Matter.Bodies;
+
+    // create engine
+    var engine = Engine.create(),
+        world = engine.world;
+
+    // create renderer
+    var render = Render.create({
+        element: document.body,
+        engine: engine,
+        options: {
+            width: 800,
+            height: 600,
+            showAxes: true,
+            showCollisions: true,
+            showConvexHulls: true
+        }
+    });
+
+    Render.run(render);
+
+    // create runner
+    var runner = Runner.create();
+    Runner.run(runner, engine);
+
+    // add bodies
+    var bodyA = Bodies.rectangle(100, 200, 50, 50, { isStatic: true }),
+        bodyB = Bodies.rectangle(200, 200, 50, 50),
+        bodyC = Bodies.rectangle(300, 200, 50, 50),
+        bodyD = Bodies.rectangle(400, 200, 50, 50),
+        bodyE = Bodies.rectangle(550, 200, 50, 50),
+        bodyF = Bodies.rectangle(700, 200, 50, 50),
+        bodyG = Bodies.circle(400, 100, 25),
+        partA = Bodies.rectangle(600, 200, 120, 50),
+        partB = Bodies.rectangle(660, 200, 50, 190),
+        compound = Body.create({
+            parts: [partA, partB],
+            isStatic: true
+        });
+
+    World.add(world, [bodyA, bodyB, bodyC, bodyD, bodyE, bodyF, bodyG, compound]);
+
+    World.add(world, [
+        // walls
+        Bodies.rectangle(400, 0, 800, 50, { isStatic: true }),
+        Bodies.rectangle(400, 600, 800, 50, { isStatic: true }),
+        Bodies.rectangle(800, 300, 50, 600, { isStatic: true }),
+        Bodies.rectangle(0, 300, 50, 600, { isStatic: true })
+    ]);
+
+    var counter = 0,
+        scaleFactor = 1.01;
+
+    Events.on(engine, 'beforeUpdate', function(event) {
+        counter += 1;
+
+        if (counter === 40)
+            Body.setStatic(bodyG, true);
+
+        if (scaleFactor > 1) {
+            Body.scale(bodyF, scaleFactor, scaleFactor);
+            Body.scale(compound, 0.995, 0.995);
+
+            // modify bodyE vertices
+            bodyE.vertices[0].x -= 0.2;
+            bodyE.vertices[0].y -= 0.2;
+            bodyE.vertices[1].x += 0.2;
+            bodyE.vertices[1].y -= 0.2;
+            Body.setVertices(bodyE, bodyE.vertices);
+        }
+
+        // make bodyA move up and down
+        // body is static so must manually update velocity for friction to work
+        var py = 300 + 100 * Math.sin(engine.timing.timestamp * 0.002);
+        Body.setVelocity(bodyA, { x: 0, y: py - bodyA.position.y });
+        Body.setPosition(bodyA, { x: 100, y: py });
+
+        // make compound body move up and down and rotate constantly
+        Body.setVelocity(compound, { x: 0, y: py - compound.position.y });
+        Body.setAngularVelocity(compound, 0.02);
+        Body.setPosition(compound, { x: 600, y: py });
+        Body.rotate(compound, 0.02);
+
+        // every 1.5 sec
+        if (counter >= 60 * 1.5) {
+            Body.setVelocity(bodyB, { x: 0, y: -10 });
+            Body.setAngle(bodyC, -Math.PI * 0.26);
+            Body.setAngularVelocity(bodyD, 0.2);
+
+            // reset counter
+            counter = 0;
+            scaleFactor = 1;
+        }
+    });
+
+    // add mouse control
+    var mouse = Mouse.create(render.canvas),
+        mouseConstraint = MouseConstraint.create(engine, {
+            mouse: mouse,
+            constraint: {
+                stiffness: 0.2,
+                render: {
+                    visible: false
+                }
+            }
+        });
+
+    World.add(world, mouseConstraint);
+
+    // keep the mouse in sync with rendering
+    render.mouse = mouse;
+
+    // fit the render viewport to the scene
+    Render.lookAt(render, {
+        min: { x: 0, y: 0 },
+        max: { x: 800, y: 600 }
+    });
+
+    // context for MatterTools.Demo
+    return {
+        engine: engine,
+        runner: runner,
+        render: render,
+        canvas: render.canvas,
+        stop: function() {
+            Matter.Render.stop(render);
+            Matter.Runner.stop(runner);
+        }
+    };
+};
+
+if (true) {
+    module.exports = Example[Object.keys(Example)[0]];
+}
+
+/***/ }),
+/* 23 */
+/***/ (function(module, exports, __webpack_require__) {
+
+var Example = Example || {};
+
+Example.mixed = function() {
+    var Engine = Matter.Engine,
+        Render = Matter.Render,
+        Runner = Matter.Runner,
+        Composites = Matter.Composites,
+        Common = Matter.Common,
+        MouseConstraint = Matter.MouseConstraint,
+        Mouse = Matter.Mouse,
+        World = Matter.World,
+        Bodies = Matter.Bodies;
+
+    // create engine
+    var engine = Engine.create(),
+        world = engine.world;
+
+    // create renderer
+    var render = Render.create({
+        element: document.body,
+        engine: engine,
+        options: {
+            width: 800,
+            height: 600,
+            showAngleIndicator: true,
+        }
+    });
+
+    Render.run(render);
+
+    // create runner
+    var runner = Runner.create();
+    Runner.run(runner, engine);
+
+    // add bodies
+    var stack = Composites.stack(20, 20, 10, 5, 0, 0, function(x, y) {
+        var sides = Math.round(Common.random(1, 8));
+
+        // triangles can be a little unstable, so avoid until fixed
+        sides = (sides === 3) ? 4 : sides;
+
+        // round the edges of some bodies
+        var chamfer = null;
+        if (sides > 2 && Common.random() > 0.7) {
+            chamfer = {
+                radius: 10
+            };
+        }
+
+        switch (Math.round(Common.random(0, 1))) {
+        case 0:
+            if (Common.random() < 0.8) {
+                return Bodies.rectangle(x, y, Common.random(25, 50), Common.random(25, 50), { chamfer: chamfer });
+            } else {
+                return Bodies.rectangle(x, y, Common.random(80, 120), Common.random(25, 30), { chamfer: chamfer });
+            }
+        case 1:
+            return Bodies.polygon(x, y, sides, Common.random(25, 50), { chamfer: chamfer });
+        }
+    });
+
+    World.add(world, stack);
+
+    World.add(world, [
+        // walls
+        Bodies.rectangle(400, 0, 800, 50, { isStatic: true }),
+        Bodies.rectangle(400, 600, 800, 50, { isStatic: true }),
+        Bodies.rectangle(800, 300, 50, 600, { isStatic: true }),
+        Bodies.rectangle(0, 300, 50, 600, { isStatic: true })
+    ]);
+
+    // add mouse control
+    var mouse = Mouse.create(render.canvas),
+        mouseConstraint = MouseConstraint.create(engine, {
+            mouse: mouse,
+            constraint: {
+                stiffness: 0.2,
+                render: {
+                    visible: false
+                }
+            }
+        });
+
+    World.add(world, mouseConstraint);
+
+    // keep the mouse in sync with rendering
+    render.mouse = mouse;
+
+    // fit the render viewport to the scene
+    Render.lookAt(render, {
+        min: { x: 0, y: 0 },
+        max: { x: 800, y: 600 }
+    });
+
+    // context for MatterTools.Demo
+    return {
+        engine: engine,
+        runner: runner,
+        render: render,
+        canvas: render.canvas,
+        stop: function() {
+            Matter.Render.stop(render);
+            Matter.Runner.stop(runner);
+        }
+    };
+};
+
+if (true) {
+    module.exports = Example[Object.keys(Example)[0]];
+}
+
+/***/ }),
+/* 24 */
+/***/ (function(module, exports, __webpack_require__) {
+
+var Example = Example || {};
+
+Example.newtonsCradle = function() {
+    var Engine = Matter.Engine,
+        Render = Matter.Render,
+        Runner = Matter.Runner,
+        Body = Matter.Body,
+        Composites = Matter.Composites,
+        MouseConstraint = Matter.MouseConstraint,
+        Mouse = Matter.Mouse,
+        World = Matter.World;
+
+    // create engine
+    var engine = Engine.create(),
+        world = engine.world;
+
+    // create renderer
+    var render = Render.create({
+        element: document.body,
+        engine: engine,
+        options: {
+            width: 800,
+            height: 600,
+            showVelocity: true
+        }
+    });
+
+    Render.run(render);
+
+    // create runner
+    var runner = Runner.create();
+    Runner.run(runner, engine);
+
+    // add bodies
+    var cradle = Composites.newtonsCradle(280, 100, 5, 30, 200);
+    World.add(world, cradle);
+    Body.translate(cradle.bodies[0], { x: -180, y: -100 });
+    
+    cradle = Composites.newtonsCradle(280, 380, 7, 20, 140);
+    World.add(world, cradle);
+    Body.translate(cradle.bodies[0], { x: -140, y: -100 });
+
+    // add mouse control
+    var mouse = Mouse.create(render.canvas),
+        mouseConstraint = MouseConstraint.create(engine, {
+            mouse: mouse,
+            constraint: {
+                stiffness: 0.2,
+                render: {
+                    visible: false
+                }
+            }
+        });
+
+    World.add(world, mouseConstraint);
+
+    // keep the mouse in sync with rendering
+    render.mouse = mouse;
+
+    // fit the render viewport to the scene
+    Render.lookAt(render, {
+        min: { x: 0, y: 50 },
+        max: { x: 800, y: 600 }
+    });
+
+    // context for MatterTools.Demo
+    return {
+        engine: engine,
+        runner: runner,
+        render: render,
+        canvas: render.canvas,
+        stop: function() {
+            Matter.Render.stop(render);
+            Matter.Runner.stop(runner);
+        }
+    };
+};
+
+if (true) {
+    module.exports = Example[Object.keys(Example)[0]];
+}
+
+/***/ }),
+/* 25 */
+/***/ (function(module, exports, __webpack_require__) {
+
+var Example = Example || {};
+
+Example.ragdoll = function() {
+    var Engine = Matter.Engine,
+        Events = Matter.Events,
+        Render = Matter.Render,
+        Runner = Matter.Runner,
+        Body = Matter.Body,
+        Common = Matter.Common,
+        Composite = Matter.Composite,
+        Composites = Matter.Composites,
+        Constraint = Matter.Constraint,
+        MouseConstraint = Matter.MouseConstraint,
+        Mouse = Matter.Mouse,
+        World = Matter.World,
+        Bodies = Matter.Bodies,
+        Vector = Matter.Vector;
+
+    // create engine
+    var engine = Engine.create(),
+        world = engine.world;
+
+    // create renderer
+    var render = Render.create({
+        element: document.body,
+        engine: engine,
+        options: {
+            width: 800,
+            height: 600,
+            showAngleIndicator: true,
+            background: '#0f0f13'
+        }
+    });
+
+    Render.run(render);
+
+    // create runner
+    var runner = Runner.create();
+    Runner.run(runner, engine);
+
+    // create stairs
+    var stairCount = (render.bounds.max.y - render.bounds.min.y) / 50;
+
+    var stack = Composites.stack(0, 0, stairCount + 2, 1, 0, 0, function(x, y, column) {
+        return Bodies.rectangle(x - 50, y + column * 50, 100, 1000, {
+            isStatic: true,
+            render: {
+                fillStyle: '#222'
+            }
+        });
+    });
+
+    // create obstacles
+    var obstacles = Composites.stack(300, 0, 15, 3, 10, 10, function(x, y, column) {
+        var sides = Math.round(Common.random(1, 8)),
+            options = {
+                render: {
+                    fillStyle: Common.choose(['#006BA6', '#0496FF', '#D81159', '#8F2D56'])
+                }
+            };
+
+        switch (Math.round(Common.random(0, 1))) {
+        case 0:
+            if (Common.random() < 0.8) {
+                return Bodies.rectangle(x, y, Common.random(25, 50), Common.random(25, 50), options);
+            } else {
+                return Bodies.rectangle(x, y, Common.random(80, 120), Common.random(25, 30), options);
+            }
+        case 1:
+            return Bodies.polygon(x, y, sides, Common.random(25, 50), options);
+        }
+    });
+
+    var ragdolls = Composite.create();
+
+    for (var i = 0; i < 1; i += 1) {
+        var ragdoll = Example.ragdoll.ragdoll(200, -1000 * i, 1.3);
+
+        Composite.add(ragdolls, ragdoll);
+    }
+
+    World.add(world, [stack, obstacles, ragdolls]);
+
+    var timeScaleTarget = 1,
+        counter = 0;
+
+    Events.on(engine, 'afterUpdate', function(event) {
+        // tween the timescale for slow-mo
+        if (mouse.button === -1) {
+            engine.timing.timeScale += (timeScaleTarget - engine.timing.timeScale) * 0.05;
+        } else {
+            engine.timing.timeScale = 1;
+        }
+
+        counter += 1;
+
+        // every 1.5 sec
+        if (counter >= 60 * 1.5) {
+
+            // flip the timescale
+            if (timeScaleTarget < 1) {
+                timeScaleTarget = 1;
+            } else {
+                timeScaleTarget = 0.05;
+            }
+
+            // reset counter
+            counter = 0;
+        }
+
+        for (var i = 0; i < stack.bodies.length; i += 1) {
+            var body = stack.bodies[i];
+
+            // animate stairs
+            Body.translate(body, {
+                x: -0.5 * engine.timing.timeScale,
+                y: -0.5 * engine.timing.timeScale
+            });
+
+            // loop stairs when they go off screen
+            if (body.position.x < -50) {
+                Body.setPosition(body, {
+                    x: 50 * (stack.bodies.length - 1),
+                    y: 25 + render.bounds.max.y + (body.bounds.max.y - body.bounds.min.y) * 0.5
+                });
+                
+                Body.setVelocity(body, {
+                    x: 0,
+                    y: 0
+                });
+            }
+        }
+
+        for (i = 0; i < ragdolls.composites.length; i += 1) {
+            var ragdoll = ragdolls.composites[i],
+                bounds = Composite.bounds(ragdoll);
+
+            // move ragdolls back to the top of the screen
+            if (bounds.min.y > render.bounds.max.y + 100) {
+                Composite.translate(ragdoll, {
+                    x: -bounds.min.x * 0.9,
+                    y: -render.bounds.max.y - 400
+                });
+            }
+        }
+
+        for (i = 0; i < obstacles.bodies.length; i += 1) {
+            var body = obstacles.bodies[i],
+                bounds = body.bounds;
+
+            // move obstacles back to the top of the screen
+            if (bounds.min.y > render.bounds.max.y + 100) {
+                Body.translate(body, {
+                    x: -bounds.min.x,
+                    y: -render.bounds.max.y - 300
+                });
+            }
+        }
+    });
+
+    // add mouse control and make the mouse revolute
+    var mouse = Mouse.create(render.canvas),
+        mouseConstraint = MouseConstraint.create(engine, {
+            mouse: mouse,
+            constraint: {
+                stiffness: 0.6,
+                length: 0,
+                angularStiffness: 0,
+                render: {
+                    visible: false
+                }
+            }
+        });
+
+    World.add(world, mouseConstraint);
+
+    // keep the mouse in sync with rendering
+    render.mouse = mouse;
+
+    // fit the render viewport to the scene
+    Render.lookAt(render, {
+        min: { x: 0, y: 0 },
+        max: { x: 800, y: 600 }
+    });
+
+    // context for MatterTools.Demo
+    return {
+        engine: engine,
+        runner: runner,
+        render: render,
+        canvas: render.canvas,
+        stop: function() {
+            Matter.Render.stop(render);
+            Matter.Runner.stop(runner);
+        }
+    };
+};
+
+Example.ragdoll.ragdoll = function(x, y, scale, options) {
+    scale = typeof scale === 'undefined' ? 1 : scale;
+
+    var Body = Matter.Body,
+        Bodies = Matter.Bodies,
+        Constraint = Matter.Constraint,
+        Composite = Matter.Composite,
+        Common = Matter.Common;
+
+    var headOptions = Common.extend({
+        label: 'head',
+        collisionFilter: {
+            group: Body.nextGroup(true)
+        },
+        chamfer: {
+            radius: [15 * scale, 15 * scale, 15 * scale, 15 * scale]
+        },
+        render: {
+            fillStyle: '#FFBC42'
+        }
+    }, options);
+
+    var chestOptions = Common.extend({
+        label: 'chest',
+        collisionFilter: {
+            group: Body.nextGroup(true)
+        },
+        chamfer: {
+            radius: [20 * scale, 20 * scale, 26 * scale, 26 * scale]
+        },
+        render: {
+            fillStyle: '#E0A423'
+        }
+    }, options);
+
+    var leftArmOptions = Common.extend({
+        label: 'left-arm',
+        collisionFilter: {
+            group: Body.nextGroup(true)
+        },
+        chamfer: {
+            radius: 10 * scale
+        },
+        render: {
+            fillStyle: '#FFBC42'
+        }
+    }, options);
+
+    var leftLowerArmOptions = Common.extend({}, leftArmOptions, {
+        render: {
+            fillStyle: '#E59B12'
+        }
+    });
+
+    var rightArmOptions = Common.extend({
+        label: 'right-arm',
+        collisionFilter: {
+            group: Body.nextGroup(true)
+        },
+        chamfer: {
+            radius: 10 * scale
+        },
+        render: {
+            fillStyle: '#FFBC42'
+        }
+    }, options);
+
+    var rightLowerArmOptions = Common.extend({}, rightArmOptions, {
+        render: {
+            fillStyle: '#E59B12'
+        }
+    });
+
+    var leftLegOptions = Common.extend({
+        label: 'left-leg',
+        collisionFilter: {
+            group: Body.nextGroup(true)
+        },
+        chamfer: {
+            radius: 10 * scale
+        },
+        render: {
+            fillStyle: '#FFBC42'
+        }
+    }, options);
+
+    var leftLowerLegOptions = Common.extend({}, leftLegOptions, {
+        render: {
+            fillStyle: '#E59B12'
+        }
+    });
+
+    var rightLegOptions = Common.extend({
+        label: 'right-leg',
+        collisionFilter: {
+            group: Body.nextGroup(true)
+        },
+        chamfer: {
+            radius: 10 * scale
+        },
+        render: {
+            fillStyle: '#FFBC42'
+        }
+    }, options);
+
+    var rightLowerLegOptions = Common.extend({}, rightLegOptions, {
+        render: {
+            fillStyle: '#E59B12'
+        }
+    });
+
+    var head = Bodies.rectangle(x, y - 60 * scale, 34 * scale, 40 * scale, headOptions);
+    var chest = Bodies.rectangle(x, y, 55 * scale, 80 * scale, chestOptions);
+    var rightUpperArm = Bodies.rectangle(x + 39 * scale, y - 15 * scale, 20 * scale, 40 * scale, rightArmOptions);
+    var rightLowerArm = Bodies.rectangle(x + 39 * scale, y + 25 * scale, 20 * scale, 60 * scale, rightLowerArmOptions);
+    var leftUpperArm = Bodies.rectangle(x - 39 * scale, y - 15 * scale, 20 * scale, 40 * scale, leftArmOptions);
+    var leftLowerArm = Bodies.rectangle(x - 39 * scale, y + 25 * scale, 20 * scale, 60 * scale, leftLowerArmOptions);
+    var leftUpperLeg = Bodies.rectangle(x - 20 * scale, y + 57 * scale, 20 * scale, 40 * scale, leftLegOptions);
+    var leftLowerLeg = Bodies.rectangle(x - 20 * scale, y + 97 * scale, 20 * scale, 60 * scale, leftLowerLegOptions);
+    var rightUpperLeg = Bodies.rectangle(x + 20 * scale, y + 57 * scale, 20 * scale, 40 * scale, rightLegOptions);
+    var rightLowerLeg = Bodies.rectangle(x + 20 * scale, y + 97 * scale, 20 * scale, 60 * scale, rightLowerLegOptions);
+
+    var chestToRightUpperArm = Constraint.create({
+        bodyA: chest,
+        pointA: {
+            x: 24 * scale,
+            y: -23 * scale
+        },
+        pointB: {
+            x: 0,
+            y: -8 * scale
+        },
+        bodyB: rightUpperArm,
+        stiffness: 0.6,
+        render: {
+            visible: false
+        }
+    });
+
+    var chestToLeftUpperArm = Constraint.create({
+        bodyA: chest,
+        pointA: {
+            x: -24 * scale,
+            y: -23 * scale
+        },
+        pointB: {
+            x: 0,
+            y: -8 * scale
+        },
+        bodyB: leftUpperArm,
+        stiffness: 0.6,
+        render: {
+            visible: false
+        }
+    });
+
+    var chestToLeftUpperLeg = Constraint.create({
+        bodyA: chest,
+        pointA: {
+            x: -10 * scale,
+            y: 30 * scale
+        },
+        pointB: {
+            x: 0,
+            y: -10 * scale
+        },
+        bodyB: leftUpperLeg,
+        stiffness: 0.6,
+        render: {
+            visible: false
+        }
+    });
+
+    var chestToRightUpperLeg = Constraint.create({
+        bodyA: chest,
+        pointA: {
+            x: 10 * scale,
+            y: 30 * scale
+        },
+        pointB: {
+            x: 0,
+            y: -10 * scale
+        },
+        bodyB: rightUpperLeg,
+        stiffness: 0.6,
+        render: {
+            visible: false
+        }
+    });
+
+    var upperToLowerRightArm = Constraint.create({
+        bodyA: rightUpperArm,
+        bodyB: rightLowerArm,
+        pointA: {
+            x: 0,
+            y: 15 * scale
+        },
+        pointB: {
+            x: 0,
+            y: -25 * scale
+        },
+        stiffness: 0.6,
+        render: {
+            visible: false
+        }
+    });
+
+    var upperToLowerLeftArm = Constraint.create({
+        bodyA: leftUpperArm,
+        bodyB: leftLowerArm,
+        pointA: {
+            x: 0,
+            y: 15 * scale
+        },
+        pointB: {
+            x: 0,
+            y: -25 * scale
+        },
+        stiffness: 0.6,
+        render: {
+            visible: false
+        }
+    });
+
+    var upperToLowerLeftLeg = Constraint.create({
+        bodyA: leftUpperLeg,
+        bodyB: leftLowerLeg,
+        pointA: {
+            x: 0,
+            y: 20 * scale
+        },
+        pointB: {
+            x: 0,
+            y: -20 * scale
+        },
+        stiffness: 0.6,
+        render: {
+            visible: false
+        }
+    });
+
+    var upperToLowerRightLeg = Constraint.create({
+        bodyA: rightUpperLeg,
+        bodyB: rightLowerLeg,
+        pointA: {
+            x: 0,
+            y: 20 * scale
+        },
+        pointB: {
+            x: 0,
+            y: -20 * scale
+        },
+        stiffness: 0.6,
+        render: {
+            visible: false
+        }
+    });
+
+    var headContraint = Constraint.create({
+        bodyA: head,
+        pointA: {
+            x: 0,
+            y: 25 * scale
+        },
+        pointB: {
+            x: 0,
+            y: -35 * scale
+        },
+        bodyB: chest,
+        stiffness: 0.6,
+        render: {
+            visible: false
+        }
+    });
+
+    var legToLeg = Constraint.create({
+        bodyA: leftLowerLeg,
+        bodyB: rightLowerLeg,
+        stiffness: 0.01,
+        render: {
+            visible: false
+        }
+    });
+
+    var person = Composite.create({
+        bodies: [
+            chest, head, leftLowerArm, leftUpperArm, 
+            rightLowerArm, rightUpperArm, leftLowerLeg, 
+            rightLowerLeg, leftUpperLeg, rightUpperLeg
+        ],
+        constraints: [
+            upperToLowerLeftArm, upperToLowerRightArm, chestToLeftUpperArm, 
+            chestToRightUpperArm, headContraint, upperToLowerLeftLeg, 
+            upperToLowerRightLeg, chestToLeftUpperLeg, chestToRightUpperLeg,
+            legToLeg
+        ]
+    });
+
+    return person;
+};
+
+if (true) {
+    module.exports = Example[Object.keys(Example)[0]];
+}
+
+/***/ }),
+/* 26 */
+/***/ (function(module, exports, __webpack_require__) {
+
+var Example = Example || {};
+
+Example.pyramid = function() {
+    var Engine = Matter.Engine,
+        Render = Matter.Render,
+        Runner = Matter.Runner,
+        Composites = Matter.Composites,
+        MouseConstraint = Matter.MouseConstraint,
+        Mouse = Matter.Mouse,
+        World = Matter.World,
+        Bodies = Matter.Bodies;
+
+    // create engine
+    var engine = Engine.create(),
+        world = engine.world;
+
+    // create renderer
+    var render = Render.create({
+        element: document.body,
+        engine: engine,
+        options: {
+            width: 800,
+            height: 600,
+            showAngleIndicator: true
+        }
+    });
+
+    Render.run(render);
+
+    // create runner
+    var runner = Runner.create();
+    Runner.run(runner, engine);
+
+    // add bodies
+    var stack = Composites.pyramid(100, 258, 15, 10, 0, 0, function(x, y) {
+        return Bodies.rectangle(x, y, 40, 40);
+    });
+    
+    World.add(world, [
+        stack,
+        // walls
+        Bodies.rectangle(400, 0, 800, 50, { isStatic: true }),
+        Bodies.rectangle(800, 300, 50, 600, { isStatic: true }),
+        Bodies.rectangle(0, 300, 50, 600, { isStatic: true }),
+        Bodies.rectangle(400, 605, 800, 50, { isStatic: true })
+    ]);
+
+    // add mouse control
+    var mouse = Mouse.create(render.canvas),
+        mouseConstraint = MouseConstraint.create(engine, {
+            mouse: mouse,
+            constraint: {
+                stiffness: 0.2,
+                render: {
+                    visible: false
+                }
+            }
+        });
+
+    World.add(world, mouseConstraint);
+
+    // keep the mouse in sync with rendering
+    render.mouse = mouse;
+
+    // fit the render viewport to the scene
+    Render.lookAt(render, {
+        min: { x: 0, y: 0 },
+        max: { x: 800, y: 600 }
+    });
+
+    // context for MatterTools.Demo
+    return {
+        engine: engine,
+        runner: runner,
+        render: render,
+        canvas: render.canvas,
+        stop: function() {
+            Matter.Render.stop(render);
+            Matter.Runner.stop(runner);
+        }
+    };
+};
+
+if (true) {
+    module.exports = Example[Object.keys(Example)[0]];
+}
+
+/***/ }),
+/* 27 */
+/***/ (function(module, exports, __webpack_require__) {
+
+var Example = Example || {};
+
+Example.raycasting = function() {
+    var Engine = Matter.Engine,
+        Render = Matter.Render,
+        Runner = Matter.Runner,
+        Composite = Matter.Composite,
+        Composites = Matter.Composites,
+        Common = Matter.Common,
+        Query = Matter.Query,
+        MouseConstraint = Matter.MouseConstraint,
+        Mouse = Matter.Mouse,
+        Events = Matter.Events,
+        World = Matter.World,
+        Vertices = Matter.Vertices,
+        Bodies = Matter.Bodies;
+
+    // create engine
+    var engine = Engine.create(),
+        world = engine.world;
+
+    // create renderer
+    var render = Render.create({
+        element: document.body,
+        engine: engine,
+        options: {
+            width: 800,
+            height: 600,
+            showAngleIndicator: true
+        }
+    });
+
+    Render.run(render);
+
+    // create runner
+    var runner = Runner.create();
+    Runner.run(runner, engine);
+
+    // add bodies
+    var stack = Composites.stack(20, 20, 12, 4, 0, 0, function(x, y) {
+        switch (Math.round(Common.random(0, 1))) {
+
+        case 0:
+            if (Common.random() < 0.8) {
+                return Bodies.rectangle(x, y, Common.random(20, 50), Common.random(20, 50));
+            } else {
+                return Bodies.rectangle(x, y, Common.random(80, 120), Common.random(20, 30));
+            }
+        case 1:
+            var sides = Math.round(Common.random(1, 8));
+            sides = (sides === 3) ? 4 : sides;
+            return Bodies.polygon(x, y, sides, Common.random(20, 50));
+        }
+    });
+
+    var star = Vertices.fromPath('50 0 63 38 100 38 69 59 82 100 50 75 18 100 31 59 0 38 37 38'),
+        concave = Bodies.fromVertices(200, 200, star);
+    
+    World.add(world, [
+        stack, 
+        concave,
+        // walls
+        Bodies.rectangle(400, 0, 800, 50, { isStatic: true }),
+        Bodies.rectangle(400, 600, 800, 50, { isStatic: true }),
+        Bodies.rectangle(800, 300, 50, 600, { isStatic: true }),
+        Bodies.rectangle(0, 300, 50, 600, { isStatic: true })
+    ]);
+
+    Events.on(render, 'afterRender', function() {
+        var mouse = mouseConstraint.mouse,
+            context = render.context,
+            bodies = Composite.allBodies(engine.world),
+            startPoint = { x: 400, y: 100 },
+            endPoint = mouse.position;
+
+        var collisions = Query.ray(bodies, startPoint, endPoint);
+
+        Render.startViewTransform(render);
+
+        context.beginPath();
+        context.moveTo(startPoint.x, startPoint.y);
+        context.lineTo(endPoint.x, endPoint.y);
+        if (collisions.length > 0) {
+            context.strokeStyle = '#fff';
+        } else {
+            context.strokeStyle = '#555';
+        }
+        context.lineWidth = 0.5;
+        context.stroke();
+
+        for (var i = 0; i < collisions.length; i++) {
+            var collision = collisions[i];
+            context.rect(collision.bodyA.position.x - 4.5, collision.bodyA.position.y - 4.5, 8, 8);
+        }
+
+        context.fillStyle = 'rgba(255,165,0,0.7)';
+        context.fill();
+
+        Render.endViewTransform(render);
+    });
+
+    // add mouse control
+    var mouse = Mouse.create(render.canvas),
+        mouseConstraint = MouseConstraint.create(engine, {
+            mouse: mouse,
+            constraint: {
+                stiffness: 0.2,
+                render: {
+                    visible: false
+                }
+            }
+        });
+
+    World.add(world, mouseConstraint);
+
+    // keep the mouse in sync with rendering
+    render.mouse = mouse;
+
+    // fit the render viewport to the scene
+    Render.lookAt(render, {
+        min: { x: 0, y: 0 },
+        max: { x: 800, y: 600 }
+    });
+
+    // context for MatterTools.Demo
+    return {
+        engine: engine,
+        runner: runner,
+        render: render,
+        canvas: render.canvas,
+        stop: function() {
+            Matter.Render.stop(render);
+            Matter.Runner.stop(runner);
+        }
+    };
+};
+
+if (true) {
+    module.exports = Example[Object.keys(Example)[0]];
+}
+
+/***/ }),
+/* 28 */
+/***/ (function(module, exports, __webpack_require__) {
+
+var Example = Example || {};
+
+Example.restitution = function() {
+    var Engine = Matter.Engine,
+        Render = Matter.Render,
+        Runner = Matter.Runner,
+        MouseConstraint = Matter.MouseConstraint,
+        Mouse = Matter.Mouse,
+        World = Matter.World,
+        Bodies = Matter.Bodies;
+
+    // create engine
+    var engine = Engine.create(),
+        world = engine.world;
+
+    // create renderer
+    var render = Render.create({
+        element: document.body,
+        engine: engine,
+        options: {
+            width: 800,
+            height: 600,
+            showAngleIndicator: true,
+            showCollisions: true,
+            showVelocity: true
+        }
+    });
+
+    Render.run(render);
+
+    // create runner
+    var runner = Runner.create();
+    Runner.run(runner, engine);
+
+    // add bodies
+    var rest = 0.9, 
+        space = 600 / 5;
+    
+    World.add(world, [
+        Bodies.rectangle(100 + space * 0, 150, 50, 50, { restitution: rest }),
+        Bodies.rectangle(100 + space * 1, 150, 50, 50, { restitution: rest, angle: -Math.PI * 0.15 }),
+        Bodies.rectangle(100 + space * 2, 150, 50, 50, { restitution: rest, angle: -Math.PI * 0.25 }),
+        Bodies.circle(100 + space * 3, 150, 25, { restitution: rest }),
+        Bodies.rectangle(100 + space * 5, 150, 180, 20, { restitution: rest, angle: -Math.PI * 0.5 }),
+        // walls
+        Bodies.rectangle(400, 0, 800, 50, { isStatic: true }),
+        Bodies.rectangle(400, 600, 800, 50, { isStatic: true }),
+        Bodies.rectangle(800, 300, 50, 600, { isStatic: true }),
+        Bodies.rectangle(0, 300, 50, 600, { isStatic: true })
+    ]);
+
+    // add mouse control
+    var mouse = Mouse.create(render.canvas),
+        mouseConstraint = MouseConstraint.create(engine, {
+            mouse: mouse,
+            constraint: {
+                stiffness: 0.2,
+                render: {
+                    visible: false
+                }
+            }
+        });
+
+    World.add(world, mouseConstraint);
+
+    // keep the mouse in sync with rendering
+    render.mouse = mouse;
+
+    // fit the render viewport to the scene
+    Render.lookAt(render, {
+        min: { x: 0, y: 0 },
+        max: { x: 800, y: 600 }
+    });
+
+    // context for MatterTools.Demo
+    return {
+        engine: engine,
+        runner: runner,
+        render: render,
+        canvas: render.canvas,
+        stop: function() {
+            Matter.Render.stop(render);
+            Matter.Runner.stop(runner);
+        }
+    };
+};
+
+if (true) {
+    module.exports = Example[Object.keys(Example)[0]];
+}
+
+/***/ }),
+/* 29 */
+/***/ (function(module, exports, __webpack_require__) {
+
+var Example = Example || {};
+
+Example.rounded = function() {
+    var Engine = Matter.Engine,
+        Render = Matter.Render,
+        Runner = Matter.Runner,
+        MouseConstraint = Matter.MouseConstraint,
+        Mouse = Matter.Mouse,
+        World = Matter.World,
+        Bodies = Matter.Bodies;
+
+    // create engine
+    var engine = Engine.create(),
+        world = engine.world;
+
+    // create renderer
+    var render = Render.create({
+        element: document.body,
+        engine: engine,
+        options: {
+            width: 800,
+            height: 600,
+            showAxes: true
+        }
+    });
+
+    Render.run(render);
+
+    // create runner
+    var runner = Runner.create();
+    Runner.run(runner, engine);
+
+    // add bodies
+    World.add(world, [
+        // walls
+        Bodies.rectangle(400, 0, 800, 50, { isStatic: true }),
+        Bodies.rectangle(400, 600, 800, 50, { isStatic: true }),
+        Bodies.rectangle(800, 300, 50, 600, { isStatic: true }),
+        Bodies.rectangle(0, 300, 50, 600, { isStatic: true })
+    ]);
+
+    World.add(world, [
+        Bodies.rectangle(200, 200, 100, 100, { 
+            chamfer: { radius: 20 }
+        }),
+
+        Bodies.rectangle(300, 200, 100, 100, { 
+            chamfer: { radius: [90, 0, 0, 0] }
+        }),
+
+        Bodies.rectangle(400, 200, 200, 200, { 
+            chamfer: { radius: [150, 20, 40, 20] }
+        }),
+
+        Bodies.rectangle(200, 200, 200, 200, { 
+            chamfer: { radius: [150, 20, 150, 20] }
+        }),
+
+        Bodies.rectangle(300, 200, 200, 50, { 
+            chamfer: { radius: [25, 25, 0, 0] }
+        }),
+
+        Bodies.polygon(200, 100, 8, 80, { 
+            chamfer: { radius: 30 }
+        }),
+
+        Bodies.polygon(300, 100, 5, 80, { 
+            chamfer: { radius: [10, 40, 20, 40, 10] }
+        }),
+
+        Bodies.polygon(400, 200, 3, 50, { 
+            chamfer: { radius: [20, 0, 20] }
+        })
+    ]);
+
+    // add mouse control
+    var mouse = Mouse.create(render.canvas),
+        mouseConstraint = MouseConstraint.create(engine, {
+            mouse: mouse,
+            constraint: {
+                stiffness: 0.2,
+                render: {
+                    visible: false
+                }
+            }
+        });
+
+    World.add(world, mouseConstraint);
+
+    // keep the mouse in sync with rendering
+    render.mouse = mouse;
+
+    // fit the render viewport to the scene
+    Render.lookAt(render, {
+        min: { x: 0, y: 0 },
+        max: { x: 800, y: 600 }
+    });
+
+    // context for MatterTools.Demo
+    return {
+        engine: engine,
+        runner: runner,
+        render: render,
+        canvas: render.canvas,
+        stop: function() {
+            Matter.Render.stop(render);
+            Matter.Runner.stop(runner);
+        }
+    };
+};
+
+if (true) {
+    module.exports = Example[Object.keys(Example)[0]];
+}
+
+/***/ }),
+/* 30 */
+/***/ (function(module, exports, __webpack_require__) {
+
+var Example = Example || {};
+
+Example.sensors = function() {
+    var Engine = Matter.Engine,
+        Render = Matter.Render,
+        Runner = Matter.Runner,
+        Events = Matter.Events,
+        MouseConstraint = Matter.MouseConstraint,
+        Mouse = Matter.Mouse,
+        World = Matter.World,
+        Bodies = Matter.Bodies;
+
+    // create engine
+    var engine = Engine.create(),
+        world = engine.world;
+
+    // create renderer
+    var render = Render.create({
+        element: document.body,
+        engine: engine,
+        options: {
+            width: 800,
+            height: 600,
+            wireframes: false,
+            background: '#111'
+        }
+    });
+
+    Render.run(render);
+
+    // create runner
+    var runner = Runner.create();
+    Runner.run(runner, engine);
+
+    // add bodies
+    var redColor = '#C44D58',
+        greenColor = '#C7F464';
+
+    var collider = Bodies.rectangle(400, 300, 500, 50, {
+        isSensor: true,
+        isStatic: true,
+        render: {
+            strokeStyle: redColor,
+            fillStyle: 'transparent',
+            lineWidth: 1
+        }
+    });
+
+    World.add(world, [
+        collider,
+        Bodies.rectangle(400, 620, 800, 50, { 
+            isStatic: true,
+            render: {
+                fillStyle: 'transparent',
+                lineWidth: 1
+            }
+        })
+    ]);
+
+    World.add(world,
+        Bodies.circle(400, 40, 30, {
+            render: {
+                strokeStyle: greenColor,
+                fillStyle: 'transparent',
+                lineWidth: 1
+            }
+        })
+    );
+
+    Events.on(engine, 'collisionStart', function(event) {
+        var pairs = event.pairs;
+        
+        for (var i = 0, j = pairs.length; i != j; ++i) {
+            var pair = pairs[i];
+
+            if (pair.bodyA === collider) {
+                pair.bodyB.render.strokeStyle = redColor;
+            } else if (pair.bodyB === collider) {
+                pair.bodyA.render.strokeStyle = redColor;
+            }
+        }
+    });
+
+    Events.on(engine, 'collisionEnd', function(event) {
+        var pairs = event.pairs;
+        
+        for (var i = 0, j = pairs.length; i != j; ++i) {
+            var pair = pairs[i];
+
+            if (pair.bodyA === collider) {
+                pair.bodyB.render.strokeStyle = greenColor;
+            } else if (pair.bodyB === collider) {
+                pair.bodyA.render.strokeStyle = greenColor;
+            }
+        }
+    });
+
+    // add mouse control
+    var mouse = Mouse.create(render.canvas),
+        mouseConstraint = MouseConstraint.create(engine, {
+            mouse: mouse,
+            constraint: {
+                stiffness: 0.2,
+                render: {
+                    visible: false
+                }
+            }
+        });
+
+    World.add(world, mouseConstraint);
+
+    // keep the mouse in sync with rendering
+    render.mouse = mouse;
+    
+    // fit the render viewport to the scene
+    Render.lookAt(render, {
+        min: { x: 0, y: 0 },
+        max: { x: 800, y: 600 }
+    });
+
+    // context for MatterTools.Demo
+    return {
+        engine: engine,
+        runner: runner,
+        render: render,
+        canvas: render.canvas,
+        stop: function() {
+            Matter.Render.stop(render);
+            Matter.Runner.stop(runner);
+        }
+    };
+};
+
+if (true) {
+    module.exports = Example[Object.keys(Example)[0]];
+}
+
+/***/ }),
+/* 31 */
+/***/ (function(module, exports, __webpack_require__) {
+
+var Example = Example || {};
+
+Example.sleeping = function() {
+    var Engine = Matter.Engine,
+        Render = Matter.Render,
+        Runner = Matter.Runner,
+        Composites = Matter.Composites,
+        Common = Matter.Common,
+        Events = Matter.Events,
+        MouseConstraint = Matter.MouseConstraint,
+        Mouse = Matter.Mouse,
+        World = Matter.World,
+        Bodies = Matter.Bodies;
+
+    // create engine
+    var engine = Engine.create({
+            enableSleeping: true
+        }),
+        world = engine.world;
+
+    // create renderer
+    var render = Render.create({
+        element: document.body,
+        engine: engine,
+        options: {
+            width: 800,
+            height: 600,
+            showAngleIndicator: true
+        }
+    });
+
+    Render.run(render);
+
+    // create runner
+    var runner = Runner.create();
+    Runner.run(runner, engine);
+
+    // add bodies
+    World.add(world, [
+        // walls
+        Bodies.rectangle(400, 0, 800, 50, { isStatic: true }),
+        Bodies.rectangle(400, 600, 800, 50, { isStatic: true }),
+        Bodies.rectangle(800, 300, 50, 600, { isStatic: true }),
+        Bodies.rectangle(0, 300, 50, 600, { isStatic: true })
+    ]);
+
+    var stack = Composites.stack(50, 50, 12, 3, 0, 0, function(x, y) {
+        switch (Math.round(Common.random(0, 1))) {
+
+        case 0:
+            if (Common.random() < 0.8) {
+                return Bodies.rectangle(x, y, Common.random(20, 50), Common.random(20, 50));
+            } else {
+                return Bodies.rectangle(x, y, Common.random(80, 120), Common.random(20, 30));
+            }
+        case 1:
+            return Bodies.polygon(x, y, Math.round(Common.random(1, 8)), Common.random(20, 50));
+
+        }
+    });
+    
+    World.add(world, stack);
+
+    for (var i = 0; i < stack.bodies.length; i++) {
+        Events.on(stack.bodies[i], 'sleepStart sleepEnd', function(event) {
+            var body = this;
+            console.log('body id', body.id, 'sleeping:', body.isSleeping);
+        });
+    }
+
+    // add mouse control
+    var mouse = Mouse.create(render.canvas),
+        mouseConstraint = MouseConstraint.create(engine, {
+            mouse: mouse,
+            constraint: {
+                stiffness: 0.2,
+                render: {
+                    visible: false
+                }
+            }
+        });
+
+    World.add(world, mouseConstraint);
+
+    // keep the mouse in sync with rendering
+    render.mouse = mouse;
+
+    // fit the render viewport to the scene
+    Render.lookAt(render, {
+        min: { x: 0, y: 0 },
+        max: { x: 800, y: 600 }
+    });
+
+    // context for MatterTools.Demo
+    return {
+        engine: engine,
+        runner: runner,
+        render: render,
+        canvas: render.canvas,
+        stop: function() {
+            Matter.Render.stop(render);
+            Matter.Runner.stop(runner);
+        }
+    };
+};
+
+if (true) {
+    module.exports = Example[Object.keys(Example)[0]];
+}
+
+/***/ }),
+/* 32 */
+/***/ (function(module, exports, __webpack_require__) {
+
+var Example = Example || {};
+
+Example.slingshot = function() {
+    var Engine = Matter.Engine,
+        Render = Matter.Render,
+        Runner = Matter.Runner,
+        Composites = Matter.Composites,
+        Events = Matter.Events,
+        Constraint = Matter.Constraint,
+        MouseConstraint = Matter.MouseConstraint,
+        Mouse = Matter.Mouse,
+        World = Matter.World,
+        Bodies = Matter.Bodies;
+
+    // create engine
+    var engine = Engine.create(),
+        world = engine.world;
+
+    // create renderer
+    var render = Render.create({
+        element: document.body,
+        engine: engine,
+        options: {
+            width: 800,
+            height: 600,
+            showAngleIndicator: true
+        }
+    });
+
+    Render.run(render);
+
+    // create runner
+    var runner = Runner.create();
+    Runner.run(runner, engine);
+
+    // add bodies
+    var ground = Bodies.rectangle(395, 600, 815, 50, { isStatic: true }),
+        rockOptions = { density: 0.004 },
+        rock = Bodies.polygon(170, 450, 8, 20, rockOptions),
+        anchor = { x: 170, y: 450 },
+        elastic = Constraint.create({ 
+            pointA: anchor, 
+            bodyB: rock, 
+            stiffness: 0.05
+        });
+
+    var pyramid = Composites.pyramid(500, 300, 9, 10, 0, 0, function(x, y) {
+        return Bodies.rectangle(x, y, 25, 40);
+    });
+
+    var ground2 = Bodies.rectangle(610, 250, 200, 20, { isStatic: true });
+
+    var pyramid2 = Composites.pyramid(550, 0, 5, 10, 0, 0, function(x, y) {
+        return Bodies.rectangle(x, y, 25, 40);
+    });
+
+    World.add(engine.world, [ground, pyramid, ground2, pyramid2, rock, elastic]);
+
+    Events.on(engine, 'afterUpdate', function() {
+        if (mouseConstraint.mouse.button === -1 && (rock.position.x > 190 || rock.position.y < 430)) {
+            rock = Bodies.polygon(170, 450, 7, 20, rockOptions);
+            World.add(engine.world, rock);
+            elastic.bodyB = rock;
+        }
+    });
+
+    // add mouse control
+    var mouse = Mouse.create(render.canvas),
+        mouseConstraint = MouseConstraint.create(engine, {
+            mouse: mouse,
+            constraint: {
+                stiffness: 0.2,
+                render: {
+                    visible: false
+                }
+            }
+        });
+
+    World.add(world, mouseConstraint);
+
+    // keep the mouse in sync with rendering
+    render.mouse = mouse;
+
+    // fit the render viewport to the scene
+    Render.lookAt(render, {
+        min: { x: 0, y: 0 },
+        max: { x: 800, y: 600 }
+    });
+
+    // context for MatterTools.Demo
+    return {
+        engine: engine,
+        runner: runner,
+        render: render,
+        canvas: render.canvas,
+        stop: function() {
+            Matter.Render.stop(render);
+            Matter.Runner.stop(runner);
+        }
+    };
+};
+
+if (true) {
+    module.exports = Example[Object.keys(Example)[0]];
+}
+
+/***/ }),
+/* 33 */
+/***/ (function(module, exports, __webpack_require__) {
+
+var Example = Example || {};
+
+Example.softBody = function() {
+    var Engine = Matter.Engine,
+        Render = Matter.Render,
+        Runner = Matter.Runner,
+        Composites = Matter.Composites,
+        MouseConstraint = Matter.MouseConstraint,
+        Mouse = Matter.Mouse,
+        World = Matter.World,
+        Bodies = Matter.Bodies;
+
+    // create engine
+    var engine = Engine.create(),
+        world = engine.world;
+
+    // create renderer
+    var render = Render.create({
+        element: document.body,
+        engine: engine,
+        options: {
+            width: 800,
+            height: 600,
+            showAngleIndicator: false
+        }
+    });
+
+    Render.run(render);
+
+    // create runner
+    var runner = Runner.create();
+    Runner.run(runner, engine);
+
+    // add bodies
+    var particleOptions = { 
+        friction: 0.05,
+        frictionStatic: 0.1,
+        render: { visible: true } 
+    };
+
+    World.add(world, [
+        Composites.softBody(250, 100, 5, 5, 0, 0, true, 18, particleOptions),
+        Composites.softBody(400, 300, 8, 3, 0, 0, true, 15, particleOptions),
+        Composites.softBody(250, 400, 4, 4, 0, 0, true, 15, particleOptions),
+        // walls
+        Bodies.rectangle(400, 0, 800, 50, { isStatic: true }),
+        Bodies.rectangle(400, 600, 800, 50, { isStatic: true }),
+        Bodies.rectangle(800, 300, 50, 600, { isStatic: true }),
+        Bodies.rectangle(0, 300, 50, 600, { isStatic: true })
+    ]);
+
+    // add mouse control
+    var mouse = Mouse.create(render.canvas),
+        mouseConstraint = MouseConstraint.create(engine, {
+            mouse: mouse,
+            constraint: {
+                stiffness: 0.9,
+                render: {
+                    visible: false
+                }
+            }
+        });
+
+    World.add(world, mouseConstraint);
+
+    // keep the mouse in sync with rendering
+    render.mouse = mouse;
+
+    // fit the render viewport to the scene
+    Render.lookAt(render, {
+        min: { x: 0, y: 0 },
+        max: { x: 800, y: 600 }
+    });
+
+    // context for MatterTools.Demo
+    return {
+        engine: engine,
+        runner: runner,
+        render: render,
+        canvas: render.canvas,
+        stop: function() {
+            Matter.Render.stop(render);
+            Matter.Runner.stop(runner);
+        }
+    };
+};
+
+if (true) {
+    module.exports = Example[Object.keys(Example)[0]];
+}
+
+/***/ }),
+/* 34 */
+/***/ (function(module, exports, __webpack_require__) {
+
+var Example = Example || {};
+
+Example.sprites = function() {
+    var Engine = Matter.Engine,
+        Render = Matter.Render,
+        Runner = Matter.Runner,
+        Composites = Matter.Composites,
+        Common = Matter.Common,
+        MouseConstraint = Matter.MouseConstraint,
+        Mouse = Matter.Mouse,
+        World = Matter.World,
+        Bodies = Matter.Bodies;
+
+    // create engine
+    var engine = Engine.create(),
+        world = engine.world;
+
+    // create renderer
+    var render = Render.create({
+        element: document.body,
+        engine: engine,
+        options: {
+            width: 800,
+            height: 600,
+            background: '#0f0f13',
+            showAngleIndicator: false,
+            wireframes: false
+        }
+    });
+
+    Render.run(render);
+
+    // create runner
+    var runner = Runner.create();
+    Runner.run(runner, engine);
+
+    // add bodies
+    var offset = 10,
+        options = { 
+            isStatic: true
+        };
+
+    world.bodies = [];
+
+    // these static walls will not be rendered in this sprites example, see options
+    World.add(world, [
+        Bodies.rectangle(400, -offset, 800.5 + 2 * offset, 50.5, options),
+        Bodies.rectangle(400, 600 + offset, 800.5 + 2 * offset, 50.5, options),
+        Bodies.rectangle(800 + offset, 300, 50.5, 600.5 + 2 * offset, options),
+        Bodies.rectangle(-offset, 300, 50.5, 600.5 + 2 * offset, options)
+    ]);
+
+    var stack = Composites.stack(20, 20, 10, 4, 0, 0, function(x, y) {
+        if (Common.random() > 0.35) {
+            return Bodies.rectangle(x, y, 64, 64, {
+                render: {
+                    strokeStyle: '#ffffff',
+                    sprite: {
+                        texture: './img/box.png'
+                    }
+                }
+            });
+        } else {
+            return Bodies.circle(x, y, 46, {
+                density: 0.0005,
+                frictionAir: 0.06,
+                restitution: 0.3,
+                friction: 0.01,
+                render: {
+                    sprite: {
+                        texture: './img/ball.png'
+                    }
+                }
+            });
+        }
+    });
+
+    World.add(world, stack);
+
+    // add mouse control
+    var mouse = Mouse.create(render.canvas),
+        mouseConstraint = MouseConstraint.create(engine, {
+            mouse: mouse,
+            constraint: {
+                stiffness: 0.2,
+                render: {
+                    visible: false
+                }
+            }
+        });
+
+    World.add(world, mouseConstraint);
+
+    // keep the mouse in sync with rendering
+    render.mouse = mouse;
+
+    // fit the render viewport to the scene
+    Render.lookAt(render, {
+        min: { x: 0, y: 0 },
+        max: { x: 800, y: 600 }
+    });
+
+    // context for MatterTools.Demo
+    return {
+        engine: engine,
+        runner: runner,
+        render: render,
+        canvas: render.canvas,
+        stop: function() {
+            Matter.Render.stop(render);
+            Matter.Runner.stop(runner);
+        }
+    };
+};
+
+if (true) {
+    module.exports = Example[Object.keys(Example)[0]];
+}
+
+/***/ }),
+/* 35 */
+/***/ (function(module, exports, __webpack_require__) {
+
+var Example = Example || {};
+
+Example.stack = function() {
+    var Engine = Matter.Engine,
+        Render = Matter.Render,
+        Runner = Matter.Runner,
+        Composites = Matter.Composites,
+        MouseConstraint = Matter.MouseConstraint,
+        Mouse = Matter.Mouse,
+        World = Matter.World,
+        Bodies = Matter.Bodies;
+
+    // create engine
+    var engine = Engine.create(),
+        world = engine.world;
+
+    // create renderer
+    var render = Render.create({
+        element: document.body,
+        engine: engine,
+        options: {
+            width: 800,
+            height: 600,
+            showAngleIndicator: true
+        }
+    });
+
+    Render.run(render);
+
+    // create runner
+    var runner = Runner.create();
+    Runner.run(runner, engine);
+
+    // add bodies
+    var stack = Composites.stack(200, 380, 10, 5, 0, 0, function(x, y) {
+        return Bodies.rectangle(x, y, 40, 40);
+    });
+    
+    World.add(world, [
+        stack,
+        // walls
+        Bodies.rectangle(400, 0, 800, 50, { isStatic: true }),
+        Bodies.rectangle(800, 300, 50, 600, { isStatic: true }),
+        Bodies.rectangle(0, 300, 50, 600, { isStatic: true }),
+        Bodies.rectangle(400, 606, 800, 50.5, { isStatic: true })
+    ]);
+
+    // add mouse control
+    var mouse = Mouse.create(render.canvas),
+        mouseConstraint = MouseConstraint.create(engine, {
+            mouse: mouse,
+            constraint: {
+                stiffness: 0.2,
+                render: {
+                    visible: false
+                }
+            }
+        });
+
+    World.add(world, mouseConstraint);
+
+    // keep the mouse in sync with rendering
+    render.mouse = mouse;
+
+    // fit the render viewport to the scene
+    Render.lookAt(render, {
+        min: { x: 0, y: 0 },
+        max: { x: 800, y: 600 }
+    });
+
+    // context for MatterTools.Demo
+    return {
+        engine: engine,
+        runner: runner,
+        render: render,
+        canvas: render.canvas,
+        stop: function() {
+            Matter.Render.stop(render);
+            Matter.Runner.stop(runner);
+        }
+    };
+};
+
+if (true) {
+    module.exports = Example[Object.keys(Example)[0]];
+}
+
+/***/ }),
+/* 36 */
+/***/ (function(module, exports, __webpack_require__) {
+
+var Example = Example || {};
+
+Example.staticFriction = function() {
+    var Engine = Matter.Engine,
+        Render = Matter.Render,
+        Runner = Matter.Runner,
+        Body = Matter.Body,
+        Composites = Matter.Composites,
+        Events = Matter.Events,
+        MouseConstraint = Matter.MouseConstraint,
+        Mouse = Matter.Mouse,
+        World = Matter.World,
+        Bodies = Matter.Bodies;
+
+    // create engine
+    var engine = Engine.create(),
+        world = engine.world;
+
+    // create renderer
+    var render = Render.create({
+        element: document.body,
+        engine: engine,
+        options: {
+            width: 800,
+            height: 600,
+            showVelocity: true
+        }
+    });
+
+    Render.run(render);
+
+    // create runner
+    var runner = Runner.create();
+    Runner.run(runner, engine);
+
+    // add bodies
+    var body = Bodies.rectangle(400, 500, 200, 60, { isStatic: true, chamfer: 10 }),
+        size = 50,
+        counter = -1;
+
+    var stack = Composites.stack(350, 470 - 6 * size, 1, 6, 0, 0, function(x, y) {
+        return Bodies.rectangle(x, y, size * 2, size, {
+            slop: 0.5,
+            friction: 1,
+            frictionStatic: Infinity
+        });
+    });
+    
+    World.add(world, [
+        body, 
+        stack,
+        // walls
+        Bodies.rectangle(400, 0, 800, 50, { isStatic: true }),
+        Bodies.rectangle(400, 600, 800, 50, { isStatic: true }),
+        Bodies.rectangle(800, 300, 50, 600, { isStatic: true }),
+        Bodies.rectangle(0, 300, 50, 600, { isStatic: true })
+    ]);
+
+    Events.on(engine, 'beforeUpdate', function(event) {
+        counter += 0.014;
+
+        if (counter < 0) {
+            return;
+        }
+
+        var px = 400 + 100 * Math.sin(counter);
+
+        // body is static so must manually update velocity for friction to work
+        Body.setVelocity(body, { x: px - body.position.x, y: 0 });
+        Body.setPosition(body, { x: px, y: body.position.y });
+    });
+
+    // add mouse control
+    var mouse = Mouse.create(render.canvas),
+        mouseConstraint = MouseConstraint.create(engine, {
+            mouse: mouse,
+            constraint: {
+                stiffness: 0.2,
+                render: {
+                    visible: false
+                }
+            }
+        });
+
+    World.add(world, mouseConstraint);
+
+    // keep the mouse in sync with rendering
+    render.mouse = mouse;
+
+    // fit the render viewport to the scene
+    Render.lookAt(render, {
+        min: { x: 0, y: 0 },
+        max: { x: 800, y: 600 }
+    });
+
+    // context for MatterTools.Demo
+    return {
+        engine: engine,
+        runner: runner,
+        render: render,
+        canvas: render.canvas,
+        stop: function() {
+            Matter.Render.stop(render);
+            Matter.Runner.stop(runner);
+        }
+    };
+};
+
+if (true) {
+    module.exports = Example[Object.keys(Example)[0]];
+}
+
+/***/ }),
+/* 37 */
+/***/ (function(module, exports, __webpack_require__) {
+
+var Example = Example || {};
+
+Example.stress = function() {
+    var Engine = Matter.Engine,
+        Render = Matter.Render,
+        Runner = Matter.Runner,
+        Composites = Matter.Composites,
+        MouseConstraint = Matter.MouseConstraint,
+        Mouse = Matter.Mouse,
+        World = Matter.World,
+        Bodies = Matter.Bodies;
+
+    // create engine
+    var engine = Engine.create(),
+        world = engine.world;
+
+    // create renderer
+    var render = Render.create({
+        element: document.body,
+        engine: engine,
+        options: {
+            width: 800,
+            height: 600
+        }
+    });
+
+    Render.run(render);
+
+    // create runner
+    var runner = Runner.create();
+    Runner.run(runner, engine);
+
+    // scene code
+    var stack = Composites.stack(90, 50, 18, 15, 0, 0, function(x, y) {
+        return Bodies.rectangle(x, y, 35, 35);
+    });
+    
+    World.add(world, [
+        stack,
+        Bodies.rectangle(400, 0, 800, 50, { isStatic: true }),
+        Bodies.rectangle(400, 600, 800, 50, { isStatic: true }),
+        Bodies.rectangle(800, 300, 50, 600, { isStatic: true }),
+        Bodies.rectangle(0, 300, 50, 600, { isStatic: true })
+    ]);
+
+    // add mouse control
+    var mouse = Mouse.create(render.canvas),
+        mouseConstraint = MouseConstraint.create(engine, {
+            mouse: mouse,
+            constraint: {
+                stiffness: 0.2,
+                render: {
+                    visible: false
+                }
+            }
+        });
+
+    World.add(world, mouseConstraint);
+
+    // keep the mouse in sync with rendering
+    render.mouse = mouse;
+
+    // fit the render viewport to the scene
+    Render.lookAt(render, {
+        min: { x: 0, y: 0 },
+        max: { x: 800, y: 600 }
+    });
+
+    // context for MatterTools.Demo
+    return {
+        engine: engine,
+        runner: runner,
+        render: render,
+        canvas: render.canvas,
+        stop: function() {
+            Matter.Render.stop(render);
+            Matter.Runner.stop(runner);
+        }
+    };
+};
+
+if (true) {
+    module.exports = Example[Object.keys(Example)[0]];
+}
+
+/***/ }),
+/* 38 */
+/***/ (function(module, exports, __webpack_require__) {
+
+var Example = Example || {};
+
+Example.stress2 = function() {
+    var Engine = Matter.Engine,
+        Render = Matter.Render,
+        Runner = Matter.Runner,
+        Composites = Matter.Composites,
+        MouseConstraint = Matter.MouseConstraint,
+        Mouse = Matter.Mouse,
+        World = Matter.World,
+        Bodies = Matter.Bodies;
+
+    // create engine
+    var engine = Engine.create(),
+        world = engine.world;
+
+    // create renderer
+    var render = Render.create({
+        element: document.body,
+        engine: engine,
+        options: {
+            width: 800,
+            height: 600
+        }
+    });
+
+    Render.run(render);
+
+    // create runner
+    var runner = Runner.create();
+    Runner.run(runner, engine);
+
+    // scene code
+    var stack = Composites.stack(100, 120, 25, 18, 0, 0, function(x, y) {
+        return Bodies.rectangle(x, y, 25, 25);
+    });
+    
+    World.add(world, [
+        stack,
+        Bodies.rectangle(400, 0, 800, 50, { isStatic: true }),
+        Bodies.rectangle(400, 600, 800, 50, { isStatic: true }),
+        Bodies.rectangle(800, 300, 50, 600, { isStatic: true }),
+        Bodies.rectangle(0, 300, 50, 600, { isStatic: true })
+    ]);
+
+    // add mouse control
+    var mouse = Mouse.create(render.canvas),
+        mouseConstraint = MouseConstraint.create(engine, {
+            mouse: mouse,
+            constraint: {
+                stiffness: 0.2,
+                render: {
+                    visible: false
+                }
+            }
+        });
+
+    World.add(world, mouseConstraint);
+
+    // keep the mouse in sync with rendering
+    render.mouse = mouse;
+
+    // fit the render viewport to the scene
+    Render.lookAt(render, {
+        min: { x: 0, y: 0 },
+        max: { x: 800, y: 600 }
+    });
+
+    // context for MatterTools.Demo
+    return {
+        engine: engine,
+        runner: runner,
+        render: render,
+        canvas: render.canvas,
+        stop: function() {
+            Matter.Render.stop(render);
+            Matter.Runner.stop(runner);
+        }
+    };
+};
+
+if (true) {
+    module.exports = Example[Object.keys(Example)[0]];
+}
+
+/***/ }),
+/* 39 */
+/***/ (function(module, exports, __webpack_require__) {
+
+var Example = Example || {};
+
+Example.svg = function() {
+    var Engine = Matter.Engine,
+        Render = Matter.Render,
+        Runner = Matter.Runner,
+        Common = Matter.Common,
+        MouseConstraint = Matter.MouseConstraint,
+        Mouse = Matter.Mouse,
+        World = Matter.World,
+        Vertices = Matter.Vertices,
+        Svg = Matter.Svg,
+        Bodies = Matter.Bodies;
+
+    // create engine
+    var engine = Engine.create(),
+        world = engine.world;
+
+    // create renderer
+    var render = Render.create({
+        element: document.body,
+        engine: engine,
+        options: {
+            width: 800,
+            height: 600
+        }
+    });
+
+    Render.run(render);
+
+    // create runner
+    var runner = Runner.create();
+    Runner.run(runner, engine);
+
+    // add bodies
+    var svgs = [
+        'iconmonstr-check-mark-8-icon', 
+        'iconmonstr-paperclip-2-icon',
+        'iconmonstr-puzzle-icon',
+        'iconmonstr-user-icon'
+    ];
+
+    if (typeof $ !== 'undefined') {
+        for (var i = 0; i < svgs.length; i += 1) {
+            (function(i) {
+                $.get('./svg/' + svgs[i] + '.svg').done(function(data) {
+                    var vertexSets = [],
+                        color = Common.choose(['#556270', '#4ECDC4', '#C7F464', '#FF6B6B', '#C44D58']);
+
+                    $(data).find('path').each(function(i, path) {
+                        var points = Svg.pathToVertices(path, 30);
+                        vertexSets.push(Vertices.scale(points, 0.4, 0.4));
+                    });
+
+                    World.add(world, Bodies.fromVertices(100 + i * 150, 200 + i * 50, vertexSets, {
+                        render: {
+                            fillStyle: color,
+                            strokeStyle: color,
+                            lineWidth: 1
+                        }
+                    }, true));
+                });
+            })(i);
+        }
+
+        $.get('./svg/svg.svg').done(function(data) {
+            var vertexSets = [],
+                color = Common.choose(['#556270', '#4ECDC4', '#C7F464', '#FF6B6B', '#C44D58']);
+
+            $(data).find('path').each(function(i, path) {
+                vertexSets.push(Svg.pathToVertices(path, 30));
+            });
+
+            World.add(world, Bodies.fromVertices(400, 80, vertexSets, {
+                render: {
+                    fillStyle: color,
+                    strokeStyle: color,
+                    lineWidth: 1
+                }
+            }, true));
+        });
+    }
+
+    World.add(world, [
+        Bodies.rectangle(400, 0, 800, 50, { isStatic: true }),
+        Bodies.rectangle(400, 600, 800, 50, { isStatic: true }),
+        Bodies.rectangle(800, 300, 50, 600, { isStatic: true }),
+        Bodies.rectangle(0, 300, 50, 600, { isStatic: true })
+    ]);
+
+    // add mouse control
+    var mouse = Mouse.create(render.canvas),
+        mouseConstraint = MouseConstraint.create(engine, {
+            mouse: mouse,
+            constraint: {
+                stiffness: 0.2,
+                render: {
+                    visible: false
+                }
+            }
+        });
+
+    World.add(world, mouseConstraint);
+
+    // keep the mouse in sync with rendering
+    render.mouse = mouse;
+
+    // fit the render viewport to the scene
+    Render.lookAt(render, {
+        min: { x: 0, y: 0 },
+        max: { x: 800, y: 600 }
+    });
+
+    // context for MatterTools.Demo
+    return {
+        engine: engine,
+        runner: runner,
+        render: render,
+        canvas: render.canvas,
+        stop: function() {
+            Matter.Render.stop(render);
+            Matter.Runner.stop(runner);
+        }
+    };
+};
+
+if (true) {
+    module.exports = Example[Object.keys(Example)[0]];
+}
+
+/***/ }),
+/* 40 */
+/***/ (function(module, exports, __webpack_require__) {
+
+var Example = Example || {};
+
+Example.terrain = function() {
+    var Engine = Matter.Engine,
+        Render = Matter.Render,
+        Runner = Matter.Runner,
+        Composites = Matter.Composites,
+        Common = Matter.Common,
+        MouseConstraint = Matter.MouseConstraint,
+        Mouse = Matter.Mouse,
+        World = Matter.World,
+        Query = Matter.Query,
+        Svg = Matter.Svg,
+        Bodies = Matter.Bodies;
+
+    // create engine
+    var engine = Engine.create(),
+        world = engine.world;
+
+    // create renderer
+    var render = Render.create({
+        element: document.body,
+        engine: engine,
+        options: {
+            width: 800,
+            height: 600
+        }
+    });
+
+    Render.run(render);
+
+    // create runner
+    var runner = Runner.create();
+    Runner.run(runner, engine);
+
+    // add bodies
+    var terrain;
+
+    if (typeof $ !== 'undefined') {
+        $.get('./svg/terrain.svg').done(function(data) {
+            var vertexSets = [];
+
+            $(data).find('path').each(function(i, path) {
+                vertexSets.push(Svg.pathToVertices(path, 30));
+            });
+
+            terrain = Bodies.fromVertices(400, 350, vertexSets, {
+                isStatic: true,
+                render: {
+                    fillStyle: '#2e2b44',
+                    strokeStyle: '#2e2b44',
+                    lineWidth: 1
+                }
+            }, true);
+
+            World.add(world, terrain);
+
+            var bodyOptions = {
+                frictionAir: 0, 
+                friction: 0.0001,
+                restitution: 0.6
+            };
+            
+            World.add(world, Composites.stack(80, 100, 20, 20, 10, 10, function(x, y) {
+                if (Query.point([terrain], { x: x, y: y }).length === 0) {
+                    return Bodies.polygon(x, y, 5, 12, bodyOptions);
+                }
+            }));
+        });
+    }
+
+    // add mouse control
+    var mouse = Mouse.create(render.canvas),
+        mouseConstraint = MouseConstraint.create(engine, {
+            mouse: mouse,
+            constraint: {
+                stiffness: 0.2,
+                render: {
+                    visible: false
+                }
+            }
+        });
+
+    World.add(world, mouseConstraint);
+
+    // keep the mouse in sync with rendering
+    render.mouse = mouse;
+
+    // fit the render viewport to the scene
+    Render.lookAt(render, {
+        min: { x: 0, y: 0 },
+        max: { x: 800, y: 600 }
+    });
+
+    // context for MatterTools.Demo
+    return {
+        engine: engine,
+        runner: runner,
+        render: render,
+        canvas: render.canvas,
+        stop: function() {
+            Matter.Render.stop(render);
+            Matter.Runner.stop(runner);
+        }
+    };
+};
+
+if (true) {
+    module.exports = Example[Object.keys(Example)[0]];
+}
+
+/***/ }),
+/* 41 */
+/***/ (function(module, exports, __webpack_require__) {
+
+var Example = Example || {};
+
+Example.timescale = function() {
+    var Engine = Matter.Engine,
+        Render = Matter.Render,
+        Runner = Matter.Runner,
+        Body = Matter.Body,
+        Events = Matter.Events,
+        Composite = Matter.Composite,
+        Composites = Matter.Composites,
+        Common = Matter.Common,
+        MouseConstraint = Matter.MouseConstraint,
+        Mouse = Matter.Mouse,
+        World = Matter.World,
+        Bodies = Matter.Bodies;
+
+    // create engine
+    var engine = Engine.create(),
+        world = engine.world;
+
+    // create renderer
+    var render = Render.create({
+        element: document.body,
+        engine: engine,
+        options: {
+            width: 800,
+            height: 600,
+            showAngleIndicator: true
+        }
+    });
+
+    Render.run(render);
+
+    // create runner
+    var runner = Runner.create();
+    Runner.run(runner, engine);
+
+    // add bodies
+    World.add(world, [
+        Bodies.rectangle(400, 0, 800, 50, { isStatic: true }),
+        Bodies.rectangle(400, 600, 800, 50, { isStatic: true }),
+        Bodies.rectangle(800, 300, 50, 600, { isStatic: true }),
+        Bodies.rectangle(0, 300, 50, 600, { isStatic: true })
+    ]);
+
+    var explosion = function(engine) {
+        var bodies = Composite.allBodies(engine.world);
+
+        for (var i = 0; i < bodies.length; i++) {
+            var body = bodies[i];
+
+            if (!body.isStatic && body.position.y >= 500) {
+                var forceMagnitude = 0.05 * body.mass;
+
+                Body.applyForce(body, body.position, {
+                    x: (forceMagnitude + Common.random() * forceMagnitude) * Common.choose([1, -1]), 
+                    y: -forceMagnitude + Common.random() * -forceMagnitude
+                });
+            }
+        }
+    };
+
+    var timeScaleTarget = 1,
+        counter = 0;
+
+
+    Events.on(engine, 'afterUpdate', function(event) {
+        // tween the timescale for bullet time slow-mo
+        engine.timing.timeScale += (timeScaleTarget - engine.timing.timeScale) * 0.05;
+
+        counter += 1;
+
+        // every 1.5 sec
+        if (counter >= 60 * 1.5) {
+
+            // flip the timescale
+            if (timeScaleTarget < 1) {
+                timeScaleTarget = 1;
+            } else {
+                timeScaleTarget = 0.05;
+            }
+
+            // create some random forces
+            explosion(engine);
+
+            // reset counter
+            counter = 0;
+        }
+    });
+
+    var bodyOptions = {
+        frictionAir: 0, 
+        friction: 0.0001,
+        restitution: 0.8
+    };
+    
+    // add some small bouncy circles... remember Swordfish?
+    World.add(world, Composites.stack(20, 100, 15, 3, 20, 40, function(x, y) {
+        return Bodies.circle(x, y, Common.random(10, 20), bodyOptions);
+    }));
+
+    // add some larger random bouncy objects
+    World.add(world, Composites.stack(50, 50, 8, 3, 0, 0, function(x, y) {
+        switch (Math.round(Common.random(0, 1))) {
+
+        case 0:
+            if (Common.random() < 0.8) {
+                return Bodies.rectangle(x, y, Common.random(20, 50), Common.random(20, 50), bodyOptions);
+            } else {
+                return Bodies.rectangle(x, y, Common.random(80, 120), Common.random(20, 30), bodyOptions);
+            }
+        case 1:
+            return Bodies.polygon(x, y, Math.round(Common.random(4, 8)), Common.random(20, 50), bodyOptions);
+
+        }
+    }));
+
+    // add mouse control
+    var mouse = Mouse.create(render.canvas),
+        mouseConstraint = MouseConstraint.create(engine, {
+            mouse: mouse,
+            constraint: {
+                stiffness: 0.2,
+                render: {
+                    visible: false
+                }
+            }
+        });
+
+    World.add(world, mouseConstraint);
+
+    // keep the mouse in sync with rendering
+    render.mouse = mouse;
+
+    // fit the render viewport to the scene
+    Render.lookAt(render, {
+        min: { x: 0, y: 0 },
+        max: { x: 800, y: 600 }
+    });
+
+    // context for MatterTools.Demo
+    return {
+        engine: engine,
+        runner: runner,
+        render: render,
+        canvas: render.canvas,
+        stop: function() {
+            Matter.Render.stop(render);
+            Matter.Runner.stop(runner);
+        }
+    };
+};
+
+if (true) {
+    module.exports = Example[Object.keys(Example)[0]];
+}
+
+/***/ }),
+/* 42 */
+/***/ (function(module, exports, __webpack_require__) {
+
+var Example = Example || {};
+
+Example.views = function() {
+    var Engine = Matter.Engine,
+        Render = Matter.Render,
+        Runner = Matter.Runner,
+        Events = Matter.Events,
+        Composites = Matter.Composites,
+        Common = Matter.Common,
+        MouseConstraint = Matter.MouseConstraint,
+        Mouse = Matter.Mouse,
+        World = Matter.World,
+        Vector = Matter.Vector,
+        Bounds = Matter.Bounds,
+        Bodies = Matter.Bodies;
+
+    // create engine
+    var engine = Engine.create(),
+        world = engine.world;
+
+    // create renderer
+    var render = Render.create({
+        element: document.body,
+        engine: engine,
+        options: {
+            width: 800,
+            height: 600,
+            hasBounds: true,
+            showAngleIndicator: true
+        }
+    });
+
+    Render.run(render);
+
+    // create runner
+    var runner = Runner.create();
+    Runner.run(runner, engine);
+
+    // add mouse control
+    var mouse = Mouse.create(render.canvas),
+        mouseConstraint = MouseConstraint.create(engine, {
+            mouse: mouse,
+            constraint: {
+                stiffness: 0.2,
+                render: {
+                    visible: false
+                }
+            }
+        });
+
+    World.add(world, mouseConstraint);
+
+    // keep the mouse in sync with rendering
+    render.mouse = mouse;
+
+    // add bodies
+    var stack = Composites.stack(20, 20, 15, 4, 0, 0, function(x, y) {
+        switch (Math.round(Common.random(0, 1))) {
+
+        case 0:
+            if (Common.random() < 0.8) {
+                return Bodies.rectangle(x, y, Common.random(20, 50), Common.random(20, 50));
+            } else {
+                return Bodies.rectangle(x, y, Common.random(80, 120), Common.random(20, 30));
+            }
+        case 1:
+            var sides = Math.round(Common.random(1, 8));
+            sides = (sides === 3) ? 4 : sides;
+            return Bodies.polygon(x, y, sides, Common.random(20, 50));
+        }
+    });
+
+    World.add(world, [
+        stack,
+        // walls
+        Bodies.rectangle(400, 0, 800, 50, { isStatic: true }),
+        Bodies.rectangle(400, 600, 800, 50, { isStatic: true }),
+        Bodies.rectangle(800, 300, 50, 600, { isStatic: true }),
+        Bodies.rectangle(0, 300, 50, 600, { isStatic: true })
+    ]);
+    
+    // get the centre of the viewport
+    var viewportCentre = {
+        x: render.options.width * 0.5,
+        y: render.options.height * 0.5
+    };
+
+    // make the world bounds a little bigger than the render bounds
+    world.bounds.min.x = -300;
+    world.bounds.min.y = -300;
+    world.bounds.max.x = 1100;
+    world.bounds.max.y = 900;
+
+    // keep track of current bounds scale (view zoom)
+    var boundsScaleTarget = 1,
+        boundsScale = {
+            x: 1,
+            y: 1
+        };
+
+    // use the engine tick event to control our view
+    Events.on(engine, 'beforeTick', function() {
+        var world = engine.world,
+            mouse = mouseConstraint.mouse,
+            translate;
+
+        // mouse wheel controls zoom
+        var scaleFactor = mouse.wheelDelta * -0.1;
+        if (scaleFactor !== 0) {
+            if ((scaleFactor < 0 && boundsScale.x >= 0.6) || (scaleFactor > 0 && boundsScale.x <= 1.4)) {
+                boundsScaleTarget += scaleFactor;
+            }
+        }
+
+        // if scale has changed
+        if (Math.abs(boundsScale.x - boundsScaleTarget) > 0.01) {
+            // smoothly tween scale factor
+            scaleFactor = (boundsScaleTarget - boundsScale.x) * 0.2;
+            boundsScale.x += scaleFactor;
+            boundsScale.y += scaleFactor;
+
+            // scale the render bounds
+            render.bounds.max.x = render.bounds.min.x + render.options.width * boundsScale.x;
+            render.bounds.max.y = render.bounds.min.y + render.options.height * boundsScale.y;
+
+            // translate so zoom is from centre of view
+            translate = {
+                x: render.options.width * scaleFactor * -0.5,
+                y: render.options.height * scaleFactor * -0.5
+            };
+
+            Bounds.translate(render.bounds, translate);
+
+            // update mouse
+            Mouse.setScale(mouse, boundsScale);
+            Mouse.setOffset(mouse, render.bounds.min);
+        }
+
+        // get vector from mouse relative to centre of viewport
+        var deltaCentre = Vector.sub(mouse.absolute, viewportCentre),
+            centreDist = Vector.magnitude(deltaCentre);
+
+        // translate the view if mouse has moved over 50px from the centre of viewport
+        if (centreDist > 50) {
+            // create a vector to translate the view, allowing the user to control view speed
+            var direction = Vector.normalise(deltaCentre),
+                speed = Math.min(10, Math.pow(centreDist - 50, 2) * 0.0002);
+
+            translate = Vector.mult(direction, speed);
+
+            // prevent the view moving outside the world bounds
+            if (render.bounds.min.x + translate.x < world.bounds.min.x)
+                translate.x = world.bounds.min.x - render.bounds.min.x;
+
+            if (render.bounds.max.x + translate.x > world.bounds.max.x)
+                translate.x = world.bounds.max.x - render.bounds.max.x;
+
+            if (render.bounds.min.y + translate.y < world.bounds.min.y)
+                translate.y = world.bounds.min.y - render.bounds.min.y;
+
+            if (render.bounds.max.y + translate.y > world.bounds.max.y)
+                translate.y = world.bounds.max.y - render.bounds.max.y;
+
+            // move the view
+            Bounds.translate(render.bounds, translate);
+
+            // we must update the mouse too
+            Mouse.setOffset(mouse, render.bounds.min);
+        }
+    });
+
+    // context for MatterTools.Demo
+    return {
+        engine: engine,
+        runner: runner,
+        render: render,
+        canvas: render.canvas,
+        stop: function() {
+            Matter.Render.stop(render);
+            Matter.Runner.stop(runner);
+        }
+    };
+};
+
+if (true) {
+    module.exports = Example[Object.keys(Example)[0]];
+}
+
+/***/ }),
+/* 43 */
+/***/ (function(module, exports, __webpack_require__) {
+
+var Example = Example || {};
+
+Example.wreckingBall = function() {
+    var Engine = Matter.Engine,
+        Render = Matter.Render,
+        Runner = Matter.Runner,
+        Composites = Matter.Composites,
+        MouseConstraint = Matter.MouseConstraint,
+        Mouse = Matter.Mouse,
+        World = Matter.World,
+        Constraint = Matter.Constraint,
+        Bodies = Matter.Bodies;
+
+    // create engine
+    var engine = Engine.create(),
+        world = engine.world;
+
+    // create renderer
+    var render = Render.create({
+        element: document.body,
+        engine: engine,
+        options: {
+            width: 800,
+            height: 600,
+            showAngleIndicator: true
+        }
+    });
+
+    Render.run(render);
+
+    // create runner
+    var runner = Runner.create();
+    Runner.run(runner, engine);
+
+    // add bodies
+    var rows = 10,
+        yy = 600 - 21 - 40 * rows;
+    
+    var stack = Composites.stack(400, yy, 5, rows, 0, 0, function(x, y) {
+        return Bodies.rectangle(x, y, 40, 40);
+    });
+    
+    World.add(world, [
+        stack,
+        // walls
+        Bodies.rectangle(400, 0, 800, 50, { isStatic: true }),
+        Bodies.rectangle(400, 600, 800, 50, { isStatic: true }),
+        Bodies.rectangle(800, 300, 50, 600, { isStatic: true }),
+        Bodies.rectangle(0, 300, 50, 600, { isStatic: true })
+    ]);
+    
+    var ball = Bodies.circle(100, 400, 50, { density: 0.04, frictionAir: 0.005});
+    
+    World.add(world, ball);
+    World.add(world, Constraint.create({
+        pointA: { x: 300, y: 100 },
+        bodyB: ball
+    }));
+
+    // add mouse control
+    var mouse = Mouse.create(render.canvas),
+        mouseConstraint = MouseConstraint.create(engine, {
+            mouse: mouse,
+            constraint: {
+                stiffness: 0.2,
+                render: {
+                    visible: false
+                }
+            }
+        });
+
+    World.add(world, mouseConstraint);
+
+    // keep the mouse in sync with rendering
+    render.mouse = mouse;
+
+    // fit the render viewport to the scene
+    Render.lookAt(render, {
+        min: { x: 0, y: 0 },
+        max: { x: 800, y: 600 }
+    });
+
+    // context for MatterTools.Demo
+    return {
+        engine: engine,
+        runner: runner,
+        render: render,
+        canvas: render.canvas,
+        stop: function() {
+            Matter.Render.stop(render);
+            Matter.Runner.stop(runner);
+        }
+    };
+};
+
+if (true) {
+    module.exports = Example[Object.keys(Example)[0]];
+}
+
+/***/ })
+/******/ ]);
+});
\ No newline at end of file
diff --git a/demo/js/Server.js b/demo/js/Server.js
new file mode 100644
index 0000000..afcc7f2
--- /dev/null
+++ b/demo/js/Server.js
@@ -0,0 +1,3 @@
+// bundle entry point for the development server
+Example = require('../../examples/index.js');
+module.exports = require('../../src/module/main.js');
diff --git a/webpack.config.js b/webpack.config.js
index 7174511..43753e4 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -24,8 +24,10 @@ module.exports = (env = {}) => {
 ${alpha ? alphaInfo : ''}${pkg.homepage}
 License ${pkg.license}${!minimize ? '\n\n' + license : ''}`;
 
+    const entry = isDevServer ? './demo/js/Server.js' : './src/module/main.js';
+
     return {
-        entry: { [name]: './src/module/main.js' },
+        entry: { [name]: entry },
         output: {
             library: 'Matter',
             libraryTarget: 'umd',