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 server;
gulp.task('default', ['build:dev', 'build:examples']);
gulp.task('default', ['build:dev']);
gulp.task('dev', function(callback) {
sequence('build:examples', 'watch', 'serve', callback);
sequence('watch', 'serve', callback);
});
gulp.task('release', function(callback) {
@ -43,7 +43,7 @@ gulp.task('release', function(callback) {
message: 'cannot build release as there are uncomitted changes'
});
} 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 }));
});
gulp.task('build:examples', function() {
return gulp.src('examples/**/*.js')
.pipe(concat('Examples.js'))
.pipe(gulp.dest('demo/js'));
});
gulp.task('watch', function() {
var b = browserify({
entries: ['src/module/main.js'],
@ -123,8 +117,6 @@ gulp.task('watch', function() {
b.on('update', bundle);
bundle();
gulp.watch('examples/**/*.js', ['build:examples']);
});
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>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,minimal-ui">
<meta name="robots" content="noindex">
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<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="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 -->
<script type="text/javascript" src="./js/lib/decomp.js"></script>
<title>Matter.js Demo</title>
<!-- 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 -->
<script type="text/javascript" src="./js/lib/pixi.js"></script>
<!-- Matter -->
<script src="../build/matter-dev.js"></script>
<!-- only required if using Matter.Svg -->
<script type="text/javascript" src="./js/lib/pathseg.js"></script>
<!-- MatterTools -->
<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 -->
<script type="text/javascript" src="../build/matter-dev.js"></script>
<!-- Plugins -->
<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 -->
<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>
<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>
<style type="text/css">
* {
box-sizing: border-box;
}
<!-- matter demo code -->
<link rel="stylesheet" href="./css/style.css" type="text/css">
<script type="text/javascript" src="./js/Examples.js"></script>
<script type="text/javascript" src="./js/Demo.js"></script>
<title>Matter.js Demo</title>
</head>
<body>
<div class="container">
<h1>Matter.js Demo</h1>
<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>
body {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<script src="/demo/js/Demo.js"></script>
</body>
</html>

630
demo/js/Demo.js
View file

@ -7,370 +7,276 @@
*/
(function() {
var sourceLinkRoot = 'https://github.com/liabru/matter-js/blob/master/examples';
var _isBrowser = typeof window !== 'undefined' && window.location,
_useInspector = _isBrowser && window.location.hash.indexOf('-inspect') !== -1,
_isMobile = _isBrowser && /(ipad|iphone|ipod|android)/gi.test(navigator.userAgent),
_isAutomatedTest = !_isBrowser || window._phantom;
var Matter = _isBrowser ? window.Matter : require('../../build/matter-dev.js');
var Demo = {};
Matter.Demo = Demo;
if (!_isBrowser) {
module.exports = Demo;
window = {};
}
// Matter aliases
var Body = Matter.Body,
Example = Matter.Example,
Engine = Matter.Engine,
World = Matter.World,
Common = Matter.Common,
Bodies = Matter.Bodies,
Events = Matter.Events,
Mouse = Matter.Mouse,
MouseConstraint = Matter.MouseConstraint,
Runner = Matter.Runner,
Render = Matter.Render;
// MatterTools aliases
if (window.MatterTools) {
var Gui = MatterTools.Gui,
Inspector = MatterTools.Inspector;
}
Demo.create = function(options) {
var defaults = {
isManual: false,
sceneName: 'mixed',
sceneEvents: []
};
return Common.extend(defaults, options);
};
Demo.init = function() {
var demo = Demo.create();
Matter.Demo._demo = demo;
// get container element for the canvas
demo.container = document.getElementById('canvas-container');
// create an example engine (see /examples/engine.js)
demo.engine = Example.engine(demo);
// run the engine
demo.runner = Engine.run(demo.engine);
// create a debug renderer
demo.render = Render.create({
element: demo.container,
engine: demo.engine
});
// run the renderer
Render.run(demo.render);
// add a mouse controlled constraint
demo.mouseConstraint = MouseConstraint.create(demo.engine, {
element: demo.render.canvas
});
World.add(demo.engine.world, demo.mouseConstraint);
// pass mouse to renderer to enable showMousePosition
demo.render.mouse = demo.mouseConstraint.mouse;
// get the scene function name from hash
if (window.location.hash.length !== 0)
demo.sceneName = window.location.hash.replace('#', '').replace('-inspect', '');
// set up a scene with bodies
Demo.reset(demo);
Demo.setScene(demo, demo.sceneName);
// set up demo interface (see end of this file)
Demo.initControls(demo);
// pass through runner as timing for debug rendering
demo.engine.metrics.timing = demo.runner;
return demo;
};
// call init when the page has loaded fully
if (!_isAutomatedTest) {
if (window.addEventListener) {
window.addEventListener('load', Demo.init);
} else if (window.attachEvent) {
window.attachEvent('load', Demo.init);
}
}
Demo.setScene = function(demo, sceneName) {
Example[sceneName](demo);
};
// the functions for the demo interface and controls below
Demo.initControls = function(demo) {
var demoSelect = document.getElementById('demo-select'),
demoReset = document.getElementById('demo-reset');
// create a Matter.Gui
if (!_isMobile && Gui) {
demo.gui = Gui.create(demo.engine, demo.runner, demo.render);
// need to add mouse constraint back in after gui clear or load is pressed
Events.on(demo.gui, 'clear load', function() {
demo.mouseConstraint = MouseConstraint.create(demo.engine, {
element: demo.render.canvas
});
World.add(demo.engine.world, demo.mouseConstraint);
});
}
// create a Matter.Inspector
if (!_isMobile && Inspector && _useInspector) {
demo.inspector = Inspector.create(demo.engine, demo.runner, demo.render);
Events.on(demo.inspector, 'import', function() {
demo.mouseConstraint = MouseConstraint.create(demo.engine);
World.add(demo.engine.world, demo.mouseConstraint);
});
Events.on(demo.inspector, 'play', function() {
demo.mouseConstraint = MouseConstraint.create(demo.engine);
World.add(demo.engine.world, demo.mouseConstraint);
});
Events.on(demo.inspector, 'selectStart', function() {
demo.mouseConstraint.constraint.render.visible = false;
});
Events.on(demo.inspector, 'selectEnd', function() {
demo.mouseConstraint.constraint.render.visible = true;
});
}
// go fullscreen when using a mobile device
if (_isMobile) {
var body = document.body;
body.className += ' is-mobile';
demo.render.canvas.addEventListener('touchstart', Demo.fullscreen);
var fullscreenChange = function() {
var fullscreenEnabled = document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEnabled;
// delay fullscreen styles until fullscreen has finished changing
setTimeout(function() {
if (fullscreenEnabled) {
body.className += ' is-fullscreen';
} else {
body.className = body.className.replace('is-fullscreen', '');
}
}, 2000);
};
document.addEventListener('webkitfullscreenchange', fullscreenChange);
document.addEventListener('mozfullscreenchange', fullscreenChange);
document.addEventListener('fullscreenchange', fullscreenChange);
}
// keyboard controls
document.onkeypress = function(keys) {
// shift + a = toggle manual
if (keys.shiftKey && keys.keyCode === 65) {
Demo.setManualControl(demo, !demo.isManual);
var demo = MatterTools.Demo.create({
toolbar: {
title: 'matter-js',
url: 'https://github.com/liabru/matter-js',
reset: true,
source: true,
inspector: true,
tools: true,
fullscreen: true,
exampleSelect: true
},
tools: {
inspector: true,
gui: true
},
inline: false,
resetOnOrientation: true,
examples: [
{
name: 'Air Friction',
id: 'airFriction',
init: Example.airFriction,
sourceLink: sourceLinkRoot + '/airFriction.js'
},
{
name: 'Attractors',
id: 'attractors',
init: Example.attractors,
sourceLink: sourceLinkRoot + '/attractors.js'
},
{
name: 'Avalanche',
id: 'avalanche',
init: Example.avalanche,
sourceLink: sourceLinkRoot + '/avalanche.js'
},
{
name: 'Ball Pool',
id: 'ballPool',
init: Example.ballPool,
sourceLink: sourceLinkRoot + '/ballPool.js'
},
{
name: 'Bridge',
id: 'bridge',
init: Example.bridge,
sourceLink: sourceLinkRoot + '/bridge.js'
},
{
name: 'Broadphase',
id: 'broadphase',
init: Example.broadphase,
sourceLink: sourceLinkRoot + '/broadphase.js'
},
{
name: 'Car',
id: 'car',
init: Example.car,
sourceLink: sourceLinkRoot + '/car.js'
},
{
name: 'Catapult',
id: 'catapult',
init: Example.catapult,
sourceLink: sourceLinkRoot + '/catapult.js'
},
{
name: 'Chains',
id: 'chains',
init: Example.chains,
sourceLink: sourceLinkRoot + '/chains.js'
},
{
name: 'Circle Stack',
id: 'circleStack',
init: Example.circleStack,
sourceLink: sourceLinkRoot + '/circleStack.js'
},
{
name: 'Cloth',
id: 'cloth',
init: Example.cloth,
sourceLink: sourceLinkRoot + '/cloth.js'
},
{
name: 'Collision Filtering',
id: 'collisionFiltering',
init: Example.collisionFiltering,
sourceLink: sourceLinkRoot + '/collisionFiltering.js'
},
{
name: 'Composite Manipulation',
id: 'compositeManipulation',
init: Example.compositeManipulation,
sourceLink: sourceLinkRoot + '/compositeManipulation.js'
},
{
name: 'Compound Bodies',
id: 'compound',
init: Example.compound,
sourceLink: sourceLinkRoot + '/compound.js'
},
{
name: 'Compound Stack',
id: 'compoundStack',
init: Example.compoundStack,
sourceLink: sourceLinkRoot + '/compoundStack.js'
},
{
name: 'Concave',
id: 'concave',
init: Example.concave,
sourceLink: sourceLinkRoot + '/concave.js'
},
{
name: 'Events',
id: 'events',
init: Example.events,
sourceLink: sourceLinkRoot + '/events.js'
},
{
name: 'Friction',
id: 'friction',
init: Example.friction,
sourceLink: sourceLinkRoot + '/friction.js'
},
{
name: 'Reverse Gravity',
id: 'gravity',
init: Example.gravity,
sourceLink: sourceLinkRoot + '/gravity.js'
},
{
name: 'Gyroscope',
id: 'gyro',
init: Example.gyro,
sourceLink: sourceLinkRoot + '/gyro.js'
},
{
name: 'Manipulation',
id: 'manipulation',
init: Example.manipulation,
sourceLink: sourceLinkRoot + '/manipulation.js'
},
{
name: 'Mixed Shapes',
id: 'mixed',
init: Example.mixed,
sourceLink: sourceLinkRoot + '/mixed.js'
},
{
name: 'Newton\'s Cradle',
id: 'newtonsCradle',
init: Example.newtonsCradle,
sourceLink: sourceLinkRoot + '/newtonsCradle.js'
},
{
name: 'Pyramid',
id: 'pyramid',
init: Example.pyramid,
sourceLink: sourceLinkRoot + '/pyramid.js'
},
{
name: 'Raycasting',
id: 'raycasting',
init: Example.raycasting,
sourceLink: sourceLinkRoot + '/raycasting.js'
},
{
name: 'Restitution',
id: 'restitution',
init: Example.restitution,
sourceLink: sourceLinkRoot + '/restitution.js'
},
{
name: 'Rounded Corners (Chamfering)',
id: 'rounded',
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
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;
}
}
};
document.body.appendChild(demo.dom.root);
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,
Matter = _isBrowser ? window.Matter : require('../../build/matter-dev.js');
var Example = Example || {};
var Example = {};
Matter.Example = Example;
if (!_isBrowser) {
module.exports = Example;
}
(function() {
var World = Matter.World,
Example.airFriction = function() {
var Engine = Matter.Engine,
Render = Matter.Render,
Runner = Matter.Runner,
Composite = Matter.Composite,
MouseConstraint = Matter.MouseConstraint,
Mouse = Matter.Mouse,
World = Matter.World,
Bodies = Matter.Bodies;
Example.airFriction = function(demo) {
var engine = demo.engine,
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 })
]);
// create engine
var engine = Engine.create(),
world = engine.world;
var renderOptions = demo.render.options;
renderOptions.showAngleIndicator = false;
renderOptions.showVelocity = 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),
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,
Bodies = Matter.Bodies,
Example.attractors = function() {
Matter.use(
'matter-gravity',
'matter-wrap'
);
var Engine = Matter.Engine,
Render = Matter.Render,
Runner = Matter.Runner,
Composite = Matter.Composite,
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) {
var engine = demo.engine,
world = engine.world;
// create engine
var engine = Engine.create(),
world = engine.world;
Matter.use(
'matter-gravity',
'matter-wrap'
// 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
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 = [];
world.gravity.scale = 0;
Body.setVelocity(body, {
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) {
var body = Bodies.circle(
Common.random(10, 790),
Common.random(10, 590),
Common.random(4, 10),
{
mass: Common.random(10, 20),
gravity: G,
frictionAir: 0,
wrap: {
min: { x: 0, y: 0 },
max: { x: 800, y: 600 }
}
// add mouse control
var mouse = Mouse.create(render.canvas),
mouseConstraint = MouseConstraint.create(engine, {
mouse: mouse,
constraint: {
stiffness: 0.2,
render: {
visible: false
}
);
}
});
Body.setVelocity(body, {
x: Common.random(-2, 2),
y: Common.random(-2, 2)
});
World.add(world, mouseConstraint);
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,
Bodies = Matter.Bodies,
Example.avalanche = function() {
Matter.use(
'matter-wrap'
);
var Engine = Matter.Engine,
Render = Matter.Render,
Runner = Matter.Runner,
Composite = Matter.Composite,
Composites = Matter.Composites,
Common = Matter.Common;
Common = Matter.Common,
MouseConstraint = Matter.MouseConstraint,
Mouse = Matter.Mouse,
World = Matter.World,
Bodies = Matter.Bodies;
Example.avalanche = function(demo) {
var engine = demo.engine,
world = engine.world;
// create engine
var engine = Engine.create(),
world = engine.world;
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 });
// 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
}
});
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,
Bodies = Matter.Bodies,
Example.ballPool = function() {
var Engine = Matter.Engine,
Render = Matter.Render,
Runner = Matter.Runner,
Composite = Matter.Composite,
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) {
var engine = demo.engine,
world = engine.world;
// create engine
var engine = Engine.create(),
world = engine.world;
var stack = Composites.stack(100, 50, 10, 15, 10, 10, function(x, y) {
return Bodies.circle(x, y, Common.random(15, 30), { restitution: 0.6, friction: 0.1 });
// 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
}
});
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,
Bodies = Matter.Bodies,
Example.bridge = 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;
Constraint = Matter.Constraint,
MouseConstraint = Matter.MouseConstraint,
Mouse = Matter.Mouse,
World = Matter.World,
Bodies = Matter.Bodies;
Example.bridge = function(demo) {
var engine = demo.engine,
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));
});
// create engine
var engine = Engine.create(),
world = engine.world;
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
]);
};
// 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
}
});
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,
Bodies = Matter.Bodies,
Example.broadphase = function() {
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,
Constraint = Matter.Constraint,
MouseConstraint = Matter.MouseConstraint,
Mouse = Matter.Mouse,
World = Matter.World,
Bodies = Matter.Bodies;
Example.broadphase = function(demo) {
var engine = demo.engine,
world = engine.world;
// create engine
var engine = Engine.create(),
world = engine.world;
var stack = Composites.stack(20, 20, 20, 5, 0, 0, function(x, y) {
switch (Math.round(Common.random(0, 1))) {
// 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,
showBroadphase: true
}
});
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));
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(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);
var renderOptions = demo.render.options;
renderOptions.showBroadphase = true;
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);
}
};
})();
};

