Home Explore Help
Sign In
javascript
/
tentone.escher.js
mirror of https://github.com/tentone/escher.js.git
2
0
Fork 0
Files Issues 0 Wiki
Browse Source

Examples

tentone 6 years ago
parent
071cc1d788
commit
e31b44f810
5 changed files with 67 additions and 66 deletions
Unified View Show Diff Stats
  1. 22 3
      README.md
  2. 1 1
      examples/diagram.html
  3. 1 3
      examples/mask.html
  4. 42 55
      examples/snake.html
  5. 1 4
      examples/stress.html

+ 22 - 3
README.md
View File 

@@ -15,8 +15,9 @@
 
 
 
 - There are a couple of example in the example folder, they can be used as base for your project.
 
 - There are a couple of example in the example folder, they can be used as base for your project.
 
   - [Diagram](https://tentone.github.io/trenette.js/examples/diagram)
 
   - [Diagram](https://tentone.github.io/trenette.js/examples/diagram)
 
-  - [Stress test](https://tentone.github.io/trenette.js/examples/stress)
 
   - [Masks](https://tentone.github.io/trenette.js/examples/mask)
 
   - [Masks](https://tentone.github.io/trenette.js/examples/mask)
 
+  - [Snake Game](https://tentone.github.io/trenette.js/examples/snake)
 
+  - [Stress test](https://tentone.github.io/trenette.js/examples/stress)
 
 - There is also available API documentation containing implementation details about all the internal components of the framework and detailed functionality descriptions.
 
 - There is also available API documentation containing implementation details about all the internal components of the framework and detailed functionality descriptions.
 
   - [API Documentation](https://tentone.github.io/trenette.js/docs/)
 
   - [API Documentation](https://tentone.github.io/trenette.js/docs/)
 
 
 
@@ -27,6 +28,25 @@
 
 - Trenette is based on web canvas, it requires a DOM canvas element to draw its content.
 
 - Trenette is based on web canvas, it requires a DOM canvas element to draw its content.
 
 - It is necessary for the canvas element width and height parameters to be properly configured since their values are used to process user input.
 
 - It is necessary for the canvas element width and height parameters to be properly configured since their values are used to process user input.
 
 - When using other DOM elements with the framework is also necessary to setup a DOM div to store these elements. (Booth the canvas and division should have the same position and size and should be aligned).
 
 - When using other DOM elements with the framework is also necessary to setup a DOM div to store these elements. (Booth the canvas and division should have the same position and size and should be aligned).
 
+- The code bellow shows how a canvas could be configured for a full screen setup.
 
+
 
+```javascript
 
+var canvas = document.createElement("canvas");
 
+canvas.style.width = "100%";
 
+canvas.style.height = "100%";
 
+canvas.style.top = "0px";
 
+canvas.style.left = "0px";
 
+canvas.style.position = "absolute";
 
+canvas.width = window.innerWidth;
 
+canvas.height = window.innerHeight;
 
+document.body.appendChild(canvas);
 
+
 
+document.body.onresize = function()
 
+{
 
+canvas.width = window.innerWidth;
 
+canvas.height = window.innerHeight;
 
+};
 
+```
 
 
 
 
 
 
 
@@ -36,7 +56,7 @@
 
 - The `draw(context, viewport, canvas)` function is where the object gets draw into the screen, here you can implement your custom object as if it was drawn alone in a canvas.
 
 - The `draw(context, viewport, canvas)` function is where the object gets draw into the screen, here you can implement your custom object as if it was drawn alone in a canvas.
 
 - The `transform(context, viewport, canvas)` is where the object matrix gets applied to the canvas drawing context, it is assumed that the viewport transformation was pre-applied.
 
 - The `transform(context, viewport, canvas)` is where the object matrix gets applied to the canvas drawing context, it is assumed that the viewport transformation was pre-applied.
 
 - Consider the point zero the origin of the object, every object has a position, rotation, scale and origin points used to control the object transform, these points don't need to be considered in the draw method.
 
 - Consider the point zero the origin of the object, every object has a position, rotation, scale and origin points used to control the object transform, these points don't need to be considered in the draw method.
 
-- Example of a custom element, drawing a custom box with a red gradient.
 
+- Example of a custom element, drawing a custom box with a red gradient box. Its also possible to extend other base objects like `Box` that already includes the necessary code for mouse events.
 
 
 
 ```javascript
 
 ```javascript
 
 var object = new Trenette.Object2D();
 
 var object = new Trenette.Object2D();
 
@@ -64,7 +84,6 @@ object.draw = function(context, viewport, canvas)
 
 onPointerEnter(pointer, viewport);
 
 onPointerEnter(pointer, viewport);
 
 
 
 // Called when the was inside of the object and leaves the object.
 
 // Called when the was inside of the object and leaves the object.
 
-
 
 onPointerLeave(pointer, viewport);
 
 onPointerLeave(pointer, viewport);
 
 
 
 // Called while the pointer is over (inside) of the object.
 
 // Called while the pointer is over (inside) of the object.

+ 1 - 1
examples/diagram.html
View File 

@@ -2,7 +2,7 @@
 
 <html>
 
 <html>
 
 <head>
 
 <head>
 
 	<meta charset="utf-8">
 
 	<meta charset="utf-8">
 
-	<title>Example</title>
 
+	<title>Diagram</title>
 
 </head>
 
 </head>
 
 <body>
 
 <body>
 
 	<script type="text/javascript" src="../build/trenette.js"></script>
 
 	<script type="text/javascript" src="../build/trenette.js"></script>

+ 1 - 3
examples/mask.html
View File 

@@ -1,16 +1,14 @@
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
 <html>
 
 <html>
 
 <head>
 
 <head>
 
+	<title>Mask</title>
 
 	<meta charset="utf-8">
 
 	<meta charset="utf-8">
 
-	<title>Example Stencil</title>
 
 </head>
 
 </head>
 
 <body>
 
 <body>
 
 	<script type="text/javascript" src="../build/trenette.js"></script>
 
 	<script type="text/javascript" src="../build/trenette.js"></script>
 
 
 
 	<script type="text/javascript">
 
 	<script type="text/javascript">
 
 
 
-		window.runLoop = true;
 
-
 
 		var division = document.createElement("div");
 
 		var division = document.createElement("div");
 
 		division.style.position = "absolute";
 
 		division.style.position = "absolute";
 
 		division.style.width = "100%";
 
 		division.style.width = "100%";

+ 42 - 55
examples/snake.html
View File 

@@ -5,8 +5,10 @@
 
 	<meta charset="utf-8">
 
 	<meta charset="utf-8">
 
 </head>
 
 </head>
 
 <body>
 
 <body>
 
+	<script type="text/javascript" src="../build/trenette.js"></script>
 
 
 
 	<script type="text/javascript">
 
 	<script type="text/javascript">
 
+
 
 		var canvas = document.createElement("canvas");
 
 		var canvas = document.createElement("canvas");
 
 		canvas.style.width = "100%";
 
 		canvas.style.width = "100%";
 
 		canvas.style.height = "100%";
 
 		canvas.style.height = "100%";
 
@@ -17,6 +19,12 @@
 
 		canvas.height = window.innerHeight;
 
 		canvas.height = window.innerHeight;
 
 		document.body.appendChild(canvas);
 
 		document.body.appendChild(canvas);
 
 
 
+		canvas.oncontextmenu = function(event)
 
+		{
 
+			event.preventDefault();
 
+			return false;
 
+		};
 
+
 
 		document.body.onresize = function()
 
 		document.body.onresize = function()
 
 		{
 
 		{
 
 			canvas.width = window.innerWidth;
 
 			canvas.width = window.innerWidth;
 
@@ -25,54 +33,28 @@
 
 
 
 		document.body.onkeydown = function(event)
 
 		document.body.onkeydown = function(event)
 
 		{
 
 		{
 
-			console.log(event);
 
 			arena.snake.keyInput(event.keyCode);
 
 			arena.snake.keyInput(event.keyCode);
 
 		};
 
 		};
 
 
 
-		function Block(x, y)
 
-		{
 
-			this.x = x;
 
-			this.y = y;
 
-		}
 
-
 
-		Block.prototype.set = function(x, y)
 
-		{
 
-			this.x = x;
 
-			this.y = y;
 
-		}
 
-
 
-		Block.prototype.copy = function(a)
 
-		{
 
-			this.x = a.x;
 
-			this.y = a.y;
 
-		}
 
-
 
-		Block.prototype.add = function(a)
 
-		{
 
-			this.x += a.x;
 
-			this.y += a.y;
 
-		}
 
-
 
-		Block.prototype.equals = function(a)
 
-		{
 
-			return this.x === a.x && this.y === a.y;
 
-		}
 
-
 
 		function Snake(x, y)
 
 		function Snake(x, y)
 
 		{
 
 		{
 
+			Trenette.Object2D.call(this);
 
+
 
 			this.body = [];
 
 			this.body = [];
 
 
 
 			for(var i = 0; i < 3; i++)
 
 			for(var i = 0; i < 3; i++)
 
 			{
 
 			{
 
-				this.body.push(new Block(x - i, y));
 
+				this.body.push(new Trenette.Vector2(x - i, y));
 
 			}
 
 			}
 
 
 
-			this.speed = new Block(1, 0);
 
+			this.speed = new Trenette.Vector2(1, 0);
 
 		}
 
 		}
 
 
 
+		Snake.prototype = Object.create(Trenette.Object2D.prototype);
 
+
 
 		Snake.prototype.eat = function(arena)
 
 		Snake.prototype.eat = function(arena)
 
 		{
 
 		{
 
-			var first = new Block();
 
+			var first = new Trenette.Vector2();
 
 			first.copy(this.body[0]);
 
 			first.copy(this.body[0]);
 
 			first.add(this.speed);
 
 			first.add(this.speed);
 
 
 
@@ -92,7 +74,7 @@
 
 
 
 		Snake.prototype.move = function()
 
 		Snake.prototype.move = function()
 
 		{
 
 		{
 
-			var first = new Block();
 
+			var first = new Trenette.Vector2();
 
 			first.copy(this.body[0]);
 
 			first.copy(this.body[0]);
 
 			first.add(this.speed);
 
 			first.add(this.speed);
 
 
 
@@ -124,7 +106,6 @@
 
 
 
 		Snake.prototype.dead = function()
 
 		Snake.prototype.dead = function()
 
 		{
 
 		{
 
-
 
 			var first = this.body[0];
 
 			var first = this.body[0];
 
 
 
 			for(var i = 1; i < this.body.length; i++)
 
 			for(var i = 1; i < this.body.length; i++)
 
@@ -179,11 +160,15 @@
 
 
 
 		function Arena(w, h)
 
 		function Arena(w, h)
 
 		{
 
 		{
 
+			Trenette.Object2D.call(this);
 
+
 
 			this.width = w;
 
 			this.width = w;
 
 			this.height = h;
 
 			this.height = h;
 
 			this.restart();
 
 			this.restart();
 
 		}
 
 		}
 
 
 
+		Arena.prototype = Object.create(Trenette.Object2D.prototype);
 
+
 
 		Arena.prototype.restart = function()
 
 		Arena.prototype.restart = function()
 
 		{
 
 		{
 
 			this.snake = new Snake(Math.floor(this.width / 2), Math.floor(this.height / 2));
 
 			this.snake = new Snake(Math.floor(this.width / 2), Math.floor(this.height / 2));
 
@@ -198,7 +183,7 @@
 
 			while(collides === true)
 
 			while(collides === true)
 
 			{
 
 			{
 
 				collides = false;
 
 				collides = false;
 
-				var fruit = new Block(Math.floor(Math.random() * this.width), Math.floor(Math.random() * this.height));
 
+				var fruit = new Trenette.Vector2(Math.floor(Math.random() * this.width), Math.floor(Math.random() * this.height));
 
 
 
 				for(var i = 0; i < this.snake.body.length; i++)
 
 				for(var i = 0; i < this.snake.body.length; i++)
 
 				{
 
 				{
 
@@ -213,53 +198,55 @@
 
 			this.fruits.push(fruit);
 
 			this.fruits.push(fruit);
 
 		};
 
 		};
 
 
 
-		Arena.prototype.draw = function(canvas)
 
+		Arena.prototype.draw = function(context, viewport, canvas)
 
 		{
 
 		{
 
-			var ctx = canvas.getContext("2d");
 
-			ctx.clearRect(0, 0, canvas.width, canvas.height);
 
+			context.strokeStyle = "#000000";
 
+			context.lineHeight = 2;
 
 
 
-			ctx.strokeStyle = "#000000";
 
-			ctx.lineHeight = 2;
 
+			var s = 30;
 
 
 
-			var w = canvas.width / this.width;
 
-			var h = canvas.height / this.height;
 
+			var w = s * this.width;
 
+			var h = s * this.height;
 
 
 
-			for(var x = 0; x < canvas.width; x += w)
 
+			for(var x = 0; x < w; x += s)
 
 			{
 
 			{
 
-				for(var y = 0; y < canvas.height; y += h)
 
+				for(var y = 0; y < h; y += s)
 
 				{
 
 				{
 
-					ctx.strokeRect(x, y, w, h);
 
+					context.strokeRect(x, y, s, s);
 
 				}
 
 				}
 
 			}
 
 			}
 
 
 
-			ctx.fillStyle = "#FF0000";
 
+			context.fillStyle = "#FF0000";
 
 
 
 			for(var i = 0; i < this.snake.body.length; i++)
 
 			for(var i = 0; i < this.snake.body.length; i++)
 
 			{
 
 			{
 
-				ctx.fillRect(this.snake.body[i].x * w, this.snake.body[i].y * h, w, h);
 
+				context.fillRect(this.snake.body[i].x * s, this.snake.body[i].y * s, s, s);
 
 			}
 
 			}
 
 
 
 
 
-			ctx.fillStyle = "#00FF00";
 
+			context.fillStyle = "#00FF00";
 
 
 
 			for(var i = 0; i < this.fruits.length; i++)
 
 			for(var i = 0; i < this.fruits.length; i++)
 
 			{
 
 			{
 
-				ctx.fillRect(this.fruits[i].x * w, this.fruits[i].y * h, w, h);
 
+				context.fillRect(this.fruits[i].x * s, this.fruits[i].y * s, s, s);
 
 			}
 
 			}
 
 
 
 		};
 
 		};
 
 
 
 		var arena = new Arena(30, 20);
 
 		var arena = new Arena(30, 20);
 
 
 
-		function render()
 
+		function updateSnake()
 
 		{
 
 		{
 
 			arena.snake.update();
 
 			arena.snake.update();
 
-			arena.draw(canvas);
 
-
 
-			setTimeout(render, 120);
 
+			setTimeout(updateSnake, 120);
 
 		}
 
 		}
 
+	
+		var viewport = new Trenette.Viewport();
 
+
 
+		var renderer = new Trenette.Renderer(canvas);
 
+		renderer.createRenderLoop(arena, viewport);
 
+		updateSnake();
 
 
 
-		render();
 
 	</script>
 
 	</script>
 
 </body>
 
 </body>
 
 </html>
 
 </html>

+ 1 - 4
examples/stress.html
View File 

@@ -2,15 +2,12 @@
 
 <html>
 
 <html>
 
 <head>
 
 <head>
 
 	<meta charset="utf-8">
 
 	<meta charset="utf-8">
 
-	<title>Example</title>
 
+	<title>Stress</title>
 
 </head>
 
 </head>
 
 <body>
 
 <body>
 
 	<script type="text/javascript" src="../build/trenette.js"></script>
 
 	<script type="text/javascript" src="../build/trenette.js"></script>
 
 
 
 	<script type="text/javascript">
 
 	<script type="text/javascript">
 
-
 
-		window.runLoop = true;
 
-
 
 		var division = document.createElement("div");
 
 		var division = document.createElement("div");
 
 		division.style.position = "absolute";
 
 		division.style.position = "absolute";
 
 		division.style.width = "100%";
 
 		division.style.width = "100%";