Skip to content

Commit d7e4f58

Browse files
liabruliabru
committed
Changed examples to be delta independent
1 parent db8b73f commit d7e4f58

9 files changed

Lines changed: 85 additions & 78 deletions

File tree

‎examples/bridge.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -50,8 +50,8 @@ Example.bridge = function() {
5050
});
5151

5252
Composites.chain(bridge, 0.3, 0, -0.3, 0, {
53-
stiffness: 1,
54-
length: 0,
53+
stiffness: 0.99,
54+
length: 0.0001,
5555
render: {
5656
visible: false
5757
}

‎examples/car.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ Example.car = function() {
4242
]);
4343

4444
var scale = 0.9;
45-
World.add(world, Composites.car(150, 100, 150 * scale, 30 * scale, 30 * scale));
45+
World.add(world, Composites.car(150, 80, 150 * scale, 30 * scale, 30 * scale));
4646

4747
scale = 0.8;
4848
World.add(world, Composites.car(350, 300, 150 * scale, 30 * scale, 30 * scale));

‎examples/compositeManipulation.js‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -51,19 +51,20 @@ Example.compositeManipulation = function() {
5151
world.gravity.y = 0;
5252

5353
Events.on(engine, 'afterUpdate', function(event) {
54-
var time = engine.timing.timestamp;
54+
var time = engine.timing.timestamp,
55+
timeScale = event.delta / 1000;
5556

5657
Composite.translate(stack, {
57-
x: Math.sin(time * 0.001) * 2,
58+
x: Math.sin(time * 0.001) * 10 * timeScale,
5859
y: 0
5960
});
6061

61-
Composite.rotate(stack, Math.sin(time * 0.001) * 0.01, {
62+
Composite.rotate(stack, Math.sin(time * 0.001) * 0.75 * timeScale, {
6263
x: 300,
6364
y: 300
6465
});
6566

66-
var scale = 1 + (Math.sin(time * 0.001) * 0.01);
67+
var scale = 1 + (Math.sin(time * 0.001) * 0.75 * timeScale);
6768

6869
Composite.scale(stack, scale, scale, {
6970
x: 300,

‎examples/events.js‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -40,13 +40,19 @@ Example.events = function() {
4040
console.log('added to world:', event.object);
4141
});
4242

43+
var lastTime = Common.now();
44+
4345
// an example of using beforeUpdate event on an engine
4446
Events.on(engine, 'beforeUpdate', function(event) {
4547
var engine = event.source;
4648

4749
// apply random forces every 5 secs
48-
if (event.timestamp % 5000 < 50)
49-
shakeScene(engine);
50+
if (Common.now() - lastTime >= 5000) {
51+
shakeScene(engine, event.delta);
52+
53+
// update last time
54+
lastTime = Common.now();
55+
}
5056
});
5157

5258
// an example of using collisionStart event on an engine
@@ -102,14 +108,16 @@ Example.events = function() {
102108

103109
World.add(world, stack);
104110

105-
var shakeScene = function(engine) {
111+
var shakeScene = function(engine, delta) {
112+
var timeScale = delta / 1000;
106113
var bodies = Composite.allBodies(engine.world);
107114

108115
for (var i = 0; i < bodies.length; i++) {
109116
var body = bodies[i];
110117

111118
if (!body.isStatic && body.position.y >= 500) {
112-
var forceMagnitude = 0.02 * body.mass;
119+
// Scale force accounting for time delta.
120+
var forceMagnitude = (0.0005 * body.mass) / (timeScale || 1);
113121

114122
Body.applyForce(body, body.position, {
115123
x: (forceMagnitude + Common.random() * forceMagnitude) * Common.choose([1, -1]),
@@ -140,7 +148,7 @@ Example.events = function() {
140148
Events.on(mouseConstraint, 'mousedown', function(event) {
141149
var mousePosition = event.mouse.position;
142150
console.log('mousedown at ' + mousePosition.x + ' ' + mousePosition.y);
143-
shakeScene(engine);
151+
shakeScene(engine, event.delta);
144152
});
145153

146154
// an example of using mouse events on a mouse

‎examples/manipulation.js‎

Lines changed: 26 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ Example.manipulation = function() {
55
Render = Matter.Render,
66
Runner = Matter.Runner,
77
Body = Matter.Body,
8+
Common = Matter.Common,
89
Events = Matter.Events,
910
MouseConstraint = Matter.MouseConstraint,
1011
Mouse = Matter.Mouse,
@@ -42,8 +43,8 @@ Example.manipulation = function() {
4243
bodyE = Bodies.rectangle(550, 200, 50, 50),
4344
bodyF = Bodies.rectangle(700, 200, 50, 50),
4445
bodyG = Bodies.circle(400, 100, 25),
45-
partA = Bodies.rectangle(600, 200, 120, 50),
46-
partB = Bodies.rectangle(660, 200, 50, 190),
46+
partA = Bodies.rectangle(600, 200, 120 * 0.8, 50 * 0.8),
47+
partB = Bodies.rectangle(660, 200, 50 * 0.8, 190 * 0.8),
4748
compound = Body.create({
4849
parts: [partA, partB],
4950
isStatic: true
@@ -59,48 +60,46 @@ Example.manipulation = function() {
5960
Bodies.rectangle(0, 300, 50, 600, { isStatic: true })
6061
]);
6162

62-
var counter = 0,
63-
scaleFactor = 1.01;
63+
var lastTime = 0,
64+
scaleRate = 0.6;
6465

6566
Events.on(engine, 'beforeUpdate', function(event) {
66-
counter += 1;
67+
var timeScale = event.delta / 1000;
6768

68-
if (counter === 40)
69-
Body.setStatic(bodyG, true);
70-
71-
if (scaleFactor > 1) {
72-
Body.scale(bodyF, scaleFactor, scaleFactor);
73-
Body.scale(compound, 0.995, 0.995);
69+
if (scaleRate > 0) {
70+
Body.scale(bodyF, 1 + (scaleRate * timeScale), 1 + (scaleRate * timeScale));
7471

7572
// modify bodyE vertices
76-
bodyE.vertices[0].x -= 0.2;
77-
bodyE.vertices[0].y -= 0.2;
78-
bodyE.vertices[1].x += 0.2;
79-
bodyE.vertices[1].y -= 0.2;
73+
bodyE.vertices[0].x -= 0.2 * timeScale;
74+
bodyE.vertices[0].y -= 0.2 * timeScale;
75+
bodyE.vertices[1].x += 0.2 * timeScale;
76+
bodyE.vertices[1].y -= 0.2 * timeScale;
8077
Body.setVertices(bodyE, bodyE.vertices);
8178
}
8279

8380
// make bodyA move up and down
84-
// body is static so must manually update velocity for friction to work
8581
var py = 300 + 100 * Math.sin(engine.timing.timestamp * 0.002);
86-
Body.setVelocity(bodyA, { x: 0, y: py - bodyA.position.y });
87-
Body.setPosition(bodyA, { x: 100, y: py });
82+
Body.setPosition(bodyA, { x: 100, y: py }, true);
8883

8984
// make compound body move up and down and rotate constantly
90-
Body.setVelocity(compound, { x: 0, y: py - compound.position.y });
91-
Body.setAngularVelocity(compound, 0.02);
92-
Body.setPosition(compound, { x: 600, y: py });
93-
Body.rotate(compound, 0.02);
85+
Body.setPosition(compound, { x: 600, y: py }, true);
86+
Body.rotate(compound, 1 * Math.PI * timeScale, null, true);
87+
88+
// after first 0.8 sec (simulation time)
89+
if (engine.timing.timestamp >= 800)
90+
Body.setStatic(bodyG, true);
9491

95-
// every 1.5 sec
96-
if (counter >= 60 * 1.5) {
92+
// every 1.5 sec (simulation time)
93+
if (engine.timing.timestamp - lastTime >= 1500) {
9794
Body.setVelocity(bodyB, { x: 0, y: -10 });
9895
Body.setAngle(bodyC, -Math.PI * 0.26);
9996
Body.setAngularVelocity(bodyD, 0.2);
10097

101-
// reset counter
102-
counter = 0;
103-
scaleFactor = 1;
98+
// stop scaling
99+
scaleRate = 0;
100+
101+
// update last time
102+
lastTime = engine.timing.timestamp;
104103
}
105104
});
106105

‎examples/ragdoll.js‎

Lines changed: 11 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,10 @@ Example.ragdoll = function() {
99
Common = Matter.Common,
1010
Composite = Matter.Composite,
1111
Composites = Matter.Composites,
12-
Constraint = Matter.Constraint,
1312
MouseConstraint = Matter.MouseConstraint,
1413
Mouse = Matter.Mouse,
1514
World = Matter.World,
16-
Bodies = Matter.Bodies,
17-
Vector = Matter.Vector;
15+
Bodies = Matter.Bodies;
1816

1917
// create engine
2018
var engine = Engine.create(),
@@ -82,20 +80,20 @@ Example.ragdoll = function() {
8280
World.add(world, [stack, obstacles, ragdolls]);
8381

8482
var timeScaleTarget = 1,
85-
counter = 0;
83+
lastTime = Common.now();
8684

8785
Events.on(engine, 'afterUpdate', function(event) {
86+
var timeScale = event.delta / 1000;
87+
8888
// tween the timescale for slow-mo
8989
if (mouse.button === -1) {
90-
engine.timing.timeScale += (timeScaleTarget - engine.timing.timeScale) * 0.05;
90+
engine.timing.timeScale += (timeScaleTarget - engine.timing.timeScale) * 3 * timeScale;
9191
} else {
9292
engine.timing.timeScale = 1;
9393
}
9494

95-
counter += 1;
96-
97-
// every 1.5 sec
98-
if (counter >= 60 * 1.5) {
95+
// every 1.5 sec (real time)
96+
if (Common.now() - lastTime >= 2000) {
9997

10098
// flip the timescale
10199
if (timeScaleTarget < 1) {
@@ -104,17 +102,17 @@ Example.ragdoll = function() {
104102
timeScaleTarget = 0.05;
105103
}
106104

107-
// reset counter
108-
counter = 0;
105+
// update last time
106+
lastTime = Common.now();
109107
}
110108

111109
for (var i = 0; i < stack.bodies.length; i += 1) {
112110
var body = stack.bodies[i];
113111

114112
// animate stairs
115113
Body.translate(body, {
116-
x: -0.5 * engine.timing.timeScale,
117-
y: -0.5 * engine.timing.timeScale
114+
x: -30 * timeScale,
115+
y: -30 * timeScale
118116
});
119117

120118
// loop stairs when they go off screen

‎examples/slingshot.js‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ Example.slingshot = function() {
1010
MouseConstraint = Matter.MouseConstraint,
1111
Mouse = Matter.Mouse,
1212
World = Matter.World,
13+
Body = Matter.Body,
1314
Bodies = Matter.Bodies;
1415

1516
// create engine
@@ -41,7 +42,7 @@ Example.slingshot = function() {
4142
elastic = Constraint.create({
4243
pointA: anchor,
4344
bodyB: rock,
44-
stiffness: 0.05
45+
stiffness: 0.015
4546
});
4647

4748
var pyramid = Composites.pyramid(500, 300, 9, 10, 0, 0, function(x, y) {
@@ -58,6 +59,12 @@ Example.slingshot = function() {
5859

5960
Events.on(engine, 'afterUpdate', function() {
6061
if (mouseConstraint.mouse.button === -1 && (rock.position.x > 190 || rock.position.y < 430)) {
62+
// Limit maximum speed of current rock.
63+
if (Body.getSpeed(rock) > 45) {
64+
Body.setSpeed(rock, 45);
65+
}
66+
67+
// Release current rock and add a new one.
6168
rock = Bodies.polygon(170, 450, 7, 20, rockOptions);
6269
World.add(engine.world, rock);
6370
elastic.bodyB = rock;

‎examples/staticFriction.js‎

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -35,8 +35,7 @@ Example.staticFriction = function() {
3535

3636
// add bodies
3737
var body = Bodies.rectangle(400, 500, 200, 60, { isStatic: true, chamfer: 10 }),
38-
size = 50,
39-
counter = -1;
38+
size = 50;
4039

4140
var stack = Composites.stack(350, 470 - 6 * size, 1, 6, 0, 0, function(x, y) {
4241
return Bodies.rectangle(x, y, size * 2, size, {
@@ -56,18 +55,14 @@ Example.staticFriction = function() {
5655
Bodies.rectangle(0, 300, 50, 600, { isStatic: true })
5756
]);
5857

59-
Events.on(engine, 'beforeUpdate', function(event) {
60-
counter += 0.014;
61-
62-
if (counter < 0) {
58+
Events.on(engine, 'beforeUpdate', function() {
59+
if (engine.timing.timestamp < 1500) {
6360
return;
6461
}
6562

66-
var px = 400 + 100 * Math.sin(counter);
63+
var px = 400 + 100 * Math.sin((engine.timing.timestamp - 1500) * 0.001);
6764

68-
// body is static so must manually update velocity for friction to work
69-
Body.setVelocity(body, { x: px - body.position.x, y: 0 });
70-
Body.setPosition(body, { x: px, y: body.position.y });
65+
Body.setPosition(body, { x: px, y: body.position.y }, true);
7166
});
7267

7368
// add mouse control

‎examples/timescale.js‎

Lines changed: 14 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -43,14 +43,16 @@ Example.timescale = function() {
4343
Bodies.rectangle(0, 300, 50, 600, { isStatic: true })
4444
]);
4545

46-
var explosion = function(engine) {
46+
var explosion = function(engine, delta) {
47+
var timeScale = delta / 1000;
4748
var bodies = Composite.allBodies(engine.world);
4849

4950
for (var i = 0; i < bodies.length; i++) {
5051
var body = bodies[i];
5152

5253
if (!body.isStatic && body.position.y >= 500) {
53-
var forceMagnitude = 0.05 * body.mass;
54+
// Scale force accounting for time delta.
55+
var forceMagnitude = (0.001 * body.mass) / (timeScale || 1);
5456

5557
Body.applyForce(body, body.position, {
5658
x: (forceMagnitude + Common.random() * forceMagnitude) * Common.choose([1, -1]),
@@ -61,30 +63,29 @@ Example.timescale = function() {
6163
};
6264

6365
var timeScaleTarget = 1,
64-
counter = 0;
65-
66+
lastTime = Common.now();
6667

6768
Events.on(engine, 'afterUpdate', function(event) {
68-
// tween the timescale for bullet time slow-mo
69-
engine.timing.timeScale += (timeScaleTarget - engine.timing.timeScale) * 0.05;
69+
var timeScale = event.delta / 1000;
7070

71-
counter += 1;
71+
// tween the timescale for bullet time slow-mo
72+
engine.timing.timeScale += (timeScaleTarget - engine.timing.timeScale) * 12 * timeScale;
7273

73-
// every 1.5 sec
74-
if (counter >= 60 * 1.5) {
74+
// every 2 sec (real time)
75+
if (Common.now() - lastTime >= 2000) {
7576

7677
// flip the timescale
7778
if (timeScaleTarget < 1) {
7879
timeScaleTarget = 1;
7980
} else {
80-
timeScaleTarget = 0.05;
81+
timeScaleTarget = 0;
8182
}
8283

8384
// create some random forces
84-
explosion(engine);
85+
explosion(engine, event.delta);
8586

86-
// reset counter
87-
counter = 0;
87+
// update last time
88+
lastTime = Common.now();
8889
}
8990
});
9091

@@ -94,12 +95,10 @@ Example.timescale = function() {
9495
restitution: 0.8
9596
};
9697

97-
// add some small bouncy circles... remember Swordfish?
9898
World.add(world, Composites.stack(20, 100, 15, 3, 20, 40, function(x, y) {
9999
return Bodies.circle(x, y, Common.random(10, 20), bodyOptions);
100100
}));
101101

102-
// add some larger random bouncy objects
103102
World.add(world, Composites.stack(50, 50, 8, 3, 0, 0, function(x, y) {
104103
switch (Math.round(Common.random(0, 1))) {
105104

0 commit comments

Comments
 (0)