foster/liabru-matter-js
0
0
Fork 0
mirror of https://github.com/liabru/matter-js.git synced 2024-11-23 09:26:51 -05:00
Code Issues Wiki Activity

improved demo and examples

Browse source
This commit is contained in:
liabru 2016-11-21 00:41:57 +00:00
parent c8e5d5c3b0
commit 1a40f2754c
67 changed files with 6863 additions and 42365 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
Gulpfile.js
View file

@ -29,10 +29,10 @@ var exec = require('child_process').exec;
var buildDirectory = 'build'; var buildDirectory = 'build';
var server; var server;
gulp.task('default', ['build:dev', 'build:examples']); gulp.task('default', ['build:dev']);
gulp.task('dev', function(callback) { gulp.task('dev', function(callback) {
sequence('build:examples', 'watch', 'serve', callback); sequence('watch', 'serve', callback);
}); });
gulp.task('release', function(callback) { gulp.task('release', function(callback) {
@ -43,7 +43,7 @@ gulp.task('release', function(callback) {
message: 'cannot build release as there are uncomitted changes' message: 'cannot build release as there are uncomitted changes'
}); });
} else { } else {
sequence('build:examples', 'test', 'bump', 'reload', 'build:release', 'doc', 'changelog', callback); sequence('test', 'bump', 'reload', 'build:release', 'doc', 'changelog', callback);
} }
}); });
}); });
@ -95,12 +95,6 @@ gulp.task('build:release', function() {
return build(extend(extend({}, pkg), { version: pkg.version })); return build(extend(extend({}, pkg), { version: pkg.version }));
}); });
gulp.task('build:examples', function() {
return gulp.src('examples/**/*.js')
.pipe(concat('Examples.js'))
.pipe(gulp.dest('demo/js'));
});
gulp.task('watch', function() { gulp.task('watch', function() {
var b = browserify({ var b = browserify({
entries: ['src/module/main.js'], entries: ['src/module/main.js'],
@ -123,8 +117,6 @@ gulp.task('watch', function() {
b.on('update', bundle); b.on('update', bundle);
bundle(); bundle();
gulp.watch('examples/**/*.js', ['build:examples']);
}); });
gulp.task('bump', function() { gulp.task('bump', function() {

131
demo/css/style.css
View file

@ -1,131 +0,0 @@
body {
background: #222;
font-family: Georgia, Times, "Times New Roman", serif;
color: #aaa;
}
body.mobile {
font-size: 0.9em;
}
* {
padding: 0;
margin: 0;
}
h1 {
color: #fff;
display: block;
margin: 0 0 1em 0;
font-weight: normal;
font-size: 30px;
}
.is-mobile h1 {
font-size: 18px;
}
.nav-sep {
padding: 0 5px;
}
.nav-links a,
.nav-links a:link,
.nav-links a:visited,
.nav-links a:active,
.nav-links a:hover {
color: #aaa;
text-decoration: none;
border-bottom: 1px solid #555;
padding: 0 0 2px 0;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 48px 280px 0 32px;
}
.ins-auto-hide .container {
padding-left: 32px;
}
.gui-auto-hide .container {
padding-right: 32px;
}
.is-mobile .container {
padding: 6% 6% 0 6%;
}
.is-fullscreen #canvas-container {
width: 100%;
height: 100%;
}
.is-fullscreen #canvas-container canvas {
margin: 0;
max-width: 100%;
max-height: 100%;
}
.mobile .container {
padding: 50px 40px 0 40px;
}
canvas {
margin: 40px 0;
max-width: 100%;
}
.mobile canvas {
margin: 0;
}
canvas:active {
cursor: pointer;
cursor: -webkit-grabbing;
}
.controls-container {
margin: 40px 0 0 0;
width: 100%;
}
#canvas-container {
margin: 20px 0;
}
#demo-select {
padding: 8px 10px;
width: 40%;
color: #000;
}
#demo-reset {
padding: 8px 10px;
color: #000;
}
#demo-start {
display: block;
margin: 50px 0;
padding: 20px 40px;
width: 200px;
color: #000;
}
.demo-view-source {
display: inline-block;
margin: 0 0 0 22px;
font-size: 13px;
opacity: 0.5;
}
.dg.a {
margin-right: 0;
}
svg {
display: none;
}

167
demo/index.html
View file

@ -1,91 +1,90 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,minimal-ui"> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui">
<meta name="robots" content="noindex"> <meta name="theme-color" content="#000000">
<meta name="msapplication-navbutton-color" content="#000000">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="robots" content="noindex">
<!-- only required if using Bodies.fromVertices with concave vertices --> <title>Matter.js Demo</title>
<script type="text/javascript" src="./js/lib/decomp.js"></script>
<!-- libs -->
<script type="text/javascript" src="/demo/lib/decomp.js"></script>
<script type="text/javascript" src="/demo/lib/pathseg.js"></script>
<!-- only required if using Matter.RenderPixi --> <!-- Matter -->
<script type="text/javascript" src="./js/lib/pixi.js"></script> <script src="../build/matter-dev.js"></script>
<!-- only required if using Matter.Svg --> <!-- MatterTools -->
<script type="text/javascript" src="./js/lib/pathseg.js"></script> <script src="//code.jquery.com/jquery-3.1.1.js"></script>
<script src="/demo/lib/matter-tools.gui.js"></script>
<script src="/demo/lib/matter-tools.inspector.js"></script>
<script src="/demo/lib/matter-tools.demo.js"></script>
<!-- matterjs dev version --> <!-- Plugins -->
<script type="text/javascript" src="../build/matter-dev.js"></script> <script src="../examples/attractorsPlugin.js"></script>
<script src="../examples/gravityPlugin.js"></script>
<script src="../examples/wrapPlugin.js"></script>
<!-- Examples -->
<script src="../examples/airFriction.js"></script>
<script src="../examples/attractors.js"></script>
<script src="../examples/avalanche.js"></script>
<script src="../examples/ballPool.js"></script>
<script src="../examples/bridge.js"></script>
<script src="../examples/broadphase.js"></script>
<script src="../examples/car.js"></script>
<script src="../examples/catapult.js"></script>
<script src="../examples/chains.js"></script>
<script src="../examples/circleStack.js"></script>
<script src="../examples/cloth.js"></script>
<script src="../examples/collisionFiltering.js"></script>
<script src="../examples/compositeManipulation.js"></script>
<script src="../examples/compound.js"></script>
<script src="../examples/compoundStack.js"></script>
<script src="../examples/concave.js"></script>
<script src="../examples/events.js"></script>
<script src="../examples/friction.js"></script>
<script src="../examples/gravity.js"></script>
<script src="../examples/gyro.js"></script>
<script src="../examples/manipulation.js"></script>
<script src="../examples/mixed.js"></script>
<script src="../examples/newtonsCradle.js"></script>
<script src="../examples/pyramid.js"></script>
<script src="../examples/raycasting.js"></script>
<script src="../examples/restitution.js"></script>
<script src="../examples/rounded.js"></script>
<script src="../examples/sensors.js"></script>
<script src="../examples/sleeping.js"></script>
<script src="../examples/slingshot.js"></script>
<script src="../examples/softBody.js"></script>
<script src="../examples/sprites.js"></script>
<script src="../examples/stack.js"></script>
<script src="../examples/staticFriction.js"></script>
<script src="../examples/stress.js"></script>
<script src="../examples/stress2.js"></script>
<script src="../examples/svg.js"></script>
<script src="../examples/terrain.js"></script>
<script src="../examples/timescale.js"></script>
<script src="../examples/views.js"></script>
<script src="../examples/wreckingBall.js"></script>
<!-- only required if using MatterTools --> <style type="text/css">
<link rel="stylesheet" href="./js/lib/matter-tools/matter-tools.css" type="text/css"> * {
<script type="text/javascript" src="./js/lib/matter-tools/jquery-1.11.0.min.js"></script> box-sizing: border-box;
<script type="text/javascript" src="./js/lib/matter-tools/gif/gif.js"></script> }
<script type="text/javascript" src="./js/lib/matter-tools/matter-tools-dev.js"></script>
<!-- matter demo code --> body {
<link rel="stylesheet" href="./css/style.css" type="text/css"> margin: 0;
<script type="text/javascript" src="./js/Examples.js"></script> padding: 0;
<script type="text/javascript" src="./js/Demo.js"></script> }
</style>
<title>Matter.js Demo</title> </head>
</head> <body>
<body> <script src="/demo/js/Demo.js"></script>
<div class="container"> </body>
<h1>Matter.js Demo</h1> </html>
<p class="nav nav-links"><a href="./mobile.html">Mobile Demo</a> <span class="nav-sep">&middot;</span> <a href="http://brm.io/matter-js/">Project page</a> <span class="nav-sep">&middot;</span> <a href="https://github.com/liabru/matter-js">GitHub</a> <span class="nav-sep">&middot;</span> <a href="http://twitter.com/liabru">@liabru</a></p>
<div class="controls-container">
<select id="demo-select">
<option value="mixed">Mixed Shapes</option>
<option value="mixedSolid">Solid Rendering</option>
<option value="svg">Concave SVG Paths</option>
<option value="terrain">Concave Terrain</option>
<option value="concave">Concave Bodies</option>
<option value="compound">Compound Bodies</option>
<option value="newtonsCradle">Newton's Cradle</option>
<option value="wreckingBall">Wrecking Ball</option>
<option value="slingshot">Slingshot Game</option>
<option value="rounded">Rounded Corners (Chamfering)</option>
<option value="views">Views</option>
<option value="timescale">Time Scaling</option>
<option value="manipulation">Body Manipulation</option>
<option value="compositeManipulation">Composite Manipulation</option>
<option value="sprites">Sprites</option>
<option value="pyramid">Pyramid</option>
<option value="raycasting">Raycasting</option>
<option value="car">Car</option>
<option value="catapult">Catapult</option>
<option value="gravity">Reverse Gravity</option>
<option value="bridge">Bridge</option>
<option value="avalanche">Avalanche</option>
<option value="softBody">Basic Soft Bodies</option>
<option value="cloth">Cloth</option>
<option value="attractors">Attractors (Plugin)</option>
<option value="events">Events</option>
<option value="collisionFiltering">Collision Filtering</option>
<option value="sensors">Sensors</option>
<option value="chains">Chains</option>
<option value="ballPool">Ball Pool</option>
<option value="stack">Stack</option>
<option value="circleStack">Circle Stack</option>
<option value="compoundStack">Compound Stack</option>
<option value="restitution">Restitution</option>
<option value="friction">Friction</option>
<option value="airFriction">Air Friction</option>
<option value="staticFriction">Static Friction</option>
<option value="sleeping">Sleeping</option>
<option value="broadphase">Grid Broadphase</option>
<option value="beachBalls">Beach Balls</option>
<option value="stress">Stress 1</option>
<option value="stress2">Stress 2</option>
</select>
<input id="demo-reset" value="Reset" type="submit">
<div class="demo-view-source nav-links">
<a id="demo-view-source" href="https://github.com/liabru/matter-js/blob/master/examples" target="_blank">view source</a>
</div>
</div>
<div id="canvas-container"></div>
</div>
</body>
</html>

630
demo/js/Demo.js
View file

@ -7,370 +7,276 @@
*/ */
(function() { (function() {
var sourceLinkRoot = 'https://github.com/liabru/matter-js/blob/master/examples';
var _isBrowser = typeof window !== 'undefined' && window.location, var demo = MatterTools.Demo.create({
_useInspector = _isBrowser && window.location.hash.indexOf('-inspect') !== -1, toolbar: {
_isMobile = _isBrowser && /(ipad|iphone|ipod|android)/gi.test(navigator.userAgent), title: 'matter-js',
_isAutomatedTest = !_isBrowser || window._phantom; url: 'https://github.com/liabru/matter-js',
reset: true,
var Matter = _isBrowser ? window.Matter : require('../../build/matter-dev.js'); source: true,
inspector: true,
var Demo = {}; tools: true,
Matter.Demo = Demo; fullscreen: true,
exampleSelect: true
if (!_isBrowser) { },
module.exports = Demo; tools: {
window = {}; inspector: true,
} gui: true
},
// Matter aliases inline: false,
var Body = Matter.Body, resetOnOrientation: true,
Example = Matter.Example, examples: [
Engine = Matter.Engine, {
World = Matter.World, name: 'Air Friction',
Common = Matter.Common, id: 'airFriction',
Bodies = Matter.Bodies, init: Example.airFriction,
Events = Matter.Events, sourceLink: sourceLinkRoot + '/airFriction.js'
Mouse = Matter.Mouse, },
MouseConstraint = Matter.MouseConstraint, {
Runner = Matter.Runner, name: 'Attractors',
Render = Matter.Render; id: 'attractors',
init: Example.attractors,
// MatterTools aliases sourceLink: sourceLinkRoot + '/attractors.js'
if (window.MatterTools) { },
var Gui = MatterTools.Gui, {
Inspector = MatterTools.Inspector; name: 'Avalanche',
} id: 'avalanche',
init: Example.avalanche,
Demo.create = function(options) { sourceLink: sourceLinkRoot + '/avalanche.js'
var defaults = { },
isManual: false, {
sceneName: 'mixed', name: 'Ball Pool',
sceneEvents: [] id: 'ballPool',
}; init: Example.ballPool,
sourceLink: sourceLinkRoot + '/ballPool.js'
return Common.extend(defaults, options); },
}; {
name: 'Bridge',
Demo.init = function() { id: 'bridge',
var demo = Demo.create(); init: Example.bridge,
Matter.Demo._demo = demo; sourceLink: sourceLinkRoot + '/bridge.js'
},
// get container element for the canvas {
demo.container = document.getElementById('canvas-container'); name: 'Broadphase',
id: 'broadphase',
// create an example engine (see /examples/engine.js) init: Example.broadphase,
demo.engine = Example.engine(demo); sourceLink: sourceLinkRoot + '/broadphase.js'
},
// run the engine {
demo.runner = Engine.run(demo.engine); name: 'Car',
id: 'car',
// create a debug renderer init: Example.car,
demo.render = Render.create({ sourceLink: sourceLinkRoot + '/car.js'
element: demo.container, },
engine: demo.engine {
}); name: 'Catapult',
id: 'catapult',
// run the renderer init: Example.catapult,
Render.run(demo.render); sourceLink: sourceLinkRoot + '/catapult.js'
},
// add a mouse controlled constraint {
demo.mouseConstraint = MouseConstraint.create(demo.engine, { name: 'Chains',
element: demo.render.canvas id: 'chains',
}); init: Example.chains,
sourceLink: sourceLinkRoot + '/chains.js'
World.add(demo.engine.world, demo.mouseConstraint); },
{
// pass mouse to renderer to enable showMousePosition name: 'Circle Stack',
demo.render.mouse = demo.mouseConstraint.mouse; id: 'circleStack',
init: Example.circleStack,
// get the scene function name from hash sourceLink: sourceLinkRoot + '/circleStack.js'
if (window.location.hash.length !== 0) },
demo.sceneName = window.location.hash.replace('#', '').replace('-inspect', ''); {
name: 'Cloth',
// set up a scene with bodies id: 'cloth',
Demo.reset(demo); init: Example.cloth,
Demo.setScene(demo, demo.sceneName); sourceLink: sourceLinkRoot + '/cloth.js'
},
// set up demo interface (see end of this file) {
Demo.initControls(demo); name: 'Collision Filtering',
id: 'collisionFiltering',
// pass through runner as timing for debug rendering init: Example.collisionFiltering,
demo.engine.metrics.timing = demo.runner; sourceLink: sourceLinkRoot + '/collisionFiltering.js'
},
return demo; {
}; name: 'Composite Manipulation',
id: 'compositeManipulation',
// call init when the page has loaded fully init: Example.compositeManipulation,
if (!_isAutomatedTest) { sourceLink: sourceLinkRoot + '/compositeManipulation.js'
if (window.addEventListener) { },
window.addEventListener('load', Demo.init); {
} else if (window.attachEvent) { name: 'Compound Bodies',
window.attachEvent('load', Demo.init); id: 'compound',
} init: Example.compound,
} sourceLink: sourceLinkRoot + '/compound.js'
},
Demo.setScene = function(demo, sceneName) { {
Example[sceneName](demo); name: 'Compound Stack',
}; id: 'compoundStack',
init: Example.compoundStack,
// the functions for the demo interface and controls below sourceLink: sourceLinkRoot + '/compoundStack.js'
Demo.initControls = function(demo) { },
var demoSelect = document.getElementById('demo-select'), {
demoReset = document.getElementById('demo-reset'); name: 'Concave',
id: 'concave',
// create a Matter.Gui init: Example.concave,
if (!_isMobile && Gui) { sourceLink: sourceLinkRoot + '/concave.js'
demo.gui = Gui.create(demo.engine, demo.runner, demo.render); },
{
// need to add mouse constraint back in after gui clear or load is pressed name: 'Events',
Events.on(demo.gui, 'clear load', function() { id: 'events',
demo.mouseConstraint = MouseConstraint.create(demo.engine, { init: Example.events,
element: demo.render.canvas sourceLink: sourceLinkRoot + '/events.js'
}); },
{
World.add(demo.engine.world, demo.mouseConstraint); name: 'Friction',
}); id: 'friction',
} init: Example.friction,
sourceLink: sourceLinkRoot + '/friction.js'
// create a Matter.Inspector },
if (!_isMobile && Inspector && _useInspector) { {
demo.inspector = Inspector.create(demo.engine, demo.runner, demo.render); name: 'Reverse Gravity',
id: 'gravity',
Events.on(demo.inspector, 'import', function() { init: Example.gravity,
demo.mouseConstraint = MouseConstraint.create(demo.engine); sourceLink: sourceLinkRoot + '/gravity.js'
World.add(demo.engine.world, demo.mouseConstraint); },
}); {
name: 'Gyroscope',
Events.on(demo.inspector, 'play', function() { id: 'gyro',
demo.mouseConstraint = MouseConstraint.create(demo.engine); init: Example.gyro,
World.add(demo.engine.world, demo.mouseConstraint); sourceLink: sourceLinkRoot + '/gyro.js'
}); },
{
Events.on(demo.inspector, 'selectStart', function() { name: 'Manipulation',
demo.mouseConstraint.constraint.render.visible = false; id: 'manipulation',
}); init: Example.manipulation,
sourceLink: sourceLinkRoot + '/manipulation.js'
Events.on(demo.inspector, 'selectEnd', function() { },
demo.mouseConstraint.constraint.render.visible = true; {
}); name: 'Mixed Shapes',
} id: 'mixed',
init: Example.mixed,
// go fullscreen when using a mobile device sourceLink: sourceLinkRoot + '/mixed.js'
if (_isMobile) { },
var body = document.body; {
name: 'Newton\'s Cradle',
body.className += ' is-mobile'; id: 'newtonsCradle',
demo.render.canvas.addEventListener('touchstart', Demo.fullscreen); init: Example.newtonsCradle,
sourceLink: sourceLinkRoot + '/newtonsCradle.js'
var fullscreenChange = function() { },
var fullscreenEnabled = document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEnabled; {
name: 'Pyramid',
// delay fullscreen styles until fullscreen has finished changing id: 'pyramid',
setTimeout(function() { init: Example.pyramid,
if (fullscreenEnabled) { sourceLink: sourceLinkRoot + '/pyramid.js'
body.className += ' is-fullscreen'; },
} else { {
body.className = body.className.replace('is-fullscreen', ''); name: 'Raycasting',
} id: 'raycasting',
}, 2000); init: Example.raycasting,
}; sourceLink: sourceLinkRoot + '/raycasting.js'
},
document.addEventListener('webkitfullscreenchange', fullscreenChange); {
document.addEventListener('mozfullscreenchange', fullscreenChange); name: 'Restitution',
document.addEventListener('fullscreenchange', fullscreenChange); id: 'restitution',
} init: Example.restitution,
sourceLink: sourceLinkRoot + '/restitution.js'
// keyboard controls },
document.onkeypress = function(keys) { {
// shift + a = toggle manual name: 'Rounded Corners (Chamfering)',
if (keys.shiftKey && keys.keyCode === 65) { id: 'rounded',
Demo.setManualControl(demo, !demo.isManual); init: Example.rounded,
sourceLink: sourceLinkRoot + '/rounded.js'
},
{
name: 'Sensors',
id: 'sensors',
init: Example.sensors,
sourceLink: sourceLinkRoot + '/sensors.js'
},
{
name: 'Sleeping',
id: 'sleeping',
init: Example.sleeping,
sourceLink: sourceLinkRoot + '/sleeping.js'
},
{
name: 'Slingshot',
id: 'slingshot',
init: Example.slingshot,
sourceLink: sourceLinkRoot + '/slingshot.js'
},
{
name: 'Soft Body',
id: 'softBody',
init: Example.softBody,
sourceLink: sourceLinkRoot + '/softBody.js'
},
{
name: 'Sprites',
id: 'sprites',
init: Example.sprites,
sourceLink: sourceLinkRoot + '/sprites.js'
},
{
name: 'Stack',
id: 'stack',
init: Example.stack,
sourceLink: sourceLinkRoot + '/stack.js'
},
{
name: 'Static Friction',
id: 'staticFriction',
init: Example.staticFriction,
sourceLink: sourceLinkRoot + '/staticFriction.js'
},
{
name: 'Stress',
id: 'stress',
init: Example.stress,
sourceLink: sourceLinkRoot + '/stress.js'
},
{
name: 'Stress 2',
id: 'stress2',
init: Example.stress2,
sourceLink: sourceLinkRoot + '/stress2.js'
},
{
name: 'Concave SVG Paths',
id: 'svg',
init: Example.svg,
sourceLink: sourceLinkRoot + '/svg.js'
},
{
name: 'Terrain',
id: 'terrain',
init: Example.terrain,
sourceLink: sourceLinkRoot + '/terraing.js'
},
{
name: 'Time Scaling',
id: 'timescale',
init: Example.timescale,
sourceLink: sourceLinkRoot + '/timescale.js'
},
{
name: 'Views',
id: 'views',
init: Example.views,
sourceLink: sourceLinkRoot + '/views.js'
},
{
name: 'Wrecking Ball',
id: 'wreckingBall',
init: Example.wreckingBall,
sourceLink: sourceLinkRoot + '/wreckingBall.js'
} }
]
});
// shift + q = step document.body.appendChild(demo.dom.root);
if (keys.shiftKey && keys.keyCode === 81) {
if (!demo.isManual) {
Demo.setManualControl(demo, true);
}
Runner.tick(demo.runner, demo.engine);
}
};
// initialise demo selector
demoSelect.value = demo.sceneName;
Demo.setUpdateSourceLink(demo.sceneName);
demoSelect.addEventListener('change', function(e) {
Demo.reset(demo);
Demo.setScene(demo,demo.sceneName = e.target.value);
if (demo.gui) {
Gui.update(demo.gui);
}
var scrollY = window.scrollY;
window.location.hash = demo.sceneName;
window.scrollY = scrollY;
Demo.setUpdateSourceLink(demo.sceneName);
});
demoReset.addEventListener('click', function(e) {
Demo.reset(demo);
Demo.setScene(demo, demo.sceneName);
if (demo.gui) {
Gui.update(demo.gui);
}
Demo.setUpdateSourceLink(demo.sceneName);
});
};
Demo.setUpdateSourceLink = function(sceneName) {
var demoViewSource = document.getElementById('demo-view-source'),
sourceUrl = 'https://github.com/liabru/matter-js/blob/master/examples';
demoViewSource.setAttribute('href', sourceUrl + '/' + sceneName + '.js');
};
Demo.setManualControl = function(demo, isManual) {
var engine = demo.engine,
world = engine.world,
runner = demo.runner;
demo.isManual = isManual;
if (demo.isManual) {
Runner.stop(runner);
// continue rendering but not updating
(function render(time){
runner.frameRequestId = window.requestAnimationFrame(render);
Events.trigger(engine, 'beforeUpdate');
Events.trigger(engine, 'tick');
engine.render.controller.world(engine);
Events.trigger(engine, 'afterUpdate');
})();
} else {
Runner.stop(runner);
Runner.start(runner, engine);
}
};
Demo.fullscreen = function(demo) {
var _fullscreenElement = demo.render.canvas;
if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement) {
if (_fullscreenElement.requestFullscreen) {
_fullscreenElement.requestFullscreen();
} else if (_fullscreenElement.mozRequestFullScreen) {
_fullscreenElement.mozRequestFullScreen();
} else if (_fullscreenElement.webkitRequestFullscreen) {
_fullscreenElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}
}
};
Demo.reset = function(demo) {
var world = demo.engine.world,
i;
World.clear(world);
Engine.clear(demo.engine);
// clear scene graph (if defined in controller)
if (demo.render) {
var renderController = demo.render.controller;
if (renderController && renderController.clear)
renderController.clear(demo.render);
}
// clear all scene events
if (demo.engine.events) {
for (i = 0; i < demo.sceneEvents.length; i++)
Events.off(demo.engine, demo.sceneEvents[i]);
}
if (demo.mouseConstraint && demo.mouseConstraint.events) {
for (i = 0; i < demo.sceneEvents.length; i++)
Events.off(demo.mouseConstraint, demo.sceneEvents[i]);
}
if (world.events) {
for (i = 0; i < demo.sceneEvents.length; i++)
Events.off(world, demo.sceneEvents[i]);
}
if (demo.runner && demo.runner.events) {
for (i = 0; i < demo.sceneEvents.length; i++)
Events.off(demo.runner, demo.sceneEvents[i]);
}
if (demo.render && demo.render.events) {
for (i = 0; i < demo.sceneEvents.length; i++)
Events.off(demo.render, demo.sceneEvents[i]);
}
demo.sceneEvents = [];
// reset id pool
Body._nextCollidingGroupId = 1;
Body._nextNonCollidingGroupId = -1;
Body._nextCategory = 0x0001;
Common._nextId = 0;
// reset random seed
Common._seed = 0;
// reset mouse offset and scale (only required for Demo.views)
if (demo.mouseConstraint) {
Mouse.setScale(demo.mouseConstraint.mouse, { x: 1, y: 1 });
Mouse.setOffset(demo.mouseConstraint.mouse, { x: 0, y: 0 });
}
demo.engine.enableSleeping = false;
demo.engine.world.gravity.scale = 0.001;
demo.engine.world.gravity.y = 1;
demo.engine.world.gravity.x = 0;
demo.engine.timing.timeScale = 1;
var offset = 5;
World.add(world, [
Bodies.rectangle(400, -offset, 800.5 + 2 * offset, 50.5, { isStatic: true }),
Bodies.rectangle(400, 600 + offset, 800.5 + 2 * offset, 50.5, { isStatic: true }),
Bodies.rectangle(800 + offset, 300, 50.5, 600.5 + 2 * offset, { isStatic: true }),
Bodies.rectangle(-offset, 300, 50.5, 600.5 + 2 * offset, { isStatic: true })
]);
if (demo.mouseConstraint) {
World.add(world, demo.mouseConstraint);
}
if (demo.render) {
var renderOptions = demo.render.options;
renderOptions.wireframes = true;
renderOptions.hasBounds = false;
renderOptions.showDebug = false;
renderOptions.showBroadphase = false;
renderOptions.showBounds = false;
renderOptions.showVelocity = false;
renderOptions.showCollisions = false;
renderOptions.showAxes = false;
renderOptions.showPositions = false;
renderOptions.showAngleIndicator = true;
renderOptions.showIds = false;
renderOptions.showShadows = false;
renderOptions.showVertexNumbers = false;
renderOptions.showConvexHulls = false;
renderOptions.showInternalEdges = false;
renderOptions.showSeparations = false;
renderOptions.background = '#fff';
if (_isMobile) {
renderOptions.showDebug = true;
}
}
};
MatterTools.Demo.start(demo);
})(); })();

161
demo/js/DemoMobile.js
View file

@ -1,161 +0,0 @@
(function() {
// Matter aliases
var Engine = Matter.Engine,
World = Matter.World,
Bodies = Matter.Bodies,
Composites = Matter.Composites,
Common = Matter.Common,
MouseConstraint = Matter.MouseConstraint;
var Demo = {};
var _engine,
_sceneName = 'mixed',
_sceneWidth,
_sceneHeight,
_deviceOrientationEvent;
Demo.init = function() {
var canvasContainer = document.getElementById('canvas-container'),
demoStart = document.getElementById('demo-start');
demoStart.addEventListener('click', function() {
demoStart.style.display = 'none';
_engine = Engine.create(canvasContainer, {
render: {
options: {
wireframes: true,
showAngleIndicator: true,
showDebug: true
}
}
});
Demo.fullscreen();
setTimeout(function() {
var runner = Engine.run(_engine);
// pass through runner as timing for debug rendering
_engine.metrics.timing = runner;
Demo.updateScene();
}, 800);
});
window.addEventListener('deviceorientation', function(event) {
_deviceOrientationEvent = event;
Demo.updateGravity(event);
}, true);
window.addEventListener('touchstart', Demo.fullscreen);
window.addEventListener('orientationchange', function() {
Demo.updateGravity(_deviceOrientationEvent);
Demo.updateScene();
Demo.fullscreen();
}, false);
};
window.addEventListener('load', Demo.init);
Demo.mixed = function() {
var _world = _engine.world;
Demo.reset();
World.add(_world, MouseConstraint.create(_engine));
var stack = Composites.stack(20, 20, 10, 5, 0, 0, function(x, y, column, row) {
switch (Math.round(Common.random(0, 1))) {
case 0:
if (Common.random() < 0.8) {
return Bodies.rectangle(x, y, Common.random(20, 40), Common.random(20, 40), { friction: 0.01, restitution: 0.4 });
} else {
return Bodies.rectangle(x, y, Common.random(80, 120), Common.random(20, 30), { friction: 0.01, restitution: 0.4 });
}
break;
case 1:
return Bodies.polygon(x, y, Math.round(Common.random(4, 6)), Common.random(20, 40), { friction: 0.01, restitution: 0.4 });
}
});
World.add(_world, stack);
};
Demo.updateScene = function() {
if (!_engine)
return;
_sceneWidth = document.documentElement.clientWidth;
_sceneHeight = document.documentElement.clientHeight;
var boundsMax = _engine.world.bounds.max,
renderOptions = _engine.render.options,
canvas = _engine.render.canvas;
boundsMax.x = _sceneWidth;
boundsMax.y = _sceneHeight;
canvas.width = renderOptions.width = _sceneWidth;
canvas.height = renderOptions.height = _sceneHeight;
Demo[_sceneName]();
};
Demo.updateGravity = function(event) {
if (!_engine)
return;
var orientation = window.orientation,
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;
}
};
Demo.fullscreen = function(){
var _fullscreenElement = _engine.render.canvas;
if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement) {
if (_fullscreenElement.requestFullscreen) {
_fullscreenElement.requestFullscreen();
} else if (_fullscreenElement.mozRequestFullScreen) {
_fullscreenElement.mozRequestFullScreen();
} else if (_fullscreenElement.webkitRequestFullscreen) {
_fullscreenElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}
}
};
Demo.reset = function() {
var _world = _engine.world;
Common._seed = 2;
World.clear(_world);
Engine.clear(_engine);
var offset = 5;
World.addBody(_world, Bodies.rectangle(_sceneWidth * 0.5, -offset, _sceneWidth + 0.5, 50.5, { isStatic: true }));
World.addBody(_world, Bodies.rectangle(_sceneWidth * 0.5, _sceneHeight + offset, _sceneWidth + 0.5, 50.5, { isStatic: true }));
World.addBody(_world, Bodies.rectangle(_sceneWidth + offset, _sceneHeight * 0.5, 50.5, _sceneHeight + 0.5, { isStatic: true }));
World.addBody(_world, Bodies.rectangle(-offset, _sceneHeight * 0.5, 50.5, _sceneHeight + 0.5, { isStatic: true }));
};
})();

