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

added Render.vertexNumbers, Render.bodyConvexHulls

Browse source
This commit is contained in:
liabru 2015-01-31 23:52:55 +00:00
parent 243fce47c9
commit 9c139ed9df
1 changed files with 126 additions and 76 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

160
src/render/Render.js
View file

@ -46,7 +46,9 @@ var Render = {};
showPositions: false, showPositions: false,
showAngleIndicator: false, showAngleIndicator: false,
showIds: false, showIds: false,
showShadows: false showShadows: false,
showVertexNumbers: false,
showConvexHulls: false
} }
}; };
@ -177,6 +179,9 @@ var Render = {};
// fully featured rendering of bodies // fully featured rendering of bodies
Render.bodies(engine, bodies, context); Render.bodies(engine, bodies, context);
} else { } else {
if (options.showConvexHulls)
Render.bodyConvexHulls(engine, bodies, context);
// optimised method for wireframes only // optimised method for wireframes only
Render.bodyWireframes(engine, bodies, context); Render.bodyWireframes(engine, bodies, context);
} }
@ -199,6 +204,9 @@ var Render = {};
if (options.showCollisions) if (options.showCollisions)
Render.collisions(engine, engine.pairs.list, context); Render.collisions(engine, engine.pairs.list, context);
if (options.showVertexNumbers)
Render.vertexNumbers(engine, bodies, context);
Render.constraints(constraints, context); Render.constraints(constraints, context);
if (options.showBroadphase && engine.broadphase.controller === Grid) if (options.showBroadphase && engine.broadphase.controller === Grid)
@ -372,69 +380,75 @@ var Render = {};
var c = context, var c = context,
render = engine.render, render = engine.render,
options = render.options, options = render.options,
body,
part,
i; i;
for (i = 0; i < bodies.length; i++) { for (i = 0; i < bodies.length; i++) {
var body = bodies[i]; body = bodies[i];
if (!body.render.visible) if (!body.render.visible)
continue; continue;
if (body.render.sprite && body.render.sprite.texture && !options.wireframes) { // handle compound parts
// body sprite for (k = body.parts.length > 1 ? 1 : 0; k < body.parts.length; k++) {
var sprite = body.render.sprite, part = body.parts[k];
if (part.render.sprite && part.render.sprite.texture && !options.wireframes) {
// part sprite
var sprite = part.render.sprite,
texture = _getTexture(render, sprite.texture); texture = _getTexture(render, sprite.texture);
if (options.showSleeping && body.isSleeping) if (options.showSleeping && part.isSleeping)
c.globalAlpha = 0.5; c.globalAlpha = 0.5;
c.translate(body.position.x, body.position.y); c.translate(part.position.x, part.position.y);
c.rotate(body.angle); c.rotate(part.angle);
c.drawImage(texture, texture.width * -0.5 * sprite.xScale, texture.height * -0.5 * sprite.yScale, c.drawImage(texture, texture.width * -0.5 * sprite.xScale, texture.height * -0.5 * sprite.yScale,
texture.width * sprite.xScale, texture.height * sprite.yScale); texture.width * sprite.xScale, texture.height * sprite.yScale);
// revert translation, hopefully faster than save / restore // revert translation, hopefully faster than save / restore
c.rotate(-body.angle); c.rotate(-part.angle);
c.translate(-body.position.x, -body.position.y); c.translate(-part.position.x, -part.position.y);
if (options.showSleeping && body.isSleeping) if (options.showSleeping && part.isSleeping)
c.globalAlpha = 1; c.globalAlpha = 1;
} else { } else {
// body polygon // part polygon
if (body.circleRadius) { if (part.circleRadius) {
c.beginPath(); c.beginPath();
c.arc(body.position.x, body.position.y, body.circleRadius, 0, 2 * Math.PI); c.arc(part.position.x, part.position.y, part.circleRadius, 0, 2 * Math.PI);
} else { } else {
c.beginPath(); c.beginPath();
c.moveTo(body.vertices[0].x, body.vertices[0].y); c.moveTo(part.vertices[0].x, part.vertices[0].y);
for (var j = 1; j < body.vertices.length; j++) { for (var j = 1; j < part.vertices.length; j++) {
c.lineTo(body.vertices[j].x, body.vertices[j].y); c.lineTo(part.vertices[j].x, part.vertices[j].y);
} }
c.closePath(); c.closePath();
} }
if (!options.wireframes) { if (!options.wireframes) {
if (options.showSleeping && body.isSleeping) { if (options.showSleeping && part.isSleeping) {
c.fillStyle = Common.shadeColor(body.render.fillStyle, 50); c.fillStyle = Common.shadeColor(part.render.fillStyle, 50);
} else { } else {
c.fillStyle = body.render.fillStyle; c.fillStyle = part.render.fillStyle;
} }
c.lineWidth = body.render.lineWidth; c.lineWidth = part.render.lineWidth;
c.strokeStyle = body.render.strokeStyle; c.strokeStyle = part.render.strokeStyle;
c.fill(); c.fill();
c.stroke(); c.stroke();
} else { } else {
c.lineWidth = 1; c.lineWidth = 1;
c.strokeStyle = '#bbb'; c.strokeStyle = '#bbb';
if (options.showSleeping && body.isSleeping) if (options.showSleeping && part.isSleeping)
c.strokeStyle = 'rgba(255,255,255,0.2)'; c.strokeStyle = 'rgba(255,255,255,0.2)';
c.stroke(); c.stroke();
} }
} }
} }
}
}; };
/** /**
@ -447,49 +461,24 @@ var Render = {};
*/ */
Render.bodyWireframes = function(engine, bodies, context) { Render.bodyWireframes = function(engine, bodies, context) {
var c = context, var c = context,
body,
part,
i, i,
j, j,
k; k;
c.beginPath(); c.beginPath();
// render all bodies
for (i = 0; i < bodies.length; i++) { for (i = 0; i < bodies.length; i++) {
var body = bodies[i]; body = bodies[i];
if (!body.render.visible || body.parts.length === 1)
continue;
c.moveTo(body.vertices[0].x, body.vertices[0].y);
for (j = 1; j < body.vertices.length; j++) {
c.lineTo(body.vertices[j].x, body.vertices[j].y);
}
c.lineTo(body.vertices[0].x, body.vertices[0].y);
}
c.lineWidth = 1;
c.strokeStyle = '#9E9277';
c.stroke();
for (i = 0; i < bodies.length; i++) {
var body = bodies[i];
for (j = 0; j < body.vertices.length; j++) {
c.fillStyle = 'yellow';
c.fillText(j, body.vertices[j].x, body.vertices[j].y + 10);
}
}
c.beginPath();
for (i = 0; i < bodies.length; i++) {
var body = bodies[i];
if (!body.render.visible) if (!body.render.visible)
continue; continue;
// handle compound parts
for (k = body.parts.length > 1 ? 1 : 0; k < body.parts.length; k++) { for (k = body.parts.length > 1 ? 1 : 0; k < body.parts.length; k++) {
var part = body.parts[k]; part = body.parts[k];
c.moveTo(part.vertices[0].x, part.vertices[0].y); c.moveTo(part.vertices[0].x, part.vertices[0].y);
@ -506,6 +495,67 @@ var Render = {};
c.stroke(); c.stroke();
}; };
/**
* Optimised method for drawing body convex hull wireframes in one pass
* @private
* @method bodyWireframes
* @param {engine} engine
* @param {body[]} bodies
* @param {RenderingContext} context
*/
Render.bodyConvexHulls = function(engine, bodies, context) {
var c = context,
body,
part,
i,
j,
k;
c.beginPath();
// render convex hulls
for (i = 0; i < bodies.length; i++) {
body = bodies[i];
if (!body.render.visible || body.parts.length === 1)
continue;
c.moveTo(body.vertices[0].x, body.vertices[0].y);
for (j = 1; j < body.vertices.length; j++) {
c.lineTo(body.vertices[j].x, body.vertices[j].y);
}
c.lineTo(body.vertices[0].x, body.vertices[0].y);
}
c.lineWidth = 1;
c.strokeStyle = 'rgba(255,255,255,0.2)';
c.stroke();
};
/**
* Renders body vertex numbers.
* @private
* @method vertexNumbers
* @param {engine} engine
* @param {body[]} bodies
* @param {RenderingContext} context
*/
Render.vertexNumbers = function(engine, bodies, context) {
var c = context,
i,
j;
for (i = 0; i < bodies.length; i++) {
var body = bodies[i];
for (j = 0; j < body.vertices.length; j++) {
c.fillStyle = 'yellow';
c.fillText(j, body.vertices[j].x, body.vertices[j].y + 10);
}
}
};
/** /**
* Draws body bounds * Draws body bounds
* @private * @private