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;
}

159
demo/index.html
View file

@ -1,91 +1,90 @@
<!DOCTYPE html>
<html>
<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,minimal-ui">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui">
<meta name="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>
<!-- only required if using Matter.RenderPixi -->
<script type="text/javascript" src="./js/lib/pixi.js"></script>
<!-- only required if using Matter.Svg -->
<script type="text/javascript" src="./js/lib/pathseg.js"></script>
<!-- matterjs dev version -->
<script type="text/javascript" src="../build/matter-dev.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>
<!-- 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>
<!-- libs -->
<script type="text/javascript" src="/demo/lib/decomp.js"></script>
<script type="text/javascript" src="/demo/lib/pathseg.js"></script>
<!-- Matter -->
<script src="../build/matter-dev.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>
<!-- 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>
<style type="text/css">
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
</style>
</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>
<script src="/demo/js/Demo.js"></script>
</body>
</html>

628
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 = {};
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'
}
// 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);
}
// 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>

85
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,
// 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
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 })
Bodies.rectangle(600, 100, 60, 60, { frictionAir: 0.1 }),
// floor
Bodies.rectangle(400, 600, 800, 50, { isStatic: true })
]);
var renderOptions = demo.render.options;
renderOptions.showAngleIndicator = false;
renderOptions.showVelocity = 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);
}
};
};

82
examples/attractors.js
View file

@ -1,19 +1,43 @@
(function() {
var World = Matter.World,
Bodies = Matter.Bodies,
Body = Matter.Body,
Common = Matter.Common;
Example.attractors = function(demo) {
var engine = demo.engine,
world = engine.world;
var Example = Example || {};
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,
MouseConstraint = Matter.MouseConstraint,
Mouse = Matter.Mouse,
World = Matter.World,
Bodies = Matter.Bodies;
// create engine
var engine = Engine.create(),
world = engine.world;
// create renderer
var render = Render.create({
element: document.body,
engine: engine,
options: {
width: 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;
@ -21,8 +45,8 @@
for (var i = 0; i < 200; i += 1) {
var body = Bodies.circle(
Common.random(10, 790),
Common.random(10, 590),
Common.random(10, render.options.width),
Common.random(10, render.options.height),
Common.random(4, 10),
{
mass: Common.random(10, 20),
@ -30,7 +54,7 @@
frictionAir: 0,
wrap: {
min: { x: 0, y: 0 },
max: { x: 800, y: 600 }
max: { x: render.options.width, y: render.options.height }
}
}
);
@ -43,8 +67,32 @@
World.add(world, body);
}
var renderOptions = demo.render.options;
renderOptions.showAngleIndicator = false;
};
// 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;
// context for MatterTools.Demo
return {
engine: engine,
runner: runner,
render: render,
canvas: render.canvas,
stop: function() {
Matter.Render.stop(render);
Matter.Runner.stop(runner);
}
};
};

83
examples/avalanche.js
View file

@ -1,14 +1,43 @@
(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,
// 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(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 });
});
@ -20,6 +49,44 @@
Bodies.rectangle(500, 350, 700, 20, { isStatic: true, angle: -Math.PI * 0.06 }),
Bodies.rectangle(340, 580, 700, 20, { isStatic: true, angle: Math.PI * 0.04 })
]);
};
})();
// add mouse control
var mouse = Mouse.create(render.canvas),
mouseConstraint = MouseConstraint.create(engine, {
mouse: mouse,
constraint: {
stiffness: 0.2,
render: {
visible: false
}
}
});
World.add(world, mouseConstraint);
// keep the mouse in sync with rendering
render.mouse = mouse;
// fit the render viewport to the scene
Render.lookAt(render, Composite.allBodies(world));
// wrapping using matter-wrap plugin
for (var i = 0; i < stack.bodies.length; i += 1) {
stack.bodies[i].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);
}
};
};

79
examples/ballPool.js
View file

@ -1,15 +1,46 @@
(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,
// create engine
var engine = Engine.create(),
world = engine.world;
var stack = Composites.stack(100, 50, 10, 15, 10, 10, function(x, y) {
// 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 });
});
@ -19,6 +50,36 @@
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, 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);
};
})();

76
examples/bridge.js
View file

@ -1,16 +1,42 @@
(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);
// 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 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 } });
@ -30,6 +56,36 @@
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);
}
};
};

83
examples/broadphase.js
View file

