From d7e4f585b73eae587608619cb1575268279d4414 Mon Sep 17 00:00:00 2001 From: liabru Date: Sun, 1 Sep 2019 13:36:16 +0100 Subject: [PATCH] Changed examples to be delta independent --- examples/bridge.js | 4 +-- examples/car.js | 2 +- examples/compositeManipulation.js | 9 +++--- examples/events.js | 18 ++++++++--- examples/manipulation.js | 53 +++++++++++++++---------------- examples/ragdoll.js | 24 +++++++------- examples/slingshot.js | 9 +++++- examples/staticFriction.js | 15 +++------ examples/timescale.js | 29 ++++++++--------- 9 files changed, 85 insertions(+), 78 deletions(-) diff --git a/examples/bridge.js b/examples/bridge.js index 78b24ad2..74301962 100644 --- a/examples/bridge.js +++ b/examples/bridge.js @@ -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 } diff --git a/examples/car.js b/examples/car.js index 215f47d5..3c89f122 100644 --- a/examples/car.js +++ b/examples/car.js @@ -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)); diff --git a/examples/compositeManipulation.js b/examples/compositeManipulation.js index 77737c5c..3c818c02 100644 --- a/examples/compositeManipulation.js +++ b/examples/compositeManipulation.js @@ -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, diff --git a/examples/events.js b/examples/events.js index 961cafe3..9e873a4e 100644 --- a/examples/events.js +++ b/examples/events.js @@ -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 diff --git a/examples/manipulation.js b/examples/manipulation.js index 02858878..74c01628 100644 --- a/examples/manipulation.js +++ b/examples/manipulation.js @@ -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); + + // 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; } }); diff --git a/examples/ragdoll.js b/examples/ragdoll.js index 5dfbfae5..3cfc0a28 100644 --- a/examples/ragdoll.js +++ b/examples/ragdoll.js @@ -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 diff --git a/examples/slingshot.js b/examples/slingshot.js index db212007..d77119b3 100644 --- a/examples/slingshot.js +++ b/examples/slingshot.js @@ -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; diff --git a/examples/staticFriction.js b/examples/staticFriction.js index 3040b64d..8db336f4 100644 --- a/examples/staticFriction.js +++ b/examples/staticFriction.js @@ -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 diff --git a/examples/timescale.js b/examples/timescale.js index 466ec024..2cedf0f5 100644 --- a/examples/timescale.js +++ b/examples/timescale.js @@ -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) { - // 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(); } }); @@ -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))) {