mirror of
https://github.com/liabru/matter-js.git
synced 2025-01-12 16:08:50 -05:00
updated demo to use composite generic methods
This commit is contained in:
liabru
parent
3dfe9b553e
commit
1a31931473
1 changed files with 88 additions and 74 deletions
162
demo/js/Demo.js
162
demo/js/Demo.js
|
|
@ -158,7 +158,7 @@
|
|||
&& Vertices.contains(body.vertices, mouse.position)) {
|
||||
|
||||
// remove the body that was clicked on
|
||||
Composite.removeBody(engine.world, body, true);
|
||||
Composite.remove(engine.world, body, true);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -184,7 +184,7 @@
|
|||
|
||||
// if mouse was close, remove the constraint
|
||||
if (distA < 100 || distB < 100) {
|
||||
Composite.removeConstraint(engine.world, constraint, true);
|
||||
Composite.remove(engine.world, constraint, true);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -195,10 +195,12 @@
|
|||
_engine.world.gravity.y = 1;
|
||||
|
||||
var offset = 5;
|
||||
World.addBody(_world, Bodies.rectangle(400, -offset, 800.5 + 2 * offset, 50.5, { isStatic: true }));
|
||||
World.addBody(_world, Bodies.rectangle(400, 600 + offset, 800.5 + 2 * offset, 50.5, { isStatic: true }));
|
||||
World.addBody(_world, Bodies.rectangle(800 + offset, 300, 50.5, 600.5 + 2 * offset, { isStatic: true }));
|
||||
World.addBody(_world, Bodies.rectangle(-offset, 300, 50.5, 600.5 + 2 * offset, { isStatic: true }));
|
||||
World.add(_world, [
|
||||
Bodies.rectangle(400, -offset, 800.5 + 2 * offset, 50.5, { isStatic: true }),
|
||||
Bodies.rectangle(400, 600 + offset, 800.5 + 2 * offset, 50.5, { isStatic: true }),
|
||||
Bodies.rectangle(800 + offset, 300, 50.5, 600.5 + 2 * offset, { isStatic: true }),
|
||||
Bodies.rectangle(-offset, 300, 50.5, 600.5 + 2 * offset, { isStatic: true })
|
||||
]);
|
||||
|
||||
var renderOptions = _engine.render.options;
|
||||
renderOptions.wireframes = true;
|
||||
|
|
@ -214,10 +216,8 @@
|
|||
renderOptions.showShadows = false;
|
||||
renderOptions.background = '#fff';
|
||||
|
||||
if (_isMobile) {
|
||||
renderOptions.showAngleIndicator = false;
|
||||
if (_isMobile)
|
||||
renderOptions.showDebug = true;
|
||||
}
|
||||
};
|
||||
|
||||
// all functions below are for setting up scenes
|
||||
|
|
@ -248,7 +248,7 @@
|
|||
}
|
||||
});
|
||||
|
||||
World.addComposite(_world, stack);
|
||||
World.add(_world, stack);
|
||||
|
||||
var renderOptions = _engine.render.options;
|
||||
};
|
||||
|
|
@ -274,7 +274,7 @@
|
|||
}
|
||||
});
|
||||
|
||||
World.addComposite(_world, stack);
|
||||
World.add(_world, stack);
|
||||
|
||||
var renderOptions = _engine.render.options;
|
||||
renderOptions.wireframes = false;
|
||||
|
|
@ -285,25 +285,24 @@
|
|||
};
|
||||
|
||||
Demo.chains = function() {
|
||||
var _world = _engine.world;
|
||||
var _world = _engine.world,
|
||||
groupId = Body.nextGroupId();
|
||||
|
||||
Demo.reset();
|
||||
|
||||
var groupId = Body.nextGroupId();
|
||||
|
||||
|
||||
var ropeA = Composites.stack(200, 100, 5, 2, 10, 10, function(x, y, column, row) {
|
||||
return Bodies.rectangle(x, y, 50, 20, { groupId: groupId });
|
||||
});
|
||||
|
||||
Composites.chain(ropeA, 0.5, 0, -0.5, 0, { stiffness: 0.8, length: 2 });
|
||||
Composite.addConstraint(ropeA, Constraint.create({
|
||||
Composite.add(ropeA, Constraint.create({
|
||||
bodyB: ropeA.bodies[0],
|
||||
pointB: { x: -25, y: 0 },
|
||||
pointA: { x: 200, y: 100 },
|
||||
stiffness: 0.5
|
||||
}));
|
||||
|
||||
World.addComposite(_world, ropeA);
|
||||
World.add(_world, ropeA);
|
||||
|
||||
groupId = Body.nextGroupId();
|
||||
|
||||
|
|
@ -312,32 +311,33 @@
|
|||
});
|
||||
|
||||
Composites.chain(ropeB, 0.5, 0, -0.5, 0, { stiffness: 0.8, length: 2 });
|
||||
Composite.addConstraint(ropeB, Constraint.create({
|
||||
Composite.add(ropeB, Constraint.create({
|
||||
bodyB: ropeB.bodies[0],
|
||||
pointB: { x: -20, y: 0 },
|
||||
pointA: { x: 500, y: 100 },
|
||||
stiffness: 0.5
|
||||
}));
|
||||
|
||||
World.addComposite(_world, ropeB);
|
||||
World.add(_world, ropeB);
|
||||
};
|
||||
|
||||
Demo.car = function() {
|
||||
var _world = _engine.world;
|
||||
var _world = _engine.world,
|
||||
scale;
|
||||
|
||||
Demo.reset();
|
||||
|
||||
var scale;
|
||||
|
||||
scale = 0.8;
|
||||
World.addComposite(_world, Composites.car(150, 100, 100 * scale, 40 * scale, 30 * scale));
|
||||
World.add(_world, Composites.car(150, 100, 100 * scale, 40 * scale, 30 * scale));
|
||||
|
||||
scale = 0.7;
|
||||
World.addComposite(_world, Composites.car(350, 300, 100 * scale, 40 * scale, 30 * scale));
|
||||
World.add(_world, Composites.car(350, 300, 100 * scale, 40 * scale, 30 * scale));
|
||||
|
||||
World.addBody(_world, Bodies.rectangle(200, 150, 700, 20, { isStatic: true, angle: Math.PI * 0.06 }));
|
||||
World.addBody(_world, Bodies.rectangle(500, 350, 700, 20, { isStatic: true, angle: -Math.PI * 0.06 }));
|
||||
World.addBody(_world, Bodies.rectangle(340, 580, 700, 20, { isStatic: true, angle: Math.PI * 0.04 }));
|
||||
World.add(_world, [
|
||||
Bodies.rectangle(200, 150, 700, 20, { isStatic: true, angle: Math.PI * 0.06 }),
|
||||
Bodies.rectangle(500, 350, 700, 20, { isStatic: true, angle: -Math.PI * 0.06 }),
|
||||
Bodies.rectangle(340, 580, 700, 20, { isStatic: true, angle: Math.PI * 0.04 })
|
||||
]);
|
||||
|
||||
var renderOptions = _engine.render.options;
|
||||
renderOptions.showAngleIndicator = true;
|
||||
|
|
@ -349,14 +349,20 @@
|
|||
|
||||
Demo.reset();
|
||||
|
||||
World.addBody(_world, Bodies.rectangle(300, 180, 700, 20, { isStatic: true, angle: Math.PI * 0.06 }));
|
||||
World.addBody(_world, Bodies.rectangle(300, 70, 40, 40, { friction: 0.001 }));
|
||||
World.add(_world, [
|
||||
Bodies.rectangle(300, 180, 700, 20, { isStatic: true, angle: Math.PI * 0.06 }),
|
||||
Bodies.rectangle(300, 70, 40, 40, { friction: 0.001 })
|
||||
]);
|
||||
|
||||
World.addBody(_world, Bodies.rectangle(300, 350, 700, 20, { isStatic: true, angle: Math.PI * 0.06 }));
|
||||
World.addBody(_world, Bodies.rectangle(300, 250, 40, 40, { friction: 0.0005 }));
|
||||
World.add(_world, [
|
||||
Bodies.rectangle(300, 350, 700, 20, { isStatic: true, angle: Math.PI * 0.06 }),
|
||||
Bodies.rectangle(300, 250, 40, 40, { friction: 0.0005 })
|
||||
]);
|
||||
|
||||
World.addBody(_world, Bodies.rectangle(300, 520, 700, 20, { isStatic: true, angle: Math.PI * 0.06 }));
|
||||
World.addBody(_world, Bodies.rectangle(300, 430, 40, 40, { friction: 0 }));
|
||||
World.add(_world, [
|
||||
Bodies.rectangle(300, 520, 700, 20, { isStatic: true, angle: Math.PI * 0.06 }),
|
||||
Bodies.rectangle(300, 430, 40, 40, { friction: 0 })
|
||||
]);
|
||||
|
||||
var renderOptions = _engine.render.options;
|
||||
renderOptions.showAngleIndicator = true;
|
||||
|
|
@ -368,11 +374,11 @@
|
|||
|
||||
Demo.reset();
|
||||
|
||||
World.addBody(_world, Bodies.rectangle(200, 100, 60, 60, { frictionAir: 0.001 }));
|
||||
|
||||
World.addBody(_world, Bodies.rectangle(400, 100, 60, 60, { frictionAir: 0.05 }));
|
||||
|
||||
World.addBody(_world, Bodies.rectangle(600, 100, 60, 60, { frictionAir: 0.1 }));
|
||||
World.add(_world, [
|
||||
Bodies.rectangle(200, 100, 60, 60, { frictionAir: 0.001 }),
|
||||
Bodies.rectangle(400, 100, 60, 60, { frictionAir: 0.05 }),
|
||||
Bodies.rectangle(600, 100, 60, 60, { frictionAir: 0.1 })
|
||||
]);
|
||||
|
||||
var renderOptions = _engine.render.options;
|
||||
renderOptions.showAngleIndicator = true;
|
||||
|
|
@ -400,7 +406,7 @@
|
|||
}
|
||||
});
|
||||
|
||||
World.addComposite(_world, stack);
|
||||
World.add(_world, stack);
|
||||
|
||||
_engine.enableSleeping = true;
|
||||
|
||||
|
|
@ -428,7 +434,7 @@
|
|||
}
|
||||
});
|
||||
|
||||
World.addComposite(_world, stack);
|
||||
World.add(_world, stack);
|
||||
|
||||
var renderOptions = _engine.render.options;
|
||||
renderOptions.showBroadphase = true;
|
||||
|
|
@ -457,7 +463,7 @@
|
|||
}
|
||||
});
|
||||
|
||||
World.addComposite(_world, stack);
|
||||
World.add(_world, stack);
|
||||
|
||||
var renderOptions = _engine.render.options;
|
||||
};
|
||||
|
|
@ -471,11 +477,13 @@
|
|||
return Bodies.circle(x, y, Common.random(10, 20), { friction: 0.00001, restitution: 0.5, density: 0.001 });
|
||||
});
|
||||
|
||||
World.addComposite(_world, stack);
|
||||
World.add(_world, stack);
|
||||
|
||||
World.addBody(_world, Bodies.rectangle(200, 150, 700, 20, { isStatic: true, angle: Math.PI * 0.06 }));
|
||||
World.addBody(_world, Bodies.rectangle(500, 350, 700, 20, { isStatic: true, angle: -Math.PI * 0.06 }));
|
||||
World.addBody(_world, Bodies.rectangle(340, 580, 700, 20, { isStatic: true, angle: Math.PI * 0.04 }));
|
||||
World.add(_world, [
|
||||
Bodies.rectangle(200, 150, 700, 20, { isStatic: true, angle: Math.PI * 0.06 }),
|
||||
Bodies.rectangle(500, 350, 700, 20, { isStatic: true, angle: -Math.PI * 0.06 }),
|
||||
Bodies.rectangle(340, 580, 700, 20, { isStatic: true, angle: Math.PI * 0.04 })
|
||||
]);
|
||||
};
|
||||
|
||||
Demo.newtonsCradle = function() {
|
||||
|
|
@ -484,11 +492,11 @@
|
|||
Demo.reset();
|
||||
|
||||
var cradle = Composites.newtonsCradle(300, 100, 5, 30, 200);
|
||||
World.addComposite(_world, cradle);
|
||||
World.add(_world, cradle);
|
||||
Body.translate(cradle.bodies[0], { x: -180, y: -100 });
|
||||
|
||||
cradle = Composites.newtonsCradle(250, 400, 7, 20, 140);
|
||||
World.addComposite(_world, cradle);
|
||||
World.add(_world, cradle);
|
||||
Body.translate(cradle.bodies[0], { x: -140, y: -100 });
|
||||
|
||||
var renderOptions = _engine.render.options;
|
||||
|
|
@ -505,7 +513,7 @@
|
|||
return Bodies.rectangle(x, y, 40, 40);
|
||||
});
|
||||
|
||||
World.addComposite(_world, stack);
|
||||
World.add(_world, stack);
|
||||
|
||||
var renderOptions = _engine.render.options;
|
||||
};
|
||||
|
|
@ -519,7 +527,7 @@
|
|||
return Bodies.circle(x, y, 20);
|
||||
});
|
||||
|
||||
World.addComposite(_world, stack);
|
||||
World.add(_world, stack);
|
||||
|
||||
var renderOptions = _engine.render.options;
|
||||
};
|
||||
|
|
@ -536,12 +544,12 @@
|
|||
return Bodies.rectangle(x, y, 40, 40, { friction: 0.9, restitution: 0.1 });
|
||||
});
|
||||
|
||||
World.addComposite(_world, stack);
|
||||
World.add(_world, stack);
|
||||
|
||||
var ball = Bodies.circle(100, 400, 50, { density: 0.07, frictionAir: 0.001});
|
||||
|
||||
World.addBody(_world, ball);
|
||||
World.addConstraint(_world, Constraint.create({
|
||||
World.add(_world, ball);
|
||||
World.add(_world, Constraint.create({
|
||||
pointA: { x: 300, y: 100 },
|
||||
bodyB: ball
|
||||
}));
|
||||
|
|
@ -562,10 +570,12 @@
|
|||
return Bodies.circle(x, y, Common.random(15, 30), { restitution: 0.6, friction: 0.1 });
|
||||
});
|
||||
|
||||
World.addComposite(_world, stack);
|
||||
World.addBody(_world, Bodies.polygon(200, 560, 3, 60));
|
||||
World.addBody(_world, Bodies.polygon(400, 560, 5, 60));
|
||||
World.addBody(_world, Bodies.rectangle(600, 560, 80, 80));
|
||||
World.add(_world, [
|
||||
stack,
|
||||
Bodies.polygon(200, 560, 3, 60),
|
||||
Bodies.polygon(400, 560, 5, 60),
|
||||
Bodies.rectangle(600, 560, 80, 80)
|
||||
]);
|
||||
|
||||
var renderOptions = _engine.render.options;
|
||||
};
|
||||
|
|
@ -579,7 +589,7 @@
|
|||
return Bodies.rectangle(x, y, 35, 35);
|
||||
});
|
||||
|
||||
World.addComposite(_world, stack);
|
||||
World.add(_world, stack);
|
||||
|
||||
var renderOptions = _engine.render.options;
|
||||
renderOptions.showAngleIndicator = false;
|
||||
|
|
@ -594,7 +604,7 @@
|
|||
return Bodies.rectangle(x, y, 25, 25);
|
||||
});
|
||||
|
||||
World.addComposite(_world, stack);
|
||||
World.add(_world, stack);
|
||||
|
||||
var renderOptions = _engine.render.options;
|
||||
renderOptions.showAngleIndicator = false;
|
||||
|
|
@ -609,7 +619,7 @@
|
|||
return Bodies.rectangle(x, y, 40, 40);
|
||||
});
|
||||
|
||||
World.addComposite(_world, stack);
|
||||
World.add(_world, stack);
|
||||
|
||||
var renderOptions = _engine.render.options;
|
||||
};
|
||||
|
|
@ -622,11 +632,13 @@
|
|||
var rest = 0.9,
|
||||
space = 600 / 5;
|
||||
|
||||
World.addBody(_world, Bodies.rectangle(100 + space * 0, 150, 50, 50, { restitution: rest }));
|
||||
World.addBody(_world, Bodies.rectangle(100 + space * 1, 150, 50, 50, { restitution: rest, angle: -Math.PI * 0.15 }));
|
||||
World.addBody(_world, Bodies.rectangle(100 + space * 2, 150, 50, 50, { restitution: rest, angle: -Math.PI * 0.25 }));
|
||||
World.addBody(_world, Bodies.circle(100 + space * 3, 150, 25, { restitution: rest }));
|
||||
World.addBody(_world, Bodies.rectangle(100 + space * 5, 150, 180, 20, { restitution: rest, angle: -Math.PI * 0.5 }));
|
||||
World.add(_world, [
|
||||
Bodies.rectangle(100 + space * 0, 150, 50, 50, { restitution: rest }),
|
||||
Bodies.rectangle(100 + space * 1, 150, 50, 50, { restitution: rest, angle: -Math.PI * 0.15 }),
|
||||
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 })
|
||||
]);
|
||||
|
||||
var renderOptions = _engine.render.options;
|
||||
renderOptions.showCollisions = true;
|
||||
|
|
@ -643,7 +655,7 @@
|
|||
return Bodies.circle(x, y, 75, { restitution: 0.9 });
|
||||
});
|
||||
|
||||
World.addComposite(_world, stack);
|
||||
World.add(_world, stack);
|
||||
};
|
||||
|
||||
Demo.events = function() {
|
||||
|
|
@ -655,7 +667,10 @@
|
|||
return Bodies.circle(x, y, 15, { restitution: 1, render: { strokeStyle: '#777' } });
|
||||
});
|
||||
|
||||
World.addComposite(_world, stack);
|
||||
World.add(_world, stack);
|
||||
|
||||
var renderOptions = _engine.render.options;
|
||||
renderOptions.wireframes = false;
|
||||
|
||||
var shakeScene = function(engine) {
|
||||
var bodies = Composite.allBodies(engine.world);
|
||||
|
|
@ -733,9 +748,6 @@
|
|||
_engine.render.options.background = "white";
|
||||
console.log('mouseup at ' + mousePosition.x + ' ' + mousePosition.y);
|
||||
});
|
||||
|
||||
var renderOptions = _engine.render.options;
|
||||
renderOptions.wireframes = false;
|
||||
};
|
||||
|
||||
Demo.sprites = function() {
|
||||
|
|
@ -752,10 +764,12 @@
|
|||
_world.bodies = [];
|
||||
|
||||
// these static walls will not be rendered in this sprites example, see options
|
||||
World.addBody(_world, Bodies.rectangle(400, -offset, 800.5 + 2 * offset, 50.5, options));
|
||||
World.addBody(_world, Bodies.rectangle(400, 600 + offset, 800.5 + 2 * offset, 50.5, options));
|
||||
World.addBody(_world, Bodies.rectangle(800 + offset, 300, 50.5, 600.5 + 2 * offset, options));
|
||||
World.addBody(_world, Bodies.rectangle(-offset, 300, 50.5, 600.5 + 2 * offset, options));
|
||||
World.add(_world, [
|
||||
Bodies.rectangle(400, -offset, 800.5 + 2 * offset, 50.5, options),
|
||||
Bodies.rectangle(400, 600 + offset, 800.5 + 2 * offset, 50.5, options),
|
||||
Bodies.rectangle(800 + offset, 300, 50.5, 600.5 + 2 * offset, options),
|
||||
Bodies.rectangle(-offset, 300, 50.5, 600.5 + 2 * offset, options)
|
||||
]);
|
||||
|
||||
var stack = Composites.stack(20, 20, 15, 4, 0, 0, function(x, y, column, row) {
|
||||
if (Math.random() > 0.35) {
|
||||
|
|
@ -786,7 +800,7 @@
|
|||
}
|
||||
});
|
||||
|
||||
World.addComposite(_world, stack);
|
||||
World.add(_world, stack);
|
||||
|
||||
var renderOptions = _engine.render.options;
|
||||
renderOptions.background = './img/wall-bg.jpg';
|
||||
|
|
|
|||
Loading…
Reference in a new issue