@ -1,15 +1,49 @@
(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,
// create engine
var engine = Engine.create(),
world = engine.world;
var stack = Composites.stack(20, 20, 20, 5, 0, 0, function(x, y) {
// 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
}
});
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:
@ -27,8 +61,35 @@
World.add(world, stack);
var renderOptions = demo.render.options;
renderOptions.showBroadphase = 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);
}
};
};

92
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;
// create engine
var engine = Engine.create(),
world = engine.world;
scale = 0.9;
// 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, 650, 20, { isStatic: true, angle: Math.PI * 0.06 }),
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(340, 580, 700, 20, { isStatic: true, angle: Math.PI * 0.04 })
Bodies.rectangle(300, 560, 600, 20, { isStatic: true, angle: Math.PI * 0.04 })
]);
var renderOptions = demo.render.options;
renderOptions.showAngleIndicator = true;
renderOptions.showCollisions = 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);
}
};
};

81
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,
// 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, { });
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 } })
]);
var renderOptions = demo.render.options;
renderOptions.showCollisions = true;
renderOptions.showVelocity = true;
renderOptions.showAngleIndicator = 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);
}
};
};

83
examples/chains.js
View file

@ -1,18 +1,46 @@
(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);
// create engine
var engine = Engine.create(),
world = engine.world;
var ropeA = Composites.stack(200, 100, 5, 2, 10, 10, function(x, y) {
// 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 } });
});
@ -41,6 +69,39 @@
}));
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
}
}
});
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);
}
};
};

79
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,
// 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, stack);
};
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, 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);
}
};
};

72
examples/cloth.js
View file

@ -1,14 +1,40 @@
(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,
// 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 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);
@ -22,6 +48,36 @@
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);
}
};
};

85
examples/collisionFiltering.js
View file

@ -1,14 +1,38 @@
(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;
// 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'
}
});
Render.run(render);
// create runner
var runner = Runner.create();
Runner.run(runner, engine);
// define our categories (as bit fields, there are up to 32 available)
var defaultCategory = 0x0001,
@ -20,6 +44,14 @@
blueColor = '#4ECDC4',
greenColor = '#C7F464';
// 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) {
@ -85,13 +117,38 @@
})
);
// add mouse control
var mouse = Mouse.create(render.canvas),
mouseConstraint = MouseConstraint.create(engine, {
mouse: mouse,
constraint: {
stiffness: 0.2,
render: {
visible: false
}
}
});
World.add(world, mouseConstraint);
// keep the mouse in sync with rendering
render.mouse = mouse;
// red category objects should not be draggable with the mouse
mouseConstraint.collisionFilter.mask = defaultCategory | blueCategory | greenCategory;
var renderOptions = demo.render.options;
renderOptions.wireframes = false;
renderOptions.background = '#222';
renderOptions.showAngleIndicator = false;
};
// fit the render viewport to the scene
Render.lookAt(render, Composite.allBodies(world));
})();
// context for MatterTools.Demo
return {
engine: engine,
runner: runner,
render: render,
canvas: render.canvas,
stop: function() {
Matter.Render.stop(render);
Matter.Runner.stop(runner);
}
};
};

89
examples/compositeManipulation.js
View file

@ -1,15 +1,47 @@
(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;
// 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);
@ -19,7 +51,6 @@
world.gravity.y = 0;
sceneEvents.push(
Events.on(engine, 'afterUpdate', function(event) {
var time = engine.timing.timestamp;
@ -39,13 +70,37 @@
x: 300,
y: 300
});
})
);
});
var renderOptions = demo.render.options;
renderOptions.wireframes = false;
renderOptions.showAxes = true;
renderOptions.showCollisions = 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);
}
};
})();
};

86
examples/compound.js
View file

@ -1,14 +1,44 @@
(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,
// 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),
showAxes: true,
showPositions: true,
showConvexHulls: true
}
});
Render.run(render);
// create runner
var runner = Runner.create();
Runner.run(runner, engine);
// add bodies
var size = 200,
x = 200,
y = 200,
@ -38,12 +68,42 @@
pointB: { x: 0, y: -50 }
});
World.add(world, [compoundBodyA, compoundBodyB, constraint]);
World.add(world, [
compoundBodyA,
compoundBodyB,
constraint,
Bodies.rectangle(400, 600, 800, 50.5, { isStatic: true })
]);
var renderOptions = demo.render.options;
renderOptions.showAxes = true;
renderOptions.showPositions = true;
renderOptions.showConvexHulls = 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);
}
};
})();
};

