Splicing in matter-attractor demos. Needed down-version to matter 0.12.0

demo/index.html

@@ -16,20 +16,23 @@
     <script type="text/javascript" src="/demo/lib/decomp.js"></script>
     <script type="text/javascript" src="/demo/lib/pathseg.js"></script>
 
-    <!-- Matter -->
-    <script src="../build/matter-dev.js"></script>
+    <!-- Matter - we specifically use 0.12.0 for attractors compatibility -->
+    <script src="../build/matter-12.js"></script>
 
     <!-- MatterTools -->
     <script src="//code.jquery.com/jquery-3.1.1.js"></script>
     <script src="/demo/lib/matter-tools.gui.js"></script>
     <script src="/demo/lib/matter-tools.inspector.js"></script>
     <script src="/demo/lib/matter-tools.demo.js"></script>
+    <script src="/node_modules/matter-attractors/build/matter-attractors.js"></script>
 
     <!-- Plugins -->
     <script src="/demo/lib/matter-wrap.js"></script>
     
     <!-- Examples -->
     <script src="../examples/airFriction.js"></script>
+    <script src="../examples/attractionSimple.js"></script>
+    <script src="../examples/attractionGravity.js"></script>
     <script src="../examples/avalanche.js"></script>
     <script src="../examples/ballPool.js"></script>
     <script src="../examples/bridge.js"></script>

demo/js/Demo.js

@@ -42,6 +42,18 @@
                 init: Example.avalanche,
                 sourceLink: sourceLinkRoot + '/avalanche.js'
             },
+            {
+                name: 'Attraction, Simple',
+                id: 'attractionSimple',
+                init: Example.attractionSimple,
+                sourceLink: sourceLinkRoot + '/attractionSimple.js'
+            },
+            {
+                name: 'Attraction, Gravity',
+                id: 'attractionGravity',
+                init: Example.attractionGravity,
+                sourceLink: sourceLinkRoot + '/attractionGravity.js'
+            },
             {
                 name: 'Ball Pool',
                 id: 'ballPool',

examples/attractionGravity.js

@@ -0,0 +1,109 @@
+// install plugin
+Matter.use(
+    'matter-wrap',
+    'matter-attractors' // PLUGIN_NAME
+);
+
+var Example = Example || {};
+
+Example.attractionGravity = function() {
+
+    var Engine = Matter.Engine,
+    Render = Matter.Render,
+    Runner = Matter.Runner,
+    Body = Matter.Body,
+    Common = Matter.Common,
+    MouseConstraint = Matter.MouseConstraint,
+    Mouse = Matter.Mouse,
+    World = Matter.World,
+    Bodies = Matter.Bodies;
+
+    // create engine
+    var engine = Engine.create(),
+    world = engine.world;
+
+    // create renderer
+    var render = Render.create({
+        element: document.body,
+        engine: engine,
+        options: {
+            width: Math.min(document.documentElement.clientWidth, 1024),
+            height: Math.min(document.documentElement.clientHeight, 1024)
+        }
+    });
+
+    Render.run(render);
+
+    // create runner
+    var runner = Runner.create();
+    Runner.run(runner, engine);
+
+    // add bodies
+    world.bodies = [];
+    world.gravity.scale = 0;
+
+    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),
+            radius,
+            {
+                mass: Common.random(10, 15),
+                frictionAir: 0,
+                plugin: {
+                    attractors: [
+                        // there is a built in helper function for Newtonian gravity!
+                        // you can find out how it works in index.js
+                        MatterAttractors.Attractors.gravity
+                    ],
+                    wrap: {
+                        min: { x: 0, y: 0 },
+                        max: { x: render.options.width, y: render.options.height }
+                    }
+                }
+            }
+        );
+
+        var speed = 5;
+
+        Body.setVelocity(body, { 
+            x: Common.random(-speed, speed), 
+            y: Common.random(-speed, speed)
+        });
+
+        World.add(world, body);
+    }
+
+    // add mouse control
+    var mouse = Mouse.create(render.canvas),
+    mouseConstraint = MouseConstraint.create(engine, {
+        mouse: mouse,
+        constraint: {
+            stiffness: 0.2,
+            render: {
+                visible: false
+            }
+        }
+    });
+
+    World.add(world, mouseConstraint);
+
+    // keep the mouse in sync with rendering
+    render.mouse = mouse;
+
+    // context for MatterTools.Demo
+    return {
+        engine: engine,
+        runner: runner,
+        render: render,
+        canvas: render.canvas,
+        stop: function() {
+            Matter.Render.stop(render);
+            Matter.Runner.stop(runner);
+        }
+    };
+};

