x13machine/buggy.html

## buggy.html
<!DOCTYPE html>
<html>
  <head>
    <title>Hyperbolic Canvas Example</title>
    <meta charset="utf-8"/>
    <link rel="stylesheet" type="text/css" href="example.css">
  </head>
  <body>
    <div class="hyperbolic-canvas"></div>

    <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>
    <!--<script type="application/javascript" src="test/HCTest2.js"></script>-->
    <!-- TODO combine Javascripts into single file for easy loading -->

    <!-- TODO remove test script -->
    <script>

	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;

	window.HyperbolicCanvas.test = function () {
		var sides = 4;
		var rot = Math.PI;
		var radius = .5;
		window.c = HyperbolicCanvas.canvases[0];

		c.ctx.fillStyle = '#DD4814';

		var falses = 0;
		var n = 4;
		var r = 1;
		var p = Point.CENTER;
		var count = 3;
		var rotation = 0.000001;
		var fn = function () {
			c.ctx.clearRect(0, 0, c.diameter, c.diameter);

			var polygons = [];


			var i=0;
			var j=0;
			var p2 = p.distantPoint(1, 1)
			var gon = Polygon.fromNCenterRadius(n, p2, r, Math.TAU / n * j + Math.PI * i + rotation);


			rotation -= Math.TAU / (n * n * 2);
			rotation %= Math.TAU;

			c.fillPolygon(gon)
		};
		fn();
		reRender = false;
		setInterval(fn, 1000/2);

	};
    document.addEventListener('DOMContentLoaded', window.HyperbolicCanvas.test);

    </script>

  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Hyperbolic Canvas Example</title>
	<meta charset="utf-8"/>
	<link rel="stylesheet" type="text/css" href="example.css">
	</head>
	<body>
	<div class="hyperbolic-canvas"></div>

	<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>
	<!--<script type="application/javascript" src="test/HCTest2.js"></script>-->
	<!-- TODO combine Javascripts into single file for easy loading -->

	<!-- TODO remove test script -->
	<script>

	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;

	window.HyperbolicCanvas.test = function () {
	var sides = 4;
	var rot = Math.PI;
	var radius = .5;
	window.c = HyperbolicCanvas.canvases[0];

	c.ctx.fillStyle = '#DD4814';

	var falses = 0;
	var n = 4;
	var r = 1;
	var p = Point.CENTER;
	var count = 3;
	var rotation = 0.000001;
	var fn = function () {
	c.ctx.clearRect(0, 0, c.diameter, c.diameter);

	var polygons = [];


	var i=0;
	var j=0;
	var p2 = p.distantPoint(1, 1)
	var gon = Polygon.fromNCenterRadius(n, p2, r, Math.TAU / n * j + Math.PI * i + rotation);


	rotation -= Math.TAU / (n * n * 2);
	rotation %= Math.TAU;

	c.fillPolygon(gon)
	};
	fn();
	reRender = false;
	setInterval(fn, 1000/2);

	};
	document.addEventListener('DOMContentLoaded', window.HyperbolicCanvas.test);

	</script>

	</body>
	</html>