foster/liabru-matter-js
0
0
Fork 0
mirror of https://github.com/liabru/matter-js.git synced 2025-01-21 17:14:38 -05:00
Code Issues Wiki Activity

Changed examples to be delta independent

Browse source
This commit is contained in:
liabru 2019-09-01 13:36:16 +01:00
parent db8b73f09d
commit d7e4f585b7
9 changed files with 85 additions and 78 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
examples/bridge.js
View file

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

2
examples/car.js
View file

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

9
examples/compositeManipulation.js
View file

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

18
examples/events.js
View file

@ -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
@ -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]),
@ -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

53
examples/manipulation.js
View file

@ -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,
@ -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
@ -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);
// every 1.5 sec
if (counter >= 60 * 1.5) {
// after first 0.8 sec (simulation time)
if (engine.timing.timestamp >= 800)
Body.setStatic(bodyG, true);
// 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;
}
});

24
examples/ragdoll.js
View file

@ -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(),
@ -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) {
@ -104,8 +102,8 @@ 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) {
@ -113,8 +111,8 @@ Example.ragdoll = function() {
// 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

9
examples/slingshot.js
View file

@ -10,6 +10,7 @@ Example.slingshot = function() {
MouseConstraint = Matter.MouseConstraint,
Mouse = Matter.Mouse,
World = Matter.World,
Body = Matter.Body,
Bodies = Matter.Bodies;
// create engine
@ -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) {
@ -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;

15
examples/staticFriction.js
View file

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

29
examples/timescale.js
View file

@ -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]),
@ -61,30 +63,29 @@ Example.timescale = function() {
};
var timeScaleTarget = 1,
counter = 0;
lastTime = Common.now();
Events.on(engine, 'afterUpdate', function(event) {
var timeScale = event.delta / 1000;
// tween the timescale for bullet time slow-mo
engine.timing.timeScale += (timeScaleTarget - engine.timing.timeScale) * 0.05;
engine.timing.timeScale += (timeScaleTarget - engine.timing.timeScale) * 12 * timeScale;
counter += 1;
// 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();
}
});
@ -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))) {