6360
demo/js/lib/matter-0.8.0.js
View file

File diff suppressed because it is too large Load diff

BIN
demo/js/lib/matter-tools/32px.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 3 KiB

3
demo/js/lib/matter-tools/gif/gif.js
View file

File diff suppressed because one or more lines are too long

1
demo/js/lib/matter-tools/gif/gif.js.map
View file

File diff suppressed because one or more lines are too long

3
demo/js/lib/matter-tools/gif/gif.worker.js
View file

File diff suppressed because one or more lines are too long

1
demo/js/lib/matter-tools/gif/gif.worker.js.map
View file

File diff suppressed because one or more lines are too long

5834
demo/js/lib/matter-tools/matter-tools-dev.js
View file

File diff suppressed because one or more lines are too long

518
demo/js/lib/matter-tools/matter-tools.css
View file

File diff suppressed because one or more lines are too long

27293
demo/js/lib/pixi.js
View file

File diff suppressed because it is too large Load diff

1
demo/js/lib/pixi.js.map
View file

File diff suppressed because one or more lines are too long

0
demo/js/lib/decomp.js → demo/lib/decomp.js
View file

0
demo/js/lib/matter-tools/jquery-1.11.0.min.js → demo/lib/jquery-1.11.0.min.js vendored
View file

500
demo/lib/matter-tools.demo.js Normal file
View file

File diff suppressed because one or more lines are too long

434
demo/lib/matter-tools.gui.js Normal file
View file

File diff suppressed because one or more lines are too long

1641
demo/lib/matter-tools.inspector.js Normal file
View file

File diff suppressed because one or more lines are too long

0
demo/js/lib/pathseg.js → demo/lib/pathseg.js
View file

35
demo/mobile.html
View file

@ -1,35 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="robots" content="noindex">
<!-- matter lib edge master version -->
<script type="text/javascript" src="./js/lib/matter-dev.js"></script>
<!-- matter demo code -->
<link rel="stylesheet" href="./css/style.css" type="text/css">
<script type="text/javascript" src="./js/DemoMobile.js"></script>
<title>Matter.js Physics Engine Mobile Demo</title>
</head>
<body class="mobile nav-links">
<div class="container">
<h1>Matter.js Mobile Demo</h1>
<p>
Open this page on your mobile device in Chrome or Safari
<br><br>
Touch and drag to interact with the blocks
<br><br>
Tilt and turn to master gravity like you're the boss of it
</p>
<input id="demo-start" value="Start Demo" type="submit">
<p>Or back to the <a href="index.html">full demo</a> page for more info.</p>
<div id="canvas-container"></div>
</div>
</body>
</html>

97
examples/airFriction.js
View file

@ -1,31 +1,76 @@
var _isBrowser = typeof window !== 'undefined' && window.location, var Example = Example || {};
Matter = _isBrowser ? window.Matter : require('../../build/matter-dev.js');
var Example = {}; Example.airFriction = function() {
Matter.Example = Example; var Engine = Matter.Engine,
Render = Matter.Render,
if (!_isBrowser) { Runner = Matter.Runner,
module.exports = Example; Composite = Matter.Composite,
} MouseConstraint = Matter.MouseConstraint,
Mouse = Matter.Mouse,
(function() { World = Matter.World,
var World = Matter.World,
Bodies = Matter.Bodies; Bodies = Matter.Bodies;
Example.airFriction = function(demo) { // create engine
var engine = demo.engine, var engine = Engine.create(),
world = engine.world; world = engine.world;
World.add(world, [
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 })
]);
var renderOptions = demo.render.options; // create renderer
renderOptions.showAngleIndicator = false; var render = Render.create({
renderOptions.showVelocity = true; element: document.body,
engine: engine,
options: {
width: Math.min(document.body.clientWidth, 1024),
height: Math.min(document.body.clientHeight, 1024),
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 }),
// floor
Bodies.rectangle(400, 600, 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, Composite.allBodies(world));
// context for MatterTools.Demo
return {
engine: engine,
runner: runner,
render: render,
canvas: render.canvas,
stop: function() {
Matter.Render.stop(render);
Matter.Runner.stop(runner);
}
}; };
};
})();

122
examples/attractors.js
View file

