<!DOCTYPE html>
<html lang="en">
<head>
<title>p2.js Canvas mousejoint example</title>
<meta charset="utf-8">
<script src="../../build/p2.js"></script>
</head>
<body>
<!-- The canvas, where we draw stuff -->
<canvas width="600" height="400" id="myCanvas"></canvas>
<script>
var canvas, ctx, w, h, world, boxBody, planeBody, mouseConstraint, mouseBody;
var scaleX = 50, scaleY = -50;
init();
requestAnimationFrame(animate);
function init(){
// Init canvas
canvas = document.getElementById("myCanvas");
w = canvas.width;
h = canvas.height;
ctx = canvas.getContext("2d");
ctx.lineWidth = 0.05;
// 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,3],
angularVelocity:1
});
boxBody.addShape(boxShape);
world.addBody(boxBody);
// Add a plane
planeShape = new p2.Plane();
planeBody = new p2.Body();
planeBody.addShape(planeShape);
world.addBody(planeBody);
// Create a body for the cursor
mouseBody = new p2.Body();
world.addBody(mouseBody);
canvas.addEventListener('mousedown', function(event){
// Convert the canvas coordinate to physics coordinates
var position = getPhysicsCoord(event);
// Check if the cursor is inside the box
var hitBodies = world.hitTest(position, [boxBody]);
if(hitBodies.length){
// Move the mouse body to the cursor position
mouseBody.position[0] = position[0];
mouseBody.position[1] = position[1];
// Create a RevoluteConstraint.
// This constraint lets the bodies rotate around a common point
mouseConstraint = new p2.RevoluteConstraint(mouseBody, boxBody, {
worldPivot: position,
collideConnected:false
});
world.addConstraint(mouseConstraint);
}
});
// Sync the mouse body to be at the cursor position
canvas.addEventListener('mousemove', function(event){
var position = getPhysicsCoord(event);
mouseBody.position[0] = position[0];
mouseBody.position[1] = position[1];
});
// Remove the mouse constraint on mouse up
canvas.addEventListener('mouseup', function(event){
world.removeConstraint(mouseConstraint);
mouseConstraint = null;
});
}
// Convert a canvas coordiante to physics coordinate
function getPhysicsCoord(mouseEvent){
var rect = canvas.getBoundingClientRect();
var x = mouseEvent.clientX - rect.left;
var y = mouseEvent.clientY - rect.top;
x = (x - w / 2) / scaleX;
y = (y - h / 2) / scaleY;
return [x, y];
}
function drawbox(){
ctx.beginPath();
var x = boxBody.interpolatedPosition[0],
y = boxBody.interpolatedPosition[1];
ctx.save();
ctx.translate(x, y); // Translate to the center of the box
ctx.rotate(boxBody.interpolatedAngle); // Rotate to the box body frame
ctx.rect(-boxShape.width/2, -boxShape.height/2, boxShape.width, boxShape.height);
ctx.stroke();
ctx.restore();
}
function drawPlane(){
var y = planeBody.interpolatedPosition[1];
ctx.moveTo(-w, y);
ctx.lineTo( w, y);
ctx.stroke();
}
function render(){
// Clear the canvas
ctx.clearRect(0,0,w,h);
// Transform the canvas
ctx.save();
ctx.translate(w/2, h/2); // Translate to the center
ctx.scale(scaleX, scaleY);
// Draw all bodies
drawbox();
drawPlane();
// Restore transform
ctx.restore();
}
var lastTime, timeStep = 1 / 60, maxSubSteps = 5;
// Animation loop
function animate(time){
requestAnimationFrame(animate);
var dt = lastTime ? (time - lastTime) / 1000 : 0;
dt = Math.min(1 / 10, dt);
lastTime = time;
// Move physics bodies forward in time
world.step(timeStep, dt, maxSubSteps);
// Render scene
render();
}
</script>
</body>
</html>cedarcantab
Comments