112
examples/car.js
View file

@ -1,29 +1,89 @@
(function() {
var Example = Example || {};
var World = Matter.World,
Bodies = Matter.Bodies,
Composites = Matter.Composites;
Example.car = 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;
Example.car = function(demo) {
var engine = demo.engine,
world = engine.world,
scale;
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, 650, 20, { isStatic: true, angle: Math.PI * 0.06 }),
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 })
]);
var renderOptions = demo.render.options;
renderOptions.showAngleIndicator = true;
renderOptions.showCollisions = true;
};
// 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),
showAngleIndicator: true,
showCollisions: 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 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,
Bodies = Matter.Bodies,
Example.catapult = function() {
var Engine = Matter.Engine,
Render = Matter.Render,
Runner = Matter.Runner,
Body = Matter.Body,
Composite = Matter.Composite,
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) {
var engine = demo.engine,
world = engine.world;
var stack = Composites.stack(250, 255, 1, 6, 0, 0, function(x, y) {
return Bodies.rectangle(x, y, 30, 30);
// 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),
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, [
stack,
catapult,
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 } })
]);
var renderOptions = demo.render.options;
renderOptions.showCollisions = true;
renderOptions.showVelocity = true;
renderOptions.showAngleIndicator = true;
// 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);
}
};
})();
};

