mirror of
https://github.com/liabru/matter-js.git
synced 2024-12-27 13:59:01 -05:00
5840 lines
No EOL
152 KiB
JavaScript
5840 lines
No EOL
152 KiB
JavaScript
/*!
|
|
* 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;
|
|
}
|
|
|
|
|
|
/***/ })
|
|
/******/ ]);
|
|
}); |