added Demo.svg, Demo.compoundStack, Demo.concave

demo/css/style.css

@@ -114,3 +114,7 @@ canvas:active {
 .dg.a {
     margin-right: 0;
 }
+
+svg {
+    display: none;
+}

demo/dev.html

@@ -34,8 +34,9 @@
                 <select id="demo-select">
                     <option value="mixed">Mixed Shapes</option>
                     <option value="mixedSolid">Solid Rendering</option>
-                    <option value="compound">Compound Bodies</option>
                     <option value="concave">Concave Bodies</option>
+                    <option value="svg">Concave SVG Paths</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>
@@ -60,6 +61,7 @@
                     <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>

demo/js/Demo.js

@@ -12,9 +12,11 @@
         Events = Matter.Events,
         Bounds = Matter.Bounds,
         Vector = Matter.Vector,
+        Vertices = Matter.Vertices,
         MouseConstraint = Matter.MouseConstraint,
         Mouse = Matter.Mouse,
-        Query = Matter.Query;
+        Query = Matter.Query,
+        Svg = Matter.Svg;
 
     // MatterTools aliases
     if (window.MatterTools) {
@@ -42,7 +44,8 @@
         var options = {
             positionIterations: 6,
             velocityIterations: 4,
-            enableSleeping: false
+            enableSleeping: false,
+            metrics: { extended: true }
         };
 
         // create a Matter engine
@@ -122,51 +125,127 @@
 
         Demo.reset();
 
-        var partA = Bodies.rectangle(200, 200, 200, 40),
+        var size = 200,
-            partB = Bodies.rectangle(200, 200, 40, 200);
+            x = 200,
+            y = 200,
+            partA = Bodies.rectangle(x, y, size, size / 5),
+            partB = Bodies.rectangle(x, y, size / 5, size, { render: partA.render });
 
-        var compound = Body.create({
+        var compoundBodyA = Body.create({
             parts: [partA, partB]
         });
 
-        World.add(_world, compound);
+        size = 150;
+        x = 400;
+
+        var partC = Bodies.circle(x, y, 30),
+            partD = Bodies.circle(x + size, y, 30),
+            partE = Bodies.circle(x + size, y + size, 30),
+            partF = Bodies.circle(x, y + size, 30);
+
+        var compoundBodyB = Body.create({
+            parts: [partC, partD, partE, partF]
+        });
+
+        World.add(_world, [compoundBodyA, compoundBodyB]);
         
         var renderOptions = _engine.render.options;
-        renderOptions.showCollisions = true;
-        renderOptions.showBounds = true;
         renderOptions.showAxes = true;
         renderOptions.showPositions = true;
         renderOptions.showConvexHulls = true;
     };
 
+    Demo.compoundStack = function() {
+        var _world = _engine.world;
+
+        Demo.reset();
+
+        var size = 50;
+
+        var stack = Composites.stack(100, 220, 12, 6, 0, 0, function(x, y, column, row) {
+            var partA = Bodies.rectangle(x, y, size, size / 5),
+                partB = Bodies.rectangle(x, y, size / 5, size, { render: partA.render });
+
+            return Body.create({
+                parts: [partA, partB]
+            });
+        });
+
+        World.add(_world, stack);
+    };
+
     Demo.concave = function() {
         var _world = _engine.world;
 
         Demo.reset();
 
-        //var vertices = Matter.Vertices.fromPath('354 89,336 118,310 145,302 227,322 271,375 292,490 289,539 271,540 233,549 133,526 100,552 36,601 63,633 122,628 227,594 304,505 340,426 340,327 330,265 294,246 242,246 181,256 133,283 81,346 44');
+        var arrow = Vertices.fromPath('40 0 40 20 100 20 100 80 40 80 40 100 0 50'),
-        //var vertices = Matter.Vertices.fromPath('164 171,232 233,213 302,273 241,342 305,316 231,364 170,309 188,281 117,240 182');
+            chevron = Vertices.fromPath('100 0 75 50 100 100 25 100 0 50 25 0'),
-        var vertices = Matter.Vertices.fromPath('272 83,266 237,459 236,452 65,526 62,536 297,195 296,203 84');
+            star = Vertices.fromPath('50 0 63 38 100 38 69 59 82 100 50 75 18 100 31 59 0 38 37 38'),
-        //var vertices = Matter.Vertices.fromPath('243 68,274 53,318 54,366 76,391 112,390 159,370 198,316 214,260 210,215 187,205 141,206 103,235 75');
+            horseShoe = Vertices.fromPath('35 7 19 17 14 38 14 58 25 79 45 85 65 84 65 66 46 67 34 59 30 44 33 29 45 23 66 23 66 7 53 7');
 
-        var concave = Bodies.fromVertices(200, 200, vertices, {
+        var stack = Composites.stack(50, 50, 6, 4, 10, 10, function(x, y, column, row) {
-            restitution: 1,
+            var color = Common.choose(['#556270', '#4ECDC4', '#C7F464', '#FF6B6B', '#C44D58']);
-            friction: 0,
+            return Bodies.fromVertices(x, y, Common.choose([arrow, chevron, star, horseShoe]), {
                 render: {
-                fillStyle: '#556270',
+                    fillStyle: color,
-                strokeStyle: '#556270'
+                    strokeStyle: color
                 }
+            }, true);
         });
 
-        World.add(_world, concave);
+        World.add(_world, stack);
+    };
 
-        var renderOptions = _engine.render.options;
+    Demo.svg = function() {
-        renderOptions.showCollisions = true;
+        var _world = _engine.world;
-        renderOptions.showBounds = true;
+
-        renderOptions.showAxes = true;
+        Demo.reset();
-        renderOptions.showPositions = true;
+
-        renderOptions.showConvexHulls = true;
+        var svgs = [
-        //renderOptions.showVertexNumbers = true;
+            'iconmonstr-check-mark-8-icon', 
+            'iconmonstr-direction-4-icon', 
+            'iconmonstr-paperclip-2-icon',
+            'iconmonstr-puzzle-icon',
+            'iconmonstr-user-icon'
+        ];
+
+        for (var i = 0; i < svgs.length; i += 1) {
+            (function(i) {
+                $.get('./svg/' + svgs[i] + '.svg').done(function(data) {
+                    var vertexSets = [],
+                        color = Common.choose(['#556270', '#4ECDC4', '#C7F464', '#FF6B6B', '#C44D58']);
+
+                    $(data).find('path').each(function(i, path) {
+                        var points = Svg.pathToVertices(path, 30);
+                        vertexSets.push(Vertices.scale(points, 0.4, 0.4));
+                    });
+
+                    World.add(_world, Bodies.fromVertices(100 + i * 150, 200 + i * 50, vertexSets, {
+                        render: {
+                            fillStyle: color,
+                            strokeStyle: color
+                        }
+                    }, true));
+                });
+            })(i);
+        }
+
+        $.get('./svg/svg.svg').done(function(data) {
+            var vertexSets = [],
+                color = Common.choose(['#556270', '#4ECDC4', '#C7F464', '#FF6B6B', '#C44D58']);
+
+            $(data).find('path').each(function(i, path) {
+                vertexSets.push(Svg.pathToVertices(path, 30));
+            });
+
+            World.add(_world, Bodies.fromVertices(400, 80, vertexSets, {
+                render: {
+                    fillStyle: color,
+                    strokeStyle: color
+                }
+            }, true));
+        });
     };
 
     Demo.slingshot = function() {
@@ -1231,7 +1310,7 @@
             Bodies.rectangle(-offset, 300, 50.5, 600.5 + 2 * offset, options)
         ]);
 
-        var stack = Composites.stack(20, 20, 15, 4, 0, 0, function(x, y, column, row) {
+        var stack = Composites.stack(20, 20, 10, 4, 0, 0, function(x, y, column, row) {
             if (Common.random() > 0.35) {
                 return Bodies.rectangle(x, y, 64, 64, {
                     render: {
@@ -1286,7 +1365,7 @@
             }
         });
 
-        var vertices = Matter.Vertices.fromPath('164 171,232 233,213 302,273 241,342 305,316 231,364 170,309 188,281 117,240 182'),
+        var vertices = Vertices.fromPath('164 171,232 233,213 302,273 241,342 305,316 231,364 170,309 188,281 117,240 182'),
             concave = Bodies.fromVertices(200, 200, vertices);
         
         World.add(_world, [stack, concave]);
@@ -1574,6 +1653,10 @@
         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)

demo/svg/iconmonstr-check-mark-8-icon.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+
+<!-- The icon can be used freely in both personal and commercial projects with no attribution required, but always appreciated. 
+You may NOT sub-license, resell, rent, redistribute or otherwise transfer the icon without express written permission from iconmonstr.com -->
+
+
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+
+	 width="512px" height="512px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
+
+<path id="check-mark-8-icon" d="M50,245.41l20.083-20.787c33.5,9,91.223,29.833,143,62c54.499-72,164.499-162,231-203l17.917,18.5
+
+	L219.864,428.377L50,245.41z"/>
+
+</svg>
+

demo/svg/iconmonstr-direction-4-icon.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!-- License Agreement at http://iconmonstr.com/license/ -->
+
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="512px" height="512px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
+<path id="direction-4-icon" d="M252.216,102.643c30.296,0.004,9.684,85.709-1.647,112.623h159.358c29.553,0,29.268,39.735,0,39.735
+	h-76.939c-46.705,0-39.078,27.322-25.127,23.753c5.144-1.316,14.273-3.28,14.273-3.28c-2.912,19.129-4.409,29.575-17.345,33.495
+	l-10.279,3.268c-4.814,1.455-7.533,6.542-6.081,11.351c1.456,4.8,6.525,7.55,11.361,6.082l13.286-4.515
+	c-2.298,17.267-3.986,29.494-16.506,33.284l-10.01,3.618c-4.817,1.454-7.535,6.54-6.077,11.357c1.461,4.82,6.553,7.533,11.354,6.073
+	l10.747-3.797c-3.354,23.58-23.352,33.667-50.397,33.667c-58.053,0-77.405-42.896-172.171-42.896c0-35.029,0-125.993,0-125.993
+	c47.6,0,82.259-19.145,106.93-43.814C234.013,149.584,230.435,102.64,252.216,102.643z M252.218,72.627
+	c-45.44,0-43.985,60.578-86.136,102.729c-19.777,19.777-47.534,35.097-86.066,35.097H50v186.024h30.016
+	c88.465,0,103.53,42.896,172.171,42.896c41.998,0,71.335-18.196,80.114-59.456c4.341-20.4,15.514-78.93,18.689-94.9h58.937
+	c30.48,0,52.073-22.658,52.073-49.955c0-27.096-21.368-49.811-52.073-49.811H290.243C302.194,136.334,302.658,72.634,252.218,72.627
+	z"/>
+</svg>

demo/svg/iconmonstr-paperclip-2-icon.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!-- License Agreement at http://iconmonstr.com/license/ -->
+
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="512px" height="512px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
+<path id="paperclip-2-icon" d="M289.05,84.63L98.225,308.136c-6.35,7.44-9.126,17.291-7.594,26.954l10.514,66.144
+	c1.32,8.312,8.484,14.441,16.901,14.44h66.971c9.785,0,19.079-4.283,25.434-11.725l206.015-241.29
+	c5.93-6.943,5.104-17.379-1.841-23.305l-42.83-36.57c-6.946-5.928-17.38-5.104-23.31,1.837l-152.4,178.477
+	c-3.312,3.872-1.941,7.557-0.754,15.562c0.647,4.358,4.409,7.572,8.817,7.528c8.201-0.082,11.959,0.677,15.254-3.186
+	l104.745-122.653l30.031,25.641l-108.396,126.93c-5.823,6.821-14.307,10.795-23.272,10.904h-40.639
+	c-10.349,0.124-19.191-6.943-20.691-17.18l-5.896-40.215c-1.304-8.875,1.292-17.878,7.118-24.697L321.757,75.111
+	c18.261-21.39,50.409-23.929,71.803-5.664l50.576,43.18c21.395,18.265,23.932,50.414,5.666,71.806L235.457,435.479
+	c-10.447,12.243-25.735,19.284-41.83,19.271h-89.321c-19.688-0.012-36.449-14.382-39.549-33.821l-14.072-88.213
+	c-2.53-15.89,2.027-32.097,12.479-44.339L259.017,58.988L289.05,84.63z"/>
+</svg>

demo/svg/iconmonstr-puzzle-icon.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!-- License Agreement at http://iconmonstr.com/license/ -->
+
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="512px" height="512px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<path id="puzzle-1" d="M92.556,359c16.79,0,22.473-9.002,29.312-15.825C135.833,329.159,153,335.128,153,357.71V462h104.29
+	c22.582,0,28.551-17.167,14.544-31.131c-6.832-6.84-15.834-12.523-15.834-29.321C256,382.889,275.028,359,307.5,359
+	s51.5,23.889,51.5,42.548c0,16.798-9.002,22.481-15.825,29.321C329.159,444.833,335.128,462,357.71,462H462V357.71
+	c0-22.582-17.167-28.551-31.131-14.535c-6.84,6.823-12.523,15.825-29.321,15.825C382.889,359,359,339.972,359,307.5
+	s23.889-51.5,42.548-51.5c16.798,0,22.481,9.002,29.321,15.834C444.833,285.841,462,279.872,462,257.29V153H357.71
+	c-22.582,0-28.551-17.167-14.535-31.131c6.823-6.84,15.825-12.523,15.825-29.312C359,73.889,339.972,50,307.5,50
+	S256,73.889,256,92.556c0,16.79,9.002,22.473,15.834,29.312C285.841,135.833,279.872,153,257.29,153H153v104.29
+	c0,22.582-17.167,28.551-31.131,14.544C115.029,265.002,109.346,256,92.556,256C73.889,256,50,275.028,50,307.5
+	S73.889,359,92.556,359z"/>
+</svg>

demo/svg/iconmonstr-user-icon.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!-- The icon can be used freely in both personal and commercial projects with no attribution required, but always appreciated. 
+You may NOT sub-license, resell, rent, redistribute or otherwise transfer the icon without express written permission from iconmonstr.com -->
+
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="512px" height="512px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
+<path id="user-icon" d="M407.448,360.474c-59.036-13.617-113.989-25.541-87.375-75.717
+	c81.01-152.729,21.473-234.406-64.072-234.406c-87.231,0-145.303,84.812-64.072,234.406c27.412,50.482-29.608,62.393-87.375,75.717
+	c-59.012,13.609-54.473,44.723-54.473,101.176h411.838C461.919,405.196,466.458,374.083,407.448,360.474z"/>
+</svg>

demo/svg/svg.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" xml:space="preserve">
+  <g>
+    <path d="m 9.1700186,85.681725 20.2500004,-1.96875 c 1.218723,6.7969 3.691377,11.78908 7.417969,14.97656 3.726526,3.187525 8.753864,4.781275 15.082031,4.781255 6.703075,2e-5 11.753845,-1.41795 15.152345,-4.253915 3.39837,-2.83591 5.09759,-6.15231 5.09766,-9.94921 -7e-5,-2.43747 -0.71492,-4.51169 -2.14454,-6.22266 -1.42975,-1.7109 -3.92584,-3.19918 -7.48828,-4.46484 -2.43755,-0.84371 -7.992236,-2.34371 -16.66406,-4.5 -11.156281,-2.76558 -18.984398,-6.16402 -23.484375,-10.19532 -6.328137,-5.67181 -9.492196,-12.58587 -9.492188,-20.74218 -8e-6,-5.24992 1.488271,-10.16007 4.464844,-14.73047 2.976546,-4.57022 7.265605,-8.05069 12.867188,-10.44141 5.60153,-2.39052 12.363242,-3.58583 20.285156,-3.58594 12.937445,1.1e-4 22.675715,2.83604 29.214845,8.50782 6.53898,5.67196 9.97257,13.24227 10.30078,22.71093 l -20.8125,0.91407 c -0.89069,-5.2968 -2.80084,-9.10539 -5.73047,-11.42579 -2.92974,-2.32022 -7.32427,-3.48038 -13.183593,-3.48046 -6.046915,8e-5 -10.781285,1.24227 -14.203125,3.72656 -2.203154,1.59383 -3.304716,3.72664 -3.304687,6.39844 -2.9e-5,2.43757 1.03122,4.52351 3.09375,6.25781 2.624965,2.20319 8.999959,4.50006 19.125,6.89062 10.124935,2.39069 17.613215,4.86334 22.464845,7.41797 4.85148,2.55474 8.64835,6.04693 11.39062,10.47656 2.7421,4.42973 4.1132,9.90238 4.11328,16.41797 -8e-5,5.90628 -1.64071,11.437525 -4.92187,16.593755 -3.28133,5.15626 -7.92195,8.98829 -13.92187,11.4961 -6.00007,2.50781 -13.47662,3.76171 -22.429693,3.76172 -13.031284,-10e-6 -23.039087,-3.01172 -30.023437,-9.03516 C 14.701258,105.99034 10.529387,97.212995 9.1700186,85.681725 z" />
+    <path d="m 136.92783,119.22079 -36.84375,-103.078125 22.57031,0 26.08594,76.28906 25.24218,-76.28906 22.07813,0 -36.91406,103.078125 z" />
+    <path d="m 254.77158,81.322345 0,-17.36718 44.85937,0 0,41.062505 c -4.35947,4.21876 -10.67587,7.9336 -18.94922,11.14453 -8.27351,3.21093 -16.65241,4.8164 -25.13672,4.8164 -10.78129,0 -20.17972,-2.26172 -28.19531,-6.78515 -8.01565,-4.52343 -14.03908,-10.99217 -18.07031,-19.406255 -4.03126,-8.41403 -6.04688,-17.56637 -6.04688,-27.45703 0,-10.73432 2.25,-20.27337 6.75,-28.61719 4.49999,-8.34366 11.08592,-14.74209 19.75782,-19.19531 6.60933,-3.42178 14.83589,-5.13271 24.67968,-5.13282 12.79681,1.1e-4 22.79289,2.6837 29.98829,8.05078 7.19521,5.36728 11.82412,12.78524 13.88671,22.25391 l -20.67187,3.86719 c -1.4532,-5.06243 -4.18367,-9.05852 -8.19141,-11.98828 -4.00788,-2.92961 -9.01178,-4.39445 -15.01172,-4.39453 -9.09379,8e-5 -16.32426,2.88289 -21.6914,8.64843 -5.36722,5.7657 -8.05081,14.32038 -8.05078,25.66407 -3e-5,12.23441 2.71872,21.41018 8.15625,27.52734 5.43746,6.117215 12.56245,9.175805 21.375,9.175785 4.35931,2e-5 8.7304,-0.85545 13.11328,-2.56641 4.38274,-1.710915 8.14445,-3.785135 11.28515,-6.222655 l 0,-13.07813 z" />
+  </g>
+</svg>