x13machine/problem.html

## 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>