improved demo and examples

liabru · Jan 16, 2017 · ace1a9f · ace1a9f
1 parent 1a40f27
commit ace1a9f
Show file tree

Hide file tree

Showing 43 changed files with 318 additions and 284 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -29,7 +29,6 @@
         "require": false,
         "PIXI": false,
         "$": false,
-        "Example": false,
         "Image": false,
         "navigator": false,
         "setTimeout": false,

diff --git a/examples/airFriction.js b/examples/airFriction.js
@@ -4,7 +4,6 @@ Example.airFriction = function() {
     var Engine = Matter.Engine,
         Render = Matter.Render,
         Runner = Matter.Runner,
-        Composite = Matter.Composite,
         MouseConstraint = Matter.MouseConstraint,
         Mouse = Matter.Mouse,
         World = Matter.World,
@@ -19,8 +18,8 @@ Example.airFriction = function() {
         element: document.body,
         engine: engine,
         options: {
-            width: Math.min(document.body.clientWidth, 1024),
-            height: Math.min(document.body.clientHeight, 1024),
+            width: Math.min(document.documentElement.clientWidth, 800),
+            height: Math.min(document.documentElement.clientHeight, 600),
             showVelocity: true
         }
     });
@@ -38,8 +37,11 @@ Example.airFriction = function() {
         Bodies.rectangle(400, 100, 60, 60, { frictionAir: 0.05 }),
         Bodies.rectangle(600, 100, 60, 60, { frictionAir: 0.1 }),
 
-        // floor
-        Bodies.rectangle(400, 600, 800, 50, { isStatic: true })
+        // walls
+        Bodies.rectangle(400, 0, 800, 50, { isStatic: true }),
+        Bodies.rectangle(400, 600, 800, 50, { isStatic: true }),
+        Bodies.rectangle(800, 300, 50, 600, { isStatic: true }),
+        Bodies.rectangle(0, 300, 50, 600, { isStatic: true })
     ]);
 
     // add mouse control
