javascript
/
tentone.escher.js
Mirror von https://github.com/tentone/escher.js.git


			
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
							<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Physics</title>
</head>
<body>
	<script type="text/javascript" src="../build/escher.js"></script>
	<script type="text/javascript" src="./lib/p2.min.js"></script>
	<script type="text/javascript">
		var division = document.createElement("div");
		division.style.position = "absolute";
		division.style.width = "100%";
		division.style.height = "100%";
		division.style.top = "0px";
		division.style.left = "0px";
		division.style.overflow = "hidden";
		document.body.appendChild(division);

		// Setup the display canvas
		var canvas = document.createElement("canvas");
		canvas.style.position = "absolute";
		canvas.style.width = "100%";
		canvas.style.height = "100%";
		canvas.style.top = "0px";
		canvas.style.left = "0px";
		canvas.width = window.innerWidth;
		canvas.height = window.innerHeight;
		canvas.oncontextmenu = function(event)
		{
			event.preventDefault();
			return false;
		};
		division.appendChild(canvas);

		window.onresize = function()
		{
			canvas.width = window.innerWidth;
			canvas.height = window.innerHeight;
		};


		var group = new Escher.Object2D();
		
		// Init p2.js
		var world = new p2.World();

		// Add a circle
		var circleShape = new p2.Circle({radius: 1});
		var circleBody = new p2.Body({mass: 1, position: [0,0]});
		circleBody.addShape(circleShape);
		world.addBody(circleBody);

		var circle = new Escher.Circle();
		circle.radius = 1.0;
		group.add(circle);

		// Add a plane
		var planeShape = new p2.Plane();
		var planeBody = new p2.Body();
		planeBody.addShape(planeShape);
		world.addBody(planeBody);

		var plane = new Escher.Box();
		plane.box.min.set(-100, 0);
		plane.box.max.set(100, 100);
		group.add(plane);

		var viewport = new Escher.Viewport(canvas);
		viewport.scale = 35.0;
		viewport.position.set(900, 650);

		var time = performance.now();

		var renderer = new Escher.Renderer(canvas);
		renderer.createRenderLoop(group, viewport, function()
		{
			circle.position.set(circleBody.position[0], -circleBody.position[1]);
			plane.position.y = -planeBody.position[1];
			
			// Move physics bodies forward in time
			world.step(1/60);
		});
	</script>
</body>
</html>