x13machine/non-triangle.html

## non-triangle.html
<!DOCTYPE html>
<html>
  <head>
    <title>Hyperbolic Canvas Example</title>
    <meta charset="utf-8"/>
    <style>
	/*
A hyperbolic-canvas div with a percentage-based size must have a parent with non-zero size.
Margin is removed for simplicity.
*/
html, body {
  height: 100%;
  margin: 0;
  background-color: #111;
}

/*
Each hyperbolic-canvas div must be of non-zero size.
A size with a 1:1 ratio is recommended.
In this case, it expands to fill the page.
*/
div.hyperbolic-canvas {
  height: 100%;
  width: 100%;
}

/*
A viewport div is automatically appended into each hyperbolic-canvas div.
It is automatically scaled to fill its parent, and cropped to a 1:1 ratio.
It is not recommended to apply styling beyond background color.
*/
div.hyperbolic-canvas div.viewport {
}

/*
An HTML canvas is automatically appended into each viewport div.
It is automatically scaled to fit its parent.
It is not recommended to apply styling beyond background color.
*/
div.hyperbolic-canvas div.viewport canvas {
  background-color: #000;
}

	</style>
  </head>
  <body>
    <div class="hyperbolic-canvas"></div>
    <script type="application/javascript" src="lib/Angle.js"></script>
    <script type="application/javascript" src="lib/Point.js"></script>
    <script type="application/javascript" src="lib/Line.js"></script>
    <script type="application/javascript" src="lib/Circle.js"></script>
    <script type="application/javascript" src="lib/Polygon.js"></script>
    <script type="application/javascript" src="lib/Canvas.js"></script>
    <script type="application/javascript" src="lib/HyperbolicCanvas.js"></script>
    <!-- TODO combine Javascripts into single file for easy loading -->

    <!-- TODO remove test script -->
    <script>
if (typeof HyperbolicCanvas === "undefined")window.HyperbolicCanvas = {};

var Point = window.Point = window.HyperbolicCanvas.Point;
var Line = window.Line = window.HyperbolicCanvas.Line;
var Circle = window.Circle = window.HyperbolicCanvas.Circle;
var Polygon = window.Polygon = window.HyperbolicCanvas.Polygon;
var Canvas = window.Canvas = window.HyperbolicCanvas.Canvas;

var keysDown = {};

addEventListener("keydown", function (e) {
	keysDown[e.keyCode] = true;
	console.log(e.keyCode)
}, false);

addEventListener("keyup", function (e) {
	delete keysDown[e.keyCode];
}, false);

