x13machine · June 19, 2015 19:39
diff --git a/problem.html b/problem.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>
    <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 r = 0.15;
 	var player={
 		x:0,
 		y:0,
 		ax:0,
 		ay:0,
 		maxDis:6,
 		rotSpeed:Math.TAU/120,
 		rotation:0,
 		acceleration:0.002,
 		maxSpeed:0.1,
 	}
 	
 	var fn = function () {
 		if(37 in keysDown || 65 in keysDown)player.rotation+=player.rotSpeed//left key or A key
 		if(39 in keysDown || 68 in keysDown)player.rotation-=player.rotSpeed//right key or D key
 		if(38 in keysDown){
 			var vec=Point.CENTER.distantPoint(player.acceleration, player.rotation)
 			player.ax+=2 * Math.atanh(vec.x)
 			player.ay+=2 * Math.atanh(vec.y)
 		}
 		
 		if(40 in keysDown){
 			var vec=Point.CENTER.distantPoint(player.acceleration, player.rotation+Math.PI)
 			player.ax+=2 * Math.atanh(vec.x)
 			player.ay+=2 * Math.atanh(vec.y)
 		}
 		
 		var speed=new Point({
 			x:Math.tanh(player.ax/2),
 			y:Math.tanh(player.ay/2)
 		}).distanceFromCenter();
 		
 		if(speed>player.speed){
 			player.ax=(player.ax/dis)*player.maxSpeed
 			player.ay=(player.ay/dis)*player.maxSpeed
 		}
 		
 		player.x+=player.ax
 		player.y+=player.ay
 		
 		var dis=new Point({
 			x:Math.tanh(player.x/2),
 			y:Math.tanh(player.y/2)
 		}).distanceFromCenter();
 		
 		if(dis>player.maxDis){
 			player.x=(player.x/dis)*-player.maxDis
 			player.y=(player.y/dis)*-player.maxDis
 			console.log(player.x,player.y)
 		}
 		
 		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 point=new Point({
 			x:Math.tanh(player.x/2),
 			y:Math.tanh(player.y/2)
 		})
 		var radius=2 * Math.atanh(r)
 		var vertices = [point.distantPoint(radius, Math.TAU*(0/3)+player.rotation),
 						point.distantPoint(radius, Math.TAU*((1.0+0.17)/3)+player.rotation),
 						point.distantPoint(radius*0.3, Math.TAU*(1.5/3)+player.rotation),
 						point.distantPoint(radius, Math.TAU*((2.0-0.17)/3)+player.rotation)]
 						
 		
 		var gon=new Polygon({ vertices: vertices });
 		c.strokePolygon(gon)
 		setTimeout(fn,1000/60)
 	};
 	fn()
 	reRender = false;
 };

    </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>
	<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 r = 0.15;
	var player={
	x:0,
	y:0,
	ax:0,
	ay:0,
	maxDis:6,
	rotSpeed:Math.TAU/120,
	rotation:0,
	acceleration:0.002,
	maxSpeed:0.1,
	}

	var fn = function () {
	if(37 in keysDown \|\| 65 in keysDown)player.rotation+=player.rotSpeed//left key or A key
	if(39 in keysDown \|\| 68 in keysDown)player.rotation-=player.rotSpeed//right key or D key
	if(38 in keysDown){
	var vec=Point.CENTER.distantPoint(player.acceleration, player.rotation)
	player.ax+=2 * Math.atanh(vec.x)
	player.ay+=2 * Math.atanh(vec.y)
	}

	if(40 in keysDown){
	var vec=Point.CENTER.distantPoint(player.acceleration, player.rotation+Math.PI)
	player.ax+=2 * Math.atanh(vec.x)
	player.ay+=2 * Math.atanh(vec.y)
	}

	var speed=new Point({
	x:Math.tanh(player.ax/2),
	y:Math.tanh(player.ay/2)
	}).distanceFromCenter();

	if(speed>player.speed){
	player.ax=(player.ax/dis)*player.maxSpeed
	player.ay=(player.ay/dis)*player.maxSpeed
	}

	player.x+=player.ax
	player.y+=player.ay

	var dis=new Point({
	x:Math.tanh(player.x/2),
	y:Math.tanh(player.y/2)
	}).distanceFromCenter();

	if(dis>player.maxDis){
	player.x=(player.x/dis)*-player.maxDis
	player.y=(player.y/dis)*-player.maxDis
	console.log(player.x,player.y)
	}

	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 point=new Point({
	x:Math.tanh(player.x/2),
	y:Math.tanh(player.y/2)
	})
	var radius=2 * Math.atanh(r)
	var vertices = [point.distantPoint(radius, Math.TAU*(0/3)+player.rotation),
	point.distantPoint(radius, Math.TAU*((1.0+0.17)/3)+player.rotation),
	point.distantPoint(radius0.3, Math.TAU(1.5/3)+player.rotation),
	point.distantPoint(radius, Math.TAU*((2.0-0.17)/3)+player.rotation)]


	var gon=new Polygon({ vertices: vertices });
	c.strokePolygon(gon)
	setTimeout(fn,1000/60)
	};
	fn()
	reRender = false;
	};

	</script>

	</body>
	</html>