139
examples/chains.js
View file

@ -1,46 +1,107 @@
(function() {
var Example = Example || {};
var World = Matter.World,
Bodies = Matter.Bodies,
Example.chains = function() {
var Engine = Matter.Engine,
Render = Matter.Render,
Runner = Matter.Runner,
Body = Matter.Body,
Composite = Matter.Composite,
Composites = Matter.Composites,
Constraint = Matter.Constraint;
Common = Matter.Common,
Constraint = Matter.Constraint,
MouseConstraint = Matter.MouseConstraint,
Mouse = Matter.Mouse,
World = Matter.World,
Bodies = Matter.Bodies;
Example.chains = function(demo) {
var engine = demo.engine,
world = engine.world,
group = Body.nextGroup(true);
var ropeA = Composites.stack(200, 100, 5, 2, 10, 10, function(x, y) {
return Bodies.rectangle(x, y, 50, 20, { collisionFilter: { group: group } });
// 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),
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 });
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);
World.add(world, mouseConstraint);
// keep the mouse in sync with rendering
render.mouse = mouse;
// fit the render viewport to the scene
Render.lookAt(render, {
min: { x: 0, y: 0 },
max: { x: 700, y: 600 }
});
// context for MatterTools.Demo
return {
engine: engine,
runner: runner,
render: render,
canvas: render.canvas,
stop: function() {
Matter.Render.stop(render);
Matter.Runner.stop(runner);
}
};
})();
};

89
examples/circleStack.js
View file

