/*! * matter-js-examples 0.16.0 by @liabru 2021-01-17 * 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); } }; }; Example.airFriction.for = '>=0.14.2'; if (true) { module.exports = Example.airFriction; } /***/ }), /* 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, render: { fillStyle: '#060a19' } }), Bodies.rectangle(500, 350, 700, 20, { isStatic: true, angle: -Math.PI * 0.06, render: { fillStyle: '#060a19' } }), Bodies.rectangle(340, 580, 700, 20, { isStatic: true, angle: Math.PI * 0.04, render: { fillStyle: '#060a19' } }) ]); // 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); } }; }; Example.avalanche.for = '>=0.14.2'; if (true) { module.exports = Example.avalanche; } /***/ }), /* 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, render: { fillStyle: '#060a19' } }) ]); 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); } }; }; Example.ballPool.for = '>=0.14.2'; if (true) { module.exports = Example.ballPool; } /***/ }), /* 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: '#060a19' } }); }); 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); } }; }; Example.bridge.for = '>=0.14.2'; if (true) { module.exports = Example.bridge; } /***/ }), /* 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); } }; }; Example.broadphase.for = '>=0.14.2'; if (true) { module.exports = Example.broadphase; } /***/ }), /* 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, render: { fillStyle: '#060a19' }}), Bodies.rectangle(500, 350, 650, 20, { isStatic: true, angle: -Math.PI * 0.06, render: { fillStyle: '#060a19' }}), Bodies.rectangle(300, 560, 600, 20, { isStatic: true, angle: Math.PI * 0.04, render: { fillStyle: '#060a19' }}) ]); // 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); } }; }; Example.car.for = '>=0.14.2'; if (true) { module.exports = Example.car; } /***/ }), /* 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, render: { fillStyle: '#060a19' } }), Bodies.rectangle(250, 555, 20, 50, { isStatic: true, render: { fillStyle: '#060a19' } }), Bodies.rectangle(400, 535, 20, 80, { isStatic: true, collisionFilter: { group: group }, render: { fillStyle: '#060a19' } }), 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); } }; }; Example.catapult.for = '>=0.14.2'; if (true) { module.exports = Example.catapult; } /***/ }), /* 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); } }; }; Example.chains.for = '>=0.14.2'; if (true) { module.exports = Example.chains; } /***/ }), /* 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); } }; }; Example.circleStack.for = '>=0.14.2'; if (true) { module.exports = Example.circleStack; } /***/ }), /* 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, render: { fillStyle: '#060a19' }}), Bodies.rectangle(500, 480, 80, 80, { isStatic: true, render: { fillStyle: '#060a19' }}), 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); } }; }; Example.cloth.for = '>=0.14.2'; if (true) { module.exports = Example.cloth; } /***/ }), /* 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 } }); 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 colorA = '#f55a3c', colorB = '#063e7b', colorC = '#f5d259'; // 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 = colorA; if (row > 5) { category = blueCategory; color = colorB; } else if (row > 2) { category = greenCategory; color = colorC; } 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: colorC } }) ); // 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: colorA } }) ); // 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: colorB } }) ); // 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); } }; }; Example.collisionFiltering.for = '>=0.14.2'; if (true) { module.exports = Example.collisionFiltering; } /***/ }), /* 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); } }; }; Example.compositeManipulation.for = '>=0.14.2'; if (true) { module.exports = Example.compositeManipulation; } /***/ }), /* 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); } }; }; Example.compound.for = '>=0.14.2'; if (true) { module.exports = Example.compound; } /***/ }), /* 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); } }; }; Example.compoundStack.for = '>=0.14.2'; if (true) { module.exports = Example.compoundStack; } /***/ }), /* 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(['#f19648', '#f5d259', '#f55a3c', '#063e7b', '#ececd1']); 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); } }; }; Example.concave.for = '>=0.14.2'; if (true) { module.exports = Example.concave; } /***/ }), /* 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); } }; }; Example.constraints.for = '>=0.14.2'; if (true) { module.exports = Example.constraints; } /***/ }), /* 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 } }); 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 } }); }); 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); } }; }; Example.doublePendulum.for = '>=0.14.2'; if (true) { module.exports = Example.doublePendulum; } /***/ }), /* 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); } }; }; Example.events.for = '>=0.14.2'; if (true) { module.exports = Example.events; } /***/ }), /* 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, render: { fillStyle: '#060a19' } }), 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, render: { fillStyle: '#060a19' } }), 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, render: { fillStyle: '#060a19' } }), 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); } }; }; Example.friction.for = '>=0.14.2'; if (true) { module.exports = Example.friction; } /***/ }), /* 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); } }; }; Example.gravity.for = '>=0.14.2'; if (true) { module.exports = Example.gravity; } /***/ }), /* 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); } } }; }; Example.gyro.for = '>=0.14.2'; if (true) { module.exports = Example.gyro; } /***/ }), /* 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, render: { fillStyle: '#060a19' } }), 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, { render: { fillStyle: '#060a19' } }), partA = Bodies.rectangle(600, 200, 120, 50, { render: { fillStyle: '#060a19' } }), partB = Bodies.rectangle(660, 200, 50, 190, { render: { fillStyle: '#060a19' } }), 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); } }; }; Example.manipulation.for = '>=0.14.2'; if (true) { module.exports = Example.manipulation; } /***/ }), /* 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); } }; }; Example.mixed.for = '>=0.14.2'; if (true) { module.exports = Example.mixed; } /***/ }), /* 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); } }; }; Example.newtonsCradle.for = '>=0.14.2'; if (true) { module.exports = Example.newtonsCradle; } /***/ }), /* 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 } }); 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: '#060a19', strokeStyle: '#ffffff', lineWidth: 1 } }); }); // 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(['#f19648', '#f5d259', '#f55a3c', '#063e7b', '#ececd1']) } }; 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; }; Example.ragdoll.for = '>=0.14.2'; if (true) { module.exports = Example.ragdoll; } /***/ }), /* 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); } }; }; Example.pyramid.for = '>=0.14.2'; if (true) { module.exports = Example.pyramid; } /***/ }), /* 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); } }; }; Example.raycasting.for = '>=0.14.2'; if (true) { module.exports = Example.raycasting; } /***/ }), /* 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); } }; }; Example.restitution.for = '>=0.14.2'; if (true) { module.exports = Example.restitution; } /***/ }), /* 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); } }; }; Example.rounded.for = '>=0.14.2'; if (true) { module.exports = Example.rounded; } /***/ }), /* 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 } }); Render.run(render); // create runner var runner = Runner.create(); Runner.run(runner, engine); // add bodies var colorA = '#f55a3c', colorB = '#f5d259'; var collider = Bodies.rectangle(400, 300, 500, 50, { isSensor: true, isStatic: true, render: { strokeStyle: colorA, fillStyle: 'transparent', lineWidth: 1 } }); World.add(world, [ collider, Bodies.rectangle(400, 600, 800, 50, { isStatic: true, render: { fillStyle: '#060a19', lineWidth: 0 } }) ]); World.add(world, Bodies.circle(400, 40, 30, { render: { strokeStyle: colorB, 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 = colorA; } else if (pair.bodyB === collider) { pair.bodyA.render.strokeStyle = colorA; } } }); 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 = colorB; } else if (pair.bodyB === collider) { pair.bodyA.render.strokeStyle = colorB; } } }); // 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); } }; }; Example.sensors.for = '>=0.14.2'; if (true) { module.exports = Example.sensors; } /***/ }), /* 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); } }; }; Example.sleeping.for = '>=0.14.2'; if (true) { module.exports = Example.sleeping; } /***/ }), /* 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, render: { fillStyle: '#060a19' } }), 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, render: { fillStyle: '#060a19' } }); 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); } }; }; Example.slingshot.for = '>=0.14.2'; if (true) { module.exports = Example.slingshot; } /***/ }), /* 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); } }; }; Example.softBody.for = '>=0.14.2'; if (true) { module.exports = Example.softBody; } /***/ }), /* 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, 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); } }; }; Example.sprites.for = '>=0.14.2'; if (true) { module.exports = Example.sprites; } /***/ }), /* 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); } }; }; Example.stack.for = '>=0.14.2'; if (true) { module.exports = Example.stack; } /***/ }), /* 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, render: { fillStyle: '#060a19' } }), 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); } }; }; Example.staticFriction.for = '>=0.14.2'; if (true) { module.exports = Example.staticFriction; } /***/ }), /* 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); } }; }; Example.stress.for = '>=0.14.2'; if (true) { module.exports = Example.stress; } /***/ }), /* 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); } }; }; Example.stress2.for = '>=0.14.2'; if (true) { module.exports = Example.stress2; } /***/ }), /* 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 if (typeof fetch !== 'undefined') { var select = function(root, selector) { return Array.prototype.slice.call(root.querySelectorAll(selector)); }; var loadSvg = function(url) { return fetch(url) .then(function(response) { return response.text(); }) .then(function(raw) { return (new window.DOMParser()).parseFromString(raw, 'image/svg+xml'); }); }; ([ './svg/iconmonstr-check-mark-8-icon.svg', './svg/iconmonstr-paperclip-2-icon.svg', './svg/iconmonstr-puzzle-icon.svg', './svg/iconmonstr-user-icon.svg' ]).forEach(function(path, i) { loadSvg(path).then(function(root) { var color = Common.choose(['#f19648', '#f5d259', '#f55a3c', '#063e7b', '#ececd1']); var vertexSets = select(root, 'path') .map(function(path) { return Vertices.scale(Svg.pathToVertices(path, 30), 0.4, 0.4); }); World.add(world, Bodies.fromVertices(100 + i * 150, 200 + i * 50, vertexSets, { render: { fillStyle: color, strokeStyle: color, lineWidth: 1 } }, true)); }); }); loadSvg('./svg/svg.svg').then(function(root) { var color = Common.choose(['#f19648', '#f5d259', '#f55a3c', '#063e7b', '#ececd1']); var vertexSets = select(root, 'path') .map(function(path) { return Svg.pathToVertices(path, 30); }); World.add(world, Bodies.fromVertices(400, 80, vertexSets, { render: { fillStyle: color, strokeStyle: color, lineWidth: 1 } }, true)); }); } else { Common.warn('Fetch is not available. Could not load SVG.'); } 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); } }; }; Example.svg.for = '>=0.14.2'; if (true) { module.exports = Example.svg; } /***/ }), /* 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 if (typeof fetch !== 'undefined') { var select = function(root, selector) { return Array.prototype.slice.call(root.querySelectorAll(selector)); }; var loadSvg = function(url) { return fetch(url) .then(function(response) { return response.text(); }) .then(function(raw) { return (new window.DOMParser()).parseFromString(raw, 'image/svg+xml'); }); }; loadSvg('./svg/terrain.svg') .then(function(root) { var paths = select(root, 'path'); var vertexSets = paths.map(function(path) { return Svg.pathToVertices(path, 30); }); var terrain = Bodies.fromVertices(400, 350, vertexSets, { isStatic: true, render: { fillStyle: '#060a19', strokeStyle: '#060a19', 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); } })); }); } else { Common.warn('Fetch is not available. Could not load SVG.'); } // 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); } }; }; Example.terrain.for = '>=0.14.2'; if (true) { module.exports = Example.terrain; } /***/ }), /* 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); } }; }; Example.timescale.for = '>=0.14.2'; if (true) { module.exports = Example.timescale; } /***/ }), /* 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); } }; }; Example.views.for = '>=0.14.2'; if (true) { module.exports = Example.views; } /***/ }), /* 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); } }; }; Example.wreckingBall.for = '>=0.14.2'; if (true) { module.exports = Example.wreckingBall; } /***/ }) /******/ ]); });