Skip to content

Commit ace1a9f

Browse files
liabruliabru
committed
improved demo and examples
1 parent 1a40f27 commit ace1a9f

43 files changed

Lines changed: 318 additions & 284 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.eslintrc‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,6 @@
2929
"require": false,
3030
"PIXI": false,
3131
"$": false,
32-
"Example": false,
3332
"Image": false,
3433
"navigator": false,
3534
"setTimeout": false,

‎examples/airFriction.js‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ Example.airFriction = function() {
44
var Engine = Matter.Engine,
55
Render = Matter.Render,
66
Runner = Matter.Runner,
7-
Composite = Matter.Composite,
87
MouseConstraint = Matter.MouseConstraint,
98
Mouse = Matter.Mouse,
109
World = Matter.World,
@@ -19,8 +18,8 @@ Example.airFriction = function() {
1918
element: document.body,
2019
engine: engine,
2120
options: {
22-
width: Math.min(document.body.clientWidth, 1024),
23-
height: Math.min(document.body.clientHeight, 1024),
21+
width: Math.min(document.documentElement.clientWidth, 800),
22+
height: Math.min(document.documentElement.clientHeight, 600),
2423
showVelocity: true
2524
}
2625
});
@@ -38,8 +37,11 @@ Example.airFriction = function() {
3837
Bodies.rectangle(400, 100, 60, 60, { frictionAir: 0.05 }),
3938
Bodies.rectangle(600, 100, 60, 60, { frictionAir: 0.1 }),
4039

41-
// floor
42-
Bodies.rectangle(400, 600, 800, 50, { isStatic: true })
40+
// walls
41+
Bodies.rectangle(400, 0, 800, 50, { isStatic: true }),
42+
Bodies.rectangle(400, 600, 800, 50, { isStatic: true }),
43+
Bodies.rectangle(800, 300, 50, 600, { isStatic: true }),
44+
Bodies.rectangle(0, 300, 50, 600, { isStatic: true })
4345
]);
4446