84
examples/compoundStack.js
View file

@ -1,14 +1,43 @@
(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;
// 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 size = 50;
var stack = Composites.stack(100, 280, 12, 6, 0, 0, function(x, y) {
var partA = Bodies.rectangle(x, y, size, size / 5),
@ -19,7 +48,40 @@
});
});
World.add(world, stack);
};
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, 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);
}
};
};

80
examples/concave.js
View file

@ -1,15 +1,48 @@
(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,
// 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
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'),
@ -27,8 +60,35 @@
World.add(world, stack);
var renderOptions = demo.render.options;
renderOptions.showAngleIndicator = false;
};
// 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);
}
};
};

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);
};
})();

183
examples/events.js
View file

@ -1,31 +1,45 @@
(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;
// create engine
var engine = Engine.create(),
world = engine.world;
// bind events (sceneEvents is only used for this demo)
// 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)
}
});
sceneEvents.push(
Render.run(render);
// create runner
var runner = Runner.create();
Runner.run(runner, engine);
// an example of using composite events on the world
Events.on(world, 'afterAdd', function(event) {
console.log('added to world:', event.object);
})
);
sceneEvents.push(
});
// an example of using beforeUpdate event on an engine
Events.on(engine, 'beforeUpdate', function(event) {
@ -34,11 +48,7 @@
// apply random forces every 5 secs
if (event.timestamp % 5000 < 50)
shakeScene(engine);
})
);
sceneEvents.push(
});
// an example of using collisionStart event on an engine
Events.on(engine, 'collisionStart', function(event) {
@ -50,11 +60,7 @@
pair.bodyA.render.fillStyle = '#bbbbbb';
pair.bodyB.render.fillStyle = '#bbbbbb';
}
})
);
sceneEvents.push(
});
// an example of using collisionActive event on an engine
Events.on(engine, 'collisionActive', function(event) {
@ -66,11 +72,7 @@
pair.bodyA.render.fillStyle = '#aaaaaa';
pair.bodyB.render.fillStyle = '#aaaaaa';
}
})
);
sceneEvents.push(
});
// an example of using collisionEnd event on an engine
Events.on(engine, 'collisionEnd', function(event) {
@ -82,62 +84,22 @@
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
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 stack = Composites.stack(50, 100, 8, 4, 50, 50, function(x, y) {
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 renderOptions = demo.render.options;
renderOptions.wireframes = false;
var shakeScene = function(engine) {
var bodies = Composite.allBodies(engine.world);
@ -145,15 +107,70 @@
var body = bodies[i];
if (!body.isStatic && body.position.y >= 500) {
var forceMagnitude = 0.01 * body.mass;
var forceMagnitude = 0.02 * body.mass;
Body.applyForce(body, { x: 0, y: 0 }, {
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);
}
};
};

81
examples/friction.js
View file

@ -1,12 +1,49 @@
(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,
// 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
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 })
@ -22,9 +59,35 @@
Bodies.rectangle(300, 430, 40, 40, { friction: 0 })
]);
var renderOptions = demo.render.options;
renderOptions.showAngleIndicator = false;
renderOptions.showVelocity = 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);
}
};
};

85
examples/gravity.js
View file

@ -1,17 +1,54 @@
(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,
// 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,
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(20, 20, 20, 5, 0, 0, function(x, y) {
var stack = Composites.stack(50, 120, 11, 5, 0, 0, function(x, y) {
switch (Math.round(Common.random(0, 1))) {
case 0:
@ -28,6 +65,36 @@
});
World.add(world, stack);
};
})();
// add mouse control
var mouse = Mouse.create(render.canvas),
mouseConstraint = MouseConstraint.create(engine, {
mouse: mouse,
constraint: {
stiffness: 0.2,
render: {
visible: false
}
}
});
World.add(world, mouseConstraint);
// keep the mouse in sync with rendering
render.mouse = mouse;
// fit the render viewport to the scene
Render.lookAt(render, 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);
}
};
};

94
examples/manipulation.js
View file