@ -1,50 +1,98 @@
(function() { var Example = Example || {};
var World = Matter.World, Example.attractors = function() {
Bodies = Matter.Bodies, Matter.use(
'matter-gravity',
'matter-wrap'
);
var Engine = Matter.Engine,
Render = Matter.Render,
Runner = Matter.Runner,
Composite = Matter.Composite,
Body = Matter.Body, Body = Matter.Body,
Common = Matter.Common; Common = Matter.Common,
MouseConstraint = Matter.MouseConstraint,
Mouse = Matter.Mouse,
World = Matter.World,
Bodies = Matter.Bodies;
Example.attractors = function(demo) { // create engine
var engine = demo.engine, var engine = Engine.create(),
world = engine.world; world = engine.world;
Matter.use( // create renderer
'matter-gravity', var render = Render.create({
'matter-wrap' element: document.body,
engine: engine,
options: {
width: Math.min(document.body.clientWidth, 1024),
height: Math.min(document.body.clientHeight, 1024)
}
});
Render.run(render);
// create runner
var runner = Runner.create();
Runner.run(runner, engine);
// add bodies
world.bodies = [];
world.gravity.scale = 0;
var G = 0.001;
for (var i = 0; i < 200; i += 1) {
var body = Bodies.circle(
Common.random(10, render.options.width),
Common.random(10, render.options.height),
Common.random(4, 10),
{
mass: Common.random(10, 20),
gravity: G,
frictionAir: 0,
wrap: {
min: { x: 0, y: 0 },
max: { x: render.options.width, y: render.options.height }
}
}
); );
world.bodies = []; Body.setVelocity(body, {
world.gravity.scale = 0; x: Common.random(-2, 2),
y: Common.random(-2, 2)
});
var G = 0.001; World.add(world, body);
}
for (var i = 0; i < 200; i += 1) { // add mouse control
var body = Bodies.circle( var mouse = Mouse.create(render.canvas),
Common.random(10, 790), mouseConstraint = MouseConstraint.create(engine, {
Common.random(10, 590), mouse: mouse,
Common.random(4, 10), constraint: {
{ stiffness: 0.2,
mass: Common.random(10, 20), render: {
gravity: G, visible: false
frictionAir: 0,
wrap: {
min: { x: 0, y: 0 },
max: { x: 800, y: 600 }
}
} }
); }
});
Body.setVelocity(body, { World.add(world, mouseConstraint);
x: Common.random(-2, 2),
y: Common.random(-2, 2)
});
World.add(world, body); // keep the mouse in sync with rendering
render.mouse = mouse;
// context for MatterTools.Demo
return {
engine: engine,
runner: runner,
render: render,
canvas: render.canvas,
stop: function() {
Matter.Render.stop(render);
Matter.Runner.stop(runner);
} }
var renderOptions = demo.render.options;
renderOptions.showAngleIndicator = false;
}; };
};
})();

105
examples/avalanche.js
View file

@ -1,25 +1,92 @@
(function() { var Example = Example || {};
var World = Matter.World, Example.avalanche = function() {
Bodies = Matter.Bodies, Matter.use(
'matter-wrap'
);
var Engine = Matter.Engine,
Render = Matter.Render,
Runner = Matter.Runner,
Composite = Matter.Composite,
Composites = Matter.Composites, Composites = Matter.Composites,
Common = Matter.Common; Common = Matter.Common,
MouseConstraint = Matter.MouseConstraint,
Mouse = Matter.Mouse,
World = Matter.World,
Bodies = Matter.Bodies;
Example.avalanche = function(demo) { // create engine
var engine = demo.engine, var engine = Engine.create(),
world = engine.world; world = engine.world;
var stack = Composites.stack(20, 20, 20, 5, 0, 0, function(x, y) { // create renderer
return Bodies.circle(x, y, Common.random(10, 20), { friction: 0.00001, restitution: 0.5, density: 0.001 }); var render = Render.create({
element: document.body,
engine: engine,
options: {
width: Math.min(document.body.clientWidth, 1024),
height: Math.min(document.body.clientHeight, 1024),
showAngleIndicator: true
}
});
Render.run(render);
// create runner
var runner = Runner.create();
Runner.run(runner, engine);
// add bodies
var stack = Composites.stack(20, 20, 20, 5, 0, 0, function(x, y) {
return Bodies.circle(x, y, Common.random(10, 20), { friction: 0.00001, restitution: 0.5, density: 0.001 });
});
World.add(world, stack);
World.add(world, [
Bodies.rectangle(200, 150, 700, 20, { isStatic: true, angle: Math.PI * 0.06 }),
Bodies.rectangle(500, 350, 700, 20, { isStatic: true, angle: -Math.PI * 0.06 }),
Bodies.rectangle(340, 580, 700, 20, { isStatic: true, angle: Math.PI * 0.04 })
]);
// add mouse control
var mouse = Mouse.create(render.canvas),
mouseConstraint = MouseConstraint.create(engine, {
mouse: mouse,
constraint: {
stiffness: 0.2,
render: {
visible: false
}
}
}); });
World.add(world, stack);
World.add(world, [
Bodies.rectangle(200, 150, 700, 20, { isStatic: true, angle: Math.PI * 0.06 }),
Bodies.rectangle(500, 350, 700, 20, { isStatic: true, angle: -Math.PI * 0.06 }),
Bodies.rectangle(340, 580, 700, 20, { isStatic: true, angle: Math.PI * 0.04 })
]);
};
})(); 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].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);
}
};
};

97
examples/ballPool.js
View file

@ -1,24 +1,85 @@
(function() { var Example = Example || {};
var World = Matter.World, Example.ballPool = function() {
Bodies = Matter.Bodies, var Engine = Matter.Engine,
Render = Matter.Render,
Runner = Matter.Runner,
Composite = Matter.Composite,
Composites = Matter.Composites, Composites = Matter.Composites,
Common = Matter.Common; Common = Matter.Common,
MouseConstraint = Matter.MouseConstraint,
Mouse = Matter.Mouse,
World = Matter.World,
Bodies = Matter.Bodies;
Example.ballPool = function(demo) { // create engine
var engine = demo.engine, var engine = Engine.create(),
world = engine.world; world = engine.world;
var stack = Composites.stack(100, 50, 10, 15, 10, 10, function(x, y) { // create renderer
return Bodies.circle(x, y, Common.random(15, 30), { restitution: 0.6, friction: 0.1 }); var render = Render.create({
element: document.body,
engine: engine,
options: {
width: Math.min(document.body.clientWidth, 1024),
height: Math.min(document.body.clientHeight, 1024),
showAngleIndicator: true
}
});
Render.run(render);
// create runner
var runner = Runner.create();
Runner.run(runner, engine);
// add bodies
World.add(world, [
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 })
]);
var stack = Composites.stack(100, 50, 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, 560, 3, 60),
Bodies.polygon(400, 560, 5, 60),
Bodies.rectangle(600, 560, 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, [
stack,
Bodies.polygon(200, 560, 3, 60),
Bodies.polygon(400, 560, 5, 60),
Bodies.rectangle(600, 560, 80, 80)
]);
};
})(); 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));
// context for MatterTools.Demo
return {
engine: engine,
runner: runner,
render: render,
canvas: render.canvas,
stop: function() {
Matter.Render.stop(render);
Matter.Runner.stop(runner);
}
};
};

18
examples/beachBalls.js
View file

@ -1,18 +0,0 @@
(function() {
var World = Matter.World,
Bodies = Matter.Bodies,
Composites = Matter.Composites;
Example.beachBalls = function(demo) {
var engine = demo.engine,
world = engine.world;
var stack = Composites.stack(0, 100, 5, 1, 20, 0, function(x, y) {
return Bodies.circle(x, y, 75, { restitution: 0.9 });
});
World.add(world, stack);
};
})();

112
examples/bridge.js
View file

@ -1,35 +1,91 @@
(function() { var Example = Example || {};
var World = Matter.World, Example.bridge = function() {
Bodies = Matter.Bodies, var Engine = Matter.Engine,
Render = Matter.Render,
Runner = Matter.Runner,
Body = Matter.Body, Body = Matter.Body,
Composite = Matter.Composite,
Composites = Matter.Composites, Composites = Matter.Composites,
Common = Matter.Common, Common = Matter.Common,
Constraint = Matter.Constraint; Constraint = Matter.Constraint,
MouseConstraint = Matter.MouseConstraint,
Mouse = Matter.Mouse,
World = Matter.World,
Bodies = Matter.Bodies;
Example.bridge = function(demo) { // create engine
var engine = demo.engine, var engine = Engine.create(),
world = engine.world, world = engine.world;
group = Body.nextGroup(true);
var bridge = Composites.stack(150, 300, 9, 1, 10, 10, function(x, y) {
return Bodies.rectangle(x, y, 50, 20, { collisionFilter: { group: group } });
});
Composites.chain(bridge, 0.5, 0, -0.5, 0, { stiffness: 0.9 });
var stack = Composites.stack(200, 40, 6, 3, 0, 0, function(x, y) {
return Bodies.polygon(x, y, Math.round(Common.random(1, 8)), Common.random(20, 40));
});
World.add(world, [ // create renderer
bridge, var render = Render.create({
Bodies.rectangle(80, 440, 120, 280, { isStatic: true }), element: document.body,
Bodies.rectangle(720, 440, 120, 280, { isStatic: true }), engine: engine,
Constraint.create({ pointA: { x: 140, y: 300 }, bodyB: bridge.bodies[0], pointB: { x: -25, y: 0 } }), options: {
Constraint.create({ pointA: { x: 660, y: 300 }, bodyB: bridge.bodies[8], pointB: { x: 25, y: 0 } }), width: Math.min(document.body.clientWidth, 1024),
stack height: Math.min(document.body.clientHeight, 1024),
]); 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(150, 300, 9, 1, 10, 10, function(x, y) {
return Bodies.rectangle(x, y, 50, 20, { collisionFilter: { group: group } });
});
})(); Composites.chain(bridge, 0.5, 0, -0.5, 0, { stiffness: 0.9 });
var stack = Composites.stack(200, 40, 6, 3, 0, 0, function(x, y) {
return Bodies.polygon(x, y, Math.round(Common.random(1, 8)), Common.random(20, 40));
});
World.add(world, [
bridge,
Bodies.rectangle(80, 440, 120, 280, { isStatic: true }),
Bodies.rectangle(720, 440, 120, 280, { isStatic: true }),
Constraint.create({ pointA: { x: 140, y: 300 }, bodyB: bridge.bodies[0], pointB: { x: -25, y: 0 } }),
Constraint.create({ pointA: { x: 660, y: 300 }, bodyB: bridge.bodies[8], pointB: { x: 25, y: 0 } }),
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, Composite.allBodies(world));
// context for MatterTools.Demo
return {
engine: engine,
runner: runner,
render: render,
canvas: render.canvas,
stop: function() {
Matter.Render.stop(render);
Matter.Runner.stop(runner);
}
};
};

111
examples/broadphase.js
View file

@ -1,34 +1,95 @@
(function() { var Example = Example || {};
var World = Matter.World, Example.broadphase = function() {
Bodies = Matter.Bodies, var Engine = Matter.Engine,
Render = Matter.Render,
Runner = Matter.Runner,
Body = Matter.Body,
Composite = Matter.Composite,
Composites = Matter.Composites, Composites = Matter.Composites,
Common = Matter.Common; Common = Matter.Common,
Constraint = Matter.Constraint,
MouseConstraint = Matter.MouseConstraint,
Mouse = Matter.Mouse,
World = Matter.World,
Bodies = Matter.Bodies;
Example.broadphase = function(demo) { // create engine
var engine = demo.engine, var engine = Engine.create(),
world = engine.world; world = engine.world;
var stack = Composites.stack(20, 20, 20, 5, 0, 0, function(x, y) { // create renderer
switch (Math.round(Common.random(0, 1))) { var render = Render.create({
element: document.body,
engine: engine,
options: {
width: Math.min(document.body.clientWidth, 1024),
height: Math.min(document.body.clientHeight, 1024),
showAngleIndicator: true,
showBroadphase: true
}
});
case 0: Render.run(render);
if (Common.random() < 0.8) {
return Bodies.rectangle(x, y, Common.random(20, 50), Common.random(20, 50)); // create runner
} else { var runner = Runner.create();
return Bodies.rectangle(x, y, Common.random(80, 120), Common.random(20, 30)); Runner.run(runner, engine);
// add bodies
World.add(world, [
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 })
]);
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));
}
break;
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
} }
break;
case 1:
return Bodies.polygon(x, y, Math.round(Common.random(1, 8)), Common.random(20, 50));
} }
}); });
World.add(world, stack); World.add(world, mouseConstraint);
var renderOptions = demo.render.options; // keep the mouse in sync with rendering
renderOptions.showBroadphase = true; render.mouse = mouse;
// fit the render viewport to the scene
Render.lookAt(render, Composite.allBodies(world));
// context for MatterTools.Demo
return {
engine: engine,
runner: runner,
render: render,
canvas: render.canvas,
stop: function() {
Matter.Render.stop(render);
Matter.Runner.stop(runner);
}
}; };
};
})();

112
examples/car.js
View file

@ -1,29 +1,89 @@
(function() { var Example = Example || {};
var World = Matter.World, Example.car = function() {
Bodies = Matter.Bodies, var Engine = Matter.Engine,
Composites = Matter.Composites; Render = Matter.Render,
Runner = Matter.Runner,
Body = Matter.Body,
Composite = Matter.Composite,
Composites = Matter.Composites,
Common = Matter.Common,
Constraint = Matter.Constraint,
MouseConstraint = Matter.MouseConstraint,
Mouse = Matter.Mouse,
World = Matter.World,
Bodies = Matter.Bodies;
Example.car = function(demo) { // create engine
var engine = demo.engine, var engine = Engine.create(),
world = engine.world, world = engine.world;
scale;
// create renderer
scale = 0.9; var render = Render.create({
World.add(world, Composites.car(150, 100, 100 * scale, 40 * scale, 30 * scale)); element: document.body,
engine: engine,
scale = 0.8; options: {
World.add(world, Composites.car(350, 300, 100 * scale, 40 * scale, 30 * scale)); width: Math.min(document.body.clientWidth, 1024),
height: Math.min(document.body.clientHeight, 1024),
World.add(world, [ showAngleIndicator: true,
Bodies.rectangle(200, 150, 650, 20, { isStatic: true, angle: Math.PI * 0.06 }), showCollisions: true
Bodies.rectangle(500, 350, 650, 20, { isStatic: true, angle: -Math.PI * 0.06 }), }
Bodies.rectangle(340, 580, 700, 20, { isStatic: true, angle: Math.PI * 0.04 }) });
]);
Render.run(render);
var renderOptions = demo.render.options;
renderOptions.showAngleIndicator = true; // create runner
renderOptions.showCollisions = true; var runner = Runner.create();
}; Runner.run(runner, engine);
// add bodies
World.add(world, [
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 })
]);
var scale = 0.9;
World.add(world, Composites.car(150, 100, 100 * scale, 40 * scale, 30 * scale));
})(); scale = 0.8;
World.add(world, Composites.car(350, 300, 100 * scale, 40 * scale, 30 * scale));
World.add(world, [
Bodies.rectangle(200, 150, 400, 20, { isStatic: true, angle: Math.PI * 0.06 }),
Bodies.rectangle(500, 350, 650, 20, { isStatic: true, angle: -Math.PI * 0.06 }),
Bodies.rectangle(300, 560, 600, 20, { isStatic: true, angle: Math.PI * 0.04 })
]);
// add mouse control
var mouse = Mouse.create(render.canvas),
mouseConstraint = MouseConstraint.create(engine, {
mouse: mouse,
constraint: {
stiffness: 0.2,
render: {
visible: false
}
}
});
World.add(world, mouseConstraint);
// keep the mouse in sync with rendering
render.mouse = mouse;
// fit the render viewport to the scene
Render.lookAt(render, Composite.allBodies(world));
// context for MatterTools.Demo
return {
engine: engine,
runner: runner,
render: render,
canvas: render.canvas,
stop: function() {
Matter.Render.stop(render);
Matter.Runner.stop(runner);
}
};
};

107
examples/catapult.js
View file

@ -1,33 +1,88 @@
(function() { var Example = Example || {};
var World = Matter.World, Example.catapult = function() {
Bodies = Matter.Bodies, var Engine = Matter.Engine,
Render = Matter.Render,
Runner = Matter.Runner,
Body = Matter.Body,
Composite = Matter.Composite,
Composites = Matter.Composites, Composites = Matter.Composites,
Constraint = Matter.Constraint; Common = Matter.Common,
Constraint = Matter.Constraint,
MouseConstraint = Matter.MouseConstraint,
Mouse = Matter.Mouse,
World = Matter.World,
Bodies = Matter.Bodies;
Example.catapult = function(demo) { // create engine
var engine = demo.engine, var engine = Engine.create(),
world = engine.world; world = engine.world;
var stack = Composites.stack(250, 255, 1, 6, 0, 0, function(x, y) { // create renderer
return Bodies.rectangle(x, y, 30, 30); var render = Render.create({
element: document.body,
engine: engine,
options: {
width: Math.min(document.body.clientWidth, 1024),
height: Math.min(document.body.clientHeight, 1024),
showAngleIndicator: true,
showCollisions: true,
showVelocity: true
}
});
Render.run(render);
// create runner
var runner = Runner.create();
Runner.run(runner, engine);
// add bodies
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);
World.add(world, [
stack,
catapult,
Bodies.rectangle(400, 600, 800, 50.5, { isStatic: true }),
Bodies.rectangle(250, 555, 20, 50, { isStatic: true }),
Bodies.circle(560, 100, 50, { density: 0.005 }),
Constraint.create({ bodyA: catapult, pointB: { x: 390, y: 580 } }),
Constraint.create({ bodyA: catapult, pointB: { x: 410, y: 580 } })
]);
// add mouse control
var mouse = Mouse.create(render.canvas),
mouseConstraint = MouseConstraint.create(engine, {
mouse: mouse,
constraint: {
stiffness: 0.2,
render: {
visible: false
}
}
}); });
var catapult = Bodies.rectangle(400, 520, 320, 20, { }); World.add(world, mouseConstraint);
World.add(world, [ // keep the mouse in sync with rendering
stack, render.mouse = mouse;
catapult,
Bodies.rectangle(250, 555, 20, 50, { isStatic: true }), // fit the render viewport to the scene
Bodies.circle(560, 100, 50, { density: 0.005 }), Render.lookAt(render, Composite.allBodies(world));
Constraint.create({ bodyA: catapult, pointB: { x: 390, y: 580 } }),
Constraint.create({ bodyA: catapult, pointB: { x: 410, y: 580 } }) // context for MatterTools.Demo
]); return {
engine: engine,
var renderOptions = demo.render.options; runner: runner,
renderOptions.showCollisions = true; render: render,
renderOptions.showVelocity = true; canvas: render.canvas,
renderOptions.showAngleIndicator = true; stop: function() {
Matter.Render.stop(render);
Matter.Runner.stop(runner);
}
}; };
};
})();

