jasonparallel/twosides.html

## twosides.html
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Phoria - Dev test page 6</title>
      <script src="scripts/gl-matrix.js"></script>
      <script src="scripts/phoria-util.js"></script>
      <script src="scripts/phoria-entity.js"></script>
      <script src="scripts/phoria-scene.js"></script>
      <script src="scripts/phoria-renderer.js"></script>
      <script src='scripts/dat.gui.min.js'></script>
      <script>
var requestAnimFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame ||
                       window.mozRequestAnimationFrame || window.msRequestAnimationFrame ||
                       function(c) {window.setTimeout(c, 15)};
/**
   Phoria
   pho·ri·a (fôr-)
   n. The relative directions of the eyes during binocular fixation on a given object
*/

// bind to window onload event
window.addEventListener('load', onloadHandler, false);

var scene;
function onloadHandler()
{
   // get the canvas DOM element and the 2D drawing context
   var canvas = document.getElementById('canvas');

   // create the scene and setup camera, perspective and viewport
   scene = new Phoria.Scene();
   scene.camera.position = {x:0.0, y:2, z:-20.0};
   scene.camera.lookat = {x:0.0, y:2, z:0};
   scene.perspective.fov = 25;
   scene.perspective.aspect = canvas.width / canvas.height;
   scene.viewport.width = canvas.width;
   scene.viewport.height = canvas.height;

   // event handler to rotate the camera around the scene
   var rotation = 0.0;
   scene.onCamera(function(position, lookAt, up) {
      var rotMatrix = mat4.create();
      mat4.rotateY(rotMatrix, rotMatrix, rotation);
      rotation -= 0.01;
      vec4.transformMat4(position, position, rotMatrix);
   });

   // create a canvas renderer
   var renderer = new Phoria.CanvasRenderer(canvas);

  var a = Phoria.Entity.create({
    	         points: [{x:-1, y:1, z:1}, {x:1, y:1, z:1}, {x:1, y:-1, z:1}, {x:-1, y:-1, z:1}],
    	         edges: [{a:0,b:1},{a:1,b:2}, {a:2,b:3}, {a:3,b:0}],
    	         polygons: [  {vertices:[0,1,2,3]},{vertices:[3,2,1,0]}],
    	         style: {
    	             drawmode: "solid"
    	          }
    	      });
        	scene.graph.push(a);

   var pause = false;
   var fnAnimate = function() {
      if (!pause)
      {
         // execute the model view 3D pipeline and render the scene
         scene.modelView();
         renderer.render(scene);
      }
      requestAnimFrame(fnAnimate);
   };

   // key binding
   document.addEventListener('keydown', function(e) {
      switch (e.keyCode)
      {
         case 27: // ESC
            pause = !pause;
            break;
      }
   }, false);
   // add GUI controls
   var gui = new dat.GUI();
   var f = gui.addFolder('Perspective');
   f.add(scene.perspective, "fov").min(5).max(175);
   f.add(scene.perspective, "near").min(1).max(100);
   f.add(scene.perspective, "far").min(1).max(1000);
   f = gui.addFolder('Camera LookAt');
   f.add(scene.camera.lookat, "x").min(-100).max(100);
   f.add(scene.camera.lookat, "y").min(-100).max(100);
   f.add(scene.camera.lookat, "z").min(-100).max(100);
   f.open();
   f = gui.addFolder('Camera Position');
   f.add(scene.camera.position, "x").min(-100).max(100);
   f.add(scene.camera.position, "y").min(-100).max(100);
   f.add(scene.camera.position, "z").min(-100).max(100);
   f.open();

   // start animation
   requestAnimFrame(fnAnimate);
}
      </script>
   </head>

   <body style="background-color: #bfbfbf">
      <canvas id="canvas" width="768" height="512" style="background-color: #fff"></canvas>
      <div><a style="color:#225588;text-decoration:none;" href="./index.html">&lt;&lt; Phoria demos</a></div>
   </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Phoria - Dev test page 6</title>
	<script src="scripts/gl-matrix.js"></script>
	<script src="scripts/phoria-util.js"></script>
	<script src="scripts/phoria-entity.js"></script>
	<script src="scripts/phoria-scene.js"></script>
	<script src="scripts/phoria-renderer.js"></script>
	<script src='scripts/dat.gui.min.js'></script>
	<script>
	var requestAnimFrame = window.requestAnimationFrame \|\| window.webkitRequestAnimationFrame \|\|
	window.mozRequestAnimationFrame \|\| window.msRequestAnimationFrame \|\|
	function(c) {window.setTimeout(c, 15)};
	/**
	Phoria
	pho·ri·a (fôr-)
	n. The relative directions of the eyes during binocular fixation on a given object
	*/

	// bind to window onload event
	window.addEventListener('load', onloadHandler, false);

	var scene;
	function onloadHandler()
	{
	// get the canvas DOM element and the 2D drawing context
	var canvas = document.getElementById('canvas');

	// create the scene and setup camera, perspective and viewport
	scene = new Phoria.Scene();
	scene.camera.position = {x:0.0, y:2, z:-20.0};
	scene.camera.lookat = {x:0.0, y:2, z:0};
	scene.perspective.fov = 25;
	scene.perspective.aspect = canvas.width / canvas.height;
	scene.viewport.width = canvas.width;
	scene.viewport.height = canvas.height;

	// event handler to rotate the camera around the scene
	var rotation = 0.0;
	scene.onCamera(function(position, lookAt, up) {
	var rotMatrix = mat4.create();
	mat4.rotateY(rotMatrix, rotMatrix, rotation);
	rotation -= 0.01;
	vec4.transformMat4(position, position, rotMatrix);
	});

	// create a canvas renderer
	var renderer = new Phoria.CanvasRenderer(canvas);

	var a = Phoria.Entity.create({
	points: [{x:-1, y:1, z:1}, {x:1, y:1, z:1}, {x:1, y:-1, z:1}, {x:-1, y:-1, z:1}],
	edges: [{a:0,b:1},{a:1,b:2}, {a:2,b:3}, {a:3,b:0}],
	polygons: [ {vertices:[0,1,2,3]},{vertices:[3,2,1,0]}],
	style: {
	drawmode: "solid"
	}
	});
	scene.graph.push(a);

	var pause = false;
	var fnAnimate = function() {
	if (!pause)
	{
	// execute the model view 3D pipeline and render the scene
	scene.modelView();
	renderer.render(scene);
	}
	requestAnimFrame(fnAnimate);
	};

	// key binding
	document.addEventListener('keydown', function(e) {
	switch (e.keyCode)
	{
	case 27: // ESC
	pause = !pause;
	break;
	}
	}, false);
	// add GUI controls
	var gui = new dat.GUI();
	var f = gui.addFolder('Perspective');
	f.add(scene.perspective, "fov").min(5).max(175);
	f.add(scene.perspective, "near").min(1).max(100);
	f.add(scene.perspective, "far").min(1).max(1000);
	f = gui.addFolder('Camera LookAt');
	f.add(scene.camera.lookat, "x").min(-100).max(100);
	f.add(scene.camera.lookat, "y").min(-100).max(100);
	f.add(scene.camera.lookat, "z").min(-100).max(100);
	f.open();
	f = gui.addFolder('Camera Position');
	f.add(scene.camera.position, "x").min(-100).max(100);
	f.add(scene.camera.position, "y").min(-100).max(100);
	f.add(scene.camera.position, "z").min(-100).max(100);
	f.open();

	// start animation
	requestAnimFrame(fnAnimate);
	}
	</script>
	</head>

	<body style="background-color: #bfbfbf">
	<canvas id="canvas" width="768" height="512" style="background-color: #fff"></canvas>
	<div><a style="color:#225588;text-decoration:none;" href="./index.html"><< Phoria demos</a></div>
	</body>
	</html>