@ -1,18 +1,79 @@
(function() {
var Example = Example || {};
var World = Matter.World,
Bodies = Matter.Bodies,
Composites = Matter.Composites;
Example.circleStack = 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;
Example.circleStack = function(demo) {
var engine = demo.engine,
world = engine.world;
var stack = Composites.stack(100, 185, 10, 10, 20, 0, function(x, y) {
return Bodies.circle(x, y, 20);
// 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),
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,
Bodies = Matter.Bodies,
Example.cloth = function() {
var Engine = Matter.Engine,
Render = Matter.Render,
Runner = Matter.Runner,
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) {
var engine = demo.engine,
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);
// create engine
var engine = Engine.create(),
world = engine.world;
for (var i = 0; i < 20; i++) {
cloth.bodies[i].isStatic = 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)
}
});
World.add(world, [
cloth,
Bodies.circle(300, 500, 80, { isStatic: true }),
Bodies.rectangle(500, 480, 80, 80, { isStatic: true })
]);
Render.run(render);
// create runner
var runner = Runner.create();
Runner.run(runner, engine);
// add bodies
var group = Body.nextGroup(true),
particleOptions = { friction: 0.00001, collisionFilter: { group: group }, render: { visible: false }},
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,
Bodies = Matter.Bodies,
Example.collisionFiltering = function() {
var Engine = Matter.Engine,
Render = Matter.Render,
Runner = Matter.Runner,
Composite = Matter.Composite,
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) {
var engine = demo.engine,
world = engine.world,
mouseConstraint = demo.mouseConstraint;
// create engine
var engine = Engine.create(),
world = engine.world;
// define our categories (as bit fields, there are up to 32 available)
var defaultCategory = 0x0001,
redCategory = 0x0002,
greenCategory = 0x0004,
blueCategory = 0x0008;
// 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),
wireframes: false,
background: '#111'
}
});
var redColor = '#C44D58',
blueColor = '#4ECDC4',
greenColor = '#C7F464';
Render.run(render);
// 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;
// create runner
var runner = Runner.create();
Runner.run(runner, engine);
if (row > 5) {
category = blueCategory;
color = blueColor;
} else if (row > 2) {
category = greenCategory;
color = greenColor;
}
// define our categories (as bit fields, there are up to 32 available)
var defaultCategory = 0x0001,
redCategory = 0x0002,
greenCategory = 0x0004,
blueCategory = 0x0008;
return Bodies.circle(x, y, 20, {
collisionFilter: {
category: category
},
render: {
strokeStyle: color,
fillStyle: 'transparent'
}
});
})
);
var redColor = '#C44D58',
blueColor = '#4ECDC4',
greenColor = '#C7F464';
// this body will only collide with the walls and the green bodies
World.add(world,
Bodies.circle(310, 40, 30, {
// add floor
World.add(world, Bodies.rectangle(400, 800, 900, 50, {
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: {
mask: defaultCategory | greenCategory
category: category
},
render: {
strokeStyle: Common.shadeColor(greenColor, -20),
fillStyle: greenColor
strokeStyle: color,
fillStyle: 'transparent'
}
})
);
});
})
);
// this body will only collide with the walls and the red bodies
World.add(world,
Bodies.circle(400, 40, 30, {
collisionFilter: {
mask: defaultCategory | redCategory
},
// this body will only collide with the walls and the green bodies
World.add(world,
Bodies.circle(310, 40, 30, {
collisionFilter: {
mask: defaultCategory | greenCategory
},
render: {
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: {
strokeStyle: Common.shadeColor(redColor, -20),
fillStyle: redColor
visible: false
}
})
);
}
});
// 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
}
})
);
World.add(world, mouseConstraint);
// red category objects should not be draggable with the mouse
mouseConstraint.collisionFilter.mask = defaultCategory | blueCategory | greenCategory;
// keep the mouse in sync with rendering
render.mouse = mouse;
var renderOptions = demo.render.options;
renderOptions.wireframes = false;
renderOptions.background = '#222';
renderOptions.showAngleIndicator = false;
// red category objects should not be draggable with the mouse
mouseConstraint.collisionFilter.mask = defaultCategory | blueCategory | greenCategory;
// fit the render viewport to the scene
Render.lookAt(render, 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,
Bodies = Matter.Bodies,
Example.compositeManipulation = function() {
var Engine = Matter.Engine,
Render = Matter.Render,
Runner = Matter.Runner,
Body = Matter.Body,
Events = Matter.Events,
Composite = Matter.Composite,
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) {
var engine = demo.engine,
world = engine.world,
sceneEvents = demo.sceneEvents;
// create engine
var engine = Engine.create(),
world = engine.world;
var stack = Composites.stack(200, 200, 4, 4, 0, 0, function(x, y) {
return Bodies.rectangle(x, y, 40, 40);
// 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
}
});
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(
Events.on(engine, 'afterUpdate', function(event) {
var time = engine.timing.timestamp;
Composite.scale(stack, scale, scale, {
x: 300,
y: 300
});
});
Composite.translate(stack, {
x: Math.sin(time * 0.001) * 2,
y: 0
});
// add mouse control
var mouse = Mouse.create(render.canvas),
mouseConstraint = MouseConstraint.create(engine, {
mouse: mouse,
constraint: {
stiffness: 0.2,
render: {
visible: false
}
}
});
Composite.rotate(stack, Math.sin(time * 0.001) * 0.01, {
x: 300,
y: 300
});
World.add(world, mouseConstraint);
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, {
x: 300,
y: 300
});
})
);
// fit the render viewport to the scene
Render.lookAt(render, Composite.allBodies(world));
var renderOptions = demo.render.options;
renderOptions.wireframes = false;
renderOptions.showAxes = true;
renderOptions.showCollisions = true;
// context for MatterTools.Demo
return {
engine: engine,
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,
Bodies = Matter.Bodies,
Example.compound = function() {
var Engine = Matter.Engine,
Render = Matter.Render,
Runner = Matter.Runner,
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) {
var engine = demo.engine,
world = engine.world;
// create engine
var engine = Engine.create(),
world = engine.world;
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 });
// 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),
showAxes: true,
showPositions: true,
showConvexHulls: true
}
});
var compoundBodyA = Body.create({
parts: [partA, partB]
Render.run(render);
// create runner
var runner = Runner.create();
Runner.run(runner, engine);
// add bodies
var size = 200,
x = 200,
y = 200,
partA = Bodies.rectangle(x, y, size, size / 5),
partB = Bodies.rectangle(x, y, size / 5, size, { render: partA.render });
var compoundBodyA = Body.create({
parts: [partA, partB]
});
size = 150;
x = 400;
y = 300;
var partC = Bodies.circle(x, y, 30),
partD = Bodies.circle(x + size, y, 30),
partE = Bodies.circle(x + size, y + size, 30),
partF = Bodies.circle(x, y + size, 30);
var compoundBodyB = Body.create({
parts: [partC, partD, partE, partF]
});
var constraint = Constraint.create({
pointA: { x: 400, y: 100 },
bodyB: compoundBodyB,
pointB: { x: 0, y: -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;
x = 400;
y = 300;
World.add(world, mouseConstraint);
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);
// keep the mouse in sync with rendering
render.mouse = mouse;
var compoundBodyB = Body.create({
parts: [partC, partD, partE, partF]
});
// fit the render viewport to the scene
Render.lookAt(render, Composite.allBodies(world));
var constraint = Constraint.create({
pointA: { x: 400, y: 100 },
bodyB: compoundBodyB,
pointB: { x: 0, y: -50 }
});
World.add(world, [compoundBodyA, compoundBodyB, constraint]);
var renderOptions = demo.render.options;
renderOptions.showAxes = true;
renderOptions.showPositions = true;
renderOptions.showConvexHulls = true;
// 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/compoundStack.js
View file

@ -1,25 +1,87 @@
(function() {
var Example = Example || {};
var World = Matter.World,
Bodies = Matter.Bodies,
Example.compoundStack = function() {
var Engine = Matter.Engine,
Render = Matter.Render,
Runner = Matter.Runner,
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) {
var engine = demo.engine,
world = engine.world,
size = 50;
// create engine
var engine = Engine.create(),
world = engine.world;
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 });
// 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
}
});
return Body.create({
parts: [partA, partB]
});
Render.run(render);
// create runner
var runner = Runner.create();
Runner.run(runner, engine);
// add bodies
var size = 50;
var stack = Composites.stack(100, 280, 12, 6, 0, 0, function(x, y) {
var partA = Bodies.rectangle(x, y, size, size / 5),
partB = Bodies.rectangle(x, y, size / 5, size, { render: partA.render });
return Body.create({
parts: [partA, partB]
});
});
World.add(world, [
stack,
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,
Bodies = Matter.Bodies,
Example.concave = 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,
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) {
var engine = demo.engine,
world = engine.world;
// create engine
var engine = Engine.create(),
world = engine.world;
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');
// 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 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.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 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: {
fillStyle: color,
strokeStyle: color
visible: false
}
}, true);
}
});
World.add(world, stack);
World.add(world, mouseConstraint);
var renderOptions = demo.render.options;
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);
}
};
})();
};

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,
Bodies = Matter.Bodies,
Example.events = function() {
var Engine = Matter.Engine,
Render = Matter.Render,
Runner = Matter.Runner,
Body = Matter.Body,
Events = Matter.Events,
Composite = Matter.Composite,
Composites = Matter.Composites,
Common = Matter.Common,
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) {
var engine = demo.engine,
world = engine.world,
mouseConstraint = demo.mouseConstraint,
sceneEvents = demo.sceneEvents;
// bind events (sceneEvents is only used for this demo)
// create engine
var engine = Engine.create(),
world = engine.world;
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
Events.on(world, 'afterAdd', function(event) {
console.log('added to world:', event.object);
})
Render.run(render);
);
// 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
Events.on(engine, 'beforeUpdate', function(event) {
var engine = event.source;
// an example of using beforeUpdate event on an engine
Events.on(engine, 'beforeUpdate', function(event) {
var engine = event.source;
// apply random forces every 5 secs
if (event.timestamp % 5000 < 50)
shakeScene(engine);
})
// apply random forces every 5 secs
if (event.timestamp % 5000 < 50)
shakeScene(engine);
});
);
// an example of using collisionStart event on an engine
Events.on(engine, 'collisionStart', function(event) {
var pairs = event.pairs;
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
Events.on(engine, 'collisionStart', function(event) {
var pairs = event.pairs;
// an example of using collisionActive event on an engine
Events.on(engine, 'collisionActive', function(event) {
var pairs = event.pairs;
// change object colours to show those 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';
}
})
// change object colours to show those in an active collision (e.g. resting contact)
for (var i = 0; i < pairs.length; i++) {
var pair = pairs[i];
pair.bodyA.render.fillStyle = '#aaaaaa';
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
Events.on(engine, 'collisionActive', function(event) {
var pairs = event.pairs;
// scene code
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 })
]);
// change object colours to show those in an active collision (e.g. resting contact)
for (var i = 0; i < pairs.length; i++) {
var pair = pairs[i];
pair.bodyA.render.fillStyle = '#aaaaaa';
pair.bodyB.render.fillStyle = '#aaaaaa';
}
})
var stack = Composites.stack(70, 100, 9, 4, 50, 50, function(x, y) {
return Bodies.circle(x, y, 15, { restitution: 1, render: { strokeStyle: '#777' } });
});
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
Events.on(engine, 'collisionEnd', function(event) {
var pairs = event.pairs;
if (!body.isStatic && body.position.y >= 500) {
var forceMagnitude = 0.02 * body.mass;
// 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';
}
})
);
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
});
}
Body.applyForce(body, body.position, {
x: (forceMagnitude + Common.random() * forceMagnitude) * Common.choose([1, -1]),
y: -forceMagnitude + Common.random() * -forceMagnitude
});
}
};
}
};
})();
// add mouse control
var mouse = Mouse.create(render.canvas),
mouseConstraint = MouseConstraint.create(engine, {
mouse: mouse,
constraint: {
stiffness: 0.2,
render: {
visible: false
}
}
});
World.add(world, mouseConstraint);
// keep the mouse in sync with rendering
render.mouse = mouse;
// an example of using mouse events on a mouse
Events.on(mouseConstraint, 'mousedown', function(event) {
var mousePosition = event.mouse.position;
console.log('mousedown at ' + mousePosition.x + ' ' + mousePosition.y);
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;
Example.friction = function(demo) {
var engine = demo.engine,
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 })
]);
// create engine
var engine = Engine.create(),
world = engine.world;
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 })
]);
// 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),
showVelocity: true
}
});
World.add(world, [
Bodies.rectangle(300, 520, 700, 20, { isStatic: true, angle: Math.PI * 0.06 }),
Bodies.rectangle(300, 430, 40, 40, { friction: 0 })
]);
Render.run(render);
var renderOptions = demo.render.options;
renderOptions.showAngleIndicator = false;
renderOptions.showVelocity = true;
// create runner
var runner = Runner.create();
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,
Bodies = Matter.Bodies,
Example.gravity = 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;
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) {
var engine = demo.engine,
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))) {
// create engine
var engine = Engine.create(),
world = engine.world;
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));
// 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),
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,
Bodies = Matter.Bodies,
Example.manipulation = function() {
var Engine = Matter.Engine,
Render = Matter.Render,
Runner = Matter.Runner,
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) {
var engine = demo.engine,
world = engine.world,
sceneEvents = demo.sceneEvents;
// create engine
var engine = Engine.create(),
world = engine.world;
var bodyA = Bodies.rectangle(100, 200, 50, 50, { isStatic: true }),
bodyB = Bodies.rectangle(200, 200, 50, 50),
bodyC = Bodies.rectangle(300, 200, 50, 50),
bodyD = Bodies.rectangle(400, 200, 50, 50),
bodyE = Bodies.rectangle(550, 200, 50, 50),
bodyF = Bodies.rectangle(700, 200, 50, 50),
bodyG = Bodies.circle(400, 100, 25),
partA = Bodies.rectangle(600, 200, 120, 50),
partB = Bodies.rectangle(660, 200, 50, 190),
compound = Body.create({
parts: [partA, partB],
isStatic: true
});
// 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),
showAxes: true,
showCollisions: true,
showConvexHulls: true
}
});
World.add(world, [bodyA, bodyB, bodyC, bodyD, bodyE, bodyF, bodyG, compound]);
Render.run(render);
var counter = 0,
scaleFactor = 1.01;
// create runner
var runner = Runner.create();
Runner.run(runner, engine);
sceneEvents.push(
Events.on(engine, 'beforeUpdate', function(event) {
counter += 1;
// add bodies
var bodyA = Bodies.rectangle(100, 200, 50, 50, { isStatic: true }),
bodyB = Bodies.rectangle(200, 200, 50, 50),
bodyC = Bodies.rectangle(300, 200, 50, 50),
bodyD = Bodies.rectangle(400, 200, 50, 50),
bodyE = Bodies.rectangle(550, 200, 50, 50),
bodyF = Bodies.rectangle(700, 200, 50, 50),
bodyG = Bodies.circle(400, 100, 25),
partA = Bodies.rectangle(600, 200, 120, 50),
partB = Bodies.rectangle(660, 200, 50, 190),
compound = Body.create({
parts: [partA, partB],
isStatic: true
});
if (counter === 40)
Body.setStatic(bodyG, true);
World.add(world, [bodyA, bodyB, bodyC, bodyD, bodyE, bodyF, bodyG, compound]);
if (scaleFactor > 1) {
Body.scale(bodyF, scaleFactor, scaleFactor);
Body.scale(compound, 0.995, 0.995);
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 })
]);
// 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);
var counter = 0,
scaleFactor = 1.01;
Events.on(engine, 'beforeUpdate', function(event) {
counter += 1;
if (counter === 40)
Body.setStatic(bodyG, true);
if (scaleFactor > 1) {
Body.scale(bodyF, scaleFactor, scaleFactor);
Body.scale(compound, 0.995, 0.995);
// modify bodyE vertices
bodyE.vertices[0].x -= 0.2;
bodyE.vertices[0].y -= 0.2;
bodyE.vertices[1].x += 0.2;
bodyE.vertices[1].y -= 0.2;
Body.setVertices(bodyE, bodyE.vertices);
}
// make bodyA move up and down
// body is static so must manually update velocity for friction to work
var py = 300 + 100 * Math.sin(engine.timing.timestamp * 0.002);
Body.setVelocity(bodyA, { x: 0, y: py - bodyA.position.y });
Body.setPosition(bodyA, { x: 100, y: py });
// make compound body move up and down and rotate constantly
Body.setVelocity(compound, { x: 0, y: py - compound.position.y });
Body.setAngularVelocity(compound, 0.02);
Body.setPosition(compound, { x: 600, y: py });
Body.rotate(compound, 0.02);
// every 1.5 sec
if (counter >= 60 * 1.5) {
Body.setVelocity(bodyB, { x: 0, y: -10 });
Body.setAngle(bodyC, -Math.PI * 0.26);
Body.setAngularVelocity(bodyD, 0.2);
// reset counter
counter = 0;
scaleFactor = 1;
}
});
// add mouse control
var mouse = Mouse.create(render.canvas),
mouseConstraint = MouseConstraint.create(engine, {
mouse: mouse,
constraint: {
stiffness: 0.2,
render: {
visible: false
}
}
});
// 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 });
World.add(world, mouseConstraint);
// 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);
// keep the mouse in sync with rendering
render.mouse = mouse;
// 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);
// fit the render viewport to the scene
Render.lookAt(render, Composite.allBodies(world));
// reset counter
counter = 0;
scaleFactor = 1;
}
})
);
var renderOptions = demo.render.options;
renderOptions.showAxes = true;
renderOptions.showCollisions = true;
renderOptions.showPositions = true;
renderOptions.showConvexHulls = true;
// context for MatterTools.Demo
return {
engine: engine,
runner: runner,
render: render,
canvas: render.canvas,
stop: function() {
Matter.Render.stop(render);
Matter.Runner.stop(runner);
}
};
})();
};