139
examples/chains.js
View file

@ -1,46 +1,107 @@
(function() { var Example = Example || {};
var World = Matter.World, Example.chains = function() {
Bodies = Matter.Bodies, var Engine = Matter.Engine,
Render = Matter.Render,
Runner = Matter.Runner,
Body = Matter.Body, Body = Matter.Body,
Composite = Matter.Composite, Composite = Matter.Composite,
Composites = Matter.Composites, Composites = Matter.Composites,
Constraint = Matter.Constraint; Common = Matter.Common,
Constraint = Matter.Constraint,
MouseConstraint = Matter.MouseConstraint,
Mouse = Matter.Mouse,
World = Matter.World,
Bodies = Matter.Bodies;
Example.chains = function(demo) { // create engine
var engine = demo.engine, var engine = Engine.create(),
world = engine.world, world = engine.world;
group = Body.nextGroup(true);
// create renderer
var ropeA = Composites.stack(200, 100, 5, 2, 10, 10, function(x, y) { var render = Render.create({
return Bodies.rectangle(x, y, 50, 20, { collisionFilter: { group: group } }); element: document.body,
engine: engine,
options: {
width: Math.min(document.body.clientWidth, 1024),
height: Math.min(document.body.clientHeight, 1024),
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(200, 100, 4, 2, 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 });
Composite.add(ropeA, Constraint.create({
bodyB: ropeA.bodies[0],
pointB: { x: -25, y: 0 },
pointA: { x: 200, y: 100 },
stiffness: 0.5
}));
World.add(world, ropeA);
group = Body.nextGroup(true);
var ropeB = Composites.stack(500, 100, 5, 2, 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 });
Composite.add(ropeB, Constraint.create({
bodyB: ropeB.bodies[0],
pointB: { x: -20, y: 0 },
pointA: { x: 500, y: 100 },
stiffness: 0.5
}));
World.add(world, ropeB);
// add mouse control
var mouse = Mouse.create(render.canvas),
mouseConstraint = MouseConstraint.create(engine, {
mouse: mouse,
constraint: {
stiffness: 0.2,
render: {
visible: false
}
}
}); });
Composites.chain(ropeA, 0.5, 0, -0.5, 0, { stiffness: 0.8, length: 2 }); World.add(world, mouseConstraint);
Composite.add(ropeA, Constraint.create({
bodyB: ropeA.bodies[0], // keep the mouse in sync with rendering
pointB: { x: -25, y: 0 }, render.mouse = mouse;
pointA: { x: 200, y: 100 },
stiffness: 0.5 // fit the render viewport to the scene
})); Render.lookAt(render, {
min: { x: 0, y: 0 },
World.add(world, ropeA); max: { x: 700, y: 600 }
});
group = Body.nextGroup(true);
// context for MatterTools.Demo
var ropeB = Composites.stack(500, 100, 5, 2, 10, 10, function(x, y) { return {
return Bodies.circle(x, y, 20, { collisionFilter: { group: group } }); engine: engine,
}); runner: runner,
render: render,
Composites.chain(ropeB, 0.5, 0, -0.5, 0, { stiffness: 0.8, length: 2 }); canvas: render.canvas,
Composite.add(ropeB, Constraint.create({ stop: function() {
bodyB: ropeB.bodies[0], Matter.Render.stop(render);
pointB: { x: -20, y: 0 }, Matter.Runner.stop(runner);
pointA: { x: 500, y: 100 }, }
stiffness: 0.5
}));
World.add(world, ropeB);
}; };
};
})();

89
examples/circleStack.js
View file

@ -1,18 +1,79 @@
(function() { var Example = Example || {};
var World = Matter.World, Example.circleStack = function() {
Bodies = Matter.Bodies, var Engine = Matter.Engine,
Composites = Matter.Composites; Render = Matter.Render,
Runner = Matter.Runner,
Body = Matter.Body,
Composite = Matter.Composite,
Composites = Matter.Composites,
Common = Matter.Common,
Constraint = Matter.Constraint,
MouseConstraint = Matter.MouseConstraint,
Mouse = Matter.Mouse,
World = Matter.World,
Bodies = Matter.Bodies;
Example.circleStack = function(demo) { // create engine
var engine = demo.engine, var engine = Engine.create(),
world = engine.world; world = engine.world;
var stack = Composites.stack(100, 185, 10, 10, 20, 0, function(x, y) { // create renderer
return Bodies.circle(x, y, 20); var render = Render.create({
element: document.body,
engine: engine,
options: {
width: Math.min(document.body.clientWidth, 1024),
height: Math.min(document.body.clientHeight, 1024),
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, [
Bodies.rectangle(400, 600, 800, 50.5, { 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, stack);
};
})(); 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));
// context for MatterTools.Demo
return {
engine: engine,
runner: runner,
render: render,
canvas: render.canvas,
stop: function() {
Matter.Render.stop(render);
Matter.Runner.stop(runner);
}
};
};

96
examples/cloth.js
View file

@ -1,27 +1,83 @@
(function() { var Example = Example || {};
var World = Matter.World, Example.cloth = function() {
Bodies = Matter.Bodies, var Engine = Matter.Engine,
Render = Matter.Render,
Runner = Matter.Runner,
Body = Matter.Body, Body = Matter.Body,
Composites = Matter.Composites; Composite = Matter.Composite,
Composites = Matter.Composites,
Common = Matter.Common,
Constraint = Matter.Constraint,
MouseConstraint = Matter.MouseConstraint,
Mouse = Matter.Mouse,
World = Matter.World,
Bodies = Matter.Bodies;
Example.cloth = function(demo) { // create engine
var engine = demo.engine, var engine = Engine.create(),
world = engine.world; world = engine.world;
var group = Body.nextGroup(true),
particleOptions = { friction: 0.00001, collisionFilter: { group: group }, render: { visible: false }},
cloth = Composites.softBody(200, 200, 20, 12, 5, 5, false, 8, particleOptions);
for (var i = 0; i < 20; i++) { // create renderer
cloth.bodies[i].isStatic = true; var render = Render.create({
element: document.body,
engine: engine,
options: {
width: Math.min(document.body.clientWidth, 1024),
height: Math.min(document.body.clientHeight, 1024)
} }
});
World.add(world, [ Render.run(render);
cloth,
Bodies.circle(300, 500, 80, { isStatic: true }), // create runner
Bodies.rectangle(500, 480, 80, 80, { isStatic: true }) 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 }},
cloth = Composites.softBody(200, 200, 20, 12, 5, 5, false, 8, particleOptions);
for (var i = 0; i < 20; i++) {
cloth.bodies[i].isStatic = true;
}
World.add(world, [
cloth,
Bodies.circle(300, 500, 80, { isStatic: true }),
Bodies.rectangle(500, 480, 80, 80, { isStatic: true })
]);
// add mouse control
var mouse = Mouse.create(render.canvas),
mouseConstraint = MouseConstraint.create(engine, {
mouse: mouse,
constraint: {
stiffness: 0.9
}
});
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: 700 }
});
// context for MatterTools.Demo
return {
engine: engine,
runner: runner,
render: render,
canvas: render.canvas,
stop: function() {
Matter.Render.stop(render);
Matter.Runner.stop(runner);
}
}; };
};
})();

211
examples/collisionFiltering.js
View file

@ -1,97 +1,154 @@
(function() { var Example = Example || {};
var World = Matter.World, Example.collisionFiltering = function() {
Bodies = Matter.Bodies, var Engine = Matter.Engine,
Render = Matter.Render,
Runner = Matter.Runner,
Composite = Matter.Composite,
Composites = Matter.Composites, Composites = Matter.Composites,
Common = Matter.Common; Common = Matter.Common,
MouseConstraint = Matter.MouseConstraint,
Mouse = Matter.Mouse,
World = Matter.World,
Bodies = Matter.Bodies;
Example.collisionFiltering = function(demo) { // create engine
var engine = demo.engine, var engine = Engine.create(),
world = engine.world, world = engine.world;
mouseConstraint = demo.mouseConstraint;
// define our categories (as bit fields, there are up to 32 available) // create renderer
var defaultCategory = 0x0001, var render = Render.create({
redCategory = 0x0002, element: document.body,
greenCategory = 0x0004, engine: engine,
blueCategory = 0x0008; options: {
width: Math.min(document.body.clientWidth, 1024),
height: Math.min(document.body.clientHeight, 1024),
wireframes: false,
background: '#111'
}
});
var redColor = '#C44D58', Render.run(render);
blueColor = '#4ECDC4',
greenColor = '#C7F464';
// create a stack with varying body categories (but these bodies can all collide with each other) // create runner
World.add(world, var runner = Runner.create();
Composites.stack(275, 150, 5, 10, 10, 10, function(x, y, column, row) { Runner.run(runner, engine);
var category = redCategory,
color = redColor;
if (row > 5) { // define our categories (as bit fields, there are up to 32 available)
category = blueCategory; var defaultCategory = 0x0001,
color = blueColor; redCategory = 0x0002,
} else if (row > 2) { greenCategory = 0x0004,
category = greenCategory; blueCategory = 0x0008;
color = greenColor;
}
return Bodies.circle(x, y, 20, { var redColor = '#C44D58',
collisionFilter: { blueColor = '#4ECDC4',
category: category greenColor = '#C7F464';
},
render: {
strokeStyle: color,
fillStyle: 'transparent'
}
});
})
);
// this body will only collide with the walls and the green bodies // add floor
World.add(world, World.add(world, Bodies.rectangle(400, 800, 900, 50, {
Bodies.circle(310, 40, 30, { isStatic: true,
render: {
fillStyle: 'transparent'
}
}));
// create a stack with varying body categories (but these bodies can all collide with each other)
World.add(world,
Composites.stack(275, 150, 5, 10, 10, 10, function(x, y, column, row) {
var category = redCategory,
color = redColor;
if (row > 5) {
category = blueCategory;
color = blueColor;
} else if (row > 2) {
category = greenCategory;
color = greenColor;
}
return Bodies.circle(x, y, 20, {
collisionFilter: { collisionFilter: {
mask: defaultCategory | greenCategory category: category
}, },
render: { render: {
strokeStyle: Common.shadeColor(greenColor, -20), strokeStyle: color,
fillStyle: greenColor fillStyle: 'transparent'
} }
}) });
); })
);
// this body will only collide with the walls and the red bodies // this body will only collide with the walls and the green bodies
World.add(world, World.add(world,
Bodies.circle(400, 40, 30, { Bodies.circle(310, 40, 30, {
collisionFilter: { collisionFilter: {
mask: defaultCategory | redCategory mask: defaultCategory | greenCategory
}, },
render: {
strokeStyle: Common.shadeColor(greenColor, -20),
fillStyle: greenColor
}
})
);
// this body will only collide with the walls and the red bodies
World.add(world,
Bodies.circle(400, 40, 30, {
collisionFilter: {
mask: defaultCategory | redCategory
},
render: {
strokeStyle: Common.shadeColor(redColor, -20),
fillStyle: redColor
}
})
);
// this body will only collide with the walls and the blue bodies
World.add(world,
Bodies.circle(480, 40, 30, {
collisionFilter: {
mask: defaultCategory | blueCategory
},
render: {
strokeStyle: Common.shadeColor(blueColor, -20),
fillStyle: blueColor
}
})
);
// add mouse control
var mouse = Mouse.create(render.canvas),
mouseConstraint = MouseConstraint.create(engine, {
mouse: mouse,
constraint: {
stiffness: 0.2,
render: { render: {
strokeStyle: Common.shadeColor(redColor, -20), visible: false
fillStyle: redColor
} }
}) }
); });
// this body will only collide with the walls and the blue bodies World.add(world, mouseConstraint);
World.add(world,
Bodies.circle(480, 40, 30, {
collisionFilter: {
mask: defaultCategory | blueCategory
},
render: {
strokeStyle: Common.shadeColor(blueColor, -20),
fillStyle: blueColor
}
})
);
// red category objects should not be draggable with the mouse // keep the mouse in sync with rendering
mouseConstraint.collisionFilter.mask = defaultCategory | blueCategory | greenCategory; render.mouse = mouse;
var renderOptions = demo.render.options; // red category objects should not be draggable with the mouse
renderOptions.wireframes = false; mouseConstraint.collisionFilter.mask = defaultCategory | blueCategory | greenCategory;
renderOptions.background = '#222';
renderOptions.showAngleIndicator = false; // fit the render viewport to the scene
Render.lookAt(render, Composite.allBodies(world));
// context for MatterTools.Demo
return {
engine: engine,
runner: runner,
render: render,
canvas: render.canvas,
stop: function() {
Matter.Render.stop(render);
Matter.Runner.stop(runner);
}
}; };
};
})();

127
examples/compositeManipulation.js
View file

@ -1,51 +1,106 @@
(function() { var Example = Example || {};
var World = Matter.World, Example.compositeManipulation = function() {
Bodies = Matter.Bodies, var Engine = Matter.Engine,
Render = Matter.Render,
Runner = Matter.Runner,
Body = Matter.Body,
Events = Matter.Events,
Composite = Matter.Composite, Composite = Matter.Composite,
Composites = Matter.Composites, Composites = Matter.Composites,
Events = Matter.Events; Common = Matter.Common,
Constraint = Matter.Constraint,
MouseConstraint = Matter.MouseConstraint,
Mouse = Matter.Mouse,
World = Matter.World,
Bodies = Matter.Bodies;
Example.compositeManipulation = function(demo) { // create engine
var engine = demo.engine, var engine = Engine.create(),
world = engine.world, world = engine.world;
sceneEvents = demo.sceneEvents;
var stack = Composites.stack(200, 200, 4, 4, 0, 0, function(x, y) { // create renderer
return Bodies.rectangle(x, y, 40, 40); var render = Render.create({
element: document.body,
engine: engine,
options: {
width: Math.min(document.body.clientWidth, 1024),
height: Math.min(document.body.clientHeight, 1024),
showAngleIndicator: true
}
});
Render.run(render);
// create runner
var runner = Runner.create();
Runner.run(runner, engine);
// add bodies
World.add(world, [
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 })
]);
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
}); });
World.add(world, stack); Composite.rotate(stack, Math.sin(time * 0.001) * 0.01, {
x: 300,
y: 300
});
world.gravity.y = 0; var scale = 1 + (Math.sin(time * 0.001) * 0.01);
sceneEvents.push( Composite.scale(stack, scale, scale, {
Events.on(engine, 'afterUpdate', function(event) { x: 300,
var time = engine.timing.timestamp; y: 300
});
});
Composite.translate(stack, { // add mouse control
x: Math.sin(time * 0.001) * 2, var mouse = Mouse.create(render.canvas),
y: 0 mouseConstraint = MouseConstraint.create(engine, {
}); mouse: mouse,
constraint: {
stiffness: 0.2,
render: {
visible: false
}
}
});
Composite.rotate(stack, Math.sin(time * 0.001) * 0.01, { World.add(world, mouseConstraint);
x: 300,
y: 300
});
var scale = 1 + (Math.sin(time * 0.001) * 0.01); // keep the mouse in sync with rendering
render.mouse = mouse;
Composite.scale(stack, scale, scale, { // fit the render viewport to the scene
x: 300, Render.lookAt(render, Composite.allBodies(world));
y: 300
});
})
);
var renderOptions = demo.render.options; // context for MatterTools.Demo
renderOptions.wireframes = false; return {
renderOptions.showAxes = true; engine: engine,
renderOptions.showCollisions = true; runner: runner,
render: render,
canvas: render.canvas,
stop: function() {
Matter.Render.stop(render);
Matter.Runner.stop(runner);
}
}; };
};
})();

136
examples/compound.js
View file

@ -1,49 +1,109 @@
(function() { var Example = Example || {};
var World = Matter.World, Example.compound = function() {
Bodies = Matter.Bodies, var Engine = Matter.Engine,
Render = Matter.Render,
Runner = Matter.Runner,
Body = Matter.Body, Body = Matter.Body,
Constraint = Matter.Constraint; Events = Matter.Events,
Composite = Matter.Composite,
Composites = Matter.Composites,
Common = Matter.Common,
Constraint = Matter.Constraint,
MouseConstraint = Matter.MouseConstraint,
Mouse = Matter.Mouse,
World = Matter.World,
Bodies = Matter.Bodies;
Example.compound = function(demo) { // create engine
var engine = demo.engine, var engine = Engine.create(),
world = engine.world; world = engine.world;
var size = 200, // create renderer
x = 200, var render = Render.create({
y = 200, element: document.body,
partA = Bodies.rectangle(x, y, size, size / 5), engine: engine,
partB = Bodies.rectangle(x, y, size / 5, size, { render: partA.render }); options: {
width: Math.min(document.body.clientWidth, 1024),
height: Math.min(document.body.clientHeight, 1024),
showAxes: true,
showPositions: true,
showConvexHulls: true
}
});
var compoundBodyA = Body.create({ Render.run(render);
parts: [partA, partB]
// 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: -50 }
});
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
}
}
}); });
size = 150; World.add(world, mouseConstraint);
x = 400;
y = 300;
var partC = Bodies.circle(x, y, 30), // keep the mouse in sync with rendering
partD = Bodies.circle(x + size, y, 30), render.mouse = mouse;
partE = Bodies.circle(x + size, y + size, 30),
partF = Bodies.circle(x, y + size, 30);
var compoundBodyB = Body.create({ // fit the render viewport to the scene
parts: [partC, partD, partE, partF] Render.lookAt(render, Composite.allBodies(world));
});
var constraint = Constraint.create({ // context for MatterTools.Demo
pointA: { x: 400, y: 100 }, return {
bodyB: compoundBodyB, engine: engine,
pointB: { x: 0, y: -50 } runner: runner,
}); render: render,
canvas: render.canvas,
World.add(world, [compoundBodyA, compoundBodyB, constraint]); stop: function() {
Matter.Render.stop(render);
var renderOptions = demo.render.options; Matter.Runner.stop(runner);
renderOptions.showAxes = true; }
renderOptions.showPositions = true;
renderOptions.showConvexHulls = true;
}; };
};
})();

