foster/liabru-matter-js
0
0
Fork 0
mirror of https://github.com/liabru/matter-js.git synced 2024-12-24 13:29:01 -05:00
Code Issues Wiki Activity

decouple Matter.Render from Matter.Engine

Browse source
This commit is contained in:
liabru 2016-04-24 23:54:38 +01:00
parent 326816fcf7
commit de823ebb08
34 changed files with 734 additions and 660 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
demo/js/Demo.js
View file

@ -33,7 +33,8 @@
Events = Matter.Events,
Mouse = Matter.Mouse,
MouseConstraint = Matter.MouseConstraint,
Runner = Matter.Runner;
Runner = Matter.Runner,
Render = Matter.Render;
// MatterTools aliases
if (window.MatterTools) {
@ -64,12 +65,24 @@
// 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);
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.engine.render.mouse = demo.mouseConstraint.mouse;
demo.render.mouse = demo.mouseConstraint.mouse;
// get the scene function name from hash
if (window.location.hash.length !== 0)
@ -108,23 +121,26 @@
// create a Matter.Gui
if (!_isMobile && Gui) {
demo.gui = Gui.create(demo.engine, demo.runner);
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);
demo.mouseConstraint = MouseConstraint.create(demo.engine, {
element: demo.render.canvas
});
World.add(demo.engine.world, demo.mouseConstraint);
});
// need to rebind mouse on render change
Events.on(demo.gui, 'setRenderer', function() {
Mouse.setElement(demo.mouseConstraint.mouse, demo.engine.render.canvas);
Mouse.setElement(demo.mouseConstraint.mouse, demo.render.canvas);
});
}
// create a Matter.Inspector
if (!_isMobile && Inspector && _useInspector) {
demo.inspector = Inspector.create(demo.engine, demo.runner);
demo.inspector = Inspector.create(demo.engine, demo.runner, demo.render);
Events.on(demo.inspector, 'import', function() {
demo.mouseConstraint = MouseConstraint.create(demo.engine);
@ -150,7 +166,7 @@
var body = document.body;
body.className += ' is-mobile';
demo.engine.render.canvas.addEventListener('touchstart', Demo.fullscreen);
demo.render.canvas.addEventListener('touchstart', Demo.fullscreen);
var fullscreenChange = function() {
var fullscreenEnabled = document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEnabled;
@ -248,7 +264,7 @@
};
Demo.fullscreen = function(demo) {
var _fullscreenElement = demo.engine.render.canvas;
var _fullscreenElement = demo.render.canvas;
if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement) {
if (_fullscreenElement.requestFullscreen) {
@ -269,10 +285,10 @@
Engine.clear(demo.engine);
// clear scene graph (if defined in controller)
if (demo.engine.render) {
var renderController = demo.engine.render.controller;
if (demo.render) {
var renderController = demo.render.controller;
if (renderController && renderController.clear)
renderController.clear(demo.engine.render);
renderController.clear(demo.render);
}
// clear all scene events
@ -296,9 +312,9 @@
Events.off(demo.runner, demo.sceneEvents[i]);
}
if (demo.engine.render && demo.engine.render.events) {
if (demo.render && demo.render.events) {
for (i = 0; i < demo.sceneEvents.length; i++)
Events.off(demo.engine.render, demo.sceneEvents[i]);
Events.off(demo.render, demo.sceneEvents[i]);
}
demo.sceneEvents = [];
@ -335,8 +351,8 @@
World.add(world, demo.mouseConstraint);
}
if (demo.engine.render) {
var renderOptions = demo.engine.render.options;
if (demo.render) {
var renderOptions = demo.render.options;
renderOptions.wireframes = true;
renderOptions.hasBounds = false;
renderOptions.showDebug = false;

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

@ -1,5 +1,5 @@
/**
* matter-tools-dev.min.js 0.5.0-dev 2015-12-05
* matter-tools-dev.min.js 0.5.0-dev 2016-04-24
* https://github.com/liabru/matter-tools
* License: MIT
*/
@ -10,7 +10,7 @@
var Gui = {};
(function() {
var _isWebkit = "WebkitAppearance" in document.documentElement.style;
Gui.create = function(engine, runner, options) {
Gui.create = function(engine, runner, render, options) {
var _datGuiSupported = window.dat && window.localStorage;
if (!_datGuiSupported) {
console.log("Could not create GUI. Check dat.gui library is loaded first.");
@ -20,6 +20,7 @@
var gui = {
engine:engine,
runner:runner,
render:render,
datGui:datGui,
broadphase:"grid",
broadphaseCache:{
@ -116,7 +117,7 @@
Events.trigger(gui, "load");
},
inspect:function() {
if (!Inspector.instance) gui.inspector = Inspector.create(gui.engine, gui.runner);
if (!Inspector.instance) gui.inspector = Inspector.create(gui.engine, gui.runner, gui.render);
},
recordGif:function() {
if (!gui.isRecording) {
@ -204,35 +205,35 @@
render.add(gui, "renderer", [ "canvas", "webgl" ]).onFinishChange(function(value) {
_setRenderer(gui, value);
});
render.add(engine.render.options, "wireframes");
render.add(engine.render.options, "showDebug");
render.add(engine.render.options, "showPositions");
render.add(engine.render.options, "showBroadphase");
render.add(engine.render.options, "showBounds");
render.add(engine.render.options, "showVelocity");
render.add(engine.render.options, "showCollisions");
render.add(engine.render.options, "showSeparations");
render.add(engine.render.options, "showAxes");
render.add(engine.render.options, "showAngleIndicator");
render.add(engine.render.options, "showSleeping");
render.add(engine.render.options, "showIds");
render.add(engine.render.options, "showVertexNumbers");
render.add(engine.render.options, "showConvexHulls");
render.add(engine.render.options, "showInternalEdges");
render.add(engine.render.options, "enabled");
render.add(gui.render.options, "wireframes");
render.add(gui.render.options, "showDebug");
render.add(gui.render.options, "showPositions");
render.add(gui.render.options, "showBroadphase");
render.add(gui.render.options, "showBounds");
render.add(gui.render.options, "showVelocity");
render.add(gui.render.options, "showCollisions");
render.add(gui.render.options, "showSeparations");
render.add(gui.render.options, "showAxes");
render.add(gui.render.options, "showAngleIndicator");
render.add(gui.render.options, "showSleeping");
render.add(gui.render.options, "showIds");
render.add(gui.render.options, "showVertexNumbers");
render.add(gui.render.options, "showConvexHulls");
render.add(gui.render.options, "showInternalEdges");
render.add(gui.render.options, "enabled");
render.open();
};
var _setRenderer = function(gui, rendererName) {
var engine = gui.engine, controller;
if (rendererName === "canvas") controller = Render;
if (rendererName === "webgl") controller = RenderPixi;
engine.render.element.removeChild(engine.render.canvas);
var options = engine.render.options;
engine.render = controller.create({
element:engine.render.element,
gui.render.element.removeChild(gui.render.canvas);
var options = gui.render.options;
gui.render = controller.create({
element:gui.render.element,
options:options
});
engine.render.options = options;
gui.render = options;
Events.trigger(gui, "setRenderer");
};
var _addBody = function(gui) {
@ -257,8 +258,8 @@
var engine = gui.engine;
World.clear(engine.world, true);
Engine.clear(engine);
var renderController = engine.render.controller;
if (renderController.clear) renderController.clear(engine.render);
var renderController = gui.render.controller;
if (renderController.clear) renderController.clear(gui.render);
Events.trigger(gui, "clear");
};
var _initGif = function(gui) {
@ -268,7 +269,7 @@
var engine = gui.engine, skipFrame = false;
Matter.Events.on(gui.runner, "beforeTick", function(event) {
if (gui.isRecording && !skipFrame) {
gui.gif.addFrame(engine.render.context, {
gui.gif.addFrame(gui.render.context, {
copy:true,
delay:25
});
@ -280,14 +281,15 @@
var Inspector = {};
(function() {
var _key, _isWebkit = "WebkitAppearance" in document.documentElement.style, $body;
Inspector.create = function(engine, runner, options) {
Inspector.create = function(engine, runner, render, options) {
if (!jQuery || !$.fn.jstree || !window.key) {
console.log("Could not create inspector. Check keymaster, jQuery, jsTree libraries are loaded first.");
return;
}
var inspector = {
engine:engine,
runner:runner,
engine:null,
runner:null,
render:null,
isPaused:false,
selected:[],
selectStart:null,
@ -317,7 +319,10 @@
};
inspector = Common.extend(inspector, options);
Inspector.instance = inspector;
inspector.mouse = Mouse.create(engine.render.canvas);
inspector.engine = engine;
inspector.runner = runner;
inspector.render = render;
inspector.mouse = Mouse.create(inspector.render.canvas);
inspector.mouseConstraint = MouseConstraint.create(engine, {
mouse:inspector.mouse
});
@ -670,8 +675,8 @@
_updateSelectedMouseDownOffset(inspector);
}
});
Events.on(inspector.engine.render, "afterRender", function() {
var renderController = engine.render.controller, context = engine.render.context;
Events.on(inspector.render, "afterRender", function() {
var renderController = inspector.render.controller, context = inspector.render.context;
if (renderController.inspector) renderController.inspector(inspector, context);
});
};

2
examples/airFriction.js
View file

@ -23,7 +23,7 @@ if (!_isBrowser) {
Bodies.rectangle(600, 100, 60, 60, { frictionAir: 0.1 })
]);
var renderOptions = engine.render.options;
var renderOptions = demo.render.options;
renderOptions.showAngleIndicator = false;
renderOptions.showVelocity = true;
};

2
examples/broadphase.js
View file

@ -27,7 +27,7 @@
World.add(world, stack);
var renderOptions = engine.render.options;
var renderOptions = demo.render.options;
renderOptions.showBroadphase = true;
};

2
examples/car.js
View file

@ -21,7 +21,7 @@
Bodies.rectangle(340, 580, 700, 20, { isStatic: true, angle: Math.PI * 0.04 })
]);
var renderOptions = engine.render.options;
var renderOptions = demo.render.options;
renderOptions.showAngleIndicator = true;
renderOptions.showCollisions = true;
};

2
examples/catapult.js
View file

@ -24,7 +24,7 @@
Constraint.create({ bodyA: catapult, pointB: { x: 410, y: 580 } })
]);
var renderOptions = engine.render.options;
var renderOptions = demo.render.options;
renderOptions.showCollisions = true;
renderOptions.showVelocity = true;
renderOptions.showAngleIndicator = true;

2
examples/collisionFiltering.js
View file

@ -88,7 +88,7 @@
// red category objects should not be draggable with the mouse
mouseConstraint.collisionFilter.mask = defaultCategory | blueCategory | greenCategory;
var renderOptions = engine.render.options;
var renderOptions = demo.render.options;
renderOptions.wireframes = false;
renderOptions.background = '#222';
renderOptions.showAngleIndicator = false;

2
examples/compositeManipulation.js
View file

@ -42,7 +42,7 @@
})
);
var renderOptions = engine.render.options;
var renderOptions = demo.render.options;
renderOptions.wireframes = false;
renderOptions.showAxes = true;
renderOptions.showCollisions = true;

2
examples/compound.js
View file

@ -40,7 +40,7 @@
World.add(world, [compoundBodyA, compoundBodyB, constraint]);
var renderOptions = engine.render.options;
var renderOptions = demo.render.options;
renderOptions.showAxes = true;
renderOptions.showPositions = true;
renderOptions.showConvexHulls = true;

2
examples/concave.js
View file

@ -27,7 +27,7 @@
World.add(world, stack);
var renderOptions = engine.render.options;
var renderOptions = demo.render.options;
renderOptions.showAngleIndicator = false;
};

2
examples/engine.js
View file

@ -11,7 +11,7 @@
metrics: { extended: true }
};
return Engine.create(demo.container, options);
return Engine.create(options);
};
})();

6
examples/events.js
View file

@ -92,7 +92,7 @@
Events.on(mouseConstraint, 'mousedown', function(event) {
var mousePosition = event.mouse.position;
console.log('mousedown at ' + mousePosition.x + ' ' + mousePosition.y);
engine.render.options.background = 'cornsilk';
demo.render.options.background = 'cornsilk';
shakeScene(engine);
})
@ -103,7 +103,7 @@
// an example of using mouse events on a mouse
Events.on(mouseConstraint, 'mouseup', function(event) {
var mousePosition = event.mouse.position;
engine.render.options.background = "white";
demo.render.options.background = "white";
console.log('mouseup at ' + mousePosition.x + ' ' + mousePosition.y);
})
@ -135,7 +135,7 @@
World.add(world, stack);
var renderOptions = engine.render.options;
var renderOptions = demo.render.options;
renderOptions.wireframes = false;
var shakeScene = function(engine) {

2
examples/friction.js
View file

@ -22,7 +22,7 @@
Bodies.rectangle(300, 430, 40, 40, { friction: 0 })
]);
var renderOptions = engine.render.options;
var renderOptions = demo.render.options;
renderOptions.showAngleIndicator = false;
renderOptions.showVelocity = true;
};

2
examples/manipulation.js
View file

@ -73,7 +73,7 @@
})
);
var renderOptions = engine.render.options;
var renderOptions = demo.render.options;
renderOptions.showAxes = true;
renderOptions.showCollisions = true;
renderOptions.showPositions = true;

2
examples/mixedSolid.js
View file

@ -27,7 +27,7 @@
World.add(world, stack);
var renderOptions = engine.render.options;
var renderOptions = demo.render.options;
renderOptions.wireframes = false;
renderOptions.showAngleIndicator = false;
};

2
examples/newtonsCradle.js
View file

@ -16,7 +16,7 @@
World.add(world, cradle);
Body.translate(cradle.bodies[0], { x: -140, y: -100 });
var renderOptions = engine.render.options;
var renderOptions = demo.render.options;
renderOptions.showVelocity = true;
};

4
examples/raycasting.js
View file

@ -38,9 +38,9 @@
World.add(world, [stack, concave]);
sceneEvents.push(
Events.on(engine.render, 'afterRender', function() {
Events.on(demo.render, 'afterRender', function() {
var mouse = mouseConstraint.mouse,
context = engine.render.context,
context = demo.render.context,
bodies = Composite.allBodies(engine.world),
startPoint = { x: 400, y: 100 },
endPoint = mouse.position;

2
examples/restitution.js
View file

@ -18,7 +18,7 @@
Bodies.rectangle(100 + space * 5, 150, 180, 20, { restitution: rest, angle: -Math.PI * 0.5 })
]);
var renderOptions = engine.render.options;
var renderOptions = demo.render.options;
renderOptions.showCollisions = true;
renderOptions.showVelocity = true;
renderOptions.showAngleIndicator = true;

2
examples/rounded.js
View file

@ -41,7 +41,7 @@
})
]);
var renderOptions = engine.render.options;
var renderOptions = demo.render.options;
renderOptions.showAxes = true;
renderOptions.showCollisions = true;
};