123
examples/mixed.js
View file

@ -1,42 +1,107 @@
(function() {
var Example = Example || {};
var World = Matter.World,
Bodies = Matter.Bodies,
Example.mixed = 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;
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) {
var engine = demo.engine,
world = engine.world;
// create engine
var engine = Engine.create(),
world = engine.world;
var stack = Composites.stack(20, 20, 15, 4, 0, 0, function(x, y) {
var sides = Math.round(Common.random(1, 8));
// 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
}
});
// triangles can be a little unstable, so avoid until fixed
sides = (sides === 3) ? 4 : sides;
Render.run(render);
// round the edges of some bodies
var chamfer = null;
if (sides > 2 && Common.random() > 0.7) {
chamfer = {
radius: 10
};
// 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 });
}
});
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 });
World.add(world, stack);
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 })
]);
// 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,
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) {
var engine = demo.engine,
world = engine.world;
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 });
var renderOptions = demo.render.options;
renderOptions.showVelocity = true;
// 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),
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,
Bodies = Matter.Bodies,
Composites = Matter.Composites;
Example.pyramid = 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;
Example.pyramid = function(demo) {
var engine = demo.engine,
world = engine.world;
// create engine
var engine = Engine.create(),
world = engine.world;
var stack = Composites.pyramid(100, 258, 15, 10, 0, 0, function(x, y) {
return Bodies.rectangle(x, y, 40, 40);
// 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
}
});
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,
Bodies = Matter.Bodies,
Example.raycasting = function() {
var Engine = Matter.Engine,
Render = Matter.Render,
Runner = Matter.Runner,
Body = Matter.Body,
Composite = Matter.Composite,
Composites = Matter.Composites,
Common = Matter.Common,
Query = Matter.Query,
Constraint = Matter.Constraint,
MouseConstraint = Matter.MouseConstraint,
Mouse = Matter.Mouse,
Events = Matter.Events,
World = Matter.World,
Vertices = Matter.Vertices,
Query = Matter.Query;
Bodies = Matter.Bodies;
Example.raycasting = function(demo) {
var engine = demo.engine,
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))) {
// create engine
var engine = Engine.create(),
world = engine.world;
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));
// 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
}
});
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'),
concave = Bodies.fromVertices(200, 200, star);
World.add(world, [stack, concave]);
World.add(world, mouseConstraint);
sceneEvents.push(
Events.on(demo.render, 'afterRender', function() {
var mouse = mouseConstraint.mouse,
context = demo.render.context,
bodies = Composite.allBodies(engine.world),
startPoint = { x: 400, y: 100 },
endPoint = mouse.position;
// keep the mouse in sync with rendering
render.mouse = mouse;
var collisions = Query.ray(bodies, startPoint, endPoint);
// fit the render viewport to the scene
Render.lookAt(render, Composite.allBodies(world));
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();
})
);
// context for MatterTools.Demo
return {
engine: engine,
runner: runner,
render: render,
canvas: render.canvas,
stop: function() {
Matter.Render.stop(render);
Matter.Runner.stop(runner);
}
};
})();
};

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;
Example.restitution = function(demo) {
var engine = demo.engine,
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 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),
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;
Example.rounded = function(demo) {
var engine = demo.engine,
world = engine.world;
// create engine
var engine = Engine.create(),
world = engine.world;
World.add(world, [
Bodies.rectangle(200, 200, 100, 100, {
chamfer: { radius: 20 }
}),
// 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),
showAxes: true
}
});
Bodies.rectangle(300, 200, 100, 100, {
chamfer: { radius: [90, 0, 0, 0] }
}),
Render.run(render);
Bodies.rectangle(400, 200, 200, 200, {
chamfer: { radius: [150, 20, 40, 20] }
}),
// create runner
var runner = Runner.create();
Runner.run(runner, engine);
Bodies.rectangle(200, 200, 200, 200, {
chamfer: { radius: [150, 20, 150, 20] }
}),
// 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 })
]);
Bodies.rectangle(300, 200, 200, 50, {
chamfer: { radius: [25, 25, 0, 0] }
}),
World.add(world, [
Bodies.rectangle(200, 200, 100, 100, {
chamfer: { radius: 20 }
}),
Bodies.polygon(200, 100, 8, 80, {
chamfer: { radius: 30 }
}),
Bodies.rectangle(300, 200, 100, 100, {
chamfer: { radius: [90, 0, 0, 0] }
}),
Bodies.polygon(300, 100, 5, 80, {
chamfer: { radius: [10, 40, 20, 40, 10] }
}),
Bodies.rectangle(400, 200, 200, 200, {
chamfer: { radius: [150, 20, 40, 20] }
}),
Bodies.polygon(400, 200, 3, 50, {
chamfer: { radius: [20, 0, 20] }
})
]);
Bodies.rectangle(200, 200, 200, 200, {
chamfer: { radius: [150, 20, 150, 20] }
}),
var renderOptions = demo.render.options;
renderOptions.showAxes = true;
renderOptions.showCollisions = true;
Bodies.rectangle(300, 200, 200, 50, {
chamfer: { radius: [25, 25, 0, 0] }
}),
Bodies.polygon(200, 100, 8, 80, {
chamfer: { radius: 30 }
}),
Bodies.polygon(300, 100, 5, 80, {
chamfer: { radius: [10, 40, 20, 40, 10] }
}),
Bodies.polygon(400, 200, 3, 50, {
chamfer: { radius: [20, 0, 20] }
})
]);
// add mouse control
var mouse = Mouse.create(render.canvas),
mouseConstraint = MouseConstraint.create(engine, {
mouse: mouse,
constraint: {
stiffness: 0.2,
render: {
visible: false
}
}
});
World.add(world, mouseConstraint);
// keep the mouse in sync with rendering
render.mouse = mouse;
// fit the render viewport to the scene
Render.lookAt(render, 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,
Bodies = Matter.Bodies,
Example.sensors = function() {
var Engine = Matter.Engine,
Render = Matter.Render,
Runner = Matter.Runner,
Body = Matter.Body,
Composite = Matter.Composite,
Composites = Matter.Composites,
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) {
var engine = demo.engine,
world = engine.world,
sceneEvents = demo.sceneEvents;
// create engine
var engine = Engine.create(),
world = engine.world;
var redColor = '#C44D58',
greenColor = '#C7F464';
// 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),
wireframes: false,
background: '#111'
}
});
var collider = Bodies.rectangle(400, 300, 500, 50, {
isSensor: true,
Render.run(render);
// create runner
var runner = Runner.create();
Runner.run(runner, engine);
// add bodies
var redColor = '#C44D58',
greenColor = '#C7F464';
var collider = Bodies.rectangle(400, 300, 500, 50, {
isSensor: true,
isStatic: true,
render: {
strokeStyle: redColor,
fillStyle: 'transparent'
}
});
World.add(world, [
collider,
Bodies.rectangle(400, 620, 800, 50, {
isStatic: true,
render: {
strokeStyle: redColor,
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,
Bodies.circle(400, 40, 30, {
render: {
strokeStyle: greenColor,
fillStyle: 'transparent'
}
})
);
// keep the mouse in sync with rendering
render.mouse = mouse;
sceneEvents.push(
Events.on(engine, 'collisionStart', function(event) {
var pairs = event.pairs;
for (var i = 0, j = pairs.length; i != j; ++i) {
var pair = pairs[i];
// fit the render viewport to the scene
Render.lookAt(render, Composite.allBodies(world));
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;
}
}
})
);
var renderOptions = demo.render.options;
renderOptions.wireframes = false;
renderOptions.background = '#222';
renderOptions.showAngleIndicator = false;
// context for MatterTools.Demo
return {
engine: engine,
runner: runner,
render: render,
canvas: render.canvas,
stop: function() {
Matter.Render.stop(render);
Matter.Runner.stop(runner);
}
};
})();
};

121
examples/sleeping.js
View file

@ -1,41 +1,102 @@
(function() {
var Example = Example || {};
var World = Matter.World,
Bodies = Matter.Bodies,
Example.sleeping = function() {
var Engine = Matter.Engine,
Render = Matter.Render,
Runner = Matter.Runner,
Composite = Matter.Composite,
Composites = Matter.Composites,
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) {
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))) {
// create engine
var engine = Engine.create({
enableSleeping: true
}),
world = engine.world;
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));
// 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
}
});
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++) {
Events.on(stack.bodies[i], 'sleepStart sleepEnd', function(event) {
var body = this;
console.log('body id', body.id, 'sleeping:', body.isSleeping);
});
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);
}
engine.enableSleeping = true;
};
})();
};