96
examples/compoundStack.js
View file

@ -1,25 +1,87 @@
(function() { var Example = Example || {};
var World = Matter.World, Example.compoundStack = function() {
Bodies = Matter.Bodies, var Engine = Matter.Engine,
Render = Matter.Render,
Runner = Matter.Runner,
Body = Matter.Body, Body = Matter.Body,
Composites = Matter.Composites; Events = Matter.Events,
Composite = Matter.Composite,
Composites = Matter.Composites,
Common = Matter.Common,
Constraint = Matter.Constraint,
MouseConstraint = Matter.MouseConstraint,
Mouse = Matter.Mouse,
World = Matter.World,
Bodies = Matter.Bodies;
Example.compoundStack = function(demo) { // create engine
var engine = demo.engine, var engine = Engine.create(),
world = engine.world, world = engine.world;
size = 50;
var stack = Composites.stack(100, 280, 12, 6, 0, 0, function(x, y) { // create renderer
var partA = Bodies.rectangle(x, y, size, size / 5), var render = Render.create({
partB = Bodies.rectangle(x, y, size / 5, size, { render: partA.render }); element: document.body,
engine: engine,
options: {
width: Math.min(document.body.clientWidth, 1024),
height: Math.min(document.body.clientHeight, 1024),
showAngleIndicator: true
}
});
return Body.create({ Render.run(render);
parts: [partA, partB]
}); // 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,
Bodies.rectangle(400, 620, 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, stack); 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));
// context for MatterTools.Demo
return {
engine: engine,
runner: runner,
render: render,
canvas: render.canvas,
stop: function() {
Matter.Render.stop(render);
Matter.Runner.stop(runner);
}
};
};

104
examples/concave.js
View file

@ -1,34 +1,94 @@
(function() { var Example = Example || {};
var World = Matter.World, Example.concave = function() {
Bodies = Matter.Bodies, var Engine = Matter.Engine,
Render = Matter.Render,
Runner = Matter.Runner,
Body = Matter.Body,
Events = Matter.Events,
Composite = Matter.Composite,
Composites = Matter.Composites, Composites = Matter.Composites,
Common = Matter.Common, Common = Matter.Common,
Vertices = Matter.Vertices; Constraint = Matter.Constraint,
MouseConstraint = Matter.MouseConstraint,
Mouse = Matter.Mouse,
World = Matter.World,
Vertices = Matter.Vertices,
Bodies = Matter.Bodies;
Example.concave = function(demo) { // create engine
var engine = demo.engine, var engine = Engine.create(),
world = engine.world; world = engine.world;
var arrow = Vertices.fromPath('40 0 40 20 100 20 100 80 40 80 40 100 0 50'), // create renderer
chevron = Vertices.fromPath('100 0 75 50 100 100 25 100 0 50 25 0'), var render = Render.create({
star = Vertices.fromPath('50 0 63 38 100 38 69 59 82 100 50 75 18 100 31 59 0 38 37 38'), element: document.body,
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'); engine: engine,
options: {
width: Math.min(document.body.clientWidth, 1024),
height: Math.min(document.body.clientHeight, 1024)
}
});
var stack = Composites.stack(50, 50, 6, 4, 10, 10, function(x, y) { Render.run(render);
var color = Common.choose(['#556270', '#4ECDC4', '#C7F464', '#FF6B6B', '#C44D58']);
return Bodies.fromVertices(x, y, Common.choose([arrow, chevron, star, horseShoe]), { // create runner
var runner = Runner.create();
Runner.run(runner, engine);
// add bodies
World.add(world, [
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 })
]);
var arrow = Vertices.fromPath('40 0 40 20 100 20 100 80 40 80 40 100 0 50'),
chevron = Vertices.fromPath('100 0 75 50 100 100 25 100 0 50 25 0'),
star = Vertices.fromPath('50 0 63 38 100 38 69 59 82 100 50 75 18 100 31 59 0 38 37 38'),
horseShoe = Vertices.fromPath('35 7 19 17 14 38 14 58 25 79 45 85 65 84 65 66 46 67 34 59 30 44 33 29 45 23 66 23 66 7 53 7');
var stack = Composites.stack(50, 50, 6, 4, 10, 10, function(x, y) {
var color = Common.choose(['#556270', '#4ECDC4', '#C7F464', '#FF6B6B', '#C44D58']);
return Bodies.fromVertices(x, y, Common.choose([arrow, chevron, star, horseShoe]), {
render: {
fillStyle: color,
strokeStyle: color
}
}, 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: { render: {
fillStyle: color, visible: false
strokeStyle: color
} }
}, true); }
}); });
World.add(world, stack); World.add(world, mouseConstraint);
var renderOptions = demo.render.options; // keep the mouse in sync with rendering
renderOptions.showAngleIndicator = false; render.mouse = mouse;
// fit the render viewport to the scene
Render.lookAt(render, Composite.allBodies(world));
// context for MatterTools.Demo
return {
engine: engine,
runner: runner,
render: render,
canvas: render.canvas,
stop: function() {
Matter.Render.stop(render);
Matter.Runner.stop(runner);
}
}; };
};
})();

17
examples/engine.js
View file

@ -1,17 +0,0 @@
(function() {
var Engine = Matter.Engine;
Example.engine = function(demo) {
// some example engine options
var options = {
positionIterations: 6,
velocityIterations: 4,
enableSleeping: false,
metrics: { extended: true }
};
return Engine.create(options);
};
})();

281
examples/events.js
View file

@ -1,159 +1,176 @@
(function() { var Example = Example || {};
var World = Matter.World, Example.events = function() {
Bodies = Matter.Bodies, var Engine = Matter.Engine,
Render = Matter.Render,
Runner = Matter.Runner,
Body = Matter.Body, Body = Matter.Body,
Events = Matter.Events,
Composite = Matter.Composite, Composite = Matter.Composite,
Composites = Matter.Composites, Composites = Matter.Composites,
Common = Matter.Common, Common = Matter.Common,
Events = Matter.Events; Constraint = Matter.Constraint,
MouseConstraint = Matter.MouseConstraint,
Mouse = Matter.Mouse,
World = Matter.World,
Vertices = Matter.Vertices,
Bodies = Matter.Bodies;
Example.events = function(demo) { // create engine
var engine = demo.engine, var engine = Engine.create(),
world = engine.world, world = engine.world;
mouseConstraint = demo.mouseConstraint,
sceneEvents = demo.sceneEvents;
// bind events (sceneEvents is only used for this demo)
sceneEvents.push( // create renderer
var render = Render.create({
element: document.body,
engine: engine,
options: {
width: Math.min(document.body.clientWidth, 1024),
height: Math.min(document.body.clientHeight, 1024)
}
});
// an example of using composite events on the world Render.run(render);
Events.on(world, 'afterAdd', function(event) {
console.log('added to world:', event.object);
})
); // create runner
var runner = Runner.create();
Runner.run(runner, engine);
sceneEvents.push( // 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 // an example of using beforeUpdate event on an engine
Events.on(engine, 'beforeUpdate', function(event) { Events.on(engine, 'beforeUpdate', function(event) {
var engine = event.source; var engine = event.source;
// apply random forces every 5 secs // apply random forces every 5 secs
if (event.timestamp % 5000 < 50) if (event.timestamp % 5000 < 50)
shakeScene(engine); shakeScene(engine);
}) });
); // an example of using collisionStart event on an engine
Events.on(engine, 'collisionStart', function(event) {
var pairs = event.pairs;
sceneEvents.push( // 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 = '#bbbbbb';
pair.bodyB.render.fillStyle = '#bbbbbb';
}
});
// an example of using collisionStart event on an engine // an example of using collisionActive event on an engine
Events.on(engine, 'collisionStart', function(event) { Events.on(engine, 'collisionActive', function(event) {
var pairs = event.pairs; var pairs = event.pairs;
// change object colours to show those starting a collision // change object colours to show those in an active collision (e.g. resting contact)
for (var i = 0; i < pairs.length; i++) { for (var i = 0; i < pairs.length; i++) {
var pair = pairs[i]; var pair = pairs[i];
pair.bodyA.render.fillStyle = '#bbbbbb'; pair.bodyA.render.fillStyle = '#aaaaaa';
pair.bodyB.render.fillStyle = '#bbbbbb'; pair.bodyB.render.fillStyle = '#aaaaaa';
} }
}) });
); // an example of using collisionEnd event on an engine
Events.on(engine, 'collisionEnd', function(event) {
var pairs = event.pairs;
sceneEvents.push( // 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 = '#999999';
pair.bodyB.render.fillStyle = '#999999';
}
});
// an example of using collisionActive event on an engine // scene code
Events.on(engine, 'collisionActive', function(event) { World.add(world, [
var pairs = event.pairs; 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 })
]);
// change object colours to show those in an active collision (e.g. resting contact) var stack = Composites.stack(70, 100, 9, 4, 50, 50, function(x, y) {
for (var i = 0; i < pairs.length; i++) { return Bodies.circle(x, y, 15, { restitution: 1, render: { strokeStyle: '#777' } });
var pair = pairs[i]; });
pair.bodyA.render.fillStyle = '#aaaaaa';
pair.bodyB.render.fillStyle = '#aaaaaa'; World.add(world, stack);
}
})
); var shakeScene = function(engine) {
var bodies = Composite.allBodies(engine.world);
sceneEvents.push( for (var i = 0; i < bodies.length; i++) {
var body = bodies[i];
// an example of using collisionEnd event on an engine if (!body.isStatic && body.position.y >= 500) {
Events.on(engine, 'collisionEnd', function(event) { var forceMagnitude = 0.02 * body.mass;
var pairs = event.pairs;
// change object colours to show those ending a collision Body.applyForce(body, body.position, {
for (var i = 0; i < pairs.length; i++) { x: (forceMagnitude + Common.random() * forceMagnitude) * Common.choose([1, -1]),
var pair = pairs[i]; y: -forceMagnitude + Common.random() * -forceMagnitude
pair.bodyA.render.fillStyle = '#999999'; });
pair.bodyB.render.fillStyle = '#999999';
}
})
);
sceneEvents.push(
// 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);
demo.render.options.background = 'cornsilk';
shakeScene(engine);
})
);
sceneEvents.push(
// an example of using mouse events on a mouse
Events.on(mouseConstraint, 'mouseup', function(event) {
var mousePosition = event.mouse.position;
demo.render.options.background = "white";
console.log('mouseup at ' + mousePosition.x + ' ' + mousePosition.y);
})
);
sceneEvents.push(
// an example of using mouse events on a mouse
Events.on(mouseConstraint, 'startdrag', function(event) {
console.log('startdrag', event);
})
);
sceneEvents.push(
// an example of using mouse events on a mouse
Events.on(mouseConstraint, 'enddrag', function(event) {
console.log('enddrag', event);
})
);
// scene code
var stack = Composites.stack(50, 100, 8, 4, 50, 50, function(x, y) {
return Bodies.circle(x, y, 15, { restitution: 1, render: { strokeStyle: '#777' } });
});
World.add(world, stack);
var renderOptions = demo.render.options;
renderOptions.wireframes = false;
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.01 * body.mass;
Body.applyForce(body, { x: 0, y: 0 }, {
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);
render.options.background = 'cornsilk';
shakeScene(engine);
});
// an example of using mouse events on a mouse
Events.on(mouseConstraint, 'mouseup', function(event) {
var mousePosition = event.mouse.position;
render.options.background = "white";
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, Composite.allBodies(world));
// context for MatterTools.Demo
return {
engine: engine,
runner: runner,
render: render,
canvas: render.canvas,
stop: function() {
Matter.Render.stop(render);
Matter.Runner.stop(runner);
}
};
};

109
examples/friction.js
View file

@ -1,30 +1,93 @@
(function() { var Example = Example || {};
var World = Matter.World, Example.friction = 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,
Constraint = Matter.Constraint,
MouseConstraint = Matter.MouseConstraint,
Mouse = Matter.Mouse,
World = Matter.World,
Vertices = Matter.Vertices,
Bodies = Matter.Bodies; Bodies = Matter.Bodies;
Example.friction = function(demo) { // create engine
var engine = demo.engine, var engine = Engine.create(),
world = engine.world; world = engine.world;
World.add(world, [
Bodies.rectangle(300, 180, 700, 20, { isStatic: true, angle: Math.PI * 0.06 }),
Bodies.rectangle(300, 70, 40, 40, { friction: 0.001 })
]);
World.add(world, [ // create renderer
Bodies.rectangle(300, 350, 700, 20, { isStatic: true, angle: Math.PI * 0.06 }), var render = Render.create({
Bodies.rectangle(300, 250, 40, 40, { friction: 0.0005 }) element: document.body,
]); engine: engine,
options: {
width: Math.min(document.body.clientWidth, 1024),
height: Math.min(document.body.clientHeight, 1024),
showVelocity: true
}
});
World.add(world, [ Render.run(render);
Bodies.rectangle(300, 520, 700, 20, { isStatic: true, angle: Math.PI * 0.06 }),
Bodies.rectangle(300, 430, 40, 40, { friction: 0 })
]);
var renderOptions = demo.render.options; // create runner
renderOptions.showAngleIndicator = false; var runner = Runner.create();
renderOptions.showVelocity = true; Runner.run(runner, engine);
// add bodies
World.add(world, [
Bodies.rectangle(400, 600, 800, 50, { isStatic: true }),
Bodies.rectangle(800, 300, 50, 600, { isStatic: true }),
Bodies.rectangle(0, 300, 50, 600, { isStatic: true })
]);
World.add(world, [
Bodies.rectangle(300, 180, 700, 20, { isStatic: true, angle: Math.PI * 0.06 }),
Bodies.rectangle(300, 70, 40, 40, { friction: 0.001 })
]);
World.add(world, [
Bodies.rectangle(300, 350, 700, 20, { isStatic: true, angle: Math.PI * 0.06 }),
Bodies.rectangle(300, 250, 40, 40, { friction: 0.0005 })
]);
World.add(world, [
Bodies.rectangle(300, 520, 700, 20, { isStatic: true, angle: Math.PI * 0.06 }),
Bodies.rectangle(300, 430, 40, 40, { friction: 0 })
]);
// add mouse control
var mouse = Mouse.create(render.canvas),
mouseConstraint = MouseConstraint.create(engine, {
mouse: mouse,
constraint: {
stiffness: 0.2,
render: {
visible: false
}
}
});
World.add(world, mouseConstraint);
// keep the mouse in sync with rendering
render.mouse = mouse;
// fit the render viewport to the scene
Render.lookAt(render, Composite.allBodies(world));
// context for MatterTools.Demo
return {
engine: engine,
runner: runner,
render: render,
canvas: render.canvas,
stop: function() {
Matter.Render.stop(render);
Matter.Runner.stop(runner);
}
}; };
};
})();

117
examples/gravity.js
View file

@ -1,33 +1,100 @@
(function() { var Example = Example || {};
var World = Matter.World, Example.gravity = function() {
Bodies = Matter.Bodies, var Engine = Matter.Engine,
Render = Matter.Render,
Runner = Matter.Runner,
Body = Matter.Body,
Events = Matter.Events,
Composite = Matter.Composite,
Composites = Matter.Composites, Composites = Matter.Composites,
Common = Matter.Common; Common = Matter.Common,
Constraint = Matter.Constraint,
MouseConstraint = Matter.MouseConstraint,
Mouse = Matter.Mouse,
World = Matter.World,
Vertices = Matter.Vertices,
Bodies = Matter.Bodies;
Example.gravity = function(demo) { // create engine
var engine = demo.engine, var engine = Engine.create(),
world = engine.world; world = engine.world;
engine.world.gravity.y = -1;
var stack = Composites.stack(20, 20, 20, 5, 0, 0, function(x, y) {
switch (Math.round(Common.random(0, 1))) {
case 0: // create renderer
if (Common.random() < 0.8) { var render = Render.create({
return Bodies.rectangle(x, y, Common.random(20, 50), Common.random(20, 50)); element: document.body,
} else { engine: engine,
return Bodies.rectangle(x, y, Common.random(80, 120), Common.random(20, 30)); options: {
width: Math.min(document.body.clientWidth, 1024),
height: Math.min(document.body.clientHeight, 1024),
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));
}
break;
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
} }
break;
case 1:
return Bodies.polygon(x, y, Math.round(Common.random(1, 8)), Common.random(20, 50));
} }
}); });
World.add(world, stack); 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));
// context for MatterTools.Demo
return {
engine: engine,
runner: runner,
render: render,
canvas: render.canvas,
stop: function() {
Matter.Render.stop(render);
Matter.Runner.stop(runner);
}
}; };
};
})();

129
examples/gyro.js Normal file
View file

@ -0,0 +1,129 @@
var Example = Example || {};
Example.gyro = 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,
Constraint = Matter.Constraint,
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: Math.min(document.body.clientWidth, 1024),
height: Math.min(document.body.clientHeight, 1024)
}
});
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 });
}
break;
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
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, Composite.allBodies(world));
// context for MatterTools.Demo
return {
engine: engine,
runner: runner,
render: render,
canvas: render.canvas,
stop: function() {
Matter.Render.stop(render);
Matter.Runner.stop(runner);
window.removeEventListener('deviceorientation', updateGravity);
}
};
};

192
examples/manipulation.js
View file