@ -1,15 +1,45 @@
(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;
// 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
}
});
Render.run(render);
// create runner
var runner = Runner.create();
Runner.run(runner, engine);
// add bodies
var bodyA = Bodies.rectangle(100, 200, 50, 50, { isStatic: true }),
bodyB = Bodies.rectangle(200, 200, 50, 50),
bodyC = Bodies.rectangle(300, 200, 50, 50),
@ -26,10 +56,15 @@
World.add(world, [bodyA, bodyB, bodyC, bodyD, bodyE, bodyF, bodyG, compound]);
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 })
]);
var counter = 0,
scaleFactor = 1.01;
sceneEvents.push(
Events.on(engine, 'beforeUpdate', function(event) {
counter += 1;
@ -70,14 +105,37 @@
counter = 0;
scaleFactor = 1;
}
})
);
});
var renderOptions = demo.render.options;
renderOptions.showAxes = true;
renderOptions.showCollisions = true;
renderOptions.showPositions = true;
renderOptions.showConvexHulls = 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);
}
};
})();
};

83
examples/mixed.js
View file

@ -1,15 +1,44 @@
(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,
// create engine
var engine = Engine.create(),
world = engine.world;
var stack = Composites.stack(20, 20, 15, 4, 0, 0, function(x, y) {
// 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, 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
@ -37,6 +66,42 @@
});
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
}
}
});
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;
};
})();

76
examples/newtonsCradle.js
View file

@ -1,13 +1,41 @@
(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,
// 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 });
@ -16,8 +44,38 @@
World.add(world, cradle);
Body.translate(cradle.bodies[0], { x: -140, y: -100 });
var renderOptions = demo.render.options;
renderOptions.showVelocity = true;
};
// add mouse control
var mouse = Mouse.create(render.canvas),
mouseConstraint = MouseConstraint.create(engine, {
mouse: mouse,
constraint: {
stiffness: 0.2,
render: {
visible: false
}
}
});
})();
World.add(world, mouseConstraint);
// keep the mouse in sync with rendering
render.mouse = mouse;
// fit the render viewport to the scene
Render.lookAt(render, {
min: { x: 0, y: 0 },
max: { x: 800, y: 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);
}
};
};

79
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,
// 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.pyramid(100, 258, 15, 10, 0, 0, function(x, y) {
return Bodies.rectangle(x, y, 40, 40);
});
World.add(world, stack);
};
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, 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);
}
};
};

98
examples/raycasting.js
View file

@ -1,21 +1,45 @@
(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;
// create engine
var engine = Engine.create(),
world = engine.world;
var stack = Composites.stack(20, 20, 15, 4, 0, 0, function(x, y) {
// 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:
@ -35,18 +59,25 @@
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, [
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 })
]);
sceneEvents.push(
Events.on(demo.render, 'afterRender', function() {
Events.on(render, 'afterRender', function() {
var mouse = mouseConstraint.mouse,
context = demo.render.context,
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);
@ -65,8 +96,39 @@
context.fillStyle = 'rgba(255,165,0,0.7)';
context.fill();
})
);
};
})();
Render.endViewTransform(render);
});
// add mouse control
var mouse = Mouse.create(render.canvas),
mouseConstraint = MouseConstraint.create(engine, {
mouse: mouse,
constraint: {
stiffness: 0.2,
render: {
visible: false
}
}
});
World.add(world, mouseConstraint);
// keep the mouse in sync with rendering
render.mouse = mouse;
// fit the render viewport to the scene
Render.lookAt(render, 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);
}
};
};

79
examples/restitution.js
View file

@ -1,12 +1,43 @@
(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,
// 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;
@ -15,13 +46,39 @@
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(100 + space * 5, 150, 180, 20, { restitution: rest, angle: -Math.PI * 0.5 }),
Bodies.rectangle(400, 620, 800, 50, { isStatic: true })
]);
var renderOptions = demo.render.options;
renderOptions.showCollisions = true;
renderOptions.showVelocity = true;
renderOptions.showAngleIndicator = 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);
}
};
};

77
examples/rounded.js
View file

@ -1,12 +1,45 @@
(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,
// 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),
showAxes: 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 })
]);
World.add(world, [
Bodies.rectangle(200, 200, 100, 100, {
chamfer: { radius: 20 }
@ -41,9 +74,35 @@
})
]);
var renderOptions = demo.render.options;
renderOptions.showAxes = true;
renderOptions.showCollisions = 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);
}
};
};

97
examples/sensors.js
View file

