首页 发现 帮助
登录
javascript
/
tentone.escher.js
镜像自地址 https://github.com/tentone/escher.js.git
2
0
派生 0
文件 工单管理 0 Wiki
浏览代码

Physics example

tentone 6 年之前
父节点
2d63a14ea7
当前提交
57e1611e0c
共有 6 个文件被更改，包括 141 次插入 和 18 次删除
合并视图 显示文件统计
  1. 23 0
      examples/lib/p2.min.js
  2. 86 0
      examples/physics.html
  3. 9 6
      source/objects/BezierCurve.js
  4. 4 2
      source/objects/Box.js
  5. 10 5
      source/objects/Circle.js
  6. 9 5
      source/objects/Line.js

文件差异内容过多而无法显示
+ 23 - 0
examples/lib/p2.min.js


+ 86 - 0
examples/physics.html
查看文件 

@@ -0,0 +1,86 @@
 
+<!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();
 
+		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>

+ 9 - 6
source/objects/BezierCurve.js
查看文件 

@@ -39,17 +39,21 @@ function BezierCurve()
 
 	this.toCp = new Vector2();
 
 	this.toCp = new Vector2();
 
 
 
 	/**
 
 	/**
 
-	 * Color of the line.
 
+	 * Dash line pattern to be used, if empty draws a solid line.
 
+	 *
 
+	 * Dash parttern is defined as the size of dashes as pairs of space with no line and with line.
 
+	 *
 
+	 * E.g if the daspattern is [1, 2] we get 1 point with line, 2 without line repeat infinitelly.
 
 	 */
 
 	 */
 
-	this.strokeStyle = "#000000";
 
+	this.dashPattern = [5, 5];
 
 
 
 	/**
 
 	/**
 
-	 * Dash line pattern to be used, is empty draws a solid line.
 
+	 * Style of the object line.
 
 	 */
 
 	 */
 
-	this.dashPattern = [5, 5];
 
+	this.strokeStyle = "#000000";
 
 
 
 	/**
 
 	/**
 
-	 * BezierCurve width.
 
+	 * Line width of the line.
 
 	 */
 
 	 */
 
 	this.lineWidth = 1;
 
 	this.lineWidth = 1;
 
 }
 
 }
 
@@ -79,7 +83,6 @@ BezierCurve.curveHelper = function(object)
 
 	fromLine.to = object.fromCp;
 
 	fromLine.to = object.fromCp;
 
 	object.parent.add(fromLine);
 
 	object.parent.add(fromLine);
 
 
 
-
 
 	var toCp = new Circle();
 
 	var toCp = new Circle();
 
 	toCp.radius = 3;
 
 	toCp.radius = 3;
 
 	toCp.layer = object.layer + 1;
 
 	toCp.layer = object.layer + 1;

+ 4 - 2
source/objects/Box.js
查看文件 

@@ -21,12 +21,14 @@ function Box()
 
 	this.box = new Box2(new Vector2(-50, -35), new Vector2(50, 35));
 
 	this.box = new Box2(new Vector2(-50, -35), new Vector2(50, 35));
 
 
 
 	/**
 
 	/**
 
-	 * Color of the box border line.
 
+	 * Style of the object border line.
 
+	 *
 
+	 * If set null it is ignored.
 
 	 */
 
 	 */
 
 	this.strokeStyle = "#000000";
 
 	this.strokeStyle = "#000000";
 
 
 
 	/**
 
 	/**
 
-	 * Line width.
 
+	 * Line width, only used if a valid strokeStyle is defined.
 
 	 */
 
 	 */
 
 	this.lineWidth = 1;
 
 	this.lineWidth = 1;

+ 10 - 5
source/objects/Circle.js
查看文件 

@@ -18,12 +18,14 @@ function Circle()
 
 	this.radius = 10.0;
 
 	this.radius = 10.0;
 
 
 
 	/**
 
 	/**
 
-	 * Color of the circle border line.
 
+	 * Style of the object border line.
 
+	 *
 
+	 * If set null it is ignored.
 
 	 */
 
 	 */
 
 	this.strokeStyle = "#000000";
 
 	this.strokeStyle = "#000000";
 
 
 
 	/**
 
 	/**
 
-	 * Line width.
 
+	 * Line width, only used if a valid strokeStyle is defined.
 
 	 */
 
 	 */
 
 	this.lineWidth = 1;
 
 	this.lineWidth = 1;
 
 
 
@@ -58,9 +60,12 @@ Circle.prototype.draw = function(context, viewport, canvas)
 
 	context.fillStyle = this.fillStyle;
 
 	context.fillStyle = this.fillStyle;
 
 	context.fill();
 
 	context.fill();
 
 
 
-	context.lineWidth = this.lineWidth;
 
-	context.strokeStyle = this.strokeStyle;
 
-	context.stroke();
 
+	if(this.strokeStyle !== null)
 
+	{
 
+		context.lineWidth = this.lineWidth;
 
+		context.strokeStyle = this.strokeStyle;
 
+		context.stroke();
 
+	}
 
 };
 
 };
 
 
 
 export {Circle};
 
 export {Circle};

+ 9 - 5
source/objects/Line.js
查看文件 

@@ -27,17 +27,21 @@ function Line()
 
 	this.to = new Vector2();
 
 	this.to = new Vector2();
 
 
 
 	/**
 
 	/**
 
-	 * Color of the line.
 
+	 * Dash line pattern to be used, if empty draws a solid line.
 
+	 *
 
+	 * Dash parttern is defined as the size of dashes as pairs of space with no line and with line.
 
+	 *
 
+	 * E.g if the daspattern is [1, 2] we get 1 point with line, 2 without line repeat infinitelly.
 
 	 */
 
 	 */
 
-	this.strokeStyle = "#000000";
 
+	this.dashPattern = [5, 5];
 
 
 
 	/**
 
 	/**
 
-	 * Dash line pattern to be used, is empty draws a solid line.
 
+	 * Style of the object line.
 
 	 */
 
 	 */
 
-	this.dashPattern = [5, 5];
 
+	this.strokeStyle = "#000000";
 
 
 
 	/**
 
 	/**
 
-	 * Line width.
 
+	 * Line width of the line.
 
 	 */
 
 	 */
 
 	this.lineWidth = 1;
 
 	this.lineWidth = 1;
 
 }
 
 }

部分文件因为文件数量过多而无法显示