@ -1,83 +1,141 @@
(function() { var Example = Example || {};
var World = Matter.World, Example.manipulation = function() {
Bodies = Matter.Bodies, var Engine = Matter.Engine,
Render = Matter.Render,
Runner = Matter.Runner,
Body = Matter.Body, Body = Matter.Body,
Events = Matter.Events; Events = Matter.Events,
Composite = Matter.Composite,
Composites = Matter.Composites,
Common = Matter.Common,
Constraint = Matter.Constraint,
MouseConstraint = Matter.MouseConstraint,
Mouse = Matter.Mouse,
World = Matter.World,
Vertices = Matter.Vertices,
Bodies = Matter.Bodies;
Example.manipulation = function(demo) { // create engine
var engine = demo.engine, var engine = Engine.create(),
world = engine.world, world = engine.world;
sceneEvents = demo.sceneEvents;
var bodyA = Bodies.rectangle(100, 200, 50, 50, { isStatic: true }), // create renderer
bodyB = Bodies.rectangle(200, 200, 50, 50), var render = Render.create({
bodyC = Bodies.rectangle(300, 200, 50, 50), element: document.body,
bodyD = Bodies.rectangle(400, 200, 50, 50), engine: engine,
bodyE = Bodies.rectangle(550, 200, 50, 50), options: {
bodyF = Bodies.rectangle(700, 200, 50, 50), width: Math.min(document.body.clientWidth, 1024),
bodyG = Bodies.circle(400, 100, 25), height: Math.min(document.body.clientHeight, 1024),
partA = Bodies.rectangle(600, 200, 120, 50), showAxes: true,
partB = Bodies.rectangle(660, 200, 50, 190), showCollisions: true,
compound = Body.create({ showConvexHulls: true
parts: [partA, partB], }
isStatic: true });
});
World.add(world, [bodyA, bodyB, bodyC, bodyD, bodyE, bodyF, bodyG, compound]); Render.run(render);
var counter = 0, // create runner
scaleFactor = 1.01; var runner = Runner.create();
Runner.run(runner, engine);
sceneEvents.push( // add bodies
Events.on(engine, 'beforeUpdate', function(event) { var bodyA = Bodies.rectangle(100, 200, 50, 50, { isStatic: true }),
counter += 1; bodyB = Bodies.rectangle(200, 200, 50, 50),
bodyC = Bodies.rectangle(300, 200, 50, 50),
bodyD = Bodies.rectangle(400, 200, 50, 50),
bodyE = Bodies.rectangle(550, 200, 50, 50),
bodyF = Bodies.rectangle(700, 200, 50, 50),
bodyG = Bodies.circle(400, 100, 25),
partA = Bodies.rectangle(600, 200, 120, 50),
partB = Bodies.rectangle(660, 200, 50, 190),
compound = Body.create({
parts: [partA, partB],
isStatic: true
});
if (counter === 40) World.add(world, [bodyA, bodyB, bodyC, bodyD, bodyE, bodyF, bodyG, compound]);
Body.setStatic(bodyG, true);
if (scaleFactor > 1) { World.add(world, [
Body.scale(bodyF, scaleFactor, scaleFactor); Bodies.rectangle(400, 600, 800, 50, { isStatic: true }),
Body.scale(compound, 0.995, 0.995); Bodies.rectangle(800, 300, 50, 600, { isStatic: true }),
Bodies.rectangle(0, 300, 50, 600, { isStatic: true })
]);
// modify bodyE vertices var counter = 0,
bodyE.vertices[0].x -= 0.2; scaleFactor = 1.01;
bodyE.vertices[0].y -= 0.2;
bodyE.vertices[1].x += 0.2; Events.on(engine, 'beforeUpdate', function(event) {
bodyE.vertices[1].y -= 0.2; counter += 1;
Body.setVertices(bodyE, bodyE.vertices);
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
} }
}
});
// make bodyA move up and down World.add(world, mouseConstraint);
// 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 // keep the mouse in sync with rendering
Body.setVelocity(compound, { x: 0, y: py - compound.position.y }); render.mouse = mouse;
Body.setAngularVelocity(compound, 0.02);
Body.setPosition(compound, { x: 600, y: py });
Body.rotate(compound, 0.02);
// every 1.5 sec // fit the render viewport to the scene
if (counter >= 60 * 1.5) { Render.lookAt(render, Composite.allBodies(world));
Body.setVelocity(bodyB, { x: 0, y: -10 });
Body.setAngle(bodyC, -Math.PI * 0.26);
Body.setAngularVelocity(bodyD, 0.2);
// reset counter // context for MatterTools.Demo
counter = 0; return {
scaleFactor = 1; engine: engine,
} runner: runner,
}) render: render,
); canvas: render.canvas,
stop: function() {
var renderOptions = demo.render.options; Matter.Render.stop(render);
renderOptions.showAxes = true; Matter.Runner.stop(runner);
renderOptions.showCollisions = true; }
renderOptions.showPositions = true;
renderOptions.showConvexHulls = true;
}; };
};
})();

123
examples/mixed.js
View file

@ -1,42 +1,107 @@
(function() { var Example = Example || {};
var World = Matter.World, Example.mixed = function() {
Bodies = Matter.Bodies, var Engine = Matter.Engine,
Render = Matter.Render,
Runner = Matter.Runner,
Body = Matter.Body,
Events = Matter.Events,
Composite = Matter.Composite,
Composites = Matter.Composites, Composites = Matter.Composites,
Common = Matter.Common; Common = Matter.Common,
Constraint = Matter.Constraint,
MouseConstraint = Matter.MouseConstraint,
Mouse = Matter.Mouse,
World = Matter.World,
Vertices = Matter.Vertices,
Bodies = Matter.Bodies;
Example.mixed = function(demo) { // create engine
var engine = demo.engine, var engine = Engine.create(),
world = engine.world; world = engine.world;
var stack = Composites.stack(20, 20, 15, 4, 0, 0, function(x, y) { // create renderer
var sides = Math.round(Common.random(1, 8)); var render = Render.create({
element: document.body,
engine: engine,
options: {
width: Math.min(document.body.clientWidth, 1024),
height: Math.min(document.body.clientHeight, 1024),
showAngleIndicator: true
}
});
// triangles can be a little unstable, so avoid until fixed Render.run(render);
sides = (sides === 3) ? 4 : sides;
// round the edges of some bodies // create runner
var chamfer = null; var runner = Runner.create();
if (sides > 2 && Common.random() > 0.7) { Runner.run(runner, engine);
chamfer = {
radius: 10 // 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 });
} }
break;
case 1:
return Bodies.polygon(x, y, sides, Common.random(25, 50), { chamfer: chamfer });
}
});
switch (Math.round(Common.random(0, 1))) { World.add(world, stack);
case 0:
if (Common.random() < 0.8) { World.add(world, [
return Bodies.rectangle(x, y, Common.random(25, 50), Common.random(25, 50), { chamfer: chamfer }); Bodies.rectangle(400, 600, 800, 50, { isStatic: true }),
} else { Bodies.rectangle(800, 300, 50, 600, { isStatic: true }),
return Bodies.rectangle(x, y, Common.random(80, 120), Common.random(25, 30), { chamfer: chamfer }); 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
} }
break;
case 1:
return Bodies.polygon(x, y, sides, Common.random(25, 50), { chamfer: chamfer });
} }
}); });
World.add(world, stack); 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));
// context for MatterTools.Demo
return {
engine: engine,
runner: runner,
render: render,
canvas: render.canvas,
stop: function() {
Matter.Render.stop(render);
Matter.Runner.stop(runner);
}
}; };
};
})();

35
examples/mixedSolid.js
View file

@ -1,35 +0,0 @@
(function() {
var World = Matter.World,
Bodies = Matter.Bodies,
Composites = Matter.Composites,
Common = Matter.Common;
Example.mixedSolid = function(demo) {
var engine = demo.engine,
world = engine.world;
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));
}
break;
case 1:
return Bodies.polygon(x, y, Math.round(Common.random(1, 8)), Common.random(20, 50));
}
});
World.add(world, stack);
var renderOptions = demo.render.options;
renderOptions.wireframes = false;
renderOptions.showAngleIndicator = false;
};
})();

96
examples/newtonsCradle.js
View file

@ -1,23 +1,81 @@
(function() { var Example = Example || {};
var World = Matter.World, Example.newtonsCradle = function() {
var Engine = Matter.Engine,
Render = Matter.Render,
Runner = Matter.Runner,
Body = Matter.Body, Body = Matter.Body,
Composites = Matter.Composites; Composite = Matter.Composite,
Composites = Matter.Composites,
Common = Matter.Common,
Constraint = Matter.Constraint,
MouseConstraint = Matter.MouseConstraint,
Mouse = Matter.Mouse,
World = Matter.World,
Bodies = Matter.Bodies;
Example.newtonsCradle = function(demo) { // create engine
var engine = demo.engine, var engine = Engine.create(),
world = engine.world; world = engine.world;
var cradle = Composites.newtonsCradle(280, 100, 5, 30, 200); // create renderer
World.add(world, cradle); var render = Render.create({
Body.translate(cradle.bodies[0], { x: -180, y: -100 }); element: document.body,
engine: engine,
cradle = Composites.newtonsCradle(280, 380, 7, 20, 140); options: {
World.add(world, cradle); width: Math.min(document.body.clientWidth, 1024),
Body.translate(cradle.bodies[0], { x: -140, y: -100 }); height: Math.min(document.body.clientHeight, 1024),
showVelocity: true
var renderOptions = demo.render.options; }
renderOptions.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: 0 },
max: { x: 800, y: 700 }
});
// context for MatterTools.Demo
return {
engine: engine,
runner: runner,
render: render,
canvas: render.canvas,
stop: function() {
Matter.Render.stop(render);
Matter.Runner.stop(runner);
}
}; };
};
})();

87
examples/pyramid.js
View file

@ -1,18 +1,79 @@
(function() { var Example = Example || {};
var World = Matter.World, Example.pyramid = function() {
Bodies = Matter.Bodies, var Engine = Matter.Engine,
Composites = Matter.Composites; Render = Matter.Render,
Runner = Matter.Runner,
Body = Matter.Body,
Composite = Matter.Composite,
Composites = Matter.Composites,
Common = Matter.Common,
Constraint = Matter.Constraint,
MouseConstraint = Matter.MouseConstraint,
Mouse = Matter.Mouse,
World = Matter.World,
Bodies = Matter.Bodies;
Example.pyramid = function(demo) { // create engine
var engine = demo.engine, var engine = Engine.create(),
world = engine.world; world = engine.world;
var stack = Composites.pyramid(100, 258, 15, 10, 0, 0, function(x, y) { // create renderer
return Bodies.rectangle(x, y, 40, 40); var render = Render.create({
element: document.body,
engine: engine,
options: {
width: Math.min(document.body.clientWidth, 1024),
height: Math.min(document.body.clientHeight, 1024),
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,
Bodies.rectangle(400, 620, 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, stack);
};
})(); 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));
// context for MatterTools.Demo
return {
engine: engine,
runner: runner,
render: render,
canvas: render.canvas,
stop: function() {
Matter.Render.stop(render);
Matter.Runner.stop(runner);
}
};
};

174
examples/raycasting.js
View file

@ -1,72 +1,134 @@
(function() { var Example = Example || {};
var World = Matter.World, Example.raycasting = function() {
Bodies = Matter.Bodies, var Engine = Matter.Engine,
Render = Matter.Render,
Runner = Matter.Runner,
Body = Matter.Body,
Composite = Matter.Composite, Composite = Matter.Composite,
Composites = Matter.Composites, Composites = Matter.Composites,
Common = Matter.Common, Common = Matter.Common,
Query = Matter.Query,
Constraint = Matter.Constraint,
MouseConstraint = Matter.MouseConstraint,
Mouse = Matter.Mouse,
Events = Matter.Events, Events = Matter.Events,
World = Matter.World,
Vertices = Matter.Vertices, Vertices = Matter.Vertices,
Query = Matter.Query; Bodies = Matter.Bodies;
Example.raycasting = function(demo) { // create engine
var engine = demo.engine, var engine = Engine.create(),
world = engine.world, world = engine.world;
sceneEvents = demo.sceneEvents,
mouseConstraint = demo.mouseConstraint;
var stack = Composites.stack(20, 20, 15, 4, 0, 0, function(x, y) {
switch (Math.round(Common.random(0, 1))) {
case 0: // create renderer
if (Common.random() < 0.8) { var render = Render.create({
return Bodies.rectangle(x, y, Common.random(20, 50), Common.random(20, 50)); element: document.body,
} else { engine: engine,
return Bodies.rectangle(x, y, Common.random(80, 120), Common.random(20, 30)); options: {
width: Math.min(document.body.clientWidth, 1024),
height: Math.min(document.body.clientHeight, 1024),
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));
}
break;
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,
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 })
]);
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
} }
break;
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'), World.add(world, mouseConstraint);
concave = Bodies.fromVertices(200, 200, star);
World.add(world, [stack, concave]);
sceneEvents.push( // keep the mouse in sync with rendering
Events.on(demo.render, 'afterRender', function() { render.mouse = mouse;
var mouse = mouseConstraint.mouse,
context = demo.render.context,
bodies = Composite.allBodies(engine.world),
startPoint = { x: 400, y: 100 },
endPoint = mouse.position;
var collisions = Query.ray(bodies, startPoint, endPoint); // fit the render viewport to the scene
Render.lookAt(render, Composite.allBodies(world));
context.beginPath(); // context for MatterTools.Demo
context.moveTo(startPoint.x, startPoint.y); return {
context.lineTo(endPoint.x, endPoint.y); engine: engine,
if (collisions.length > 0) { runner: runner,
context.strokeStyle = '#fff'; render: render,
} else { canvas: render.canvas,
context.strokeStyle = '#555'; stop: function() {
} Matter.Render.stop(render);
context.lineWidth = 0.5; Matter.Runner.stop(runner);
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();
})
);
}; };
};
})();

103
examples/restitution.js
View file

@ -1,27 +1,84 @@
(function() { var Example = Example || {};
var World = Matter.World, Example.restitution = function() {
var Engine = Matter.Engine,
Render = Matter.Render,
Runner = Matter.Runner,
Body = Matter.Body,
Composite = Matter.Composite,
Composites = Matter.Composites,
Common = Matter.Common,
Constraint = Matter.Constraint,
MouseConstraint = Matter.MouseConstraint,
Mouse = Matter.Mouse,
World = Matter.World,
Bodies = Matter.Bodies; Bodies = Matter.Bodies;
Example.restitution = function(demo) { // create engine
var engine = demo.engine, var engine = Engine.create(),
world = engine.world; world = engine.world;
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 })
]);
var renderOptions = demo.render.options;
renderOptions.showCollisions = true;
renderOptions.showVelocity = true;
renderOptions.showAngleIndicator = true;
};
})(); // create renderer
var render = Render.create({
element: document.body,
engine: engine,
options: {
width: Math.min(document.body.clientWidth, 1024),
height: Math.min(document.body.clientHeight, 1024),
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 }),
Bodies.rectangle(400, 620, 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, Composite.allBodies(world));
// context for MatterTools.Demo
return {
engine: engine,
runner: runner,
render: render,
canvas: render.canvas,
stop: function() {
Matter.Render.stop(render);
Matter.Runner.stop(runner);
}
};
};

131
examples/rounded.js
View file

@ -1,49 +1,108 @@
(function() { var Example = Example || {};
var World = Matter.World, Example.rounded = 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; Bodies = Matter.Bodies;
Example.rounded = function(demo) { // create engine
var engine = demo.engine, var engine = Engine.create(),
world = engine.world; world = engine.world;
World.add(world, [ // create renderer
Bodies.rectangle(200, 200, 100, 100, { var render = Render.create({
chamfer: { radius: 20 } element: document.body,
}), engine: engine,
options: {
width: Math.min(document.body.clientWidth, 1024),
height: Math.min(document.body.clientHeight, 1024),
showAxes: true
}
});
Bodies.rectangle(300, 200, 100, 100, { Render.run(render);
chamfer: { radius: [90, 0, 0, 0] }
}),
Bodies.rectangle(400, 200, 200, 200, { // create runner
chamfer: { radius: [150, 20, 40, 20] } var runner = Runner.create();
}), Runner.run(runner, engine);
Bodies.rectangle(200, 200, 200, 200, { // add bodies
chamfer: { radius: [150, 20, 150, 20] } World.add(world, [
}), 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 })
]);
Bodies.rectangle(300, 200, 200, 50, { World.add(world, [
chamfer: { radius: [25, 25, 0, 0] } Bodies.rectangle(200, 200, 100, 100, {
}), chamfer: { radius: 20 }
}),
Bodies.polygon(200, 100, 8, 80, { Bodies.rectangle(300, 200, 100, 100, {
chamfer: { radius: 30 } chamfer: { radius: [90, 0, 0, 0] }
}), }),
Bodies.polygon(300, 100, 5, 80, { Bodies.rectangle(400, 200, 200, 200, {
chamfer: { radius: [10, 40, 20, 40, 10] } chamfer: { radius: [150, 20, 40, 20] }
}), }),
Bodies.polygon(400, 200, 3, 50, { Bodies.rectangle(200, 200, 200, 200, {
chamfer: { radius: [20, 0, 20] } chamfer: { radius: [150, 20, 150, 20] }
}) }),
]);
var renderOptions = demo.render.options; Bodies.rectangle(300, 200, 200, 50, {
renderOptions.showAxes = true; chamfer: { radius: [25, 25, 0, 0] }
renderOptions.showCollisions = true; }),
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, Composite.allBodies(world));
// context for MatterTools.Demo
return {
engine: engine,
runner: runner,
render: render,
canvas: render.canvas,
stop: function() {
Matter.Render.stop(render);
Matter.Runner.stop(runner);
}
}; };
};
})();

171
examples/sensors.js
View file