@@ -60,7 +62,10 @@ Example.airFriction = function() {
     render.mouse = mouse;
 
     // fit the render viewport to the scene
-    Render.lookAt(render, Composite.allBodies(world));
+    Render.lookAt(render, {
+        min: { x: 0, y: 0 },
+        max: { x: 800, y: 600 }
+    });
 
     // context for MatterTools.Demo
     return {

diff --git a/examples/attractors.js b/examples/attractors.js
@@ -9,7 +9,6 @@ Example.attractors = function() {
     var Engine = Matter.Engine,
         Render = Matter.Render,
         Runner = Matter.Runner,
-        Composite = Matter.Composite,
         Body = Matter.Body,
         Common = Matter.Common,
         MouseConstraint = Matter.MouseConstraint,
@@ -26,8 +25,8 @@ Example.attractors = function() {
         element: document.body,
         engine: engine,
         options: {
-            width: Math.min(document.body.clientWidth, 1024),
-            height: Math.min(document.body.clientHeight, 1024)
+            width: Math.min(document.documentElement.clientWidth, 800),
+            height: Math.min(document.documentElement.clientHeight, 600)
         }
     });
 
@@ -84,6 +83,12 @@ Example.attractors = function() {
     // keep the mouse in sync with rendering
     render.mouse = mouse;
 
+    // fit the render viewport to the scene
+    Render.lookAt(render, {
+        min: { x: 0, y: 0 },
+        max: { x: 800, y: 600 }
+    });
+
     // context for MatterTools.Demo
     return {
         engine: engine,

diff --git a/examples/avalanche.js b/examples/avalanche.js
@@ -25,8 +25,8 @@ Example.avalanche = function() {
         element: document.body,
         engine: engine,
         options: {
-            width: Math.min(document.body.clientWidth, 1024),
-            height: Math.min(document.body.clientHeight, 1024),
+            width: Math.min(document.documentElement.clientWidth, 800),
+            height: Math.min(document.documentElement.clientHeight, 600),
             showAngleIndicator: true
         }
     });

diff --git a/examples/ballPool.js b/examples/ballPool.js
@@ -1,6 +1,10 @@
 var Example = Example || {};
 
 Example.ballPool = function() {
+    Matter.use(
+        'matter-wrap'
+    );
+
     var Engine = Matter.Engine,
         Render = Matter.Render,
         Runner = Matter.Runner,
@@ -21,8 +25,8 @@ Example.ballPool = function() {
         element: document.body,
         engine: engine,
         options: {
-            width: Math.min(document.body.clientWidth, 1024),
-            height: Math.min(document.body.clientHeight, 1024),
+            width: Math.min(document.documentElement.clientWidth, 800),
+            height: Math.min(document.documentElement.clientHeight, 600),
             showAngleIndicator: true
         }
     });
@@ -35,20 +39,18 @@ Example.ballPool = function() {
 
     // add bodies
     World.add(world, [
-        Bodies.rectangle(400, 600, 800, 50.5, { isStatic: true }),
-        Bodies.rectangle(800, 300, 50, 600, { isStatic: true }),
-        Bodies.rectangle(0, 300, 50, 600, { isStatic: true })
+        Bodies.rectangle(400, 600, 1200, 50.5, { isStatic: true })
     ]);
 
-    var stack = Composites.stack(100, 50, 10, 8, 10, 10, function(x, y) {
+    var stack = Composites.stack(100, 0, 10, 8, 10, 10, function(x, y) {
         return Bodies.circle(x, y, Common.random(15, 30), { restitution: 0.6, friction: 0.1 });
     });
 
     World.add(world, [
         stack,
-        Bodies.polygon(200, 560, 3, 60),
-        Bodies.polygon(400, 560, 5, 60),
-        Bodies.rectangle(600, 560, 80, 80)
+        Bodies.polygon(200, 460, 3, 60),
+        Bodies.polygon(400, 460, 5, 60),
+        Bodies.rectangle(600, 460, 80, 80)
     ]);
 
     // add mouse control
@@ -69,7 +71,20 @@ Example.ballPool = function() {
     render.mouse = mouse;
 
     // fit the render viewport to the scene
-    Render.lookAt(render, Composite.allBodies(world));
+    Render.lookAt(render, {
+        min: { x: 0, y: 0 },
+        max: { x: 800, y: 600 }
+    });
+
+    // wrapping using matter-wrap plugin
+    var allBodies = Composite.allBodies(world);
+
+    for (var i = 0; i < allBodies.length; i += 1) {
+        allBodies[i].wrap = {
+            min: { x: render.bounds.min.x - 100, y: render.bounds.min.y },
+            max: { x: render.bounds.max.x + 100, y: render.bounds.max.y }
+        };
+    }
 
     // context for MatterTools.Demo
     return {

diff --git a/examples/bridge.js b/examples/bridge.js
@@ -5,7 +5,6 @@ Example.bridge = function() {
         Render = Matter.Render,
         Runner = Matter.Runner,
         Body = Matter.Body,
-        Composite = Matter.Composite,
         Composites = Matter.Composites,
         Common = Matter.Common,
         Constraint = Matter.Constraint,
@@ -23,8 +22,8 @@ Example.bridge = function() {
         element: document.body,
         engine: engine,
         options: {
-            width: Math.min(document.body.clientWidth, 1024),
-            height: Math.min(document.body.clientHeight, 1024),
+            width: Math.min(document.documentElement.clientWidth, 800),
+            height: Math.min(document.documentElement.clientHeight, 600),
             showAngleIndicator: true
         }
     });
@@ -75,7 +74,10 @@ Example.bridge = function() {
     render.mouse = mouse;
 
     // fit the render viewport to the scene
-    Render.lookAt(render, Composite.allBodies(world));
+    Render.lookAt(render, {
+        min: { x: 0, y: 0 },
+        max: { x: 800, y: 600 }
+    });
 
     // context for MatterTools.Demo
     return {

diff --git a/examples/broadphase.js b/examples/broadphase.js
@@ -4,11 +4,8 @@ Example.broadphase = function() {
     var Engine = Matter.Engine,
         Render = Matter.Render,
         Runner = Matter.Runner,
-        Body = Matter.Body,
-        Composite = Matter.Composite,
         Composites = Matter.Composites,
         Common = Matter.Common,
-        Constraint = Matter.Constraint,
         MouseConstraint = Matter.MouseConstraint,
         Mouse = Matter.Mouse,
         World = Matter.World,
@@ -23,8 +20,8 @@ Example.broadphase = function() {
         element: document.body,
         engine: engine,
         options: {
-            width: Math.min(document.body.clientWidth, 1024),
-            height: Math.min(document.body.clientHeight, 1024),
+            width: Math.min(document.documentElement.clientWidth, 800),
+            height: Math.min(document.documentElement.clientHeight, 600),
             showAngleIndicator: true,
             showBroadphase: true
         }
@@ -38,7 +35,9 @@ Example.broadphase = function() {
 
     // add bodies
     World.add(world, [
-        Bodies.rectangle(400, 600, 800, 50.5, { isStatic: true }),
+        // walls
+        Bodies.rectangle(400, 0, 800, 50, { isStatic: true }),
+        Bodies.rectangle(400, 600, 800, 50, { isStatic: true }),
         Bodies.rectangle(800, 300, 50, 600, { isStatic: true }),
         Bodies.rectangle(0, 300, 50, 600, { isStatic: true })
     ]);
@@ -79,7 +78,10 @@ Example.broadphase = function() {
     render.mouse = mouse;
 
     // fit the render viewport to the scene
-    Render.lookAt(render, Composite.allBodies(world));
+    Render.lookAt(render, {
+        min: { x: 0, y: 0 },
+        max: { x: 800, y: 600 }
+    });
 
     // context for MatterTools.Demo
     return {

diff --git a/examples/car.js b/examples/car.js
@@ -4,11 +4,7 @@ Example.car = function() {
     var Engine = Matter.Engine,
         Render = Matter.Render,
         Runner = Matter.Runner,
-        Body = Matter.Body,
-        Composite = Matter.Composite,
         Composites = Matter.Composites,
-        Common = Matter.Common,
-        Constraint = Matter.Constraint,
         MouseConstraint = Matter.MouseConstraint,
         Mouse = Matter.Mouse,
         World = Matter.World,
@@ -23,8 +19,8 @@ Example.car = function() {
         element: document.body,
         engine: engine,
         options: {
-            width: Math.min(document.body.clientWidth, 1024),
-            height: Math.min(document.body.clientHeight, 1024),
+            width: Math.min(document.documentElement.clientWidth, 800),
+            height: Math.min(document.documentElement.clientHeight, 600),
             showAngleIndicator: true,
             showCollisions: true
         }
@@ -38,7 +34,9 @@ Example.car = function() {
 
     // add bodies
     World.add(world, [
-        Bodies.rectangle(400, 600, 800, 50.5, { isStatic: true }),
+        // walls
+        Bodies.rectangle(400, 0, 800, 50, { isStatic: true }),
+        Bodies.rectangle(400, 600, 800, 50, { isStatic: true }),
         Bodies.rectangle(800, 300, 50, 600, { isStatic: true }),
         Bodies.rectangle(0, 300, 50, 600, { isStatic: true })
     ]);
@@ -73,7 +71,10 @@ Example.car = function() {
     render.mouse = mouse;
 
     // fit the render viewport to the scene
-    Render.lookAt(render, Composite.allBodies(world));
+    Render.lookAt(render, {
+        min: { x: 0, y: 0 },
+        max: { x: 800, y: 600 }
+    });
 
     // context for MatterTools.Demo
     return {

diff --git a/examples/catapult.js b/examples/catapult.js
@@ -4,10 +4,7 @@ Example.catapult = function() {
     var Engine = Matter.Engine,
         Render = Matter.Render,
         Runner = Matter.Runner,
-        Body = Matter.Body,
-        Composite = Matter.Composite,
         Composites = Matter.Composites,
-        Common = Matter.Common,
         Constraint = Matter.Constraint,
         MouseConstraint = Matter.MouseConstraint,
         Mouse = Matter.Mouse,
@@ -23,8 +20,8 @@ Example.catapult = function() {
         element: document.body,
         engine: engine,
         options: {
-            width: Math.min(document.body.clientWidth, 1024),
-            height: Math.min(document.body.clientHeight, 1024),
+            width: Math.min(document.documentElement.clientWidth, 800),
+            height: Math.min(document.documentElement.clientHeight, 600),
             showAngleIndicator: true,
             showCollisions: true,
             showVelocity: true
@@ -72,7 +69,10 @@ Example.catapult = function() {
     render.mouse = mouse;
 
     // fit the render viewport to the scene
-    Render.lookAt(render, Composite.allBodies(world));
+    Render.lookAt(render, {
+        min: { x: 0, y: 0 },
+        max: { x: 800, y: 600 }
+    });
 
     // context for MatterTools.Demo
     return {

diff --git a/examples/chains.js b/examples/chains.js
@@ -7,7 +7,6 @@ Example.chains = function() {
         Body = Matter.Body,
         Composite = Matter.Composite,
         Composites = Matter.Composites,
-        Common = Matter.Common,
         Constraint = Matter.Constraint,
         MouseConstraint = Matter.MouseConstraint,
         Mouse = Matter.Mouse,
@@ -23,8 +22,8 @@ Example.chains = function() {
         element: document.body,
         engine: engine,
         options: {
-            width: Math.min(document.body.clientWidth, 1024),
-            height: Math.min(document.body.clientHeight, 1024),
+            width: Math.min(document.documentElement.clientWidth, 800),
+            height: Math.min(document.documentElement.clientHeight, 600),
             showAngleIndicator: true,
             showCollisions: true,
             showVelocity: true

diff --git a/examples/circleStack.js b/examples/circleStack.js
@@ -4,11 +4,7 @@ Example.circleStack = function() {
     var Engine = Matter.Engine,
         Render = Matter.Render,
         Runner = Matter.Runner,
-        Body = Matter.Body,
-        Composite = Matter.Composite,
         Composites = Matter.Composites,
-        Common = Matter.Common,
-        Constraint = Matter.Constraint,
         MouseConstraint = Matter.MouseConstraint,
         Mouse = Matter.Mouse,
         World = Matter.World,
@@ -23,8 +19,8 @@ Example.circleStack = function() {
         element: document.body,
         engine: engine,
         options: {
-            width: Math.min(document.body.clientWidth, 1024),
-            height: Math.min(document.body.clientHeight, 1024),
+            width: Math.min(document.documentElement.clientWidth, 800),
+            height: Math.min(document.documentElement.clientHeight, 600),
             showAngleIndicator: true
         }
     });
@@ -41,7 +37,11 @@ Example.circleStack = function() {
     });
 
     World.add(world, [
-        Bodies.rectangle(400, 600, 800, 50.5, { isStatic: true }),
+        // walls
+        Bodies.rectangle(400, 0, 800, 50, { isStatic: true }),
+        Bodies.rectangle(400, 600, 800, 50, { isStatic: true }),
+        Bodies.rectangle(800, 300, 50, 600, { isStatic: true }),
+        Bodies.rectangle(0, 300, 50, 600, { isStatic: true }),
         stack
     ]);
 
@@ -63,8 +63,11 @@ Example.circleStack = function() {
     render.mouse = mouse;
 
     // fit the render viewport to the scene
-    Render.lookAt(render, Composite.allBodies(world));
-
+    Render.lookAt(render, {
+        min: { x: 0, y: 0 },
+        max: { x: 800, y: 600 }
+    });
+
     // context for MatterTools.Demo
     return {
         engine: engine,