foster/liabru-matter-js
0
0
Fork 0
mirror of https://github.com/liabru/matter-js.git synced 2024-11-27 09:50:52 -05:00
Code Issues Wiki Activity

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

Browse source
This commit is contained in:
liabru 2015-04-13 00:27:14 +01:00
parent 7db3d281a5
commit 17589bc46f
9 changed files with 212 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
demo/css/style.css
View file

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

4
demo/dev.html
View file

@ -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>

137
demo/js/Demo.js
View file

@ -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),
partB = Bodies.rectangle(200, 200, 40, 200);
var size = 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 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 = Matter.Vertices.fromPath('272 83,266 237,459 236,452 65,526 62,536 297,195 296,203 84');
//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');
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'),
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, {
restitution: 1,
friction: 0,
var stack = Composites.stack(50, 50, 6, 4, 10, 10, function(x, y, column, row) {
var color = Common.choose(['#556270', '#4ECDC4', '#C7F464', '#FF6B6B', '#C44D58']);
return Bodies.fromVertices(x, y, Common.choose([arrow, chevron, star, horseShoe]), {
render: {
fillStyle: '#556270',
strokeStyle: '#556270'
fillStyle: color,
strokeStyle: color
}
}, true);
});
World.add(_world, concave);
World.add(_world, stack);
};
var renderOptions = _engine.render.options;
renderOptions.showCollisions = true;
renderOptions.showBounds = true;
renderOptions.showAxes = true;
renderOptions.showPositions = true;
renderOptions.showConvexHulls = true;
//renderOptions.showVertexNumbers = true;
Demo.svg = function() {
var _world = _engine.world;
Demo.reset();
var svgs = [
'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)

19
demo/svg/iconmonstr-check-mark-8-icon.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 809 B

18
demo/svg/iconmonstr-direction-4-icon.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 1.5 KiB

17
demo/svg/iconmonstr-paperclip-2-icon.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 1.3 KiB

17
demo/svg/iconmonstr-puzzle-icon.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 1.3 KiB

12
demo/svg/iconmonstr-user-icon.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 961 B

10
demo/svg/svg.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 3 KiB