From ace1a9f6aac9a81a1ef1ae858724ed5d73e9b476 Mon Sep 17 00:00:00 2001 From: liabru Date: Mon, 28 Nov 2016 01:13:22 +0000 Subject: [PATCH] improved demo and examples --- .eslintrc | 1 - examples/airFriction.js | 17 +++++++++------ examples/attractors.js | 11 +++++++--- examples/avalanche.js | 4 ++-- examples/ballPool.js | 35 ++++++++++++++++++++++--------- examples/bridge.js | 10 +++++---- examples/broadphase.js | 16 +++++++------- examples/car.js | 17 ++++++++------- examples/catapult.js | 12 +++++------ examples/chains.js | 5 ++--- examples/circleStack.js | 21 +++++++++++-------- examples/cloth.js | 12 +++++------ examples/collisionFiltering.js | 13 +++++++----- examples/compositeManipulation.js | 16 +++++++------- examples/compound.js | 13 ++++++------ examples/compoundStack.js | 19 ++++++++++------- examples/concave.js | 17 ++++++++------- examples/events.js | 12 ++++++----- examples/friction.js | 18 +++++++--------- examples/gravity.js | 14 ++++++------- examples/gyro.js | 15 +++++++------ examples/manipulation.js | 16 +++++++------- examples/mixed.js | 16 +++++++------- examples/newtonsCradle.js | 14 +++++-------- examples/pyramid.js | 19 ++++++++++------- examples/raycasting.js | 15 +++++++------ examples/restitution.js | 20 ++++++++++-------- examples/rounded.js | 16 +++++++------- examples/sensors.js | 14 ++++++------- examples/sleeping.js | 14 ++++++++----- examples/slingshot.js | 7 ++----- examples/softBody.js | 19 ++++++++++------- examples/sprites.js | 5 ++--- examples/stack.js | 21 ++++++++++--------- examples/staticFriction.js | 17 +++++++++------ examples/stress.js | 15 ++++++------- examples/stress2.js | 17 +++++++-------- examples/svg.js | 14 ++++++------- examples/terrain.js | 9 ++------ examples/timescale.js | 8 ++----- examples/views.js | 10 ++++----- examples/wrapPlugin.js | 1 - examples/wreckingBall.js | 17 +++++++++------ 43 files changed, 318 insertions(+), 284 deletions(-) diff --git a/.eslintrc b/.eslintrc index eb1e6c8..022a0a8 100644 --- 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 index 5492933..33e824e 100644 --- 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 index 02c6422..009eca1 100644 --- 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 index 5645bd2..53baaf7 100644 --- 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 index 0dcd750..29af38d 100644 --- 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 index 2abc73a..62ae03f 100644 --- 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 index 4ac0c9a..645832f 100644 --- 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 index 063dab6..3d9a0de 100644 --- 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 index 7198640..64c4965 100644 --- 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 index 0c0b799..11f7f87 100644 --- 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 index bf6291a..f432c19 100644 --- 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, diff --git a/examples/cloth.js b/examples/cloth.js index 3d40238..15fb554 100644 --- a/examples/cloth.js +++ b/examples/cloth.js @@ -5,10 +5,7 @@ Example.cloth = function() { 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.cloth = 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) } }); @@ -46,7 +43,8 @@ Example.cloth = function() { World.add(world, [ cloth, Bodies.circle(300, 500, 80, { isStatic: true }), - Bodies.rectangle(500, 480, 80, 80, { isStatic: true }) + Bodies.rectangle(500, 480, 80, 80, { isStatic: true }), + Bodies.rectangle(400, 609, 800, 50, { isStatic: true }) ]); // add mouse control @@ -66,7 +64,7 @@ Example.cloth = function() { // fit the render viewport to the scene Render.lookAt(render, { min: { x: 0, y: 0 }, - max: { x: 800, y: 700 } + max: { x: 800, y: 600 } }); // context for MatterTools.Demo diff --git a/examples/collisionFiltering.js b/examples/collisionFiltering.js index f30dc17..17503d2 100644 --- a/examples/collisionFiltering.js +++ b/examples/collisionFiltering.js @@ -21,8 +21,8 @@ Example.collisionFiltering = 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), wireframes: false, background: '#111' } @@ -45,7 +45,7 @@ Example.collisionFiltering = function() { greenColor = '#C7F464'; // add floor - World.add(world, Bodies.rectangle(400, 800, 900, 50, { + World.add(world, Bodies.rectangle(400, 600, 900, 50, { isStatic: true, render: { fillStyle: 'transparent' @@ -54,7 +54,7 @@ Example.collisionFiltering = function() { // create a stack with varying body categories (but these bodies can all collide with each other) World.add(world, - Composites.stack(275, 150, 5, 10, 10, 10, function(x, y, column, row) { + Composites.stack(275, 100, 5, 9, 10, 10, function(x, y, column, row) { var category = redCategory, color = redColor; @@ -138,7 +138,10 @@ Example.collisionFiltering = function() { mouseConstraint.collisionFilter.mask = defaultCategory | blueCategory | greenCategory; // 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/compositeManipulation.js b/examples/compositeManipulation.js index 38f638b..29ee395 100644 --- a/examples/compositeManipulation.js +++ b/examples/compositeManipulation.js @@ -4,12 +4,9 @@ Example.compositeManipulation = function() { var Engine = Matter.Engine, Render = Matter.Render, Runner = Matter.Runner, - Body = Matter.Body, Events = Matter.Events, Composite = Matter.Composite, Composites = Matter.Composites, - Common = Matter.Common, - Constraint = Matter.Constraint, MouseConstraint = Matter.MouseConstraint, Mouse = Matter.Mouse, World = Matter.World, @@ -24,8 +21,8 @@ Example.compositeManipulation = 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 } }); @@ -38,7 +35,9 @@ Example.compositeManipulation = 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 }) ]); @@ -90,7 +89,10 @@ Example.compositeManipulation = 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/compound.js b/examples/compound.js index 473798b..b72aeed 100644 --- a/examples/compound.js +++ b/examples/compound.js @@ -5,10 +5,6 @@ Example.compound = function() { Render = Matter.Render, Runner = Matter.Runner, Body = Matter.Body, - Events = Matter.Events, - Composite = Matter.Composite, - Composites = Matter.Composites, - Common = Matter.Common, Constraint = Matter.Constraint, MouseConstraint = Matter.MouseConstraint, Mouse = Matter.Mouse, @@ -24,8 +20,8 @@ Example.compound = 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), showAxes: true, showPositions: true, showConvexHulls: true @@ -93,7 +89,10 @@ Example.compound = 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/compoundStack.js b/examples/compoundStack.js index ddefac3..a62917e 100644 --- a/examples/compoundStack.js +++ b/examples/compoundStack.js @@ -5,11 +5,7 @@ Example.compoundStack = function() { Render = Matter.Render, Runner = Matter.Runner, Body = Matter.Body, - Events = Matter.Events, - Composite = Matter.Composite, Composites = Matter.Composites, - Common = Matter.Common, - Constraint = Matter.Constraint, MouseConstraint = Matter.MouseConstraint, Mouse = Matter.Mouse, World = Matter.World, @@ -24,8 +20,8 @@ Example.compoundStack = 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 } }); @@ -50,7 +46,11 @@ Example.compoundStack = function() { World.add(world, [ stack, - Bodies.rectangle(400, 620, 800, 50, { isStatic: true }) + // walls + Bodies.rectangle(400, 0, 800, 50, { isStatic: true }), + Bodies.rectangle(800, 300, 50, 600, { isStatic: true }), + Bodies.rectangle(0, 300, 50, 600, { isStatic: true }), + Bodies.rectangle(400, 609, 800, 50, { isStatic: true }) ]); // add mouse control @@ -71,7 +71,10 @@ Example.compoundStack = 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/concave.js b/examples/concave.js index 9ffde46..096a2bc 100644 --- a/examples/concave.js +++ b/examples/concave.js @@ -4,12 +4,8 @@ Example.concave = function() { var Engine = Matter.Engine, Render = Matter.Render, Runner = Matter.Runner, - Body = Matter.Body, - Events = Matter.Events, - Composite = Matter.Composite, Composites = Matter.Composites, Common = Matter.Common, - Constraint = Matter.Constraint, MouseConstraint = Matter.MouseConstraint, Mouse = Matter.Mouse, World = Matter.World, @@ -25,8 +21,8 @@ Example.concave = 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) } }); @@ -38,7 +34,9 @@ Example.concave = 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 }) ]); @@ -78,7 +76,10 @@ Example.concave = 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/events.js b/examples/events.js index 459de2c..ae68d4f 100644 --- a/examples/events.js +++ b/examples/events.js @@ -9,11 +9,9 @@ Example.events = function() { Composite = Matter.Composite, Composites = Matter.Composites, Common = Matter.Common, - Constraint = Matter.Constraint, MouseConstraint = Matter.MouseConstraint, Mouse = Matter.Mouse, World = Matter.World, - Vertices = Matter.Vertices, Bodies = Matter.Bodies; // create engine @@ -25,8 +23,9 @@ Example.events = 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), + wireframes: false } }); @@ -160,7 +159,10 @@ Example.events = function() { }); // 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/friction.js b/examples/friction.js index fa6ff1e..2f88706 100644 --- a/examples/friction.js +++ b/examples/friction.js @@ -4,16 +4,9 @@ Example.friction = function() { var Engine = Matter.Engine, Render = Matter.Render, Runner = Matter.Runner, - Body = Matter.Body, - Events = Matter.Events, - Composite = Matter.Composite, - Composites = Matter.Composites, - Common = Matter.Common, - Constraint = Matter.Constraint, MouseConstraint = Matter.MouseConstraint, Mouse = Matter.Mouse, World = Matter.World, - Vertices = Matter.Vertices, Bodies = Matter.Bodies; // create engine @@ -25,8 +18,8 @@ Example.friction = 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 } }); @@ -39,6 +32,8 @@ Example.friction = function() { // add bodies World.add(world, [ + // 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 }) @@ -77,7 +72,10 @@ Example.friction = 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/gravity.js b/examples/gravity.js index aded9fe..dbd53de 100644 --- a/examples/gravity.js +++ b/examples/gravity.js @@ -4,16 +4,11 @@ Example.gravity = function() { var Engine = Matter.Engine, Render = Matter.Render, Runner = Matter.Runner, - Body = Matter.Body, - Events = Matter.Events, - Composite = Matter.Composite, Composites = Matter.Composites, Common = Matter.Common, - Constraint = Matter.Constraint, MouseConstraint = Matter.MouseConstraint, Mouse = Matter.Mouse, World = Matter.World, - Vertices = Matter.Vertices, Bodies = Matter.Bodies; // create engine @@ -25,8 +20,8 @@ Example.gravity = 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, showAngleIndicator: true } @@ -84,7 +79,10 @@ Example.gravity = 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/gyro.js b/examples/gyro.js index 6b2dc84..d03822d 100644 --- a/examples/gyro.js +++ b/examples/gyro.js @@ -4,16 +4,11 @@ Example.gyro = function() { var Engine = Matter.Engine, Render = Matter.Render, Runner = Matter.Runner, - Body = Matter.Body, - Events = Matter.Events, - Composite = Matter.Composite, Composites = Matter.Composites, Common = Matter.Common, - Constraint = Matter.Constraint, MouseConstraint = Matter.MouseConstraint, Mouse = Matter.Mouse, World = Matter.World, - Vertices = Matter.Vertices, Bodies = Matter.Bodies; // create engine @@ -25,8 +20,9 @@ Example.gyro = 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 } }); @@ -112,7 +108,10 @@ Example.gyro = 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/manipulation.js b/examples/manipulation.js index b579900..67e9a27 100644 --- a/examples/manipulation.js +++ b/examples/manipulation.js @@ -6,14 +6,9 @@ Example.manipulation = function() { Runner = Matter.Runner, Body = Matter.Body, Events = Matter.Events, - Composite = Matter.Composite, - Composites = Matter.Composites, - Common = Matter.Common, - Constraint = Matter.Constraint, MouseConstraint = Matter.MouseConstraint, Mouse = Matter.Mouse, World = Matter.World, - Vertices = Matter.Vertices, Bodies = Matter.Bodies; // create engine @@ -25,8 +20,8 @@ Example.manipulation = 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), showAxes: true, showCollisions: true, showConvexHulls: true @@ -57,6 +52,8 @@ Example.manipulation = function() { World.add(world, [bodyA, bodyB, bodyC, bodyD, bodyE, bodyF, bodyG, compound]); World.add(world, [ + // 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 }) @@ -125,7 +122,10 @@ Example.manipulation = 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/mixed.js b/examples/mixed.js index e992ada..c9ee647 100644 --- a/examples/mixed.js +++ b/examples/mixed.js @@ -4,16 +4,11 @@ Example.mixed = function() { var Engine = Matter.Engine, Render = Matter.Render, Runner = Matter.Runner, - Body = Matter.Body, - Events = Matter.Events, - Composite = Matter.Composite, Composites = Matter.Composites, Common = Matter.Common, - Constraint = Matter.Constraint, MouseConstraint = Matter.MouseConstraint, Mouse = Matter.Mouse, World = Matter.World, - Vertices = Matter.Vertices, Bodies = Matter.Bodies; // create engine @@ -25,8 +20,8 @@ Example.mixed = 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 } }); @@ -68,6 +63,8 @@ Example.mixed = function() { World.add(world, stack); World.add(world, [ + // 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 }) @@ -91,7 +88,10 @@ Example.mixed = 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/newtonsCradle.js b/examples/newtonsCradle.js index 40d491e..802e318 100644 --- a/examples/newtonsCradle.js +++ b/examples/newtonsCradle.js @@ -5,14 +5,10 @@ Example.newtonsCradle = function() { 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, - Bodies = Matter.Bodies; + World = Matter.World; // create engine var engine = Engine.create(), @@ -23,8 +19,8 @@ Example.newtonsCradle = 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 } }); @@ -63,8 +59,8 @@ Example.newtonsCradle = function() { // fit the render viewport to the scene Render.lookAt(render, { - min: { x: 0, y: 0 }, - max: { x: 800, y: 700 } + min: { x: 0, y: 50 }, + max: { x: 800, y: 600 } }); // context for MatterTools.Demo diff --git a/examples/pyramid.js b/examples/pyramid.js index 6215910..6152920 100644 --- a/examples/pyramid.js +++ b/examples/pyramid.js @@ -4,11 +4,7 @@ Example.pyramid = 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.pyramid = 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 } }); @@ -42,7 +38,11 @@ Example.pyramid = function() { World.add(world, [ stack, - Bodies.rectangle(400, 620, 800, 50, { isStatic: true }) + // walls + Bodies.rectangle(400, 0, 800, 50, { isStatic: true }), + Bodies.rectangle(800, 300, 50, 600, { isStatic: true }), + Bodies.rectangle(0, 300, 50, 600, { isStatic: true }), + Bodies.rectangle(400, 605, 800, 50, { isStatic: true }) ]); // add mouse control @@ -63,7 +63,10 @@ Example.pyramid = 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/raycasting.js b/examples/raycasting.js index 5cc2008..af45db0 100644 --- a/examples/raycasting.js +++ b/examples/raycasting.js @@ -4,12 +4,10 @@ Example.raycasting = function() { var Engine = Matter.Engine, Render = Matter.Render, Runner = Matter.Runner, - Body = Matter.Body, Composite = Matter.Composite, Composites = Matter.Composites, Common = Matter.Common, Query = Matter.Query, - Constraint = Matter.Constraint, MouseConstraint = Matter.MouseConstraint, Mouse = Matter.Mouse, Events = Matter.Events, @@ -26,8 +24,8 @@ Example.raycasting = 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 } }); @@ -62,7 +60,9 @@ Example.raycasting = function() { World.add(world, [ stack, concave, - 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 }) ]); @@ -118,7 +118,10 @@ Example.raycasting = 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/restitution.js b/examples/restitution.js index 239ccd9..1f12f55 100644 --- a/examples/restitution.js +++ b/examples/restitution.js @@ -4,11 +4,6 @@ Example.restitution = 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 +18,8 @@ Example.restitution = 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 @@ -47,7 +42,11 @@ Example.restitution = function() { Bodies.rectangle(100 + space * 2, 150, 50, 50, { restitution: rest, angle: -Math.PI * 0.25 }), Bodies.circle(100 + space * 3, 150, 25, { restitution: rest }), Bodies.rectangle(100 + space * 5, 150, 180, 20, { restitution: rest, angle: -Math.PI * 0.5 }), - Bodies.rectangle(400, 620, 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 @@ -68,7 +67,10 @@ Example.restitution = 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/rounded.js b/examples/rounded.js index 79d95b6..d6e9c7a 100644 --- a/examples/rounded.js +++ b/examples/rounded.js @@ -4,9 +4,6 @@ Example.rounded = function() { var Engine = Matter.Engine, Render = Matter.Render, Runner = Matter.Runner, - Composite = Matter.Composite, - Composites = Matter.Composites, - Common = Matter.Common, MouseConstraint = Matter.MouseConstraint, Mouse = Matter.Mouse, World = Matter.World, @@ -21,8 +18,8 @@ Example.rounded = 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), showAxes: true } }); @@ -35,7 +32,9 @@ Example.rounded = 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 }) ]); @@ -92,7 +91,10 @@ Example.rounded = 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/sensors.js b/examples/sensors.js index fcfafb1..f3d22c1 100644 --- a/examples/sensors.js +++ b/examples/sensors.js @@ -4,12 +4,7 @@ Example.sensors = function() { var Engine = Matter.Engine, Render = Matter.Render, Runner = Matter.Runner, - Body = Matter.Body, - Composite = Matter.Composite, - Composites = Matter.Composites, - Common = Matter.Common, Events = Matter.Events, - Constraint = Matter.Constraint, MouseConstraint = Matter.MouseConstraint, Mouse = Matter.Mouse, World = Matter.World, @@ -24,8 +19,8 @@ Example.sensors = 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), wireframes: false, background: '#111' } @@ -115,7 +110,10 @@ Example.sensors = 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/sleeping.js b/examples/sleeping.js index 596e464..0c6462c 100644 --- a/examples/sleeping.js +++ b/examples/sleeping.js @@ -4,7 +4,6 @@ Example.sleeping = function() { var Engine = Matter.Engine, Render = Matter.Render, Runner = Matter.Runner, - Composite = Matter.Composite, Composites = Matter.Composites, Common = Matter.Common, Events = Matter.Events, @@ -24,8 +23,8 @@ Example.sleeping = 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 } }); @@ -38,7 +37,9 @@ Example.sleeping = 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 }) ]); @@ -86,7 +87,10 @@ Example.sleeping = 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/slingshot.js b/examples/slingshot.js index 947aac0..649bb27 100644 --- a/examples/slingshot.js +++ b/examples/slingshot.js @@ -4,11 +4,8 @@ Example.slingshot = function() { var Engine = Matter.Engine, Render = Matter.Render, Runner = Matter.Runner, - Body = Matter.Body, - Composite = Matter.Composite, Composites = Matter.Composites, Events = Matter.Events, - Common = Matter.Common, Constraint = Matter.Constraint, MouseConstraint = Matter.MouseConstraint, Mouse = Matter.Mouse, @@ -24,8 +21,8 @@ Example.slingshot = 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/softBody.js b/examples/softBody.js index 7b30520..f1ade68 100644 --- a/examples/softBody.js +++ b/examples/softBody.js @@ -4,11 +4,7 @@ Example.softBody = 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.softBody = 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: false } }); @@ -46,7 +42,11 @@ Example.softBody = function() { Composites.softBody(250, 100, 5, 5, 0, 0, true, 18, particleOptions), Composites.softBody(400, 300, 8, 3, 0, 0, true, 15, particleOptions), Composites.softBody(250, 400, 4, 4, 0, 0, true, 15, particleOptions), - Bodies.rectangle(400, 620, 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 @@ -67,7 +67,10 @@ Example.softBody = 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/sprites.js b/examples/sprites.js index e355311..8938200 100644 --- a/examples/sprites.js +++ b/examples/sprites.js @@ -4,7 +4,6 @@ Example.sprites = function() { var Engine = Matter.Engine, Render = Matter.Render, Runner = Matter.Runner, - Composite = Matter.Composite, Composites = Matter.Composites, Common = Matter.Common, MouseConstraint = Matter.MouseConstraint, @@ -21,8 +20,8 @@ Example.sprites = 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), background: '#0f0f13', showAngleIndicator: false, wireframes: false diff --git a/examples/stack.js b/examples/stack.js index 734fb93..21d46d7 100644 --- a/examples/stack.js +++ b/examples/stack.js @@ -4,16 +4,10 @@ Example.stack = function() { var Engine = Matter.Engine, Render = Matter.Render, Runner = Matter.Runner, - Body = Matter.Body, - Events = Matter.Events, - Composite = Matter.Composite, Composites = Matter.Composites, - Common = Matter.Common, - Constraint = Matter.Constraint, MouseConstraint = Matter.MouseConstraint, Mouse = Matter.Mouse, World = Matter.World, - Vertices = Matter.Vertices, Bodies = Matter.Bodies; // create engine @@ -25,8 +19,8 @@ Example.stack = 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 } }); @@ -44,7 +38,11 @@ Example.stack = function() { World.add(world, [ stack, - Bodies.rectangle(400, 600, 800, 50.5, { isStatic: true }) + // walls + Bodies.rectangle(400, 0, 800, 50, { isStatic: true }), + Bodies.rectangle(800, 300, 50, 600, { isStatic: true }), + Bodies.rectangle(0, 300, 50, 600, { isStatic: true }), + Bodies.rectangle(400, 606, 800, 50.5, { isStatic: true }) ]); // add mouse control @@ -65,7 +63,10 @@ Example.stack = 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/staticFriction.js b/examples/staticFriction.js index 53b9f58..eafbba0 100644 --- a/examples/staticFriction.js +++ b/examples/staticFriction.js @@ -5,10 +5,7 @@ Example.staticFriction = function() { Render = Matter.Render, Runner = Matter.Runner, Body = Matter.Body, - Composite = Matter.Composite, Composites = Matter.Composites, - Common = Matter.Common, - Constraint = Matter.Constraint, Events = Matter.Events, MouseConstraint = Matter.MouseConstraint, Mouse = Matter.Mouse, @@ -24,8 +21,8 @@ Example.staticFriction = 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 } }); @@ -49,7 +46,15 @@ Example.staticFriction = function() { }); }); - World.add(world, [body, stack]); + World.add(world, [ + body, + stack, + // 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 }) + ]); Events.on(engine, 'beforeUpdate', function(event) { counter += 0.014; diff --git a/examples/stress.js b/examples/stress.js index b7781e7..f84584a 100644 --- a/examples/stress.js +++ b/examples/stress.js @@ -4,16 +4,10 @@ Example.stress = function() { var Engine = Matter.Engine, Render = Matter.Render, Runner = Matter.Runner, - Body = Matter.Body, - Events = Matter.Events, - Composite = Matter.Composite, Composites = Matter.Composites, - Common = Matter.Common, - Constraint = Matter.Constraint, MouseConstraint = Matter.MouseConstraint, Mouse = Matter.Mouse, World = Matter.World, - Vertices = Matter.Vertices, Bodies = Matter.Bodies; // create engine @@ -25,8 +19,8 @@ Example.stress = 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) } }); @@ -67,7 +61,10 @@ Example.stress = 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/stress2.js b/examples/stress2.js index 0263e66..b8fff91 100644 --- a/examples/stress2.js +++ b/examples/stress2.js @@ -1,17 +1,13 @@ +var Example = Example || {}; + Example.stress2 = function() { var Engine = Matter.Engine, Render = Matter.Render, Runner = Matter.Runner, - Body = Matter.Body, - Events = Matter.Events, - Composite = Matter.Composite, Composites = Matter.Composites, - Common = Matter.Common, - Constraint = Matter.Constraint, MouseConstraint = Matter.MouseConstraint, Mouse = Matter.Mouse, World = Matter.World, - Vertices = Matter.Vertices, Bodies = Matter.Bodies; // create engine @@ -23,8 +19,8 @@ Example.stress2 = 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) } }); @@ -65,7 +61,10 @@ Example.stress2 = 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/svg.js b/examples/svg.js index ffd682e..0242cd1 100644 --- a/examples/svg.js +++ b/examples/svg.js @@ -4,12 +4,7 @@ Example.svg = function() { var Engine = Matter.Engine, Render = Matter.Render, Runner = Matter.Runner, - Body = Matter.Body, - Events = Matter.Events, - Composite = Matter.Composite, - Composites = Matter.Composites, Common = Matter.Common, - Constraint = Matter.Constraint, MouseConstraint = Matter.MouseConstraint, Mouse = Matter.Mouse, World = Matter.World, @@ -26,8 +21,8 @@ Example.svg = 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) } }); @@ -107,7 +102,10 @@ Example.svg = 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/terrain.js b/examples/terrain.js index 755a8f1..ac0e95a 100644 --- a/examples/terrain.js +++ b/examples/terrain.js @@ -4,16 +4,11 @@ Example.terrain = function() { var Engine = Matter.Engine, Render = Matter.Render, Runner = Matter.Runner, - Body = Matter.Body, - Events = Matter.Events, - Composite = Matter.Composite, Composites = Matter.Composites, Common = Matter.Common, - Constraint = Matter.Constraint, MouseConstraint = Matter.MouseConstraint, Mouse = Matter.Mouse, World = Matter.World, - Vertices = Matter.Vertices, Query = Matter.Query, Svg = Matter.Svg, Bodies = Matter.Bodies; @@ -27,8 +22,8 @@ Example.terrain = 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) } }); diff --git a/examples/timescale.js b/examples/timescale.js index 71f32f4..39fcd16 100644 --- a/examples/timescale.js +++ b/examples/timescale.js @@ -9,13 +9,9 @@ Example.timescale = function() { Composite = Matter.Composite, Composites = Matter.Composites, Common = Matter.Common, - Constraint = Matter.Constraint, MouseConstraint = Matter.MouseConstraint, Mouse = Matter.Mouse, World = Matter.World, - Vertices = Matter.Vertices, - Query = Matter.Query, - Svg = Matter.Svg, Bodies = Matter.Bodies; // create engine @@ -27,8 +23,8 @@ Example.timescale = 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/views.js b/examples/views.js index 30afb60..47af314 100644 --- a/examples/views.js +++ b/examples/views.js @@ -4,16 +4,12 @@ Example.views = function() { var Engine = Matter.Engine, Render = Matter.Render, Runner = Matter.Runner, - Body = Matter.Body, Events = Matter.Events, - Composite = Matter.Composite, Composites = Matter.Composites, Common = Matter.Common, - Constraint = Matter.Constraint, MouseConstraint = Matter.MouseConstraint, Mouse = Matter.Mouse, World = Matter.World, - Vertices = Matter.Vertices, Vector = Matter.Vector, Bounds = Matter.Bounds, Bodies = Matter.Bodies; @@ -27,8 +23,8 @@ Example.views = 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), hasBounds: true, showAngleIndicator: true } @@ -77,6 +73,8 @@ Example.views = function() { World.add(world, [ stack, + // 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 }) diff --git a/examples/wrapPlugin.js b/examples/wrapPlugin.js index 45779ad..f5da176 100644 --- a/examples/wrapPlugin.js +++ b/examples/wrapPlugin.js @@ -1,7 +1,6 @@ (function() { var Body = Matter.Body, - Common = Matter.Common, Composite = Matter.Composite; var MatterWrap = { diff --git a/examples/wreckingBall.js b/examples/wreckingBall.js index 160ddf6..f1c6b0d 100644 --- a/examples/wreckingBall.js +++ b/examples/wreckingBall.js @@ -4,9 +4,7 @@ Example.wreckingBall = function() { var Engine = Matter.Engine, Render = Matter.Render, Runner = Matter.Runner, - Composite = Matter.Composite, Composites = Matter.Composites, - Common = Matter.Common, MouseConstraint = Matter.MouseConstraint, Mouse = Matter.Mouse, World = Matter.World, @@ -22,8 +20,8 @@ Example.wreckingBall = 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 } }); @@ -44,7 +42,11 @@ Example.wreckingBall = function() { World.add(world, [ stack, - 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 }) ]); var ball = Bodies.circle(100, 400, 50, { density: 0.04, frictionAir: 0.005}); @@ -73,7 +75,10 @@ Example.wreckingBall = 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 {