2
examples/sensors.js
View file

@ -62,7 +62,7 @@
})
);
var renderOptions = engine.render.options;
var renderOptions = demo.render.options;
renderOptions.wireframes = false;
renderOptions.background = '#222';
renderOptions.showAngleIndicator = false;

2
examples/slingshot.js
View file

@ -55,7 +55,7 @@
}
});
var renderOptions = engine.render.options;
var renderOptions = demo.render.options;
renderOptions.wireframes = false;
renderOptions.showAngleIndicator = false;
renderOptions.background = './img/background.png';

2
examples/softBody.js
View file

@ -19,7 +19,7 @@
Composites.softBody(250, 400, 4, 4, 0, 0, true, 15, particleOptions)
]);
var renderOptions = engine.render.options;
var renderOptions = demo.render.options;
renderOptions.showAngleIndicator = false;
};

2
examples/sprites.js
View file

@ -53,7 +53,7 @@
World.add(world, stack);
var renderOptions = engine.render.options;
var renderOptions = demo.render.options;
renderOptions.background = './img/wall-bg.jpg';
renderOptions.showAngleIndicator = false;
renderOptions.wireframes = false;

2
examples/staticFriction.js
View file

@ -41,7 +41,7 @@
})
);
var renderOptions = engine.render.options;
var renderOptions = demo.render.options;
renderOptions.showAngleIndicator = false;
renderOptions.showVelocity = true;
};

