javascript
/
tentone.escher.js
mirror of https://github.com/tentone/escher.js.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111
							<!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;
		};

		function PhysicsCircle()
		{
			Escher.Circle.call(this);

			this.strokeStyle = null;
			this.fillStyle = Math.random() > 0.5 ? new Escher.ColorStyle("#00FF00") : new Escher.ColorStyle("#0000FF");

			this.radius = 1.0;

			this.shape = new p2.Circle({radius: this.radius});

			this.body = new p2.Body({mass: 1, position: [0,0]});
			this.body.addShape(this.shape);
		}

		PhysicsCircle.prototype = Object.create(Escher.Circle.prototype);
		PhysicsCircle.prototype.onPointerEnter = function(pointer, viewport){};
		PhysicsCircle.prototype.onPointerLeave = function(pointer, viewport){};
		PhysicsCircle.prototype.draw = function(context, viewport, canvas)
		{
			this.position.set(this.body.position[0], -this.body.position[1]);
			
			Escher.Circle.prototype.draw.call(this, context, viewport, canvas);
		}

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

		for(var i = 0; i < 150; i++)
		{		
			var circle = new PhysicsCircle();
			circle.body.position.set([Math.random() * 30 - 15, Math.random() * 200]);
			world.addBody(circle.body);
			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.strokeStyle = null;
		plane.fillStyle = new Escher.ColorStyle("#556677");
		plane.onPointerLeave = null;
		plane.onPointerEnter = null;
		plane.box.min.set(-1000, 0);
		plane.box.max.set(1000, 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()
		{
			plane.position.y = -planeBody.position[1];
			
			// Move physics bodies forward in time
			world.step(1/60);
		});
	</script>
</body>
</html>