@ -1,70 +1,131 @@
(function() { var Example = Example || {};
var World = Matter.World, Example.sensors = function() {
Bodies = Matter.Bodies, var Engine = Matter.Engine,
Render = Matter.Render,
Runner = Matter.Runner,
Body = Matter.Body,
Composite = Matter.Composite,
Composites = Matter.Composites,
Common = Matter.Common, Common = Matter.Common,
Events = Matter.Events; Events = Matter.Events,
Constraint = Matter.Constraint,
MouseConstraint = Matter.MouseConstraint,
Mouse = Matter.Mouse,
World = Matter.World,
Bodies = Matter.Bodies;
Example.sensors = function(demo) { // create engine
var engine = demo.engine, var engine = Engine.create(),
world = engine.world, world = engine.world;
sceneEvents = demo.sceneEvents;
var redColor = '#C44D58', // create renderer
greenColor = '#C7F464'; var render = Render.create({
element: document.body,
engine: engine,
options: {
width: Math.min(document.body.clientWidth, 1024),
height: Math.min(document.body.clientHeight, 1024),
wireframes: false,
background: '#111'
}
});
var collider = Bodies.rectangle(400, 300, 500, 50, { Render.run(render);
isSensor: true,
// create runner
var runner = Runner.create();
Runner.run(runner, engine);
// add bodies
var redColor = '#C44D58',
greenColor = '#C7F464';
var collider = Bodies.rectangle(400, 300, 500, 50, {
isSensor: true,
isStatic: true,
render: {
strokeStyle: redColor,
fillStyle: 'transparent'
}
});
World.add(world, [
collider,
Bodies.rectangle(400, 620, 800, 50, {
isStatic: true, isStatic: true,
render: { render: {
strokeStyle: redColor,
fillStyle: 'transparent' fillStyle: 'transparent'
} }
})
]);
World.add(world,
Bodies.circle(400, 40, 30, {
render: {
strokeStyle: greenColor,
fillStyle: 'transparent'
}
})
);
Events.on(engine, 'collisionStart', function(event) {
var pairs = event.pairs;
for (var i = 0, j = pairs.length; i != j; ++i) {
var pair = pairs[i];
if (pair.bodyA === collider) {
pair.bodyB.render.strokeStyle = redColor;
} else if (pair.bodyB === collider) {
pair.bodyA.render.strokeStyle = redColor;
}
}
});
Events.on(engine, 'collisionEnd', function(event) {
var pairs = event.pairs;
for (var i = 0, j = pairs.length; i != j; ++i) {
var pair = pairs[i];
if (pair.bodyA === collider) {
pair.bodyB.render.strokeStyle = greenColor;
} else if (pair.bodyB === collider) {
pair.bodyA.render.strokeStyle = greenColor;
}
}
});
// add mouse control
var mouse = Mouse.create(render.canvas),
mouseConstraint = MouseConstraint.create(engine, {
mouse: mouse,
constraint: {
stiffness: 0.2,
render: {
visible: false
}
}
}); });
World.add(world, collider); World.add(world, mouseConstraint);
World.add(world, // keep the mouse in sync with rendering
Bodies.circle(400, 40, 30, { render.mouse = mouse;
render: {
strokeStyle: greenColor,
fillStyle: 'transparent'
}
})
);
sceneEvents.push( // fit the render viewport to the scene
Events.on(engine, 'collisionStart', function(event) { Render.lookAt(render, Composite.allBodies(world));
var pairs = event.pairs;
for (var i = 0, j = pairs.length; i != j; ++i) {
var pair = pairs[i];
if (pair.bodyA === collider) { // context for MatterTools.Demo
pair.bodyB.render.strokeStyle = redColor; return {
} else if (pair.bodyB === collider) { engine: engine,
pair.bodyA.render.strokeStyle = redColor; runner: runner,
} render: render,
} canvas: render.canvas,
}), stop: function() {
Events.on(engine, 'collisionEnd', function(event) { Matter.Render.stop(render);
var pairs = event.pairs; Matter.Runner.stop(runner);
}
for (var i = 0, j = pairs.length; i != j; ++i) {
var pair = pairs[i];
if (pair.bodyA === collider) {
pair.bodyB.render.strokeStyle = greenColor;
} else if (pair.bodyB === collider) {
pair.bodyA.render.strokeStyle = greenColor;
}
}
})
);
var renderOptions = demo.render.options;
renderOptions.wireframes = false;
renderOptions.background = '#222';
renderOptions.showAngleIndicator = false;
}; };
})(); };

121
examples/sleeping.js
View file

@ -1,41 +1,102 @@
(function() { var Example = Example || {};
var World = Matter.World, Example.sleeping = function() {
Bodies = Matter.Bodies, var Engine = Matter.Engine,
Render = Matter.Render,
Runner = Matter.Runner,
Composite = Matter.Composite,
Composites = Matter.Composites, Composites = Matter.Composites,
Common = Matter.Common, Common = Matter.Common,
Events = Matter.Events; Events = Matter.Events,
MouseConstraint = Matter.MouseConstraint,
Mouse = Matter.Mouse,
World = Matter.World,
Bodies = Matter.Bodies;
Example.sleeping = function(demo) { // create engine
var engine = demo.engine, var engine = Engine.create({
world = engine.world; enableSleeping: true
}),
var stack = Composites.stack(50, 50, 12, 3, 0, 0, function(x, y) { world = engine.world;
switch (Math.round(Common.random(0, 1))) {
case 0: // create renderer
if (Common.random() < 0.8) { var render = Render.create({
return Bodies.rectangle(x, y, Common.random(20, 50), Common.random(20, 50)); element: document.body,
} else { engine: engine,
return Bodies.rectangle(x, y, Common.random(80, 120), Common.random(20, 30)); options: {
width: Math.min(document.body.clientWidth, 1024),
height: Math.min(document.body.clientHeight, 1024),
showAngleIndicator: true
}
});
Render.run(render);
// create runner
var runner = Runner.create();
Runner.run(runner, engine);
// add bodies
World.add(world, [
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 })
]);
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));
}
break;
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
} }
break;
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++) { World.add(world, mouseConstraint);
Events.on(stack.bodies[i], 'sleepStart sleepEnd', function(event) {
var body = this; // keep the mouse in sync with rendering
console.log('body id', body.id, 'sleeping:', body.isSleeping); render.mouse = mouse;
});
// fit the render viewport to the scene
Render.lookAt(render, Composite.allBodies(world));
// context for MatterTools.Demo
return {
engine: engine,
runner: runner,
render: render,
canvas: render.canvas,
stop: function() {
Matter.Render.stop(render);
Matter.Runner.stop(runner);
} }
engine.enableSleeping = true;
}; };
};
})();

138
examples/slingshot.js
View file

@ -1,64 +1,104 @@
(function() { var Example = Example || {};
var World = Matter.World, Example.slingshot = function() {
Bodies = Matter.Bodies, var Engine = Matter.Engine,
Render = Matter.Render,
Runner = Matter.Runner,
Body = Matter.Body,
Composite = Matter.Composite,
Composites = Matter.Composites, Composites = Matter.Composites,
Events = Matter.Events,
Common = Matter.Common,
Constraint = Matter.Constraint, Constraint = Matter.Constraint,
Events = Matter.Events; MouseConstraint = Matter.MouseConstraint,
Mouse = Matter.Mouse,
World = Matter.World,
Bodies = Matter.Bodies;
Example.slingshot = function(demo) { // create engine
var engine = demo.engine, var engine = Engine.create(),
world = engine.world, world = engine.world;
mouseConstraint = demo.mouseConstraint;
world.bodies = []; // create renderer
var render = Render.create({
element: document.body,
engine: engine,
options: {
width: Math.min(document.body.clientWidth, 1024),
height: Math.min(document.body.clientHeight, 1024),
showAngleIndicator: true
}
});
var ground = Bodies.rectangle(395, 600, 815, 50, { isStatic: true, render: { visible: false } }), Render.run(render);
rockOptions = { density: 0.004, render: { sprite: { texture: './img/rock.png' } } },
rock = Bodies.polygon(170, 450, 8, 20, rockOptions),
anchor = { x: 170, y: 450 },
elastic = Constraint.create({
pointA: anchor,
bodyB: rock,
stiffness: 0.05,
render: {
lineWidth: 5,
strokeStyle: '#dfa417'
}
});
var pyramid = Composites.pyramid(500, 300, 9, 10, 0, 0, function(x, y, column) { // create runner
var texture = column % 2 === 0 ? './img/block.png' : './img/block-2.png'; var runner = Runner.create();
return Bodies.rectangle(x, y, 25, 40, { render: { sprite: { texture: texture } } }); Runner.run(runner, engine);
// add bodies
var ground = Bodies.rectangle(395, 600, 815, 50, { isStatic: true }),
rockOptions = { density: 0.004 },
rock = Bodies.polygon(170, 450, 8, 20, rockOptions),
anchor = { x: 170, y: 450 },
elastic = Constraint.create({
pointA: anchor,
bodyB: rock,
stiffness: 0.05
}); });
var ground2 = Bodies.rectangle(610, 250, 200, 20, { var pyramid = Composites.pyramid(500, 300, 9, 10, 0, 0, function(x, y) {
isStatic: true, return Bodies.rectangle(x, y, 25, 40);
render: { });
fillStyle: '#edc51e',
strokeStyle: '#b5a91c'
}
});
var pyramid2 = Composites.pyramid(550, 0, 5, 10, 0, 0, function(x, y, column) { var ground2 = Bodies.rectangle(610, 250, 200, 20, { isStatic: true });
var texture = column % 2 === 0 ? './img/block.png' : './img/block-2.png';
return Bodies.rectangle(x, y, 25, 40, { render: { sprite: { texture: texture } } });
});
World.add(engine.world, [ground, pyramid, ground2, pyramid2, rock, elastic]); var pyramid2 = Composites.pyramid(550, 0, 5, 10, 0, 0, function(x, y) {
return Bodies.rectangle(x, y, 25, 40);
});
Events.on(engine, 'afterUpdate', function() { World.add(engine.world, [ground, pyramid, ground2, pyramid2, rock, elastic]);
if (mouseConstraint.mouse.button === -1 && (rock.position.x > 190 || rock.position.y < 430)) {
rock = Bodies.polygon(170, 450, 7, 20, rockOptions); Events.on(engine, 'afterUpdate', function() {
World.add(engine.world, rock); if (mouseConstraint.mouse.button === -1 && (rock.position.x > 190 || rock.position.y < 430)) {
elastic.bodyB = rock; 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
}
} }
}); });
var renderOptions = demo.render.options;
renderOptions.wireframes = false;
renderOptions.showAngleIndicator = false;
renderOptions.background = './img/background.png';
};
})(); 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);
}
};
};

97
examples/softBody.js
View file

@ -1,26 +1,83 @@
(function() { var Example = Example || {};
var World = Matter.World, Example.softBody = function() {
Composites = Matter.Composites; var Engine = Matter.Engine,
Render = Matter.Render,
Runner = Matter.Runner,
Body = Matter.Body,
Composite = Matter.Composite,
Composites = Matter.Composites,
Common = Matter.Common,
Constraint = Matter.Constraint,
MouseConstraint = Matter.MouseConstraint,
Mouse = Matter.Mouse,
World = Matter.World,
Bodies = Matter.Bodies;
Example.softBody = function(demo) { // create engine
var engine = demo.engine, var engine = Engine.create(),
world = engine.world; world = engine.world;
var particleOptions = {
friction: 0.05,
frictionStatic: 0.1,
render: { visible: true }
};
World.add(world, [ // create renderer
Composites.softBody(250, 100, 5, 5, 0, 0, true, 18, particleOptions), var render = Render.create({
Composites.softBody(400, 300, 8, 3, 0, 0, true, 15, particleOptions), element: document.body,
Composites.softBody(250, 400, 4, 4, 0, 0, true, 15, particleOptions) engine: engine,
]); options: {
width: Math.min(document.body.clientWidth, 1024),
height: Math.min(document.body.clientHeight, 1024),
showAngleIndicator: false
}
});
var renderOptions = demo.render.options; Render.run(render);
renderOptions.showAngleIndicator = false;
// 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),
Bodies.rectangle(400, 620, 800, 50, { 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, Composite.allBodies(world));
// context for MatterTools.Demo
return {
engine: engine,
runner: runner,
render: render,
canvas: render.canvas,
stop: function() {
Matter.Render.stop(render);
Matter.Runner.stop(runner);
}
};
};

158
examples/sprites.js
View file

@ -1,62 +1,118 @@
(function() { var Example = Example || {};
var World = Matter.World, Example.sprites = function() {
Bodies = Matter.Bodies, var Engine = Matter.Engine,
Render = Matter.Render,
Runner = Matter.Runner,
Composite = Matter.Composite,
Composites = Matter.Composites, Composites = Matter.Composites,
Common = Matter.Common; Common = Matter.Common,
MouseConstraint = Matter.MouseConstraint,
Mouse = Matter.Mouse,
World = Matter.World,
Bodies = Matter.Bodies;
Example.sprites = function(demo) { // create engine
var engine = demo.engine, var engine = Engine.create(),
world = engine.world, world = engine.world;
offset = 10,
options = { // create renderer
isStatic: true, var render = Render.create({
element: document.body,
engine: engine,
options: {
width: Math.min(document.body.clientWidth, 1024),
height: Math.min(document.body.clientHeight, 1024),
background: '#0f0f13',
showAngleIndicator: false,
wireframes: false
}
});
Render.run(render);
// create runner
var runner = Runner.create();
Runner.run(runner, engine);
// add bodies
var offset = 10,
options = {
isStatic: true,
render: {
visible: false
}
};
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: { render: {
visible: false visible: false
} }
};
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); World.add(world, mouseConstraint);
var renderOptions = demo.render.options; // keep the mouse in sync with rendering
renderOptions.background = './img/wall-bg.jpg'; render.mouse = mouse;
renderOptions.showAngleIndicator = false;
renderOptions.wireframes = false; // 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);
}
}; };
};
})();

91
examples/stack.js
View file

@ -1,18 +1,81 @@
(function() { var Example = Example || {};
var World = Matter.World, Example.stack = function() {
Bodies = Matter.Bodies, var Engine = Matter.Engine,
Composites = Matter.Composites; Render = Matter.Render,
Runner = Matter.Runner,
Body = Matter.Body,
Events = Matter.Events,
Composite = Matter.Composite,
Composites = Matter.Composites,
Common = Matter.Common,
Constraint = Matter.Constraint,
MouseConstraint = Matter.MouseConstraint,
Mouse = Matter.Mouse,
World = Matter.World,
Vertices = Matter.Vertices,
Bodies = Matter.Bodies;
Example.stack = function(demo) { // create engine
var engine = demo.engine, var engine = Engine.create(),
world = engine.world; world = engine.world;
var stack = Composites.stack(100, 380, 10, 5, 0, 0, function(x, y) { // create renderer
return Bodies.rectangle(x, y, 40, 40); var render = Render.create({
element: document.body,
engine: engine,
options: {
width: Math.min(document.body.clientWidth, 1024),
height: Math.min(document.body.clientHeight, 1024),
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,
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, stack);
};
})(); 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));
// context for MatterTools.Demo
return {
engine: engine,
runner: runner,
render: render,
canvas: render.canvas,
stop: function() {
Matter.Render.stop(render);
Matter.Runner.stop(runner);
}
};
};

135
examples/staticFriction.js
View file

@ -1,49 +1,102 @@
(function() { var Example = Example || {};
var World = Matter.World, Example.staticFriction = function() {
Bodies = Matter.Bodies, var Engine = Matter.Engine,
Render = Matter.Render,
Runner = Matter.Runner,
Body = Matter.Body, Body = Matter.Body,
Composite = Matter.Composite,
Composites = Matter.Composites, Composites = Matter.Composites,
Events = Matter.Events; Common = Matter.Common,
Constraint = Matter.Constraint,
Events = Matter.Events,
MouseConstraint = Matter.MouseConstraint,
Mouse = Matter.Mouse,
World = Matter.World,
Bodies = Matter.Bodies;
Example.staticFriction = function(demo) { // create engine
var engine = demo.engine, var engine = Engine.create(),
world = engine.world, world = engine.world;
sceneEvents = demo.sceneEvents;
var body = Bodies.rectangle(400, 500, 200, 60, { isStatic: true, chamfer: 10 }), // create renderer
size = 50, var render = Render.create({
counter = -1; element: document.body,
engine: engine,
options: {
width: Math.min(document.body.clientWidth, 1024),
height: Math.min(document.body.clientHeight, 1024),
showVelocity: true
}
});
var stack = Composites.stack(350, 470 - 6 * size, 1, 6, 0, 0, function(x, y) { Render.run(render);
return Bodies.rectangle(x, y, size * 2, size, {
slop: 0.5, // create runner
friction: 1, var runner = Runner.create();
frictionStatic: Infinity Runner.run(runner, engine);
});
// add bodies
var body = Bodies.rectangle(400, 500, 200, 60, { isStatic: true, chamfer: 10 }),
size = 50,
counter = -1;
var stack = Composites.stack(350, 470 - 6 * size, 1, 6, 0, 0, function(x, y) {
return Bodies.rectangle(x, y, size * 2, size, {
slop: 0.5,
friction: 1,
frictionStatic: Infinity
}); });
});
World.add(world, [body, stack]);
sceneEvents.push(
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 });
})
);
var renderOptions = demo.render.options;
renderOptions.showAngleIndicator = false;
renderOptions.showVelocity = true;
};
})(); World.add(world, [body, stack]);
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);
}
};
};

94
examples/stress.js
View file

