p2s
Version:
A JavaScript 2D physics engine.
88 lines (70 loc) • 2.71 kB
HTML
<html lang="en">
<head>
<title>p2.js and Pixi.js example</title>
<meta charset="utf-8">
<script src="../../demos/js/pixi.js"></script>
<script src="../../build/p2.js"></script>
</head>
<body>
<script>
var renderer, stage, container, graphics, zoom,
world, boxShape, boxBody, planeBody, planeShape;
init();
animate();
function init(){
// Init p2.js
world = new p2.World();
// Add a box
boxShape = new p2.Box({ width: 2, height: 1 });
boxBody = new p2.Body({
mass:1,
position:[0,2],
angularVelocity:1
});
boxBody.addShape(boxShape);
world.addBody(boxBody);
// Add a plane
planeShape = new p2.Plane();
planeBody = new p2.Body({ position:[0,-1] });
planeBody.addShape(planeShape);
world.addBody(planeBody);
// Pixi.js zoom level
zoom = 100;
// Initialize the stage
renderer = PIXI.autoDetectRenderer(600, 400),
stage = new PIXI.Stage(0xFFFFFF);
// We use a container inside the stage for all our content
// This enables us to zoom and translate the content
container = new PIXI.DisplayObjectContainer(),
stage.addChild(container);
// Add the canvas to the DOM
document.body.appendChild(renderer.view);
// Add transform to the container
container.position.x = renderer.width/2; // center at origin
container.position.y = renderer.height/2;
container.scale.x = zoom; // zoom in
container.scale.y = -zoom; // Note: we flip the y axis to make "up" the physics "up"
// Draw the box.
graphics = new PIXI.Graphics();
graphics.beginFill(0xff0000);
graphics.drawRect(-boxShape.width/2, -boxShape.height/2, boxShape.width, boxShape.height);
// Add the box to our container
container.addChild(graphics);
}
// Animation loop
function animate(t){
t = t || 0;
requestAnimationFrame(animate);
// Move physics bodies forward in time
world.step(1/60);
// Transfer positions of the physics objects to Pixi.js
graphics.position.x = boxBody.position[0];
graphics.position.y = boxBody.position[1];
graphics.rotation = boxBody.angle;
// Render scene
renderer.render(stage);
}
</script>
</body>
</html>