improved demo and examples

examples/attractors.js

@@ -1,11 +1,11 @@
 var Example = Example || {};
 
-Example.attractors = function() {
+Matter.use(
-    Matter.use(
+    'matter-gravity', 
-        'matter-gravity', 
+    'matter-wrap'
-        'matter-wrap'
+);
-    );
 
+Example.attractors = function() {
     var Engine = Matter.Engine,
         Render = Matter.Render,
         Runner = Matter.Runner,
@@ -42,13 +42,17 @@ Example.attractors = function() {
 
     var G = 0.001;
 
-    for (var i = 0; i < 200; i += 1) {
+    engine.timing.timeScale = 1.5;
+
+    for (var i = 0; i < 150; i += 1) {
+        var radius = Common.random(6, 10);
+
         var body = Bodies.circle(
             Common.random(10, render.options.width), 
             Common.random(10, render.options.height),
-            Common.random(4, 10),
+            radius,
             {
-                mass: Common.random(10, 20),
+                mass: Common.random(10, 15),
                 gravity: G,
                 frictionAir: 0,
                 wrap: {
@@ -58,9 +62,11 @@ Example.attractors = function() {
             }
         );
 
+        var speed = 5;
+
         Body.setVelocity(body, { 
-            x: Common.random(-2, 2), 
+            x: Common.random(-speed, speed), 
-            y: Common.random(-2, 2)
+            y: Common.random(-speed, speed)
         });
 
         World.add(world, body);

examples/avalanche.js

@@ -1,10 +1,10 @@
 var Example = Example || {};
 
-Example.avalanche = function() {
+Matter.use(
-    Matter.use(
+    'matter-wrap'
-        'matter-wrap'
+);
-    );
 
+Example.avalanche = function() {
     var Engine = Matter.Engine,
         Render = Matter.Render,
         Runner = Matter.Runner,

examples/ballPool.js

@@ -1,10 +1,10 @@
 var Example = Example || {};
 
-Example.ballPool = function() {
+Matter.use(
-    Matter.use(
+    'matter-wrap'
-        'matter-wrap'
+);
-    );
 
+Example.ballPool = function() {
     var Engine = Matter.Engine,
         Render = Matter.Render,
         Runner = Matter.Runner,

examples/circleStack.js

@@ -61,7 +61,7 @@ Example.circleStack = 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 },

examples/cloth.js

@@ -52,7 +52,10 @@ Example.cloth = function() {
         mouseConstraint = MouseConstraint.create(engine, {
             mouse: mouse,
             constraint: {
-                stiffness: 0.9
+                stiffness: 0.98,
+                render: {
+                    visible: false
+                }
             }
         });
 

examples/collisionFiltering.js

@@ -48,7 +48,8 @@ Example.collisionFiltering = function() {
     World.add(world, Bodies.rectangle(400, 600, 900, 50, { 
         isStatic: true,
         render: {
-            fillStyle: 'transparent'
+            fillStyle: 'transparent',
+            lineWidth: 1
         } 
     }));
 
@@ -72,7 +73,8 @@ Example.collisionFiltering = function() {
                 },
                 render: {
                     strokeStyle: color,
-                    fillStyle: 'transparent'
+                    fillStyle: 'transparent',
+                    lineWidth: 1
                 }
             });
         })

examples/compositeManipulation.js

@@ -87,7 +87,7 @@ Example.compositeManipulation = 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 },

examples/concave.js

@@ -51,7 +51,8 @@ Example.concave = function() {
         return Bodies.fromVertices(x, y, Common.choose([arrow, chevron, star, horseShoe]), {
             render: {
                 fillStyle: color,
-                strokeStyle: color
+                strokeStyle: color,
+                lineWidth: 1
             }
         }, true);
     });

examples/events.js

@@ -56,8 +56,8 @@ Example.events = function() {
         // change object colours to show those starting a collision
         for (var i = 0; i < pairs.length; i++) {
             var pair = pairs[i];
-            pair.bodyA.render.fillStyle = '#bbbbbb';
+            pair.bodyA.render.fillStyle = '#333';
-            pair.bodyB.render.fillStyle = '#bbbbbb';
+            pair.bodyB.render.fillStyle = '#333';
         }
     });
 
@@ -68,8 +68,8 @@ Example.events = function() {
         // change object colours to show those in an active collision (e.g. resting contact)
         for (var i = 0; i < pairs.length; i++) {
             var pair = pairs[i];
-            pair.bodyA.render.fillStyle = '#aaaaaa';
+            pair.bodyA.render.fillStyle = '#333';
-            pair.bodyB.render.fillStyle = '#aaaaaa';
+            pair.bodyB.render.fillStyle = '#333';
         }
     });
 
@@ -80,21 +80,24 @@ Example.events = function() {
         // change object colours to show those ending a collision
         for (var i = 0; i < pairs.length; i++) {
             var pair = pairs[i];
-            pair.bodyA.render.fillStyle = '#999999';
+
-            pair.bodyB.render.fillStyle = '#999999';
+            pair.bodyA.render.fillStyle = '#222';
+            pair.bodyB.render.fillStyle = '#222';
         }
     });
 
+    var bodyStyle = { fillStyle: '#222' };
+
     // scene code
     World.add(world, [
-        Bodies.rectangle(400, 0, 800, 50, { isStatic: true }),
+        Bodies.rectangle(400, 0, 800, 50, { isStatic: true, render: bodyStyle }),
-        Bodies.rectangle(400, 600, 800, 50, { isStatic: true }),
+        Bodies.rectangle(400, 600, 800, 50, { isStatic: true, render: bodyStyle }),
-        Bodies.rectangle(800, 300, 50, 600, { isStatic: true }),
+        Bodies.rectangle(800, 300, 50, 600, { isStatic: true, render: bodyStyle }),
-        Bodies.rectangle(0, 300, 50, 600, { isStatic: true })
+        Bodies.rectangle(0, 300, 50, 600, { isStatic: true, render: bodyStyle })
     ]);
 
     var stack = Composites.stack(70, 100, 9, 4, 50, 50, function(x, y) {
-        return Bodies.circle(x, y, 15, { restitution: 1, render: { strokeStyle: '#777' } });
+        return Bodies.circle(x, y, 15, { restitution: 1, render: bodyStyle });
     });
     
     World.add(world, stack);
@@ -137,14 +140,12 @@ Example.events = function() {
     Events.on(mouseConstraint, 'mousedown', function(event) {
         var mousePosition = event.mouse.position;
         console.log('mousedown at ' + mousePosition.x + ' ' + mousePosition.y);
-        render.options.background = 'cornsilk';
         shakeScene(engine);
     });
 
     // an example of using mouse events on a mouse
     Events.on(mouseConstraint, 'mouseup', function(event) {
         var mousePosition = event.mouse.position;
-        render.options.background = "white";
         console.log('mouseup at ' + mousePosition.x + ' ' + mousePosition.y);
     });
 

examples/gravityPlugin.js

@@ -25,16 +25,14 @@
             },
 
             applyGravity: function(bodyA, bodyB) {
-                var Vector = Matter.Vector,
+                var bToA = Matter.Vector.sub(bodyB.position, bodyA.position),
-                    Body = Matter.Body,
+                    distanceSq = Matter.Vector.magnitudeSquared(bToA) || 0.0001,
-                    bToA = Vector.sub(bodyB.position, bodyA.position),
+                    normal = Matter.Vector.normalise(bToA),
-                    distanceSq = Vector.magnitudeSquared(bToA) || 0.0001,
-                    normal = Vector.normalise(bToA),
                     magnitude = -bodyA.gravity * (bodyA.mass * bodyB.mass / distanceSq),
-                    force = Vector.mult(normal, magnitude);
+                    force = Matter.Vector.mult(normal, magnitude);
 
-                Body.applyForce(bodyA, bodyA.position, Vector.neg(force));
+                Matter.Body.applyForce(bodyA, bodyA.position, Matter.Vector.neg(force));
-                Body.applyForce(bodyB, bodyB.position, force);
+                Matter.Body.applyForce(bodyB, bodyB.position, force);
             }
         }
     };

examples/sensors.js

@@ -41,7 +41,8 @@ Example.sensors = function() {
         isStatic: true,
         render: {
             strokeStyle: redColor,
-            fillStyle: 'transparent'
+            fillStyle: 'transparent',
+            lineWidth: 1
         }
     });
 