window.onload = function () {
	window.c = HyperbolicCanvas.canvases[0];

	c.ctx.fillStyle = '#DD4814';

	var n = 3;
	var r = 0.15;
	var p = Point.CENTER;
	var rotation = 0;
	var point=new Point({x:0,y:0})
	var move=Math.TAU/120;
	var bullets=[];
	bulletSpeed=0;
	var fn = function () {
		if(37 in keysDown || 65 in keysDown)rotation+=move//left key or A key
		if(39 in keysDown || 68 in keysDown)rotation-=move//right key or D key
		c.ctx.clearRect(0, 0, c.diameter, c.diameter);
		var color='#F00'
		c.ctx.shadowColor = color;
		c.ctx.shadowBlur = 40;
		c.ctx.strokeStyle = color;
		c.ctx.lineWidth = 2;
		var polygons = [];
		var i=0;
		var j=0;

		//var gon = Polygon.fromNCenterRadius(n, point, 2 * Math.atanh(r), rotation);
		var radius=2 * Math.atanh(r)
		var vertices = [point.distantPoint(radius, Math.TAU*(0/3)+rotation),
						point.distantPoint(radius, Math.TAU*((1.0+0.17)/3)+rotation),
						point.distantPoint(radius*0.3, Math.TAU*(1.5/3)+rotation),
						point.distantPoint(radius, Math.TAU*((2.0-0.17)/3)+rotation)]
		var gon=new Polygon({ vertices: vertices });
		c.strokePolygon(gon)

	};
	fn();
	reRender = false;
	setInterval(fn, 1000/60);

};

    </script>

  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Hyperbolic Canvas Example</title>
	<meta charset="utf-8"/>
	<style>
	/*
	A hyperbolic-canvas div with a percentage-based size must have a parent with non-zero size.
	Margin is removed for simplicity.
	*/
	html, body {
	height: 100%;
	margin: 0;
	background-color: #111;
	}

	/*
	Each hyperbolic-canvas div must be of non-zero size.
	A size with a 1:1 ratio is recommended.
	In this case, it expands to fill the page.
	*/
	div.hyperbolic-canvas {
	height: 100%;
	width: 100%;
	}

	/*
	A viewport div is automatically appended into each hyperbolic-canvas div.
	It is automatically scaled to fill its parent, and cropped to a 1:1 ratio.
	It is not recommended to apply styling beyond background color.
	*/
	div.hyperbolic-canvas div.viewport {
	}

	/*
	An HTML canvas is automatically appended into each viewport div.
	It is automatically scaled to fit its parent.
	It is not recommended to apply styling beyond background color.
	*/
	div.hyperbolic-canvas div.viewport canvas {
	background-color: #000;
	}

	</style>
	</head>
	<body>
	<div class="hyperbolic-canvas"></div>
	<script type="application/javascript" src="lib/Angle.js"></script>
	<script type="application/javascript" src="lib/Point.js"></script>
	<script type="application/javascript" src="lib/Line.js"></script>
	<script type="application/javascript" src="lib/Circle.js"></script>
	<script type="application/javascript" src="lib/Polygon.js"></script>
	<script type="application/javascript" src="lib/Canvas.js"></script>
	<script type="application/javascript" src="lib/HyperbolicCanvas.js"></script>
	<!-- TODO combine Javascripts into single file for easy loading -->

	<!-- TODO remove test script -->
	<script>
	if (typeof HyperbolicCanvas === "undefined")window.HyperbolicCanvas = {};

	var Point = window.Point = window.HyperbolicCanvas.Point;
	var Line = window.Line = window.HyperbolicCanvas.Line;
	var Circle = window.Circle = window.HyperbolicCanvas.Circle;
	var Polygon = window.Polygon = window.HyperbolicCanvas.Polygon;
	var Canvas = window.Canvas = window.HyperbolicCanvas.Canvas;

	var keysDown = {};

	addEventListener("keydown", function (e) {
	keysDown[e.keyCode] = true;
	console.log(e.keyCode)
	}, false);

	addEventListener("keyup", function (e) {
	delete keysDown[e.keyCode];
	}, false);

	window.onload = function () {
	window.c = HyperbolicCanvas.canvases[0];

	c.ctx.fillStyle = '#DD4814';

	var n = 3;
	var r = 0.15;
	var p = Point.CENTER;
	var rotation = 0;
	var point=new Point({x:0,y:0})
	var move=Math.TAU/120;
	var bullets=[];
	bulletSpeed=0;
	var fn = function () {
	if(37 in keysDown \|\| 65 in keysDown)rotation+=move//left key or A key
	if(39 in keysDown \|\| 68 in keysDown)rotation-=move//right key or D key
	c.ctx.clearRect(0, 0, c.diameter, c.diameter);
	var color='#F00'
	c.ctx.shadowColor = color;
	c.ctx.shadowBlur = 40;
	c.ctx.strokeStyle = color;
	c.ctx.lineWidth = 2;
	var polygons = [];
	var i=0;
	var j=0;

	//var gon = Polygon.fromNCenterRadius(n, point, 2 * Math.atanh(r), rotation);
	var radius=2 * Math.atanh(r)
	var vertices = [point.distantPoint(radius, Math.TAU*(0/3)+rotation),
	point.distantPoint(radius, Math.TAU*((1.0+0.17)/3)+rotation),
	point.distantPoint(radius0.3, Math.TAU(1.5/3)+rotation),
	point.distantPoint(radius, Math.TAU*((2.0-0.17)/3)+rotation)]
	var gon=new Polygon({ vertices: vertices });
	c.strokePolygon(gon)

	};
	fn();
	reRender = false;
	setInterval(fn, 1000/60);

	};

	</script>

	</body>
	</html>