@ -1,15 +1,43 @@
(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;
// 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'
}
});
Render.run(render);
// create runner
var runner = Runner.create();
Runner.run(runner, engine);
// add bodies
var redColor = '#C44D58',
greenColor = '#C7F464';
@ -22,7 +50,15 @@
}
});
World.add(world, collider);
World.add(world, [
collider,
Bodies.rectangle(400, 620, 800, 50, {
isStatic: true,
render: {
fillStyle: 'transparent'
}
})
]);
World.add(world,
Bodies.circle(400, 40, 30, {
@ -33,7 +69,6 @@
})
);
sceneEvents.push(
Events.on(engine, 'collisionStart', function(event) {
var pairs = event.pairs;
@ -46,7 +81,8 @@
pair.bodyA.render.strokeStyle = redColor;
}
}
}),
});
Events.on(engine, 'collisionEnd', function(event) {
var pairs = event.pairs;
@ -59,12 +95,37 @@
pair.bodyA.render.strokeStyle = greenColor;
}
}
})
);
});
var renderOptions = demo.render.options;
renderOptions.wireframes = false;
renderOptions.background = '#222';
renderOptions.showAngleIndicator = false;
// 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);
}
};
})();
};

79
examples/sleeping.js
View file

@ -1,15 +1,48 @@
(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,
// create engine
var engine = Engine.create({
enableSleeping: true
}),
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
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))) {
@ -35,7 +68,35 @@
});
}
engine.enableSleeping = 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);
}
};
};

110
examples/slingshot.js
View file

@ -1,48 +1,60 @@
(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' } } },
Render.run(render);
// create runner
var runner = Runner.create();
Runner.run(runner, engine);
// add bodies
var ground = Bodies.rectangle(395, 600, 815, 50, { isStatic: true }),
rockOptions = { density: 0.004 },
rock = Bodies.polygon(170, 450, 8, 20, rockOptions),
anchor = { x: 170, y: 450 },
elastic = Constraint.create({
pointA: anchor,
bodyB: rock,
stiffness: 0.05,
render: {
lineWidth: 5,
strokeStyle: '#dfa417'
}
stiffness: 0.05
});
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 } } });
var pyramid = Composites.pyramid(500, 300, 9, 10, 0, 0, function(x, y) {
return Bodies.rectangle(x, y, 25, 40);
});
var ground2 = Bodies.rectangle(610, 250, 200, 20, {
isStatic: true,
render: {
fillStyle: '#edc51e',
strokeStyle: '#b5a91c'
}
});
var ground2 = Bodies.rectangle(610, 250, 200, 20, { isStatic: true });
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 pyramid2 = Composites.pyramid(550, 0, 5, 10, 0, 0, function(x, y) {
return Bodies.rectangle(x, y, 25, 40);
});
World.add(engine.world, [ground, pyramid, ground2, pyramid2, rock, elastic]);
@ -55,10 +67,38 @@
}
});
var renderOptions = demo.render.options;
renderOptions.wireframes = false;
renderOptions.showAngleIndicator = false;
renderOptions.background = './img/background.png';
};
// 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);
}
};
};

77
examples/softBody.js
View file

@ -1,12 +1,41 @@
(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,
// 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: false
}
});
Render.run(render);
// create runner
var runner = Runner.create();
Runner.run(runner, engine);
// add bodies
var particleOptions = {
friction: 0.05,
frictionStatic: 0.1,
@ -16,11 +45,39 @@
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)
Composites.softBody(250, 400, 4, 4, 0, 0, true, 15, particleOptions),
Bodies.rectangle(400, 620, 800, 50, { isStatic: true })
]);
var renderOptions = demo.render.options;
renderOptions.showAngleIndicator = false;
};
// 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);
}
};
};

84
examples/sprites.js
View file

@ -1,14 +1,42 @@
(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,
// 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: {
@ -53,10 +81,38 @@
World.add(world, stack);
var renderOptions = demo.render.options;
renderOptions.background = './img/wall-bg.jpg';
renderOptions.showAngleIndicator = false;
renderOptions.wireframes = false;
};
// 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);
}
};
};

83
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,
// create engine
var engine = Engine.create(),
world = engine.world;
var stack = Composites.stack(100, 380, 10, 5, 0, 0, function(x, y) {
// 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);
};
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, 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);
}
};
};

85
examples/staticFriction.js
View file

@ -1,16 +1,42 @@
(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;
// 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 body = Bodies.rectangle(400, 500, 200, 60, { isStatic: true, chamfer: 10 }),
size = 50,
counter = -1;
@ -25,7 +51,6 @@
World.add(world, [body, stack]);
sceneEvents.push(
Events.on(engine, 'beforeUpdate', function(event) {
counter += 0.014;
@ -38,12 +63,40 @@
// 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;
// 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);
}
};
})();
};