2
examples/stress.js
View file

@ -14,7 +14,7 @@
World.add(world, stack);
var renderOptions = engine.render.options;
var renderOptions = demo.render.options;
renderOptions.showAngleIndicator = false;
};

2
examples/stress2.js
View file

@ -14,7 +14,7 @@
World.add(world, stack);
var renderOptions = engine.render.options;
var renderOptions = demo.render.options;
renderOptions.showAngleIndicator = false;
};

2
examples/svg.js
View file

@ -54,7 +54,7 @@
}, true));
});
var renderOptions = engine.render.options;
var renderOptions = demo.render.options;
renderOptions.showAngleIndicator = false;
};

2
examples/terrain.js
View file

@ -46,7 +46,7 @@
}));
});
var renderOptions = engine.render.options;
var renderOptions = demo.render.options;
renderOptions.showAngleIndicator = false;
renderOptions.showVelocity = true;
};

8
examples/views.js
View file

@ -36,8 +36,8 @@
// get the centre of the viewport
var viewportCentre = {
x: engine.render.options.width * 0.5,
y: engine.render.options.height * 0.5
x: demo.render.options.width * 0.5,
y: demo.render.options.height * 0.5
};
// make the world bounds a little bigger than the render bounds
@ -58,7 +58,7 @@
Events.on(engine, 'beforeTick', function() {
var world = engine.world,
mouse = mouseConstraint.mouse,
render = engine.render,
render = demo.render,
translate;
// mouse wheel controls zoom
@ -128,7 +128,7 @@
);
// must enable renderOptions.hasBounds for views to work
var renderOptions = engine.render.options;
var renderOptions = demo.render.options;
renderOptions.hasBounds = true;
};