@ -1,21 +1,83 @@
(function() { var Example = Example || {};
var World = Matter.World, Example.stress = function() {
Bodies = Matter.Bodies, var Engine = Matter.Engine,
Composites = Matter.Composites; Render = Matter.Render,
Runner = Matter.Runner,
Body = Matter.Body,
Events = Matter.Events,
Composite = Matter.Composite,
Composites = Matter.Composites,
Common = Matter.Common,
Constraint = Matter.Constraint,
MouseConstraint = Matter.MouseConstraint,
Mouse = Matter.Mouse,
World = Matter.World,
Vertices = Matter.Vertices,
Bodies = Matter.Bodies;
Example.stress = function(demo) { // create engine
var engine = demo.engine, var engine = Engine.create(),
world = engine.world; world = engine.world;
var stack = Composites.stack(90, 50, 18, 15, 0, 0, function(x, y) { // create renderer
return Bodies.rectangle(x, y, 35, 35); var render = Render.create({
element: document.body,
engine: engine,
options: {
width: Math.min(document.body.clientWidth, 1024),
height: Math.min(document.body.clientHeight, 1024)
}
});
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, stack);
var renderOptions = demo.render.options; World.add(world, mouseConstraint);
renderOptions.showAngleIndicator = false;
// keep the mouse in sync with rendering
render.mouse = mouse;
// fit the render viewport to the scene
Render.lookAt(render, Composite.allBodies(world));
// context for MatterTools.Demo
return {
engine: engine,
runner: runner,
render: render,
canvas: render.canvas,
stop: function() {
Matter.Render.stop(render);
Matter.Runner.stop(runner);
}
}; };
};
})();

94
examples/stress2.js
View file

@ -1,21 +1,81 @@
(function() { Example.stress2 = 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,
Constraint = Matter.Constraint,
MouseConstraint = Matter.MouseConstraint,
Mouse = Matter.Mouse,
World = Matter.World,
Vertices = Matter.Vertices,
Bodies = Matter.Bodies;
var World = Matter.World, // create engine
Bodies = Matter.Bodies, var engine = Engine.create(),
Composites = Matter.Composites; world = engine.world;
Example.stress2 = function(demo) { // create renderer
var engine = demo.engine, var render = Render.create({
world = engine.world; element: document.body,
engine: engine,
var stack = Composites.stack(100, 120, 25, 18, 0, 0, function(x, y) { options: {
return Bodies.rectangle(x, y, 25, 25); width: Math.min(document.body.clientWidth, 1024),
height: Math.min(document.body.clientHeight, 1024)
}
});
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, stack);
var renderOptions = demo.render.options;
renderOptions.showAngleIndicator = 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));
// context for MatterTools.Demo
return {
engine: engine,
runner: runner,
render: render,
canvas: render.canvas,
stop: function() {
Matter.Render.stop(render);
Matter.Runner.stop(runner);
}
};
};

158
examples/svg.js
View file

@ -1,61 +1,123 @@
(function() { var Example = Example || {};
var World = Matter.World, Example.svg = function() {
Bodies = Matter.Bodies, 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, Common = Matter.Common,
Constraint = Matter.Constraint,
MouseConstraint = Matter.MouseConstraint,
Mouse = Matter.Mouse,
World = Matter.World,
Vertices = Matter.Vertices, Vertices = Matter.Vertices,
Svg = Matter.Svg; Svg = Matter.Svg,
Bodies = Matter.Bodies;
Example.svg = function(demo) { // create engine
var engine = demo.engine, var engine = Engine.create(),
world = engine.world; world = engine.world;
var svgs = [ // create renderer
'iconmonstr-check-mark-8-icon', var render = Render.create({
'iconmonstr-paperclip-2-icon', element: document.body,
'iconmonstr-puzzle-icon', engine: engine,
'iconmonstr-user-icon' options: {
]; width: Math.min(document.body.clientWidth, 1024),
height: Math.min(document.body.clientHeight, 1024)
for (var i = 0; i < svgs.length; i += 1) {
(function(i) {
$.get('./svg/' + svgs[i] + '.svg').done(function(data) {
var vertexSets = [],
color = Common.choose(['#556270', '#4ECDC4', '#C7F464', '#FF6B6B', '#C44D58']);
$(data).find('path').each(function(i, path) {
var points = Svg.pathToVertices(path, 30);
vertexSets.push(Vertices.scale(points, 0.4, 0.4));
});
World.add(world, Bodies.fromVertices(100 + i * 150, 200 + i * 50, vertexSets, {
render: {
fillStyle: color,
strokeStyle: color
}
}, true));
});
})(i);
} }
});
$.get('./svg/svg.svg').done(function(data) { Render.run(render);
var vertexSets = [],
color = Common.choose(['#556270', '#4ECDC4', '#C7F464', '#FF6B6B', '#C44D58']);
$(data).find('path').each(function(i, path) { // create runner
vertexSets.push(Svg.pathToVertices(path, 30)); var runner = Runner.create();
Runner.run(runner, engine);
// add bodies
var svgs = [
'iconmonstr-check-mark-8-icon',
'iconmonstr-paperclip-2-icon',
'iconmonstr-puzzle-icon',
'iconmonstr-user-icon'
];
for (var i = 0; i < svgs.length; i += 1) {
(function(i) {
$.get('./svg/' + svgs[i] + '.svg').done(function(data) {
var vertexSets = [],
color = Common.choose(['#556270', '#4ECDC4', '#C7F464', '#FF6B6B', '#C44D58']);
$(data).find('path').each(function(i, path) {
var points = Svg.pathToVertices(path, 30);
vertexSets.push(Vertices.scale(points, 0.4, 0.4));
});
World.add(world, Bodies.fromVertices(100 + i * 150, 200 + i * 50, vertexSets, {
render: {
fillStyle: color,
strokeStyle: color
}
}, true));
}); });
})(i);
}
World.add(world, Bodies.fromVertices(400, 80, vertexSets, { $.get('./svg/svg.svg').done(function(data) {
render: { var vertexSets = [],
fillStyle: color, color = Common.choose(['#556270', '#4ECDC4', '#C7F464', '#FF6B6B', '#C44D58']);
strokeStyle: color
} $(data).find('path').each(function(i, path) {
}, true)); vertexSets.push(Svg.pathToVertices(path, 30));
}); });
var renderOptions = demo.render.options; World.add(world, Bodies.fromVertices(400, 80, vertexSets, {
renderOptions.showAngleIndicator = false; render: {
}; fillStyle: color,
strokeStyle: color
}
}, true));
});
})(); World.add(world, [
Bodies.rectangle(400, 0, 800, 50, { isStatic: true }),
Bodies.rectangle(400, 600, 800, 50, { isStatic: true }),
Bodies.rectangle(800, 300, 50, 600, { isStatic: true }),
Bodies.rectangle(0, 300, 50, 600, { isStatic: true })
]);
// add mouse control
var mouse = Mouse.create(render.canvas),
mouseConstraint = MouseConstraint.create(engine, {
mouse: mouse,
constraint: {
stiffness: 0.2,
render: {
visible: false
}
}
});
World.add(world, mouseConstraint);
// keep the mouse in sync with rendering
render.mouse = mouse;
// fit the render viewport to the scene
Render.lookAt(render, Composite.allBodies(world));
// context for MatterTools.Demo
return {
engine: engine,
runner: runner,
render: render,
canvas: render.canvas,
stop: function() {
Matter.Render.stop(render);
Matter.Runner.stop(runner);
}
};
};

135
examples/terrain.js
View file

@ -1,54 +1,109 @@
(function() { var Example = Example || {};
var World = Matter.World, Example.terrain = function() {
Bodies = Matter.Bodies, var Engine = Matter.Engine,
Render = Matter.Render,
Runner = Matter.Runner,
Body = Matter.Body,
Events = Matter.Events,
Composite = Matter.Composite,
Composites = Matter.Composites, Composites = Matter.Composites,
Common = Matter.Common, Common = Matter.Common,
Constraint = Matter.Constraint,
MouseConstraint = Matter.MouseConstraint,
Mouse = Matter.Mouse,
World = Matter.World,
Vertices = Matter.Vertices,
Query = Matter.Query, Query = Matter.Query,
Svg = Matter.Svg; Svg = Matter.Svg,
Bodies = Matter.Bodies;
Example.terrain = function(demo) { // create engine
var engine = demo.engine, var engine = Engine.create(),
world = engine.world; world = engine.world;
world.bodies = []; // create renderer
var render = Render.create({
element: document.body,
engine: engine,
options: {
width: Math.min(document.body.clientWidth, 1024),
height: Math.min(document.body.clientHeight, 1024)
}
});
var terrain; Render.run(render);
$.get('./svg/terrain.svg').done(function(data) { // create runner
var vertexSets = [], var runner = Runner.create();
color = Common.choose(['#556270', '#4ECDC4', '#C7F464', '#FF6B6B', '#C44D58']); Runner.run(runner, engine);
$(data).find('path').each(function(i, path) { // add bodies
vertexSets.push(Svg.pathToVertices(path, 30)); var terrain;
});
terrain = Bodies.fromVertices(400, 350, vertexSets, { $.get('./svg/terrain.svg').done(function(data) {
isStatic: true, var vertexSets = [],
render: { color = Common.choose(['#556270', '#4ECDC4', '#C7F464', '#FF6B6B', '#C44D58']);
fillStyle: color,
strokeStyle: color
}
}, true);
World.add(world, terrain); $(data).find('path').each(function(i, path) {
vertexSets.push(Svg.pathToVertices(path, 30));
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);
}
}));
}); });
var renderOptions = demo.render.options; terrain = Bodies.fromVertices(400, 350, vertexSets, {
renderOptions.showAngleIndicator = false; isStatic: true,
renderOptions.showVelocity = true; render: {
}; fillStyle: color,
strokeStyle: color
}
}, true);
})(); World.add(world, terrain);
var bodyOptions = {
frictionAir: 0,
friction: 0.0001,
restitution: 0.6
};
World.add(world, Composites.stack(80, 100, 20, 20, 10, 10, function(x, y) {
if (Query.point([terrain], { x: x, y: y }).length === 0) {
return Bodies.polygon(x, y, 5, 12, bodyOptions);
}
}));
});
// add mouse control
var mouse = Mouse.create(render.canvas),
mouseConstraint = MouseConstraint.create(engine, {
mouse: mouse,
constraint: {
stiffness: 0.2,
render: {
visible: false
}
}
});
World.add(world, mouseConstraint);
// keep the mouse in sync with rendering
render.mouse = mouse;
// fit the render viewport to the scene
Render.lookAt(render, {
min: { x: 0, y: 0 },
max: { x: 800, y: 600 }
});
// context for MatterTools.Demo
return {
engine: engine,
runner: runner,
render: render,
canvas: render.canvas,
stop: function() {
Matter.Render.stop(render);
Matter.Runner.stop(runner);
}
};
};

224
examples/timescale.js
View file

@ -1,91 +1,157 @@
(function() { var Example = Example || {};
var World = Matter.World, Example.timescale = function() {
Bodies = Matter.Bodies, var Engine = Matter.Engine,
Render = Matter.Render,
Runner = Matter.Runner,
Body = Matter.Body, Body = Matter.Body,
Events = Matter.Events,
Composite = Matter.Composite, Composite = Matter.Composite,
Composites = Matter.Composites, Composites = Matter.Composites,
Common = Matter.Common, Common = Matter.Common,
Events = Matter.Events; Constraint = Matter.Constraint,
MouseConstraint = Matter.MouseConstraint,
Mouse = Matter.Mouse,
World = Matter.World,
Vertices = Matter.Vertices,
Query = Matter.Query,
Svg = Matter.Svg,
Bodies = Matter.Bodies;
Example.timescale = function(demo) { // create engine
var engine = demo.engine, var engine = Engine.create(),
world = engine.world, world = engine.world;
sceneEvents = demo.sceneEvents;
var explosion = function(engine) {
var bodies = Composite.allBodies(engine.world);
for (var i = 0; i < bodies.length; i++) { // create renderer
var body = bodies[i]; var render = Render.create({
element: document.body,
engine: engine,
options: {
width: Math.min(document.body.clientWidth, 1024),
height: Math.min(document.body.clientHeight, 1024),
showAngleIndicator: true
}
});
if (!body.isStatic && body.position.y >= 500) { Render.run(render);
var forceMagnitude = 0.05 * body.mass;
Body.applyForce(body, body.position, { // create runner
x: (forceMagnitude + Common.random() * forceMagnitude) * Common.choose([1, -1]), var runner = Runner.create();
y: -forceMagnitude + Common.random() * -forceMagnitude 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;
sceneEvents.push(
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);
}
break;
case 1:
return Bodies.polygon(x, y, Math.round(Common.random(4, 8)), Common.random(20, 50), bodyOptions);
}
}));
}; };
})(); 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);
}
break;
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);
}
};
};

287
examples/views.js
View file

@ -1,135 +1,186 @@
(function() { var Example = Example || {};
var World = Matter.World, Example.views = function() {
Bodies = Matter.Bodies, var Engine = Matter.Engine,
Render = Matter.Render,
Runner = Matter.Runner,
Body = Matter.Body,
Events = Matter.Events,
Composite = Matter.Composite,
Composites = Matter.Composites, Composites = Matter.Composites,
Common = Matter.Common, Common = Matter.Common,
Events = Matter.Events, Constraint = Matter.Constraint,
Bounds = Matter.Bounds, MouseConstraint = Matter.MouseConstraint,
Mouse = Matter.Mouse,
World = Matter.World,
Vertices = Matter.Vertices,
Vector = Matter.Vector, Vector = Matter.Vector,
Mouse = Matter.Mouse; Bounds = Matter.Bounds,
Bodies = Matter.Bodies;
Example.views = function(demo) { // create engine
var engine = demo.engine, var engine = Engine.create(),
world = engine.world, world = engine.world;
sceneEvents = demo.sceneEvents,
mouseConstraint = demo.mouseConstraint;
var stack = Composites.stack(20, 20, 15, 4, 0, 0, function(x, y) { // create renderer
switch (Math.round(Common.random(0, 1))) { var render = Render.create({
element: document.body,
engine: engine,
options: {
width: Math.min(document.body.clientWidth, 1024),
height: Math.min(document.body.clientHeight, 1024),
hasBounds: true,
showAngleIndicator: true
}
});
case 0: Render.run(render);
if (Common.random() < 0.8) {
return Bodies.rectangle(x, y, Common.random(20, 50), Common.random(20, 50)); // create runner
} else { var runner = Runner.create();
return Bodies.rectangle(x, y, Common.random(80, 120), Common.random(20, 30)); 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
} }
break;
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);
// get the centre of the viewport World.add(world, mouseConstraint);
var viewportCentre = {
x: demo.render.options.width * 0.5,
y: demo.render.options.height * 0.5
};
// make the world bounds a little bigger than the render bounds // keep the mouse in sync with rendering
world.bounds.min.x = -300; render.mouse = mouse;
world.bounds.min.y = -300;
world.bounds.max.x = 1100;
world.bounds.max.y = 900;
// keep track of current bounds scale (view zoom) // add bodies
var boundsScaleTarget = 1, var stack = Composites.stack(20, 20, 15, 4, 0, 0, function(x, y) {
boundsScale = { switch (Math.round(Common.random(0, 1))) {
x: 1,
y: 1
};
// use the engine tick event to control our view case 0:
sceneEvents.push( if (Common.random() < 0.8) {
Events.on(engine, 'beforeTick', function() { return Bodies.rectangle(x, y, Common.random(20, 50), Common.random(20, 50));
var world = engine.world, } else {
mouse = mouseConstraint.mouse, return Bodies.rectangle(x, y, Common.random(80, 120), Common.random(20, 30));
render = demo.render, }
translate; break;
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));
}
});
// mouse wheel controls zoom World.add(world, [
var scaleFactor = mouse.wheelDelta * -0.1; stack,
if (scaleFactor !== 0) { Bodies.rectangle(400, 600, 800, 50, { isStatic: true }),
if ((scaleFactor < 0 && boundsScale.x >= 0.6) || (scaleFactor > 0 && boundsScale.x <= 1.4)) { Bodies.rectangle(800, 300, 50, 600, { isStatic: true }),
boundsScaleTarget += scaleFactor; Bodies.rectangle(0, 300, 50, 600, { isStatic: true })
} ]);
}
// get the centre of the viewport
// if scale has changed var viewportCentre = {
if (Math.abs(boundsScale.x - boundsScaleTarget) > 0.01) { x: render.options.width * 0.5,
// smoothly tween scale factor y: render.options.height * 0.5
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);
}
})
);
// must enable renderOptions.hasBounds for views to work
var renderOptions = demo.render.options;
renderOptions.hasBounds = true;
}; };
})(); // 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);
}
};
};

109
examples/wreckingBall.js
View file

@ -1,30 +1,89 @@
(function() { var Example = Example || {};
var World = Matter.World, Example.wreckingBall = function() {
Bodies = Matter.Bodies, var Engine = Matter.Engine,
Render = Matter.Render,
Runner = Matter.Runner,
Composite = Matter.Composite,
Composites = Matter.Composites, Composites = Matter.Composites,
Constraint = Matter.Constraint; Common = Matter.Common,
MouseConstraint = Matter.MouseConstraint,
Mouse = Matter.Mouse,
World = Matter.World,
Constraint = Matter.Constraint,
Bodies = Matter.Bodies;
Example.wreckingBall = function(demo) { // create engine
var engine = demo.engine, var engine = Engine.create(),
world = engine.world; world = engine.world;
var rows = 10, // create renderer
yy = 600 - 21 - 40 * rows; var render = Render.create({
element: document.body,
var stack = Composites.stack(400, yy, 5, rows, 0, 0, function(x, y) { engine: engine,
return Bodies.rectangle(x, y, 40, 40); options: {
width: Math.min(document.body.clientWidth, 1024),
height: Math.min(document.body.clientHeight, 1024),
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,
Bodies.rectangle(400, 600, 800, 50.5, { 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, stack);
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
}));
};
})(); 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));
// context for MatterTools.Demo
return {
engine: engine,
runner: runner,
render: render,
canvas: render.canvas,
stop: function() {
Matter.Render.stop(render);
Matter.Runner.stop(runner);
}
};
};

16
src/render/Render.js
View file

@ -16,6 +16,7 @@ var Bounds = require('../geometry/Bounds');
var Events = require('../core/Events'); var Events = require('../core/Events');
var Grid = require('../collision/Grid'); var Grid = require('../collision/Grid');
var Vector = require('../geometry/Vector'); var Vector = require('../geometry/Vector');
var Mouse = require('../core/Mouse');
(function() { (function() {
@ -52,7 +53,7 @@ var Vector = require('../geometry/Vector');
height: 600, height: 600,
pixelRatio: 1, pixelRatio: 1,
background: '#fafafa', background: '#fafafa',
wireframeBackground: '#222', wireframeBackground: '#0f0f13',
hasBounds: !!options.bounds, hasBounds: !!options.bounds,
enabled: true, enabled: true,
wireframes: true, wireframes: true,
@ -173,8 +174,7 @@ var Vector = require('../geometry/Vector');
Render.lookAt = function(render, objects, padding, center) { Render.lookAt = function(render, objects, padding, center) {
center = typeof center !== 'undefined' ? center : true; center = typeof center !== 'undefined' ? center : true;
objects = Common.isArray(objects) ? objects : [objects]; objects = Common.isArray(objects) ? objects : [objects];
padding = padding || {
var padding = padding || {
x: 0, x: 0,
y: 0 y: 0
}; };
@ -344,6 +344,16 @@ var Vector = require('../geometry/Vector');
// transform the view // transform the view
Render.startViewTransform(render); Render.startViewTransform(render);
// update mouse
if (render.mouse) {
Mouse.setScale(render.mouse, {
x: (render.bounds.max.x - render.bounds.min.x) / render.canvas.width,
y: (render.bounds.max.y - render.bounds.min.y) / render.canvas.height
});
Mouse.setOffset(render.mouse, render.bounds.min);
}
} else { } else {
constraints = allConstraints; constraints = allConstraints;
bodies = allBodies; bodies = allBodies;