138
examples/slingshot.js
View file

@ -1,64 +1,104 @@
(function() {
var Example = Example || {};
var World = Matter.World,
Bodies = Matter.Bodies,
Example.slingshot = function() {
var Engine = Matter.Engine,
Render = Matter.Render,
Runner = Matter.Runner,
Body = Matter.Body,
Composite = Matter.Composite,
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.slingshot = function(demo) {
var engine = demo.engine,
world = engine.world,
mouseConstraint = demo.mouseConstraint;
// create engine
var engine = Engine.create(),
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),
showAngleIndicator: true
}
});
var ground = Bodies.rectangle(395, 600, 815, 50, { isStatic: true, render: { visible: false } }),
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'
}
});
Render.run(render);
var pyramid = Composites.pyramid(500, 300, 9, 10, 0, 0, function(x, y, column) {
var texture = column % 2 === 0 ? './img/block.png' : './img/block-2.png';
return Bodies.rectangle(x, y, 25, 40, { render: { sprite: { texture: texture } } });
// create runner
var runner = Runner.create();
Runner.run(runner, engine);
// add bodies
var ground = Bodies.rectangle(395, 600, 815, 50, { isStatic: true }),
rockOptions = { density: 0.004 },
rock = Bodies.polygon(170, 450, 8, 20, rockOptions),
anchor = { x: 170, y: 450 },
elastic = Constraint.create({
pointA: anchor,
bodyB: rock,
stiffness: 0.05
});
var ground2 = Bodies.rectangle(610, 250, 200, 20, {
isStatic: true,
render: {
fillStyle: '#edc51e',
strokeStyle: '#b5a91c'
}
});
var pyramid = Composites.pyramid(500, 300, 9, 10, 0, 0, function(x, y) {
return Bodies.rectangle(x, y, 25, 40);
});
var pyramid2 = Composites.pyramid(550, 0, 5, 10, 0, 0, function(x, y, column) {
var texture = column % 2 === 0 ? './img/block.png' : './img/block-2.png';
return Bodies.rectangle(x, y, 25, 40, { render: { sprite: { texture: texture } } });
});
var ground2 = Bodies.rectangle(610, 250, 200, 20, { isStatic: true });
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() {
if (mouseConstraint.mouse.button === -1 && (rock.position.x > 190 || rock.position.y < 430)) {
rock = Bodies.polygon(170, 450, 7, 20, rockOptions);
World.add(engine.world, rock);
elastic.bodyB = rock;
World.add(engine.world, [ground, pyramid, ground2, pyramid2, rock, elastic]);
Events.on(engine, 'afterUpdate', function() {
if (mouseConstraint.mouse.button === -1 && (rock.position.x > 190 || rock.position.y < 430)) {
rock = Bodies.polygon(170, 450, 7, 20, rockOptions);
World.add(engine.world, rock);
elastic.bodyB = rock;
}
});
// add mouse control
var mouse = Mouse.create(render.canvas),
mouseConstraint = MouseConstraint.create(engine, {
mouse: mouse,
constraint: {
stiffness: 0.2,
render: {
visible: false
}
}
});
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,
Composites = Matter.Composites;
Example.softBody = 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;
Example.softBody = function(demo) {
var engine = demo.engine,
world = engine.world;
var particleOptions = {
friction: 0.05,
frictionStatic: 0.1,
render: { visible: true }
};
// create engine
var engine = Engine.create(),
world = engine.world;
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)
]);
// 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: false
}
});
var renderOptions = demo.render.options;
renderOptions.showAngleIndicator = false;
Render.run(render);
// create runner
var runner = Runner.create();
Runner.run(runner, engine);
// add bodies
var particleOptions = {
friction: 0.05,
frictionStatic: 0.1,
render: { visible: true }
};
})();
World.add(world, [
Composites.softBody(250, 100, 5, 5, 0, 0, true, 18, particleOptions),
Composites.softBody(400, 300, 8, 3, 0, 0, true, 15, particleOptions),
Composites.softBody(250, 400, 4, 4, 0, 0, true, 15, particleOptions),
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,
Bodies = Matter.Bodies,
Example.sprites = function() {
var Engine = Matter.Engine,
Render = Matter.Render,
Runner = Matter.Runner,
Composite = Matter.Composite,
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) {
var engine = demo.engine,
world = engine.world,
offset = 10,
options = {
isStatic: true,
// 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),
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: {
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;
renderOptions.background = './img/wall-bg.jpg';
renderOptions.showAngleIndicator = false;
renderOptions.wireframes = false;
// 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);
}
};
})();
};

