Skip to content

Commit

Permalink
Changed examples to be delta independent
Browse files Browse the repository at this point in the history
  • Loading branch information
@liabru
liabru committed Sep 1, 2019
1 parent db8b73f commit d7e4f58
Show file tree
Hide file tree
Showing 9 changed files with 85 additions and 78 deletions.
4 changes: 2 additions & 2 deletions examples/bridge.js
View file
Expand Up @@ -50,8 +50,8 @@ Example.bridge = function() {
});

Composites.chain(bridge, 0.3, 0, -0.3, 0, {
stiffness: 1,
length: 0,
stiffness: 0.99,
length: 0.0001,
render: {
visible: false
}
Expand Down
2 changes: 1 addition & 1 deletion examples/car.js
View file
Expand Up @@ -42,7 +42,7 @@ Example.car = function() {
]);

var scale = 0.9;
World.add(world, Composites.car(150, 100, 150 * scale, 30 * scale, 30 * scale));
World.add(world, Composites.car(150, 80, 150 * scale, 30 * scale, 30 * scale));

scale = 0.8;
World.add(world, Composites.car(350, 300, 150 * scale, 30 * scale, 30 * scale));
Expand Down
9 changes: 5 additions & 4 deletions examples/compositeManipulation.js
View file
Expand Up @@ -51,19 +51,20 @@ Example.compositeManipulation = function() {
world.gravity.y = 0;

Events.on(engine, 'afterUpdate', function(event) {
var time = engine.timing.timestamp;
var time = engine.timing.timestamp,
timeScale = event.delta / 1000;

Composite.translate(stack, {
x: Math.sin(time * 0.001) * 2,
x: Math.sin(time * 0.001) * 10 * timeScale,
y: 0
});

Composite.rotate(stack, Math.sin(time * 0.001) * 0.01, {
Composite.rotate(stack, Math.sin(time * 0.001) * 0.75 * timeScale, {
x: 300,
y: 300
});

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

Composite.scale(stack, scale, scale, {
x: 300,
Expand Down
18 changes: 13 additions & 5 deletions examples/events.js
View file
Expand Up @@ -40,13 +40,19 @@ Example.events = function() {
console.log('added to world:', event.object);
});

var lastTime = Common.now();

// an example of using beforeUpdate event on an engine
Events.on(engine, 'beforeUpdate', function(event) {
var engine = event.source;

// apply random forces every 5 secs
if (event.timestamp % 5000 < 50)
shakeScene(engine);
if (Common.now() - lastTime >= 5000) {
shakeScene(engine, event.delta);

// update last time
lastTime = Common.now();
}
});

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

World.add(world, stack);

var shakeScene = function(engine) {
var shakeScene = function(engine, delta) {
var timeScale = delta / 1000;
var bodies = Composite.allBodies(engine.world);

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

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

Body.applyForce(body, body.position, {
x: (forceMagnitude + Common.random() * forceMagnitude) * Common.choose([1, -1]),
Expand Down Expand Up @@ -140,7 +148,7 @@ Example.events = function() {
Events.on(mouseConstraint, 'mousedown', function(event) {
var mousePosition = event.mouse.position;
console.log('mousedown at ' + mousePosition.x + ' ' + mousePosition.y);
shakeScene(engine);
shakeScene(engine, event.delta);
});

// an example of using mouse events on a mouse
Expand Down
53 changes: 26 additions & 27 deletions examples/manipulation.js
View file
Expand Up @@ -5,6 +5,7 @@ Example.manipulation = function() {
Render = Matter.Render,
Runner = Matter.Runner,
Body = Matter.Body,
Common = Matter.Common,
Events = Matter.Events,
MouseConstraint = Matter.MouseConstraint,
Mouse = Matter.Mouse,
Expand Down Expand Up @@ -42,8 +43,8 @@ Example.manipulation = function() {
bodyE = Bodies.rectangle(550, 200, 50, 50),
bodyF = Bodies.rectangle(700, 200, 50, 50),
bodyG = Bodies.circle(400, 100, 25),
partA = Bodies.rectangle(600, 200, 120, 50),
partB = Bodies.rectangle(660, 200, 50, 190),
partA = Bodies.rectangle(600, 200, 120 * 0.8, 50 * 0.8),
partB = Bodies.rectangle(660, 200, 50 * 0.8, 190 * 0.8),
compound = Body.create({
parts: [partA, partB],
isStatic: true
Expand All @@ -59,48 +60,46 @@ Example.manipulation = function() {
Bodies.rectangle(0, 300, 50, 600, { isStatic: true })
]);

var counter = 0,
scaleFactor = 1.01;
var lastTime = 0,
scaleRate = 0.6;

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

if (counter === 40)
Body.setStatic(bodyG, true);

if (scaleFactor > 1) {
Body.scale(bodyF, scaleFactor, scaleFactor);
Body.scale(compound, 0.995, 0.995);
if (scaleRate > 0) {
Body.scale(bodyF, 1 + (scaleRate * timeScale), 1 + (scaleRate * timeScale));

// modify bodyE vertices
bodyE.vertices[0].x -= 0.2;
bodyE.vertices[0].y -= 0.2;
bodyE.vertices[1].x += 0.2;
bodyE.vertices[1].y -= 0.2;
bodyE.vertices[0].x -= 0.2 * timeScale;
bodyE.vertices[0].y -= 0.2 * timeScale;
bodyE.vertices[1].x += 0.2 * timeScale;
bodyE.vertices[1].y -= 0.2 * timeScale;
Body.setVertices(bodyE, bodyE.vertices);
}

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

// make compound body move up and down and rotate constantly
Body.setVelocity(compound, { x: 0, y: py - compound.position.y });
Body.setAngularVelocity(compound, 0.02);
Body.setPosition(compound, { x: 600, y: py });
Body.rotate(compound, 0.02);
Body.setPosition(compound, { x: 600, y: py }, true);
Body.rotate(compound, 1 * Math.PI * timeScale, null, true);

// after first 0.8 sec (simulation time)
if (engine.timing.timestamp >= 800)
Body.setStatic(bodyG, true);

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

// reset counter
counter = 0;
scaleFactor = 1;
// stop scaling
scaleRate = 0;

// update last time
lastTime = engine.timing.timestamp;
}
});

Expand Down
24 changes: 11 additions & 13 deletions examples/ragdoll.js
View file
Expand Up @@ -9,12 +9,10 @@ Example.ragdoll = function() {
Common = Matter.Common,
Composite = Matter.Composite,
Composites = Matter.Composites,
Constraint = Matter.Constraint,
MouseConstraint = Matter.MouseConstraint,
Mouse = Matter.Mouse,
World = Matter.World,
Bodies = Matter.Bodies,
Vector = Matter.Vector;
Bodies = Matter.Bodies;

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

var timeScaleTarget = 1,
counter = 0;
lastTime = Common.now();

Events.on(engine, 'afterUpdate', function(event) {
var timeScale = event.delta / 1000;

// tween the timescale for slow-mo
if (mouse.button === -1) {
engine.timing.timeScale += (timeScaleTarget - engine.timing.timeScale) * 0.05;
engine.timing.timeScale += (timeScaleTarget - engine.timing.timeScale) * 3 * timeScale;
} else {
engine.timing.timeScale = 1;
}

counter += 1;

// every 1.5 sec
if (counter >= 60 * 1.5) {
// every 1.5 sec (real time)
if (Common.now() - lastTime >= 2000) {

// flip the timescale
if (timeScaleTarget < 1) {
Expand All @@ -104,17 +102,17 @@ Example.ragdoll = function() {
timeScaleTarget = 0.05;
}

// reset counter
counter = 0;
// update last time
lastTime = Common.now();
}

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

// animate stairs
Body.translate(body, {
x: -0.5 * engine.timing.timeScale,
y: -0.5 * engine.timing.timeScale
x: -30 * timeScale,
y: -30 * timeScale
});

// loop stairs when they go off screen
Expand Down
9 changes: 8 additions & 1 deletion examples/slingshot.js
View file
Expand Up @@ -10,6 +10,7 @@ Example.slingshot = function() {
MouseConstraint = Matter.MouseConstraint,
Mouse = Matter.Mouse,
World = Matter.World,
Body = Matter.Body,
Bodies = Matter.Bodies;

// create engine
Expand Down Expand Up @@ -41,7 +42,7 @@ Example.slingshot = function() {
elastic = Constraint.create({
pointA: anchor,
bodyB: rock,
stiffness: 0.05
stiffness: 0.015
});

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

Events.on(engine, 'afterUpdate', function() {
if (mouseConstraint.mouse.button === -1 && (rock.position.x > 190 || rock.position.y < 430)) {
// Limit maximum speed of current rock.
if (Body.getSpeed(rock) > 45) {
Body.setSpeed(rock, 45);
}

// Release current rock and add a new one.
rock = Bodies.polygon(170, 450, 7, 20, rockOptions);
World.add(engine.world, rock);
elastic.bodyB = rock;
Expand Down
15 changes: 5 additions & 10 deletions examples/staticFriction.js
View file
Expand Up @@ -35,8 +35,7 @@ Example.staticFriction = function() {

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

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

Events.on(engine, 'beforeUpdate', function(event) {
counter += 0.014;

if (counter < 0) {
Events.on(engine, 'beforeUpdate', function() {
if (engine.timing.timestamp < 1500) {
return;
}

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

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

// add mouse control
Expand Down
29 changes: 14 additions & 15 deletions examples/timescale.js
View file
Expand Up @@ -43,14 +43,16 @@ Example.timescale = function() {
Bodies.rectangle(0, 300, 50, 600, { isStatic: true })
]);

var explosion = function(engine) {
var explosion = function(engine, delta) {
var timeScale = delta / 1000;
var bodies = Composite.allBodies(engine.world);

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

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

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

var timeScaleTarget = 1,
counter = 0;

lastTime = Common.now();

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

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

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

// flip the timescale
if (timeScaleTarget < 1) {
timeScaleTarget = 1;
} else {
timeScaleTarget = 0.05;
timeScaleTarget = 0;
}

// create some random forces
explosion(engine);
explosion(engine, event.delta);

// reset counter
counter = 0;
// update last time
lastTime = Common.now();
}
});

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

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

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

Expand Down

0 comments on commit d7e4f58

Please sign in to comment.