foster/liabru-matter-js
0
0
Fork 0
mirror of https://github.com/liabru/matter-js.git synced 2024-11-27 09:50:52 -05:00
Code Issues Wiki Activity

improved demo and examples

Browse source
This commit is contained in:
liabru 2017-01-19 23:36:34 +00:00
parent 719ad649fe
commit 8cdbb38c91
15 changed files with 74 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
examples/attractors.js
View file

@ -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);

8
examples/avalanche.js
View file

@ -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,

8
examples/ballPool.js
View file

@ -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,

2
examples/circleStack.js
View file

@ -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 },

5
examples/cloth.js
View file

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

6
examples/collisionFiltering.js
View file

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

2
examples/compositeManipulation.js
View file

@ -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 },

3
examples/concave.js
View file

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

27
examples/events.js
View file

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

14
examples/gravityPlugin.js
View file

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

11
examples/sensors.js
View file

@ -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 },

5
examples/sprites.js
View file

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

6
examples/svg.js
View file

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

8
examples/terrain.js
View file

@ -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);

7
examples/wrapPlugin.js
View file

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