From 8cdbb38c911c7a6a3d0cacddcce881e0d6c9ee49 Mon Sep 17 00:00:00 2001 From: liabru Date: Thu, 19 Jan 2017 23:36:34 +0000 Subject: [PATCH] improved demo and examples --- examples/attractors.js | 26 ++++++++++++++++---------- examples/avalanche.js | 8 ++++---- examples/ballPool.js | 8 ++++---- examples/circleStack.js | 2 +- examples/cloth.js | 5 ++++- examples/collisionFiltering.js | 6 ++++-- examples/compositeManipulation.js | 2 +- examples/concave.js | 3 ++- examples/events.js | 27 ++++++++++++++------------- examples/gravityPlugin.js | 14 ++++++-------- examples/sensors.js | 11 +++++++---- examples/sprites.js | 5 +---- examples/svg.js | 6 ++++-- examples/terrain.js | 8 ++++---- examples/wrapPlugin.js | 7 ++----- 15 files changed, 74 insertions(+), 64 deletions(-) diff --git a/examples/attractors.js b/examples/attractors.js index 009eca1..ca6b04f 100644 --- a/examples/attractors.js +++ b/examples/attractors.js @@ -1,11 +1,11 @@ var Example = Example || {}; -Example.attractors = function() { - Matter.use( - 'matter-gravity', - 'matter-wrap' - ); +Matter.use( + 'matter-gravity', + '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), - y: Common.random(-2, 2) + x: Common.random(-speed, speed), + y: Common.random(-speed, speed) }); World.add(world, body); diff --git a/examples/avalanche.js b/examples/avalanche.js index 53baaf7..f54f1a8 100644 --- a/examples/avalanche.js +++ b/examples/avalanche.js @@ -1,10 +1,10 @@ var Example = Example || {}; -Example.avalanche = function() { - Matter.use( - 'matter-wrap' - ); +Matter.use( + 'matter-wrap' +); +Example.avalanche = function() { var Engine = Matter.Engine, Render = Matter.Render, Runner = Matter.Runner, diff --git a/examples/ballPool.js b/examples/ballPool.js index 29af38d..c74468c 100644 --- a/examples/ballPool.js +++ b/examples/ballPool.js @@ -1,10 +1,10 @@ var Example = Example || {}; -Example.ballPool = function() { - Matter.use( - 'matter-wrap' - ); +Matter.use( + 'matter-wrap' +); +Example.ballPool = function() { var Engine = Matter.Engine, Render = Matter.Render, Runner = Matter.Runner, diff --git a/examples/circleStack.js b/examples/circleStack.js index f432c19..b93bd14 100644 --- a/examples/circleStack.js +++ b/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 }, diff --git a/examples/cloth.js b/examples/cloth.js index 15fb554..7586cf0 100644 --- a/examples/cloth.js +++ b/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 + } } }); diff --git a/examples/collisionFiltering.js b/examples/collisionFiltering.js index 17503d2..271b7c1 100644 --- a/examples/collisionFiltering.js +++ b/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 } }); }) diff --git a/examples/compositeManipulation.js b/examples/compositeManipulation.js index 29ee395..a1abdbd 100644 --- a/examples/compositeManipulation.js +++ b/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 }, diff --git a/examples/concave.js b/examples/concave.js index 096a2bc..08fcfde 100644 --- a/examples/concave.js +++ b/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); }); diff --git a/examples/events.js b/examples/events.js index ae68d4f..a4e8099 100644 --- a/examples/events.js +++ b/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.bodyB.render.fillStyle = '#bbbbbb'; + pair.bodyA.render.fillStyle = '#333'; + 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.bodyB.render.fillStyle = '#aaaaaa'; + pair.bodyA.render.fillStyle = '#333'; + 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, 600, 800, 50, { isStatic: true }), - Bodies.rectangle(800, 300, 50, 600, { isStatic: true }), - Bodies.rectangle(0, 300, 50, 600, { isStatic: true }) + Bodies.rectangle(400, 0, 800, 50, { isStatic: true, render: bodyStyle }), + Bodies.rectangle(400, 600, 800, 50, { isStatic: true, render: bodyStyle }), + Bodies.rectangle(800, 300, 50, 600, { isStatic: true, render: bodyStyle }), + 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); }); diff --git a/examples/gravityPlugin.js b/examples/gravityPlugin.js index 1b4cf4f..971ede8 100644 --- a/examples/gravityPlugin.js +++ b/examples/gravityPlugin.js @@ -25,16 +25,14 @@ }, applyGravity: function(bodyA, bodyB) { - var Vector = Matter.Vector, - Body = Matter.Body, - bToA = Vector.sub(bodyB.position, bodyA.position), - distanceSq = Vector.magnitudeSquared(bToA) || 0.0001, - normal = Vector.normalise(bToA), + var bToA = Matter.Vector.sub(bodyB.position, bodyA.position), + distanceSq = Matter.Vector.magnitudeSquared(bToA) || 0.0001, + normal = Matter.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)); - Body.applyForce(bodyB, bodyB.position, force); + Matter.Body.applyForce(bodyA, bodyA.position, Matter.Vector.neg(force)); + Matter.Body.applyForce(bodyB, bodyB.position, force); } } }; diff --git a/examples/sensors.js b/examples/sensors.js index f3d22c1..d9a0fc2 100644 --- a/examples/sensors.js +++ b/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 }, diff --git a/examples/sprites.js b/examples/sprites.js index 8938200..b4349bb 100644 --- a/examples/sprites.js +++ b/examples/sprites.js @@ -37,10 +37,7 @@ Example.sprites = function() { // add bodies var offset = 10, options = { - isStatic: true, - render: { - visible: false - } + isStatic: true }; world.bodies = []; diff --git a/examples/svg.js b/examples/svg.js index 0242cd1..42e8c2e 100644 --- a/examples/svg.js +++ b/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)); }); diff --git a/examples/terrain.js b/examples/terrain.js index ac0e95a..b23cbb1 100644 --- a/examples/terrain.js +++ b/examples/terrain.js @@ -37,8 +37,7 @@ Example.terrain = function() { var terrain; $.get('./svg/terrain.svg').done(function(data) { - var vertexSets = [], - color = Common.choose(['#556270', '#4ECDC4', '#C7F464', '#FF6B6B', '#C44D58']); + var vertexSets = []; $(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, - strokeStyle: color + fillStyle: '#2e2b44', + strokeStyle: '#2e2b44', + lineWidth: 1 } }, true); diff --git a/examples/wrapPlugin.js b/examples/wrapPlugin.js index f5da176..2749a99 100644 --- a/examples/wrapPlugin.js +++ b/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 });