5
src/constraint/MouseConstraint.js
View file

@ -38,9 +38,11 @@ var Bounds = require('../geometry/Bounds');
if (!mouse) {
if (engine && engine.render && engine.render.canvas) {
mouse = Mouse.create(engine.render.canvas);
} else if (options && options.element) {
mouse = Mouse.create(options.element);
} else {
mouse = Mouse.create();
Common.log('MouseConstraint.create: options.mouse was undefined, engine.render.canvas was undefined, may not function as expected', 'warn');
Common.log('MouseConstraint.create: options.mouse was undefined, options.element was undefined, may not function as expected', 'warn');
}
}
@ -60,6 +62,7 @@ var Bounds = require('../geometry/Bounds');
var defaults = {
type: 'mouseConstraint',
mouse: mouse,
element: null,
body: null,
constraint: constraint,
collisionFilter: {

16
src/core/Engine.js
View file

@ -32,7 +32,6 @@ var Body = require('../body/Body');
* All properties have default values, and many are pre-calculated automatically based on other properties.
* See the properties section below for detailed information on what you can pass via the `options` object.
* @method create
* @param {HTMLElement} [element]
* @param {object} [options]
* @return {engine} engine
*/
@ -40,9 +39,12 @@ var Body = require('../body/Body');
// options may be passed as the first (and only) argument
options = Common.isElement(element) ? options : element;
element = Common.isElement(element) ? element : null;
options = options || {};
if (element || options.render) {
Common.log('Engine.create: engine.render is deprecated (see docs)', 'warn');
}
var defaults = {
positionIterations: 6,
velocityIterations: 4,
@ -60,6 +62,7 @@ var Body = require('../body/Body');
var engine = Common.extend(defaults, options);
// @deprecated
if (element || engine.render) {
var renderDefaults = {
element: element,
@ -69,10 +72,16 @@ var Body = require('../body/Body');
engine.render = Common.extend(renderDefaults, engine.render);
}
// @deprecated
if (engine.render && engine.render.controller) {
engine.render = engine.render.controller.create(engine.render);
}
// @deprecated
if (engine.render) {
engine.render.engine = engine;
}
engine.world = options.world || World.create(engine.world);
engine.pairs = Pairs.create();
engine.broadphase = engine.broadphase.controller.create(engine.broadphase);
@ -454,6 +463,8 @@ var Body = require('../body/Body');
*/
/**
* __DEPRECATED__ see Demo.js for an example of creating a renderer.
*
* An instance of a `Render` controller. The default value is a `Matter.Render` instance created by `Engine.create`.
* One may also develop a custom renderer module based on `Matter.Render` and pass an instance of it to `Engine.create` via `options.render`.
*
@ -462,6 +473,7 @@ var Body = require('../body/Body');
*
* @property render
* @type render
* @deprecated see Demo.js for an example of creating a renderer
* @default a Matter.Render instance
*/

3
src/core/Runner.js
View file

@ -168,11 +168,12 @@ var Common = require('./Common');
Events.trigger(runner, 'afterUpdate', event);
// render
// @deprecated
if (engine.render && engine.render.controller) {
Events.trigger(runner, 'beforeRender', event);
Events.trigger(engine, 'beforeRender', event); // @deprecated
engine.render.controller.world(engine);
engine.render.controller.world(engine.render);
Events.trigger(runner, 'afterRender', event);
Events.trigger(engine, 'afterRender', event); // @deprecated

153
src/render/Render.js
View file

@ -23,6 +23,18 @@ var Vector = require('../geometry/Vector');
(function() {
var _requestAnimationFrame,
_cancelAnimationFrame;
if (typeof window !== 'undefined') {
_requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame
|| window.mozRequestAnimationFrame || window.msRequestAnimationFrame
|| function(callback){ window.setTimeout(function() { callback(Common.now()); }, 1000 / 60); };
_cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame
|| window.webkitCancelAnimationFrame || window.msCancelAnimationFrame;
}
/**
* Creates a new renderer. The options parameter is an object that specifies any properties you wish to override the defaults.
* All properties have default values, and many are pre-calculated automatically based on other properties.
@ -34,9 +46,11 @@ var Vector = require('../geometry/Vector');
Render.create = function(options) {
var defaults = {
controller: Render,
engine: null,
element: null,
canvas: null,
mouse: null,
frameRequestId: null,
options: {
width: 800,
height: 600,
@ -72,6 +86,8 @@ var Vector = require('../geometry/Vector');
render.canvas.height = render.options.height || render.canvas.height;
}
render.mouse = options.mouse;
render.engine = options.engine;
render.canvas = render.canvas || _createCanvas(render.options.width, render.options.height);
render.context = render.canvas.getContext('2d');
render.textures = {};
@ -100,6 +116,27 @@ var Vector = require('../geometry/Vector');
return render;
};
/**
* Continuously updates the render canvas on the `requestAnimationFrame` event.
* @method run
* @param {render} render
*/
Render.run = function(render) {
(function loop(time){
render.frameRequestId = _requestAnimationFrame(loop);
Render.world(render);
})();
};
/**
* Ends execution of `Render.run` on the given `render`, by canceling the animation frame request event loop.
* @method stop
* @param {render} render
*/
Render.stop = function(render) {
_cancelAnimationFrame(render.frameRequestId);
};
/**
* Sets the pixel ratio of the renderer and updates the canvas.
* To automatically detect the correct ratio, pass the string `'auto'` for `pixelRatio`.
@ -128,10 +165,10 @@ var Vector = require('../geometry/Vector');
* Renders the given `engine`'s `Matter.World` object.
* This is the entry point for all rendering and should be called every time the scene changes.
* @method world
* @param {engine} engine
* @param {render} render
*/
Render.world = function(engine) {
var render = engine.render,
Render.world = function(render) {
var engine = render.engine,
world = engine.world,
canvas = render.canvas,
context = render.context,
@ -201,49 +238,49 @@ var Vector = require('../geometry/Vector');
if (!options.wireframes || (engine.enableSleeping && options.showSleeping)) {
// fully featured rendering of bodies
Render.bodies(engine, bodies, context);
Render.bodies(render, bodies, context);
} else {
if (options.showConvexHulls)
Render.bodyConvexHulls(engine, bodies, context);
Render.bodyConvexHulls(render, bodies, context);
// optimised method for wireframes only
Render.bodyWireframes(engine, bodies, context);
Render.bodyWireframes(render, bodies, context);
}
if (options.showBounds)
Render.bodyBounds(engine, bodies, context);
Render.bodyBounds(render, bodies, context);
if (options.showAxes || options.showAngleIndicator)
Render.bodyAxes(engine, bodies, context);
Render.bodyAxes(render, bodies, context);
if (options.showPositions)
Render.bodyPositions(engine, bodies, context);
Render.bodyPositions(render, bodies, context);
if (options.showVelocity)
Render.bodyVelocity(engine, bodies, context);
Render.bodyVelocity(render, bodies, context);
if (options.showIds)
Render.bodyIds(engine, bodies, context);
Render.bodyIds(render, bodies, context);
if (options.showSeparations)
Render.separations(engine, engine.pairs.list, context);
Render.separations(render, engine.pairs.list, context);
if (options.showCollisions)
Render.collisions(engine, engine.pairs.list, context);
Render.collisions(render, engine.pairs.list, context);
if (options.showVertexNumbers)
Render.vertexNumbers(engine, bodies, context);
Render.vertexNumbers(render, bodies, context);
if (options.showMousePosition)
Render.mousePosition(engine, render.mouse, context);
Render.mousePosition(render, render.mouse, context);
Render.constraints(constraints, context);
if (options.showBroadphase && engine.broadphase.controller === Grid)
Render.grid(engine, engine.broadphase, context);
Render.grid(render, engine.broadphase, context);
if (options.showDebug)
Render.debug(engine, context);
Render.debug(render, context);
if (options.hasBounds) {
// revert view transforms
@ -257,13 +294,13 @@ var Vector = require('../geometry/Vector');
* Description
* @private
* @method debug
* @param {engine} engine
* @param {render} render
* @param {RenderingContext} context
*/
Render.debug = function(engine, context) {
Render.debug = function(render, context) {
var c = context,
engine = render.engine,
world = engine.world,
render = engine.render,
metrics = engine.metrics,
options = render.options,
bodies = Composite.allBodies(world),
@ -362,13 +399,13 @@ var Vector = require('../geometry/Vector');
* Description
* @private
* @method bodyShadows
* @param {engine} engine
* @param {render} render
* @param {body[]} bodies
* @param {RenderingContext} context
*/
Render.bodyShadows = function(engine, bodies, context) {
Render.bodyShadows = function(render, bodies, context) {
var c = context,
render = engine.render;
engine = render.engine;
for (var i = 0; i < bodies.length; i++) {
var body = bodies[i];
@ -411,13 +448,13 @@ var Vector = require('../geometry/Vector');
* Description
* @private
* @method bodies
* @param {engine} engine
* @param {render} render
* @param {body[]} bodies
* @param {RenderingContext} context
*/
Render.bodies = function(engine, bodies, context) {
Render.bodies = function(render, bodies, context) {
var c = context,
render = engine.render,
engine = render.engine,
options = render.options,
showInternalEdges = options.showInternalEdges || !options.wireframes,
body,
@ -510,13 +547,13 @@ var Vector = require('../geometry/Vector');
* Optimised method for drawing body wireframes in one pass
* @private
* @method bodyWireframes
* @param {engine} engine
* @param {render} render
* @param {body[]} bodies
* @param {RenderingContext} context
*/
Render.bodyWireframes = function(engine, bodies, context) {
Render.bodyWireframes = function(render, bodies, context) {
var c = context,
showInternalEdges = engine.render.options.showInternalEdges,
showInternalEdges = render.options.showInternalEdges,
body,
part,
i,
@ -563,11 +600,11 @@ var Vector = require('../geometry/Vector');
* Optimised method for drawing body convex hull wireframes in one pass
* @private
* @method bodyConvexHulls
* @param {engine} engine
* @param {render} render
* @param {body[]} bodies
* @param {RenderingContext} context
*/
Render.bodyConvexHulls = function(engine, bodies, context) {
Render.bodyConvexHulls = function(render, bodies, context) {
var c = context,
body,
part,
@ -602,11 +639,11 @@ var Vector = require('../geometry/Vector');
* Renders body vertex numbers.
* @private
* @method vertexNumbers
* @param {engine} engine
* @param {render} render
* @param {body[]} bodies
* @param {RenderingContext} context
*/
Render.vertexNumbers = function(engine, bodies, context) {
Render.vertexNumbers = function(render, bodies, context) {
var c = context,
i,
j,
@ -628,11 +665,11 @@ var Vector = require('../geometry/Vector');
* Renders mouse position.
* @private
* @method mousePosition
* @param {engine} engine
* @param {render} render
* @param {mouse} mouse
* @param {RenderingContext} context
*/
Render.mousePosition = function(engine, mouse, context) {
Render.mousePosition = function(render, mouse, context) {
var c = context;
c.fillStyle = 'rgba(255,255,255,0.8)';
c.fillText(mouse.position.x + ' ' + mouse.position.y, mouse.position.x + 5, mouse.position.y - 5);
@ -642,13 +679,13 @@ var Vector = require('../geometry/Vector');
* Draws body bounds
* @private
* @method bodyBounds
* @param {engine} engine
* @param {render} render
* @param {body[]} bodies
* @param {RenderingContext} context
*/
Render.bodyBounds = function(engine, bodies, context) {
Render.bodyBounds = function(render, bodies, context) {
var c = context,
render = engine.render,
engine = render.engine,
options = render.options;
c.beginPath();
@ -679,13 +716,13 @@ var Vector = require('../geometry/Vector');
* Draws body angle indicators and axes
* @private
* @method bodyAxes
* @param {engine} engine
* @param {render} render
* @param {body[]} bodies
* @param {RenderingContext} context
*/
Render.bodyAxes = function(engine, bodies, context) {
Render.bodyAxes = function(render, bodies, context) {
var c = context,
render = engine.render,
engine = render.engine,
options = render.options,
part,
i,
@ -740,13 +777,13 @@ var Vector = require('../geometry/Vector');
* Draws body positions
* @private
* @method bodyPositions
* @param {engine} engine
* @param {render} render
* @param {body[]} bodies
* @param {RenderingContext} context
*/
Render.bodyPositions = function(engine, bodies, context) {
Render.bodyPositions = function(render, bodies, context) {
var c = context,
render = engine.render,
engine = render.engine,
options = render.options,
body,
part,
@ -796,11 +833,11 @@ var Vector = require('../geometry/Vector');
* Draws body velocity
* @private
* @method bodyVelocity
* @param {engine} engine
* @param {render} render
* @param {body[]} bodies
* @param {RenderingContext} context
*/
Render.bodyVelocity = function(engine, bodies, context) {
Render.bodyVelocity = function(render, bodies, context) {
var c = context;
c.beginPath();
@ -824,11 +861,11 @@ var Vector = require('../geometry/Vector');
* Draws body ids
* @private
* @method bodyIds
* @param {engine} engine
* @param {render} render
* @param {body[]} bodies
* @param {RenderingContext} context
*/
Render.bodyIds = function(engine, bodies, context) {
Render.bodyIds = function(render, bodies, context) {
var c = context,
i,
j;
@ -851,13 +888,13 @@ var Vector = require('../geometry/Vector');
* Description
* @private
* @method collisions
* @param {engine} engine
* @param {render} render
* @param {pair[]} pairs
* @param {RenderingContext} context
*/
Render.collisions = function(engine, pairs, context) {
Render.collisions = function(render, pairs, context) {
var c = context,
options = engine.render.options,
options = render.options,
pair,
collision,
corrected,
@ -934,13 +971,13 @@ var Vector = require('../geometry/Vector');
* Description
* @private
* @method separations
* @param {engine} engine
* @param {render} render
* @param {pair[]} pairs
* @param {RenderingContext} context
*/
Render.separations = function(engine, pairs, context) {
Render.separations = function(render, pairs, context) {
var c = context,
options = engine.render.options,
options = render.options,
pair,
collision,
corrected,
@ -991,13 +1028,13 @@ var Vector = require('../geometry/Vector');
* Description
* @private
* @method grid
* @param {engine} engine
* @param {render} render
* @param {grid} grid
* @param {RenderingContext} context
*/
Render.grid = function(engine, grid, context) {
Render.grid = function(render, grid, context) {
var c = context,
options = engine.render.options;
options = render.options;
if (options.wireframes) {
c.strokeStyle = 'rgba(255,180,0,0.1)';
@ -1036,7 +1073,7 @@ var Vector = require('../geometry/Vector');
Render.inspector = function(inspector, context) {
var engine = inspector.engine,
selected = inspector.selected,
render = engine.render,
render = inspector.render,
options = render.options,
bounds;