examples/attractionSimple.js

@@ -0,0 +1,109 @@
+// install plugin
+Matter.use(
+    'matter-attractors' // PLUGIN_NAME
+);
+
+var Example = Example || {};
+
+Example.attractionSimple = function() {
+
+    // module aliases
+    var Engine = Matter.Engine,
+    Events = Matter.Events,
+    Runner = Matter.Runner,
+    Render = Matter.Render,
+    World = Matter.World,
+    Body = Matter.Body,
+    Mouse = Matter.Mouse,
+    Common = Matter.Common,
+    Bodies = Matter.Bodies;
+
+    // create engine
+    var engine = Engine.create();
+
+    // create renderer
+    var render = Render.create({
+        element: document.body,
+        engine: engine,
+        options: {
+            width: Math.min(document.documentElement.clientWidth, 1024),
+            height: Math.min(document.documentElement.clientHeight, 1024),
+            wireframes: false
+        }
+    });
+
+    // create runner
+    var runner = Runner.create();
+
+    Runner.run(runner, engine);
+    Render.run(render);
+
+    // create demo scene
+    var world = engine.world;
+    world.gravity.scale = 0;
+
+    // create a body with an attractor
+    var attractiveBody = Bodies.circle(
+        render.options.width / 2,
+        render.options.height / 2,
+        50, 
+        {
+            isStatic: true,
+
+            // example of an attractor function that 
+            // returns a force vector that applies to bodyB
+            plugin: {
+                attractors: [
+                function(bodyA, bodyB) {
+                    return {
+                    x: (bodyA.position.x - bodyB.position.x) * 1e-6,
+                    y: (bodyA.position.y - bodyB.position.y) * 1e-6,
+                    };
+                }
+                ]
+            }
+        }
+    );
+
+    World.add(world, attractiveBody);
+
+    // add some bodies that to be attracted
+    for (var i = 0; i < 150; i += 1) {
+        var body = Bodies.polygon(
+            Common.random(0, render.options.width), 
+            Common.random(0, render.options.height),
+            Common.random(1, 5),
+            Common.random() > 0.9 ? Common.random(15, 25) : Common.random(5, 10)
+        );
+
+        World.add(world, body);
+    }
+
+    // add mouse control
+    var mouse = Mouse.create(render.canvas);
+
+    Events.on(engine, 'afterUpdate', function() {
+        if (!mouse.position.x) {
+            return;
+        }
+
+        // smoothly move the attractor body towards the mouse
+        Body.translate(attractiveBody, {
+            x: (mouse.position.x - attractiveBody.position.x) * 0.25,
+            y: (mouse.position.y - attractiveBody.position.y) * 0.25
+        });
+    });
+
+    // return a context for MatterDemo to control
+    return {
+        engine: engine,
+        runner: runner,
+        render: render,
+        canvas: render.canvas,
+        stop: function() {
+            Matter.Render.stop(render);
+            Matter.Runner.stop(runner);
+        }
+    };
+    
+};

package.json

@@ -53,7 +53,9 @@
   "scripts": {
     "test": "gulp build:dev && gulp lint"
   },
-  "dependencies": {},
+  "dependencies": {
+    "matter-attractors": "^0.1.6"
+  },
   "files": [
     "src",
     "build",