Added joint debug rendering to Matter Physics postUpdate

Author: Omar Shehata

src/physics/matter-js/World.js

@@ -17,6 +17,8 @@ var MatterBody = require('./lib/body/Body');
 var MatterEvents = require('./lib/core/Events');
 var MatterWorld = require('./lib/body/World');
 var MatterTileBody = require('./MatterTileBody');
+var Vector = require('./lib/geometry/Vector');
+var Common = require('./lib/core/Common');
 
 /**
  * @classdesc
@@ -164,7 +166,9 @@ var World = new Class({
             debugShowVelocity: GetValue(config, 'debugShowVelocity', true),
             bodyDebugColor: GetValue(config, 'debugBodyColor', 0xff00ff),
             staticBodyDebugColor: GetValue(config, 'debugBodyColor', 0x0000ff),
-            velocityDebugColor: GetValue(config, 'debugVelocityColor', 0x00ff00)
+            velocityDebugColor: GetValue(config, 'debugVelocityColor', 0x00ff00),
+            debugShowJoint: GetValue(config, 'debugShowJoint', true),
+            jointDebugColor: GetValue(config, 'debugJointColor', 0x000000)
         };
 
         if (this.drawDebug)
@@ -630,7 +634,7 @@ var World = new Class({
         graphics.lineStyle(1, this.defaults.bodyDebugColor);
         graphics.beginPath();
 
-        for (var i = 0; i < bodies.length; i++)
+        for (let i = 0; i < bodies.length; i++)
         {
             if (!bodies[i].render.visible)
             {
@@ -639,7 +643,7 @@ var World = new Class({
 
             // Handle drawing both single bodies and compound bodies. If compound, draw both the
             // convex hull (first part) and the rest of the bodies.
-            for (var j = 0; j < bodies[i].parts.length; j++)
+            for (let j = 0; j < bodies[i].parts.length; j++)
             {
                 var body = bodies[i].parts[j];
 
@@ -659,6 +663,96 @@ var World = new Class({
         }
 
         graphics.closePath();
+
+        if(this.defaults.debugShowJoint)
+        {
+            graphics.lineStyle(2, this.defaults.jointDebugColor);
+
+            // Render constraints 
+            var constraints = Composite.allConstraints(this.localWorld);
+            for (let i = 0; i < constraints.length; i++)
+            {
+                var constraint = constraints[i];
+
+                if (!constraint.render.visible || !constraint.pointA || !constraint.pointB)
+                { continue; }
+
+                if (constraint.render.lineWidth)
+                {
+                    graphics.lineStyle(constraint.render.lineWidth, Common.colorToNumber(constraint.render.strokeStyle));
+                }
+
+                var bodyA = constraint.bodyA,
+                    bodyB = constraint.bodyB,
+                    start,
+                    end;
+
+                if (bodyA)
+                {
+                    start = Vector.add(bodyA.position, constraint.pointA);
+                }
+                else
+                {
+                    start = constraint.pointA;
+                }
+
+                if (constraint.render.type === 'pin')
+                {
+                    graphics.beginPath();
+                    graphics.arc(start.x, start.y, 3, 0, 2 * Math.PI);
+                    graphics.closePath();
+                }
+                else
+                {
+                    if (bodyB)
+                    {
+                        end = Vector.add(bodyB.position, constraint.pointB);
+                    }
+                    else
+                    {
+                        end = constraint.pointB;
+                    }
+
+                    graphics.beginPath();
+                    graphics.moveTo(start.x, start.y);
+
+                    if (constraint.render.type === 'spring')
+                    {
+                        var delta = Vector.sub(end, start),
+                            normal = Vector.perp(Vector.normalise(delta)),
+                            coils = Math.ceil(Common.clamp(constraint.length / 5, 12, 20)),
+                            offset;
+
+                        for (let j = 1; j < coils; j += 1)
+                        {
+                            offset = j % 2 === 0 ? 1 : -1;
+
+                            graphics.lineTo(
+                                start.x + delta.x * (j / coils) + normal.x * offset * 4,
+                                start.y + delta.y * (j / coils) + normal.y * offset * 4
+                            );
+                        }
+                    }
+
+                    graphics.lineTo(end.x, end.y);
+                }
+
+                if (constraint.render.lineWidth)
+                {
+                    graphics.strokePath();
+                }
+
+                if (constraint.render.anchors)
+                {
+                    graphics.fillStyle(Common.colorToNumber(constraint.render.strokeStyle));
+                    graphics.beginPath();
+                    graphics.arc(start.x, start.y, 6, 0, 2 * Math.PI);
+                    graphics.arc(end.x, end.y, 6, 0, 2 * Math.PI);
+                    graphics.closePath();
+                    graphics.fillPath();
+                }
+            }
+        }
     },
 
     /**