@@ -50,7 +51,8 @@ Example.sensors = function() {
         Bodies.rectangle(400, 620, 800, 50, { 
             isStatic: true,
             render: {
-                fillStyle: 'transparent'
+                fillStyle: 'transparent',
+                lineWidth: 1
             }
         })
     ]);
@@ -59,7 +61,8 @@ Example.sensors = function() {
         Bodies.circle(400, 40, 30, {
             render: {
                 strokeStyle: greenColor,
-                fillStyle: 'transparent'
+                fillStyle: 'transparent',
+                lineWidth: 1
             }
         })
     );
@@ -108,7 +111,7 @@ Example.sensors = 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 },

examples/sprites.js

@@ -37,10 +37,7 @@ Example.sprites = function() {
     // add bodies
     var offset = 10,
         options = { 
-            isStatic: true,
+            isStatic: true
-            render: {
-                visible: false
-            }
         };
 
     world.bodies = [];

examples/svg.js

@@ -54,7 +54,8 @@ Example.svg = function() {
                 World.add(world, Bodies.fromVertices(100 + i * 150, 200 + i * 50, vertexSets, {
                     render: {
                         fillStyle: color,
-                        strokeStyle: color
+                        strokeStyle: color,
+                        lineWidth: 1
                     }
                 }, true));
             });