91
examples/stack.js
View file

@ -1,18 +1,81 @@
(function() {
var Example = Example || {};
var World = Matter.World,
Bodies = Matter.Bodies,
Composites = Matter.Composites;
Example.stack = 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;
Example.stack = function(demo) {
var engine = demo.engine,
world = engine.world;
var stack = Composites.stack(100, 380, 10, 5, 0, 0, function(x, y) {
return Bodies.rectangle(x, y, 40, 40);
// 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),
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,
Bodies = Matter.Bodies,
Example.staticFriction = function() {
var Engine = Matter.Engine,
Render = Matter.Render,
Runner = Matter.Runner,
Body = Matter.Body,
Composite = Matter.Composite,
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) {
var engine = demo.engine,
world = engine.world,
sceneEvents = demo.sceneEvents;
// create engine
var engine = Engine.create(),
world = engine.world;
var body = Bodies.rectangle(400, 500, 200, 60, { isStatic: true, chamfer: 10 }),
size = 50,
counter = -1;
// 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),
showVelocity: true
}
});
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
});
Render.run(render);
// create runner
var runner = Runner.create();
Runner.run(runner, engine);
// add bodies
var body = Bodies.rectangle(400, 500, 200, 60, { isStatic: true, chamfer: 10 }),
size = 50,
counter = -1;
var stack = Composites.stack(350, 470 - 6 * size, 1, 6, 0, 0, function(x, y) {
return Bodies.rectangle(x, y, size * 2, size, {
slop: 0.5,
friction: 1,
frictionStatic: Infinity
});
World.add(world, [body, stack]);
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,
Bodies = Matter.Bodies,
Composites = Matter.Composites;
Example.stress = 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;
Example.stress = function(demo) {
var engine = demo.engine,
world = engine.world;
var stack = Composites.stack(90, 50, 18, 15, 0, 0, function(x, y) {
return Bodies.rectangle(x, y, 35, 35);
// 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);
// 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;
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);
}
};
})();
};

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,
Bodies = Matter.Bodies,
Composites = Matter.Composites;
// create engine
var engine = Engine.create(),
world = engine.world;
Example.stress2 = function(demo) {
var engine = demo.engine,
world = engine.world;
var stack = Composites.stack(100, 120, 25, 18, 0, 0, function(x, y) {
return Bodies.rectangle(x, y, 25, 25);
// 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);
// 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,
Bodies = Matter.Bodies,
Example.svg = 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,
Svg = Matter.Svg;
Svg = Matter.Svg,
Bodies = Matter.Bodies;
Example.svg = function(demo) {
var engine = demo.engine,
world = engine.world;
// create engine
var engine = Engine.create(),
world = engine.world;
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);
// 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)
}
});
$.get('./svg/svg.svg').done(function(data) {
var vertexSets = [],
color = Common.choose(['#556270', '#4ECDC4', '#C7F464', '#FF6B6B', '#C44D58']);
Render.run(render);
$(data).find('path').each(function(i, path) {
vertexSets.push(Svg.pathToVertices(path, 30));
// create runner
var runner = Runner.create();
Runner.run(runner, engine);
// add bodies
var svgs = [
'iconmonstr-check-mark-8-icon',
'iconmonstr-paperclip-2-icon',
'iconmonstr-puzzle-icon',
'iconmonstr-user-icon'
];
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, {
render: {
fillStyle: color,
strokeStyle: color
}
}, true));
$.get('./svg/svg.svg').done(function(data) {
var vertexSets = [],
color = Common.choose(['#556270', '#4ECDC4', '#C7F464', '#FF6B6B', '#C44D58']);
$(data).find('path').each(function(i, path) {
vertexSets.push(Svg.pathToVertices(path, 30));
});
var renderOptions = demo.render.options;
renderOptions.showAngleIndicator = false;
};
World.add(world, Bodies.fromVertices(400, 80, vertexSets, {
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,
Bodies = Matter.Bodies,
Example.terrain = 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,
Query = Matter.Query,
Svg = Matter.Svg;
Svg = Matter.Svg,
Bodies = Matter.Bodies;
Example.terrain = function(demo) {
var engine = demo.engine,
world = engine.world;
// create engine
var engine = Engine.create(),
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) {
var vertexSets = [],
color = Common.choose(['#556270', '#4ECDC4', '#C7F464', '#FF6B6B', '#C44D58']);
// create runner
var runner = Runner.create();
Runner.run(runner, engine);
$(data).find('path').each(function(i, path) {
vertexSets.push(Svg.pathToVertices(path, 30));
});
// add bodies
var terrain;
terrain = Bodies.fromVertices(400, 350, vertexSets, {
isStatic: true,
render: {
fillStyle: color,
strokeStyle: color
}
}, true);
$.get('./svg/terrain.svg').done(function(data) {
var vertexSets = [],
color = Common.choose(['#556270', '#4ECDC4', '#C7F464', '#FF6B6B', '#C44D58']);
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);
}
}));
$(data).find('path').each(function(i, path) {
vertexSets.push(Svg.pathToVertices(path, 30));
});
var renderOptions = demo.render.options;
renderOptions.showAngleIndicator = false;
renderOptions.showVelocity = true;
};
terrain = Bodies.fromVertices(400, 350, vertexSets, {
isStatic: 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,
Bodies = Matter.Bodies,
Example.timescale = function() {
var Engine = Matter.Engine,
Render = Matter.Render,
Runner = Matter.Runner,
Body = Matter.Body,
Events = Matter.Events,
Composite = Matter.Composite,
Composites = Matter.Composites,
Common = Matter.Common,
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) {
var engine = demo.engine,
world = engine.world,
sceneEvents = demo.sceneEvents;
var explosion = function(engine) {
var bodies = Composite.allBodies(engine.world);
// create engine
var engine = Engine.create(),
world = engine.world;
for (var i = 0; i < bodies.length; i++) {
var body = bodies[i];
// 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
}
});
if (!body.isStatic && body.position.y >= 500) {
var forceMagnitude = 0.05 * body.mass;
Render.run(render);
Body.applyForce(body, body.position, {
x: (forceMagnitude + Common.random() * forceMagnitude) * Common.choose([1, -1]),
y: -forceMagnitude + Common.random() * -forceMagnitude
});
}
// create runner
var runner = Runner.create();
Runner.run(runner, engine);
// add bodies
World.add(world, [
Bodies.rectangle(400, 0, 800, 50, { isStatic: true }),
Bodies.rectangle(400, 600, 800, 50, { isStatic: true }),
Bodies.rectangle(800, 300, 50, 600, { isStatic: true }),
Bodies.rectangle(0, 300, 50, 600, { isStatic: true })
]);
var explosion = function(engine) {
var bodies = Composite.allBodies(engine.world);
for (var i = 0; i < bodies.length; i++) {
var body = bodies[i];
if (!body.isStatic && body.position.y >= 500) {
var forceMagnitude = 0.05 * body.mass;
Body.applyForce(body, body.position, {
x: (forceMagnitude + Common.random() * forceMagnitude) * Common.choose([1, -1]),
y: -forceMagnitude + Common.random() * -forceMagnitude
});
}
};
var timeScaleTarget = 1,
counter = 0;
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,
Bodies = Matter.Bodies,
Example.views = 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,
Events = Matter.Events,
Bounds = Matter.Bounds,
Constraint = Matter.Constraint,
MouseConstraint = Matter.MouseConstraint,
Mouse = Matter.Mouse,
World = Matter.World,
Vertices = Matter.Vertices,
Vector = Matter.Vector,
Mouse = Matter.Mouse;
Bounds = Matter.Bounds,
Bodies = Matter.Bodies;
Example.views = function(demo) {
var engine = demo.engine,
world = engine.world,
sceneEvents = demo.sceneEvents,
mouseConstraint = demo.mouseConstraint;
// create engine
var engine = Engine.create(),
world = engine.world;
var stack = Composites.stack(20, 20, 15, 4, 0, 0, function(x, y) {
switch (Math.round(Common.random(0, 1))) {
// 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),
hasBounds: true,
showAngleIndicator: true
}
});
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));
Render.run(render);
// create runner
var runner = Runner.create();
Runner.run(runner, engine);
// add mouse control
var mouse = Mouse.create(render.canvas),
mouseConstraint = MouseConstraint.create(engine, {
mouse: mouse,
constraint: {
stiffness: 0.2,
render: {
visible: false
}
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
var viewportCentre = {
x: demo.render.options.width * 0.5,
y: demo.render.options.height * 0.5
};
World.add(world, mouseConstraint);
// 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 the mouse in sync with rendering
render.mouse = mouse;
// keep track of current bounds scale (view zoom)
var boundsScaleTarget = 1,
boundsScale = {
x: 1,
y: 1
};
// add bodies
var stack = Composites.stack(20, 20, 15, 4, 0, 0, function(x, y) {
switch (Math.round(Common.random(0, 1))) {
// use the engine tick event to control our view
sceneEvents.push(
Events.on(engine, 'beforeTick', function() {
var world = engine.world,
mouse = mouseConstraint.mouse,
render = demo.render,
translate;
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));
}
});
// 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);
}
})
);
// must enable renderOptions.hasBounds for views to work
var renderOptions = demo.render.options;
renderOptions.hasBounds = true;
World.add(world, [
stack,
Bodies.rectangle(400, 600, 800, 50, { isStatic: true }),
Bodies.rectangle(800, 300, 50, 600, { isStatic: true }),
Bodies.rectangle(0, 300, 50, 600, { isStatic: true })
]);
// get the centre of the viewport
var viewportCentre = {
x: render.options.width * 0.5,
y: render.options.height * 0.5
};
})();
// make the world bounds a little bigger than the render bounds
world.bounds.min.x = -300;
world.bounds.min.y = -300;
world.bounds.max.x = 1100;
world.bounds.max.y = 900;
// keep track of current bounds scale (view zoom)
var boundsScaleTarget = 1,
boundsScale = {
x: 1,
y: 1
};
// use the engine tick event to control our view
Events.on(engine, 'beforeTick', function() {
var world = engine.world,
mouse = mouseConstraint.mouse,
translate;
// mouse wheel controls zoom
var scaleFactor = mouse.wheelDelta * -0.1;
if (scaleFactor !== 0) {
if ((scaleFactor < 0 && boundsScale.x >= 0.6) || (scaleFactor > 0 && boundsScale.x <= 1.4)) {
boundsScaleTarget += scaleFactor;
}
}
// if scale has changed
if (Math.abs(boundsScale.x - boundsScaleTarget) > 0.01) {
// smoothly tween scale factor
scaleFactor = (boundsScaleTarget - boundsScale.x) * 0.2;
boundsScale.x += scaleFactor;
boundsScale.y += scaleFactor;
// scale the render bounds
render.bounds.max.x = render.bounds.min.x + render.options.width * boundsScale.x;
render.bounds.max.y = render.bounds.min.y + render.options.height * boundsScale.y;
// translate so zoom is from centre of view
translate = {
x: render.options.width * scaleFactor * -0.5,
y: render.options.height * scaleFactor * -0.5
};
Bounds.translate(render.bounds, translate);
// update mouse
Mouse.setScale(mouse, boundsScale);
Mouse.setOffset(mouse, render.bounds.min);
}
// get vector from mouse relative to centre of viewport
var deltaCentre = Vector.sub(mouse.absolute, viewportCentre),
centreDist = Vector.magnitude(deltaCentre);
// translate the view if mouse has moved over 50px from the centre of viewport
if (centreDist > 50) {
// create a vector to translate the view, allowing the user to control view speed
var direction = Vector.normalise(deltaCentre),
speed = Math.min(10, Math.pow(centreDist - 50, 2) * 0.0002);
translate = Vector.mult(direction, speed);
// prevent the view moving outside the world bounds
if (render.bounds.min.x + translate.x < world.bounds.min.x)
translate.x = world.bounds.min.x - render.bounds.min.x;
if (render.bounds.max.x + translate.x > world.bounds.max.x)
translate.x = world.bounds.max.x - render.bounds.max.x;
if (render.bounds.min.y + translate.y < world.bounds.min.y)
translate.y = world.bounds.min.y - render.bounds.min.y;
if (render.bounds.max.y + translate.y > world.bounds.max.y)
translate.y = world.bounds.max.y - render.bounds.max.y;
// move the view
Bounds.translate(render.bounds, translate);
// we must update the mouse too
Mouse.setOffset(mouse, render.bounds.min);
}
});
// context for MatterTools.Demo
return {
engine: engine,
runner: runner,
render: render,
canvas: render.canvas,
stop: function() {
Matter.Render.stop(render);
Matter.Runner.stop(runner);
}
};
};

109
examples/wreckingBall.js
View file

@ -1,30 +1,89 @@
(function() {
var Example = Example || {};
var World = Matter.World,
Bodies = Matter.Bodies,
Example.wreckingBall = function() {
var Engine = Matter.Engine,
Render = Matter.Render,
Runner = Matter.Runner,
Composite = Matter.Composite,
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) {
var engine = demo.engine,
world = engine.world;
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);
// 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),
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 Grid = require('../collision/Grid');
var Vector = require('../geometry/Vector');
var Mouse = require('../core/Mouse');
(function() {
@ -52,7 +53,7 @@ var Vector = require('../geometry/Vector');
height: 600,
pixelRatio: 1,
background: '#fafafa',
wireframeBackground: '#222',
wireframeBackground: '#0f0f13',
hasBounds: !!options.bounds,
enabled: true,
wireframes: true,
@ -173,8 +174,7 @@ var Vector = require('../geometry/Vector');
Render.lookAt = function(render, objects, padding, center) {
center = typeof center !== 'undefined' ? center : true;
objects = Common.isArray(objects) ? objects : [objects];
var padding = padding || {
padding = padding || {
x: 0,
y: 0
};
@ -344,6 +344,16 @@ var Vector = require('../geometry/Vector');
// transform the view
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 {
constraints = allConstraints;
bodies = allBodies;