4547
// add mouse control
@@ -60,7 +62,10 @@ Example.airFriction = function() {
6062
render.mouse = mouse;
6163

6264
// fit the render viewport to the scene
63-
Render.lookAt(render, Composite.allBodies(world));
65+
Render.lookAt(render, {
66+
min: { x: 0, y: 0 },
67+
max: { x: 800, y: 600 }
68+
});
6469

6570
// context for MatterTools.Demo
6671
return {

‎examples/attractors.js‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ Example.attractors = function() {
99
var Engine = Matter.Engine,
1010
Render = Matter.Render,
1111
Runner = Matter.Runner,
12-
Composite = Matter.Composite,
1312
Body = Matter.Body,
1413
Common = Matter.Common,
1514
MouseConstraint = Matter.MouseConstraint,
@@ -26,8 +25,8 @@ Example.attractors = function() {
2625
element: document.body,
2726
engine: engine,
2827
options: {
29-
width: Math.min(document.body.clientWidth, 1024),
30-
height: Math.min(document.body.clientHeight, 1024)
28+
width: Math.min(document.documentElement.clientWidth, 800),
29+
height: Math.min(document.documentElement.clientHeight, 600)
3130
}
3231
});
3332

@@ -84,6 +83,12 @@ Example.attractors = function() {
8483
// keep the mouse in sync with rendering
8584
render.mouse = mouse;
8685

86+
// fit the render viewport to the scene
87+
Render.lookAt(render, {
88+
min: { x: 0, y: 0 },
89+
max: { x: 800, y: 600 }
90+
});
91+
8792
// context for MatterTools.Demo
8893
return {
8994
engine: engine,

‎examples/avalanche.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,8 @@ Example.avalanche = function() {
2525
element: document.body,
2626
engine: engine,
2727
options: {
28-
width: Math.min(document.body.clientWidth, 1024),
29-
height: Math.min(document.body.clientHeight, 1024),
28+
width: Math.min(document.documentElement.clientWidth, 800),
29+
height: Math.min(document.documentElement.clientHeight, 600),
3030
showAngleIndicator: true
3131
}
3232
});

‎examples/ballPool.js‎

Lines changed: 25 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
var Example = Example || {};
22

33
Example.ballPool = function() {
4+
Matter.use(
5+
'matter-wrap'
6+
);
7+
48
var Engine = Matter.Engine,
59
Render = Matter.Render,
610
Runner = Matter.Runner,
@@ -21,8 +25,8 @@ Example.ballPool = function() {
2125
element: document.body,
2226
engine: engine,
2327
options: {
24-
width: Math.min(document.body.clientWidth, 1024),
25-
height: Math.min(document.body.clientHeight, 1024),
28+
width: Math.min(document.documentElement.clientWidth, 800),
29+
height: Math.min(document.documentElement.clientHeight, 600),
2630
showAngleIndicator: true
2731
}
2832
});
@@ -35,20 +39,18 @@ Example.ballPool = function() {
3539

3640
// add bodies
3741
World.add(world, [
38-
Bodies.rectangle(400, 600, 800, 50.5, { isStatic: true }),
39-
Bodies.rectangle(800, 300, 50, 600, { isStatic: true }),
40-
Bodies.rectangle(0, 300, 50, 600, { isStatic: true })
42+
Bodies.rectangle(400, 600, 1200, 50.5, { isStatic: true })
4143
]);
4244

43-
var stack = Composites.stack(100, 50, 10, 8, 10, 10, function(x, y) {
45+
var stack = Composites.stack(100, 0, 10, 8, 10, 10, function(x, y) {
4446
return Bodies.circle(x, y, Common.random(15, 30), { restitution: 0.6, friction: 0.1 });
4547
});
4648

4749
World.add(world, [
4850
stack,
49-
Bodies.polygon(200, 560, 3, 60),
50-
Bodies.polygon(400, 560, 5, 60),
51-
Bodies.rectangle(600, 560, 80, 80)
51+
Bodies.polygon(200, 460, 3, 60),
52+
Bodies.polygon(400, 460, 5, 60),
53+
Bodies.rectangle(600, 460, 80, 80)
5254
]);
5355

5456
// add mouse control
@@ -69,7 +71,20 @@ Example.ballPool = function() {
6971
render.mouse = mouse;
7072

7173
// fit the render viewport to the scene
72-
Render.lookAt(render, Composite.allBodies(world));
74+
Render.lookAt(render, {
75+
min: { x: 0, y: 0 },
76+
max: { x: 800, y: 600 }
77+
});
78+
79+
// wrapping using matter-wrap plugin
80+
var allBodies = Composite.allBodies(world);
81+
82+
for (var i = 0; i < allBodies.length; i += 1) {
83+
allBodies[i].wrap = {
84+
min: { x: render.bounds.min.x - 100, y: render.bounds.min.y },
85+
max: { x: render.bounds.max.x + 100, y: render.bounds.max.y }
86+
};
87+
}
7388

7489
// context for MatterTools.Demo
7590
return {

‎examples/bridge.js‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ Example.bridge = function() {
55
Render = Matter.Render,
66
Runner = Matter.Runner,
77
Body = Matter.Body,
8-
Composite = Matter.Composite,
98
Composites = Matter.Composites,
109
Common = Matter.Common,
1110
Constraint = Matter.Constraint,
@@ -23,8 +22,8 @@ Example.bridge = function() {
2322
element: document.body,
2423
engine: engine,
2524
options: {
26-
width: Math.min(document.body.clientWidth, 1024),
27-
height: Math.min(document.body.clientHeight, 1024),
25+
width: Math.min(document.documentElement.clientWidth, 800),
26+
height: Math.min(document.documentElement.clientHeight, 600),
2827
showAngleIndicator: true
2928
}
3029
});
@@ -75,7 +74,10 @@ Example.bridge = function() {
7574
render.mouse = mouse;
7675

7776
// fit the render viewport to the scene
78-
Render.lookAt(render, Composite.allBodies(world));
77+
Render.lookAt(render, {
78+
min: { x: 0, y: 0 },
79+
max: { x: 800, y: 600 }
80+
});
7981

8082
// context for MatterTools.Demo
8183
return {

‎examples/broadphase.js‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,8 @@ Example.broadphase = function() {
44
var Engine = Matter.Engine,
55
Render = Matter.Render,
66
Runner = Matter.Runner,
7-
Body = Matter.Body,
8-
Composite = Matter.Composite,
97
Composites = Matter.Composites,
108
Common = Matter.Common,
11-
Constraint = Matter.Constraint,
129
MouseConstraint = Matter.MouseConstraint,
1310
Mouse = Matter.Mouse,
1411
World = Matter.World,
@@ -23,8 +20,8 @@ Example.broadphase = function() {
2320
element: document.body,
2421
engine: engine,
2522
options: {
26-
width: Math.min(document.body.clientWidth, 1024),
27-
height: Math.min(document.body.clientHeight, 1024),
23+
width: Math.min(document.documentElement.clientWidth, 800),
24+
height: Math.min(document.documentElement.clientHeight, 600),
2825
showAngleIndicator: true,
2926
showBroadphase: true
3027
}
@@ -38,7 +35,9 @@ Example.broadphase = function() {
3835

3936
// add bodies
4037
World.add(world, [
41-
Bodies.rectangle(400, 600, 800, 50.5, { isStatic: true }),
38+
// walls
39+
Bodies.rectangle(400, 0, 800, 50, { isStatic: true }),
40+
Bodies.rectangle(400, 600, 800, 50, { isStatic: true }),
4241
Bodies.rectangle(800, 300, 50, 600, { isStatic: true }),
4342
Bodies.rectangle(0, 300, 50, 600, { isStatic: true })
4443
]);
@@ -79,7 +78,10 @@ Example.broadphase = function() {
7978
render.mouse = mouse;
8079

8180
// fit the render viewport to the scene
82-
Render.lookAt(render, Composite.allBodies(world));
81+
Render.lookAt(render, {
82+
min: { x: 0, y: 0 },
83+
max: { x: 800, y: 600 }
84+
});
8385

8486
// context for MatterTools.Demo
8587
return {

‎examples/car.js‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,7 @@ Example.car = function() {
44
var Engine = Matter.Engine,
55
Render = Matter.Render,
66
Runner = Matter.Runner,
7-
Body = Matter.Body,
8-
Composite = Matter.Composite,
97
Composites = Matter.Composites,
10-
Common = Matter.Common,
11-
Constraint = Matter.Constraint,
128
MouseConstraint = Matter.MouseConstraint,
139
Mouse = Matter.Mouse,
1410
World = Matter.World,
@@ -23,8 +19,8 @@ Example.car = function() {
2319
element: document.body,
2420
engine: engine,
2521
options: {
26-
width: Math.min(document.body.clientWidth, 1024),
27-
height: Math.min(document.body.clientHeight, 1024),
22+
width: Math.min(document.documentElement.clientWidth, 800),
23+
height: Math.min(document.documentElement.clientHeight, 600),
2824
showAngleIndicator: true,
2925
showCollisions: true
3026
}
@@ -38,7 +34,9 @@ Example.car = function() {
3834

3935
// add bodies
4036
World.add(world, [
41-
Bodies.rectangle(400, 600, 800, 50.5, { isStatic: true }),
37+
// walls
38+
Bodies.rectangle(400, 0, 800, 50, { isStatic: true }),
39+
Bodies.rectangle(400, 600, 800, 50, { isStatic: true }),
4240
Bodies.rectangle(800, 300, 50, 600, { isStatic: true }),
4341
Bodies.rectangle(0, 300, 50, 600, { isStatic: true })
4442
]);
@@ -73,7 +71,10 @@ Example.car = function() {
7371
render.mouse = mouse;
7472

7573
// fit the render viewport to the scene
76-
Render.lookAt(render, Composite.allBodies(world));
74+
Render.lookAt(render, {
75+
min: { x: 0, y: 0 },
76+
max: { x: 800, y: 600 }
77+
});
7778

7879
// context for MatterTools.Demo
7980
return {

‎examples/catapult.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,7 @@ Example.catapult = function() {
44
var Engine = Matter.Engine,
55
Render = Matter.Render,
66
Runner = Matter.Runner,
7-
Body = Matter.Body,
8-
Composite = Matter.Composite,
97
Composites = Matter.Composites,
10-
Common = Matter.Common,
118
Constraint = Matter.Constraint,
129
MouseConstraint = Matter.MouseConstraint,
1310
Mouse = Matter.Mouse,
@@ -23,8 +20,8 @@ Example.catapult = function() {
2320
element: document.body,
2421
engine: engine,
2522
options: {
26-
width: Math.min(document.body.clientWidth, 1024),
27-
height: Math.min(document.body.clientHeight, 1024),
23+
width: Math.min(document.documentElement.clientWidth, 800),
24+
height: Math.min(document.documentElement.clientHeight, 600),
2825
showAngleIndicator: true,
2926
showCollisions: true,
3027
showVelocity: true
@@ -72,7 +69,10 @@ Example.catapult = function() {
7269
render.mouse = mouse;
7370

7471
// fit the render viewport to the scene
75-
Render.lookAt(render, Composite.allBodies(world));
72+
Render.lookAt(render, {
73+
min: { x: 0, y: 0 },
74+
max: { x: 800, y: 600 }
75+
});
7676

7777
// context for MatterTools.Demo
7878
return {

‎examples/chains.js‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ Example.chains = function() {
77
Body = Matter.Body,
88
Composite = Matter.Composite,
99
Composites = Matter.Composites,
10-
Common = Matter.Common,
1110
Constraint = Matter.Constraint,
1211
MouseConstraint = Matter.MouseConstraint,
1312
Mouse = Matter.Mouse,
@@ -23,8 +22,8 @@ Example.chains = function() {
2322
element: document.body,
2423
engine: engine,
2524
options: {
26-
width: Math.min(document.body.clientWidth, 1024),
27-
height: Math.min(document.body.clientHeight, 1024),
25+
width: Math.min(document.documentElement.clientWidth, 800),
26+
height: Math.min(document.documentElement.clientHeight, 600),
2827
showAngleIndicator: true,
2928
showCollisions: true,
3029
showVelocity: true

0 commit comments

Comments
 (0)