Визуализация теоремы Бояйи-Гервина

<script> 
 
		var drawingCanvas = document.getElementById('image');
		var a = drawingCanvas.getContext('2d');
 
		//Вершина
		var d = {
			x: 0,
			y: 0
		}
 
		var A = Object.assign({}, d);
		var B = Object.assign({}, d);
		var C = Object.assign({}, d);
		var D = Object.assign({}, d);
		var K = Object.assign({}, d);
		var L = Object.assign({}, d);
		var M = Object.assign({}, d);
		var N = Object.assign({}, d);
		var O = Object.assign({}, d);
 
		var width = 500, height = 500;
		var angle = 3*Math.PI/2;
 
		//Определение точек 
		function setData()
		{
			A.x = 500;
			A.y = 550;
			B.x = A.x + width;
			B.y = A.y;
			C.x = B.x;
			C.y = A.y + height;
			D.x = A.x;
			D.y = C.y;
			K.x = (width/2) + 50 + A.x;
			K.y = A.y;
			L.x = (width/2) - 50 + A.x;
			L.y = D.y;
			M.x = A.x;
			M.y = height/2 + A.y;
			N.x = B.x;
			N.y = M.y;
			O.x = (L.x + N.x)/2;
			O.y = (L.y + N.y)/2;
		}
 
		function first()
		{
			a.fillStyle = "gold";
			a.beginPath();
			a.moveTo(A.x, A.y);
			a.lineTo(K.x, K.y);
			a.lineTo(O2.x, O2.y);
			a.lineTo(M1.x, M1.y);
			a.fill();
		}
 
		function second()
		{
			a.fillStyle = "firebrick";
			a.beginPath();
			a.moveTo(K.x, K.y);
			a.lineTo(B.x, B.y);
			a.lineTo(N.x, N.y);
			a.lineTo(O1.x, O1.y);
			a.fill();
		}
 
		function third()
		{
			a.fillStyle = "springgreen";
			a.beginPath();
			a.moveTo(N.x, N.y);
			a.lineTo(C.x, C.y);
			a.lineTo(L.x, L.y);
			a.fill();			
		}
 
		function fourth()
		{
			a.fillStyle = "slateblue";
			a.beginPath();
			a.moveTo(M.x, M.y);
			a.lineTo(O.x, O.y);
			a.lineTo(L1.x, L1.y);
			a.lineTo(D.x, D.y);
			a.fill();
		}	
 
		//Пересчёт координаты x при повороте
		function rotate_X(x, y, a, x0, y0)
		{
			return (x-x0)*Math.cos(a) - (y-y0)*Math.sin(a) + x0;
		}
 
		//Пересчёт координаты y при повороте
		function rotate_Y(x, y, a, x0, y0)
		{
			return (x-x0)*Math.sin(a) + (y-y0)*Math.cos(a) + y0;
		}
 
		//Первая анимация перестроения
		function animation1()
		{
 
			if(angle < 5*Math.PI/2)
			{
				clear();
				clearInterval(t);
 
				angle+=0.001;
				tmp = C.x;
				C.x = (rotate_X(C.x, C.y, -0.001, N.x, N.y));
				C.y = (rotate_Y(tmp, C.y, -0.001, N.x, N.y));
 
				tmp = L.x;
				L.x = (rotate_X(L.x, L.y, -0.001, N.x, N.y));
				L.y = (rotate_Y(tmp, L.y, -0.001, N.x, N.y));
 
				tmp = O.x;
				O.x = (rotate_X(O.x, O.y, 0.001, M.x, M.y));
				O.y = (rotate_Y(tmp, O.y, 0.001, M.x, M.y));
 
				tmp = L1.x;
				L1.x = (rotate_X(L1.x, L1.y, 0.001, M.x, M.y));
				L1.y = (rotate_Y(tmp, L1.y, 0.001, M.x, M.y));				
 
				tmp = D.x;
				D.x = (rotate_X(D.x, D.y, 0.001, M.x, M.y));
				D.y = (rotate_Y(tmp, D.y, 0.001, M.x, M.y));					
 
				first();
				second();
				third();
				fourth();
				t = setInterval(animation1, 5);
			}
			else
			{
				clearInterval(t);
				angle = 0;
				animation2();
			}			
		}
 
		//Вторая анимация перестроения
		function animation2()
		{
			if(angle < Math.PI)
			{
				clear();
				clearInterval(k);
 
				angle+=0.001;
				tmp = B.x;
				B.x = (rotate_X(B.x, B.y, -0.001, K.x, K.y));
				B.y = (rotate_Y(tmp, B.y, -0.001, K.x, K.y));
 
				tmp = C.x;
				C.x = (rotate_X(C.x, C.y, -0.001, K.x, K.y));
				C.y = (rotate_Y(tmp, C.y, -0.001, K.x, K.y));
 
				tmp = L.x;
				L.x = (rotate_X(L.x, L.y, -0.001, K.x, K.y));
				L.y = (rotate_Y(tmp, L.y, -0.001, K.x, K.y));
 
				tmp = N.x;
				N.x = (rotate_X(N.x, N.y, -0.001, K.x, K.y));
				N.y = (rotate_Y(tmp, N.y, -0.001, K.x, K.y));				
 
				tmp = O1.x;
				O1.x = (rotate_X(O1.x, O1.y, -0.001, K.x, K.y));
				O1.y = (rotate_Y(tmp, O1.y, -0.001, K.x, K.y));					
 
				first();
				second();
				third();
				fourth();
				k = setInterval(animation2, 5);
			}
			else clearInterval(k);
		}
 
		//Очистка области рисования
		function clear()
		{
			a.fillStyle = "black";
			a.fillRect(0, 0, 1500, 1500);			
		}
 
		//Подложка
		function rect()
		{
			a.fillStyle = "white";
			a.fillRect(500, 550, 500, 500);
		}
 
		//Разбиение четырёхугольника
		function start()
		{
			first();
			second();
			third();
			fourth();			
		}
 
		//Перегруппировка
		function group()
		{
			t = setInterval(animation1, 200);
		}
 
		setData();		
		var O1 = Object.assign({}, O);
		var O2 = Object.assign({}, O);
		var L1 = Object.assign({}, L);
		var M1 = Object.assign({}, M);
		var t;
		var k;
 
		rect();
 
 
 
  </script>