Changed examples to be delta independent

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
         }

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

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,

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

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

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

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;

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

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))) {