Skip to content

Commit

Permalink
improved demo and examples
Browse files Browse the repository at this point in the history
  • Loading branch information
liabru committed Jan 23, 2017
1 parent 719ad64 commit 8cdbb38
Show file tree
Hide file tree
Showing 15 changed files with 74 additions and 64 deletions.
26 changes: 16 additions & 10 deletions examples/attractors.js
Original file line number Diff line number Diff line change
@@ -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,
Expand Down Expand Up @@ -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: {
Expand All @@ -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);
Expand Down
8 changes: 4 additions & 4 deletions examples/avalanche.js
Original file line number Diff line number Diff line change
@@ -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,
Expand Down
8 changes: 4 additions & 4 deletions examples/ballPool.js
Original file line number Diff line number Diff line change
@@ -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,
Expand Down
2 changes: 1 addition & 1 deletion examples/circleStack.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 },
Expand Down
5 changes: 4 additions & 1 deletion examples/cloth.js
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,10 @@ Example.cloth = function() {
mouseConstraint = MouseConstraint.create(engine, {
mouse: mouse,
constraint: {
stiffness: 0.9
stiffness: 0.98,
render: {
visible: false
}
}
});

Expand Down
6 changes: 4 additions & 2 deletions examples/collisionFiltering.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
}));

Expand All @@ -72,7 +73,8 @@ Example.collisionFiltering = function() {
},
render: {
strokeStyle: color,
fillStyle: 'transparent'
fillStyle: 'transparent',
lineWidth: 1
}
});
})
Expand Down
2 changes: 1 addition & 1 deletion examples/compositeManipulation.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 },
Expand Down
3 changes: 2 additions & 1 deletion examples/concave.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
});
Expand Down
27 changes: 14 additions & 13 deletions examples/events.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
}
});

Expand All @@ -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';
}
});

Expand All @@ -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);
Expand Down Expand Up @@ -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);
});

Expand Down
14 changes: 6 additions & 8 deletions examples/gravityPlugin.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}
};
Expand Down
11 changes: 7 additions & 4 deletions examples/sensors.js
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,8 @@ Example.sensors = function() {
isStatic: true,
render: {
strokeStyle: redColor,
fillStyle: 'transparent'
fillStyle: 'transparent',
lineWidth: 1
}
});

Expand All @@ -50,7 +51,8 @@ Example.sensors = function() {
Bodies.rectangle(400, 620, 800, 50, {
isStatic: true,
render: {
fillStyle: 'transparent'
fillStyle: 'transparent',
lineWidth: 1
}
})
]);
Expand All @@ -59,7 +61,8 @@ Example.sensors = function() {
Bodies.circle(400, 40, 30, {
render: {
strokeStyle: greenColor,
fillStyle: 'transparent'
fillStyle: 'transparent',
lineWidth: 1
}
})
);
Expand Down Expand Up @@ -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 },
Expand Down
5 changes: 1 addition & 4 deletions examples/sprites.js
Original file line number Diff line number Diff line change
Expand Up @@ -37,10 +37,7 @@ Example.sprites = function() {
// add bodies
var offset = 10,
options = {
isStatic: true,
render: {
visible: false
}
isStatic: true
};

world.bodies = [];
Expand Down
6 changes: 4 additions & 2 deletions examples/svg.js
Original file line number Diff line number Diff line change
Expand Up @@ -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));
});
Expand All @@ -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));
});
Expand Down
8 changes: 4 additions & 4 deletions examples/terrain.js
Original file line number Diff line number Diff line change
Expand Up @@ -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));
Expand All @@ -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);

Expand Down
7 changes: 2 additions & 5 deletions examples/wrapPlugin.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,5 @@
(function() {

var Body = Matter.Body,
Composite = Matter.Composite;

var MatterWrap = {
name: 'matter-wrap',

Expand All @@ -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];
Expand Down Expand Up @@ -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
});
Expand Down

0 comments on commit 8cdbb38

Please sign in to comment.