@@ -72,7 +73,8 @@ Example.svg = function() {
         World.add(world, Bodies.fromVertices(400, 80, vertexSets, {
             render: {
                 fillStyle: color,
-                strokeStyle: color
+                strokeStyle: color,
+                lineWidth: 1
             }
         }, true));
     });

examples/terrain.js

@@ -37,8 +37,7 @@ Example.terrain = function() {
     var terrain;
 
     $.get('./svg/terrain.svg').done(function(data) {
-        var vertexSets = [],
+        var vertexSets = [];
-            color = Common.choose(['#556270', '#4ECDC4', '#C7F464', '#FF6B6B', '#C44D58']);
 
         $(data).find('path').each(function(i, path) {
             vertexSets.push(Svg.pathToVertices(path, 30));
@@ -47,8 +46,9 @@ Example.terrain = function() {
         terrain = Bodies.fromVertices(400, 350, vertexSets, {
             isStatic: true,
             render: {
-                fillStyle: color,
+                fillStyle: '#2e2b44',
-                strokeStyle: color
+                strokeStyle: '#2e2b44',
+                lineWidth: 1
             }
         }, true);
 

examples/wrapPlugin.js

@@ -1,8 +1,5 @@
 (function() {
 
-    var Body = Matter.Body,
-        Composite = Matter.Composite;
-
     var MatterWrap = {
         name: 'matter-wrap',
 
@@ -19,7 +16,7 @@
         Engine: {
             update: function(engine) {
                 var world = engine.world,
-                    bodies = Composite.allBodies(world);
+                    bodies = Matter.Composite.allBodies(world);
 
                 for (var i = 0; i < bodies.length; i += 1) {
                     var body = bodies[i];
@@ -53,7 +50,7 @@
                 }
 
                 if (x !== null || y !== null) {
-                    Body.setPosition(body, {
+                    Matter.Body.setPosition(body, {
                         x: x || body.position.x,
                         y: y || body.position.y
                     });