84
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,
// 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);
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 })
]);
var renderOptions = demo.render.options;
renderOptions.showAngleIndicator = false;
// 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);
}
};
})();
};

84
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;
Example.stress2 = function(demo) {
var engine = demo.engine,
// 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(100, 120, 25, 18, 0, 0, function(x, y) {
return Bodies.rectangle(x, y, 25, 25);
});
World.add(world, stack);
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 })
]);
var renderOptions = demo.render.options;
renderOptions.showAngleIndicator = false;
// 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);
}
};
})();
};

82
examples/svg.js
View file

@ -1,15 +1,43 @@
(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,
// 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 svgs = [
'iconmonstr-check-mark-8-icon',
'iconmonstr-paperclip-2-icon',
@ -54,8 +82,42 @@
}, true));
});
var renderOptions = demo.render.options;
renderOptions.showAngleIndicator = false;
};
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);
}
};
};

79
examples/terrain.js
View file

@ -1,18 +1,44 @@
(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,
// 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)
}
});
Render.run(render);
// create runner
var runner = Runner.create();
Runner.run(runner, engine);
// add bodies
var terrain;
$.get('./svg/terrain.svg').done(function(data) {
@ -46,9 +72,38 @@
}));
});
var renderOptions = demo.render.options;
renderOptions.showAngleIndicator = false;
renderOptions.showVelocity = true;
};
// add mouse control
var mouse = Mouse.create(render.canvas),
mouseConstraint = MouseConstraint.create(engine, {
mouse: mouse,
constraint: {
stiffness: 0.2,
render: {
visible: false
}
}
});
})();
World.add(world, mouseConstraint);
// keep the mouse in sync with rendering
render.mouse = mouse;
// fit the render viewport to the scene
Render.lookAt(render, {
min: { x: 0, y: 0 },
max: { x: 800, y: 600 }
});
// context for MatterTools.Demo
return {
engine: engine,
runner: runner,
render: render,
canvas: render.canvas,
stop: function() {
Matter.Render.stop(render);
Matter.Runner.stop(runner);
}
};
};

92
examples/timescale.js
View file

@ -1,17 +1,51 @@
(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;
// 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
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);
@ -33,7 +67,7 @@
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;
@ -56,8 +90,7 @@
// reset counter
counter = 0;
}
})
);
});
var bodyOptions = {
frictionAir: 0,
@ -86,6 +119,39 @@
}
}));
};
})();
// 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);
}
};
};

97
examples/views.js
View file

@ -1,20 +1,63 @@
(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;
// 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
}
});
Render.run(render);
// create runner
var runner = Runner.create();
Runner.run(runner, engine);
// add mouse control
var mouse = Mouse.create(render.canvas),
mouseConstraint = MouseConstraint.create(engine, {
mouse: mouse,
constraint: {
stiffness: 0.2,
render: {
visible: false
}
}
});
World.add(world, mouseConstraint);
// keep the mouse in sync with rendering
render.mouse = mouse;
// add bodies
var stack = Composites.stack(20, 20, 15, 4, 0, 0, function(x, y) {
switch (Math.round(Common.random(0, 1))) {
@ -32,12 +75,17 @@
}
});
World.add(world, stack);
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: demo.render.options.width * 0.5,
y: demo.render.options.height * 0.5
x: render.options.width * 0.5,
y: render.options.height * 0.5
};
// make the world bounds a little bigger than the render bounds
@ -54,11 +102,9 @@
};
// 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;
// mouse wheel controls zoom
@ -124,12 +170,17 @@
// 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;
// context for MatterTools.Demo
return {
engine: engine,
runner: runner,
render: render,
canvas: render.canvas,
stop: function() {
Matter.Render.stop(render);
Matter.Runner.stop(runner);
}
};
})();
};

77
examples/wreckingBall.js
View file

@ -1,14 +1,40 @@
(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,
// 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;
@ -16,7 +42,10 @@
return Bodies.rectangle(x, y, 40, 40);
});
World.add(world, stack);
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});
@ -25,6 +54,36 @@
pointA: { x: 300, y: 100 },
bodyB: ball
}));
};
})();
// add mouse control
var mouse = Mouse.create(render.canvas),
mouseConstraint = MouseConstraint.create(engine, {
mouse: mouse,
constraint: {
stiffness: 0.2,
render: {
visible: false
}
}
});
World.add(world, mouseConstraint);
// keep the mouse in sync with rendering
render.mouse = mouse;
// fit the render viewport to the scene
Render.lookAt(render, 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;