diff --git a/Perspective.js b/Perspective.js
index 2fa510a..3105740 100644
--- a/Perspective.js
+++ b/Perspective.js
@@ -1,79 +1,35 @@
-function Solid() {
+import {Constants} from './defaultSettings.js';
 
-}
+Point.distanceY = function (distance) {
+  const OD_ = distance + Constants.pd;
 
-Solid.distanceY = function (distance) {
-    var X = distance + Settings.pd;
-    var x = distance;
-    var Y = Settings.canvasHeight - Settings.horizonY;
-    return Y * x / X;
+  return Constants.DD_ / OD_ * distance;
 };
 
-Solid.distanceX = function (distance, distanceY) {
-    var y = distanceY;
-    var Y = Settings.canvasHeight - Settings.horizonY;
-    var X = distance - Settings.horizonX;
-    return y / Y * X;
-};
+Point.distanceX = function (distance, distanceY) {
+  // Constants.DD_ / (Constants.DD_ - distanceY) = (distance - Constants.horizonX) / (result - Constants.horizonX)
+  // (result - Constants.horizonX) = (distance - Constants.horizonX) / Constants.DD_ * (Constants.DD_ - distanceY)
+  // result = Constants.horizonX + (distance - Constants.horizonX) / Constants.DD_ * (Constants.DD_ - distanceY)
 
-Solid.distanceZ = function (H, distanceY) {
-    var Y = Settings.canvasHeight - Settings.horizonY;
-    var y = Y - distanceY;
-    return y / Y * H;
+  return Constants.horizonX + (distance - Constants.horizonX) / Constants.DD_ * (Constants.DD_ - distanceY);
 };
 
-function Point(x, y, z, options) {
-    this._x = x || 0;
-    this._y = y || 0;
-    this._z = z || 0;
-    this.options = options || {};
-    this.options.color = this.options.color || 'gold';
-
-    var Y = Point.distanceY(y);
-    var X = Point.distanceX(x, Y);
-
-    var Z = Point.distanceZ(z, Y);
-
-    this.x = X;
-    this.y = Y;
-    this.z = Z;
-
-    this.X = x - X;
-    this.Y = Settings.canvasHeight - Y;
-    this.Z = Settings.canvasHeight - Y - Z;
-}
-
-for (var key in Solid) {
-    if (Solid.hasOwnProperty(key)) Point[key] = Solid[key]
-}
-
-Point.prototype.draw = function () {
-    ctx.fillStyle = 'gold';
-    ctx.beginPath();
-    ctx.arc(this.X, this.Z, 3, 0, Math.PI * 2, true);
-    ctx.fill();
+Point.distanceZ = function (H, distance, distanceX) {
+  // (distance - Constants.horizonX) / (distanceY - Constants.horizonX) = H / result;
+  return H / (distance - Constants.horizonX) * (distanceX - Constants.horizonX)
 };
 
-Point.prototype.drawProjection = function () {
-    ctx.strokeStyle = this.options.color;
-    ctx.beginPath();
-    ctx.moveTo(this.X, this.Y);
-    ctx.lineTo(this.X, this.Z);
-    ctx.stroke();
-};
+export function Point(x, y, z = 0) {
+  const Y = Point.distanceY(y);
+  const X = Point.distanceX(x, Y);
 
-function Segment(A, B, options) {
-    this._A = A;
-    this._B = B;
+  const Z = Point.distanceZ(z,x, X);
 
-    this.options = options || {};
-    this.options.color = this.options.color || 'gold';
-}
+  this.x = X;
+  this.y = Y;
+  this.z = z;
 
-Segment.prototype.draw = function () {
-    ctx.strokeStyle = this.options.color;
-    ctx.beginPath();
-    ctx.moveTo(this._A.x, this._B.z);
-    ctx.lineTo(this._B.x, this._B.z);
-    ctx.stroke();
-};
\ No newline at end of file
+  this.X = X;
+  this.Y = Constants.canvasHeight - Y;
+  this.Z = Constants.canvasHeight - Y - Z;
+}
\ No newline at end of file
diff --git a/Settings.js b/Settings.js
deleted file mode 100644
index 9808fb7..0000000
--- a/Settings.js
+++ /dev/null
@@ -1,9 +0,0 @@
-var Settings = {
-    horizonY: 250,
-    horizonX: 640,
-    frameCount: 300,
-    pd: 300,
-    mostDistanceX: 15,
-    mostDistanceY: 20,
-    scale: 5
-};
\ No newline at end of file
diff --git a/cubeAngle.jpg b/cubeAngle.jpg
new file mode 100644
index 0000000..0440f2a
Binary files /dev/null and b/cubeAngle.jpg differ
diff --git a/defaultSettings.js b/defaultSettings.js
new file mode 100644
index 0000000..60bbe22
--- /dev/null
+++ b/defaultSettings.js
@@ -0,0 +1,17 @@
+export const Constants = {
+  "frameCount": 300,
+  "pd": 800,
+  "mostDistanceX": 5,
+  "mostDistanceY": 2,
+  "scale": 5
+}
+
+Constants.canvasWidth = window.innerWidth;
+Constants.canvasHeight = window.innerHeight;
+
+Constants.horizonX = 800 || Constants.canvasWidth / 2;
+Constants.horizonY = 200 || Constants.canvasHeight / 2;
+
+Constants.step = Constants.canvasWidth / Constants.scale;
+
+Constants.DD_ = Constants.canvasHeight - Constants.horizonY;
diff --git a/distanceX.jpg b/distanceX.jpg
new file mode 100644
index 0000000..58b3960
Binary files /dev/null and b/distanceX.jpg differ
diff --git a/distanceXYZ.js b/distanceXYZ.js
deleted file mode 100644
index fa9e625..0000000
--- a/distanceXYZ.js
+++ /dev/null
@@ -1,31 +0,0 @@
-ctx.beginPath();
-ctx.strokeStyle = 'red';
-//
-//// Y
-//    ctx.moveTo(A._y, Settings.canvasHeight);
-//    ctx.lineTo(Settings.horizonX, Settings.horizonY);
-//
-//// Y
-//    ctx.moveTo(0, Settings.canvasHeight);
-//    ctx.lineTo(Settings.horizonX + Settings.pd, Settings.horizonY);
-
-//// X
-//ctx.moveTo(0, A.Y);
-//ctx.lineTo(Settings.canvasWidth, A.Y);
-//// X
-//ctx.moveTo(Settings.horizonX, Settings.canvasHeight);
-//ctx.lineTo(Settings.horizonX, Settings.horizonY);
-//
-//// X & Z
-//ctx.moveTo(A._x, Settings.canvasHeight);
-//ctx.lineTo(Settings.horizonX, Settings.horizonY);
-//
-//// Z
-//    ctx.moveTo(A._x, canvasHeight - A._z);
-//    ctx.lineTo(horizonX, horizonY);
-//
-//// Z
-//    ctx.moveTo(A._x, canvasHeight);
-//    ctx.lineTo(A._x, canvasHeight - A._z);
-
-ctx.stroke();
\ No newline at end of file
diff --git a/distanceY.jpg b/distanceY.jpg
new file mode 100644
index 0000000..fd95b68
Binary files /dev/null and b/distanceY.jpg differ
diff --git a/distanceZ.jpg b/distanceZ.jpg
new file mode 100644
index 0000000..f9c4775
Binary files /dev/null and b/distanceZ.jpg differ
diff --git a/form.js b/form.js
new file mode 100644
index 0000000..fa96097
--- /dev/null
+++ b/form.js
@@ -0,0 +1,97 @@
+import {Constants} from "./defaultSettings.js";
+
+export function addListeners(canvas) {
+  var form;
+
+  document.addEventListener("DOMContentLoaded", function () {
+    var body = document.body;
+
+    body.appendChild(canvas);
+
+    form = document.getElementById('settings');
+    form.addEventListener('submit', function (event) {
+      event.preventDefault();
+    });
+
+    var $pd = form.pd;
+    $pd.value = Constants.pd;
+    $pd.addEventListener('change', function () {
+      var value = +this.value;
+      if (value > 0) {
+        Constants.pd = value;
+      }
+    });
+
+    var $frameCount = form['frame-count'];
+    $frameCount.value = Constants.frameCount;
+    $frameCount.addEventListener('change', function () {
+      var value = +this.value;
+      if (value > 0) {
+        Constants.frameCount = value;
+      }
+    });
+
+    var $distanceX = form['distance-x'];
+    $distanceX.value = Constants.mostDistanceX;
+    $distanceX.addEventListener('change', function () {
+      var value = +this.value;
+      if (value > 0) {
+        Constants.mostDistanceX = value;
+      }
+    });
+
+    var $distanceY = form['distance-y'];
+    $distanceY.value = Constants.mostDistanceY;
+    $distanceY.addEventListener('change', function () {
+      var value = +this.value;
+      if (value >= 0) {
+        Constants.mostDistanceY = value;
+      }
+    });
+
+    var $scale = form['scale'];
+    $scale.value = Constants.scale;
+    $scale.addEventListener('change', function () {
+      var value = +this.value;
+      if (value >= 0) {
+        Constants.scale = value;
+        Constants.step = Constants.canvasWidth / Constants.scale;
+      }
+    });
+
+    var $horizonX = form['horizon-x'];
+    $horizonX.value = Constants.horizonX;
+    $horizonX.addEventListener('change', function () {
+      Constants.horizonX = +this.value;
+    });
+
+    var $horizonY = form['horizon-y'];
+    $horizonY.value = Constants.horizonY;
+    $horizonY.addEventListener('change', function () {
+      Constants.horizonY = +this.value;
+    });
+
+    canvas.addEventListener('click', function (event) {
+      Constants.horizonY = event.layerY;
+      Constants.horizonX = event.layerX;
+
+      var $horizonX = form['horizon-x'];
+      $horizonX.value = Constants.horizonX;
+
+      var $horizonY = form['horizon-y'];
+      $horizonY.value = Constants.horizonY;
+
+      Constants.DD_ = Constants.canvasHeight - Constants.horizonY;
+    });
+    //
+    // canvas.addEventListener('wheel', function (event) {
+    //   var delta = event.deltaY > 0 ? 10 : -10;
+    //   var cpd = Constants.pd + delta;
+    //   if (cpd > 0) {
+    //     Constants.pd = cpd;
+    //   }
+    //   var $pd = form.pd;
+    //   $pd.value = Constants.pd;
+    // });
+  });
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 25eba52..93ea319 100644
--- a/index.html
+++ b/index.html
@@ -4,9 +4,7 @@
     <meta charset="UTF-8">
     <title>Perspective</title>
     <link rel="stylesheet" href="fullscreen.css">
-    <script src="Settings.js"></script>
-    <script src="Perspective.js"></script>
-    <script src="index.js"></script>
+    <script type="module" src="index.js"></script>
 </head>
 <body>
 <form id="settings">
@@ -53,7 +51,8 @@
         </label>
     </div>
 
-    *canvas clickable and scrollable
+    *canvas clickable
+<!--    and scrollable-->
 </form>
 </body>
 </html>
\ No newline at end of file
diff --git a/index.js b/index.js
index 137971d..a723a45 100644
--- a/index.js
+++ b/index.js
@@ -1,220 +1,286 @@
+import {Constants} from './defaultSettings.js';
+import {Point} from "./Perspective.js";
+import {addListeners} from "./form.js";
+
 CanvasRenderingContext2D.prototype.clear =
-    CanvasRenderingContext2D.prototype.clear || function (preserveTransform) {
-        if (preserveTransform) {
-            this.save();
-            this.setTransform(1, 0, 0, 1, 0, 0);
-        }
+  CanvasRenderingContext2D.prototype.clear || function (preserveTransform) {
+    if (preserveTransform) {
+      this.save();
+      this.setTransform(1, 0, 0, 1, 0, 0);
+    }
 
-        this.clearRect(0, 0, this.canvas.width, this.canvas.height);
+    this.clearRect(0, 0, this.canvas.width, this.canvas.height);
 
-        if (preserveTransform) {
-            this.restore();
-        }
-    };
-
-
-Settings.canvasWidth = window.innerWidth;
-Settings.canvasHeight = window.innerHeight;
-Settings.step = Settings.canvasWidth / Settings.scale;
-
-var canvas = document.createElement('canvas');
-canvas.width = Settings.canvasWidth;
-canvas.height = Settings.canvasHeight;
-
-var ctx = Settings.ctx = canvas.getContext("2d");
-var form;
-
-(function addListeners() {
-    document.addEventListener("DOMContentLoaded", function () {
-        var body = document.body;
-
-        body.appendChild(canvas);
-
-        form = document.getElementById('settings');
-        form.addEventListener('submit', function (event) {
-            event.preventDefault();
-        });
-
-        var $pd = form.pd;
-        $pd.value = Settings.pd;
-        $pd.addEventListener('change', function () {
-            var value = +this.value;
-            if (value > 0) {
-                Settings.pd = value;
-            }
-        });
-
-        var $frameCount = form['frame-count'];
-        $frameCount.value = Settings.frameCount;
-        $frameCount.addEventListener('change', function () {
-            var value = +this.value;
-            if (value > 0) {
-                Settings.frameCount = value;
-            }
-        });
-
-        var $distanceX = form['distance-x'];
-        $distanceX.value = Settings.mostDistanceX;
-        $distanceX.addEventListener('change', function () {
-            var value = +this.value;
-            if (value > 0) {
-                Settings.mostDistanceX = value;
-            }
-        });
-
-        var $distanceY = form['distance-y'];
-        $distanceY.value = Settings.mostDistanceY;
-        $distanceY.addEventListener('change', function () {
-            var value = +this.value;
-            if (value >= 0) {
-                Settings.mostDistanceY = value;
-            }
-        });
-
-        var $scale = form['scale'];
-        $scale.value = Settings.scale;
-        $scale.addEventListener('change', function () {
-            var value = +this.value;
-            if (value >= 0) {
-                Settings.scale = value;
-                Settings.step = Settings.canvasWidth / Settings.scale;
-            }
-        });
-
-        var $horizonX = form['horizon-x'];
-        $horizonX.value = Settings.horizonX;
-        $horizonX.addEventListener('change', function () {
-            Settings.horizonX = +this.value;
-        });
-
-        var $horizonY = form['horizon-y'];
-        $horizonY.value = Settings.horizonY;
-        $horizonY.addEventListener('change', function () {
-            Settings.horizonY = +this.value;
-        });
-
-        canvas.addEventListener('click', function (event) {
-            Settings.horizonY = event.layerY;
-            Settings.horizonX = event.layerX;
-
-            var $horizonX = form['horizon-x'];
-            $horizonX.value = Settings.horizonX;
-
-            var $horizonY = form['horizon-y'];
-            $horizonY.value = Settings.horizonY;
-        });
-
-        canvas.addEventListener('wheel', function (event) {
-            var delta = event.deltaY > 0 ? 10 : -10;
-            var cpd = Settings.pd + delta;
-            if (cpd > 0) {
-                Settings.pd = cpd;
-            }
-            var $pd = form.pd;
-            $pd.value = Settings.pd;
-        });
-    });
-})()
+    if (preserveTransform) {
+      this.restore();
+    }
+  };
+
+
+const canvas = document.createElement('canvas');
+canvas.width = Constants.canvasWidth;
+canvas.height = Constants.canvasHeight;
+
+const ctx = Constants.ctx = canvas.getContext("2d");
 
+addListeners(canvas);
 
 function draw(time) {
-    ctx.clear();
+  ctx.clear();
 
-    var frame = (time) % Settings.frameCount;
-    var maxDistance = Settings.canvasWidth * Settings.mostDistanceX;
-    var count = Settings.scale * Settings.mostDistanceX;
+  const maxDistance = Constants.canvasWidth * Constants.mostDistanceX;
+  const count = Constants.scale * Constants.mostDistanceX;
 
-    var leftEnd = 0 - (Settings.mostDistanceY - 1) / 2 * Settings.canvasWidth;
-    var rightEnd = Settings.canvasWidth + (Settings.mostDistanceY - 1) / 2 * Settings.canvasWidth;
+  const leftEnd = 0 - (Constants.mostDistanceY - 1) / 2 * Constants.canvasWidth;
+  const rightEnd = Constants.canvasWidth + (Constants.mostDistanceY - 1) / 2 * Constants.canvasWidth;
 
-    function getDistance(index) {
-        if (index === count) return maxDistance;
-        var order = maxDistance * index / count;
+  function getDistance(index) {
+    if (index === count) return maxDistance;
+    const order = maxDistance * index / count;
 
-        var step = (1 - frame / Settings.frameCount) * Settings.step;
-        return order + step;
-    }
+    const frame = time % Constants.frameCount;
+    const step = (1 - frame / Constants.frameCount) * Constants.step;
+    return order + step;
+  }
 
-    (function drawHorizonLines() {
-        ctx.beginPath();
-        ctx.strokeStyle = 'white';
-        for (var i = 0; i <= count; i++) {
-            var distance = getDistance(i);
+  const Z = -300;
 
-            var A = new Point(leftEnd, distance, 0);
-            var B = new Point(rightEnd, distance, 0);
-            ctx.moveTo(A.X, A.Z);
-            ctx.lineTo(B.X, B.Z);
-        }
-        ctx.stroke();
-    })();
-
-    (function drawVerticalLines() {
-        ctx.beginPath();
-        ctx.strokeStyle = 'white';
-        for (var c = leftEnd; c <= rightEnd; c += Settings.step) {
-            var A = new Point(c, 0, 0);
-            var B = new Point(c, Settings.mostDistanceX*Settings.canvasWidth, 0);
-            ctx.moveTo(A.X, A.Z);
-            ctx.lineTo(B.X, B.Y);
+  (function drawHorizonLines() {
+    ctx.beginPath();
+    ctx.strokeStyle = 'white';
+    for (let i = 0; i <= count; i++) {
+      const distance = getDistance(i);
+
+      const A = new Point(leftEnd, distance, Z);
+      const B = new Point(rightEnd, distance, Z);
+      ctx.moveTo(A.X, A.Z);
+      ctx.lineTo(B.X, B.Z);
+    }
+    ctx.stroke();
+  })();
+
+  (function drawVerticalLines() {
+    ctx.beginPath();
+    ctx.strokeStyle = 'white';
+    for (let c = leftEnd; c <= rightEnd; c += Constants.step) {
+      const A = new Point(c, 0, Z);
+      const B = new Point(c, Constants.mostDistanceX * Constants.canvasWidth, Z);
+      ctx.moveTo(A.X, A.Z);
+      ctx.lineTo(B.X, B.Z);
+    }
+    ctx.stroke();
+  })();
+
+  const x = 1000;
+  const y = 600;
+  const z = 400;
+  const size = 200;
+
+  function drawCubeMatrix(startX = 0, startY = 0, startZ = 0, size = 100,  xCount = 1, yCount = 1, zCount = 1) {
+    for (let ix = 0; ix < xCount; ix++) {
+      for (let iy = 0; iy < yCount; iy++) {
+        for (let iz = 0; iz < zCount; iz++) {
+          drawCube(startX + ix * size, startY + iy * size, startZ + iz * size, size);
         }
-        ctx.stroke();
-    })();
+      }
+    }
+  }
 
+  // drawCubeMatrix(100,100,100, 200, 3, 3, 3)
 
-    (function drawTunnel() {
-        ctx.strokeStyle = 'white';
+  // function getAngle(x, y) {
+  //   return 180 / Math.PI * Math.acos(x / y)
+  // }
+  //
+  // function getRelation(angle) {
+  //   return Math.cos(Math.PI / 180 * angle)
+  // }
 
-        var alpha = Math.PI / 180 * 59.2;
-        var height = Settings.canvasHeight * 2;
-        var left = Settings.canvasWidth / 2;
+  const angle = (time / Constants.frameCount * 60) % 180;
 
+  // 600 frameCount = 10 seconds
 
-        ctx.beginPath();
+  drawCubeRectAngle(x, y, z, size, angle);
 
-        var A = new Point(left - height * Math.cos(alpha), Settings.mostDistanceX*Settings.canvasWidth, 0);
-        var B = new Point(left + height * Math.cos(alpha), Settings.mostDistanceX*Settings.canvasWidth, 0);
-        // rails
-        ctx.moveTo(left - height * Math.cos(alpha), Settings.canvasHeight);
-        ctx.lineTo(A.X, A.Y);
+  function drawCube(x, y, z, size) {
+    const leftDown = new Point(x, y, z);
+    const leftTop = new Point(x, y + size, z)
+    const rightDown = new Point(x + size, y, z)
+    const rightTop = new Point(x + size, y + size, z)
 
-        ctx.moveTo(left + height * Math.cos(alpha), Settings.canvasHeight);
-        ctx.lineTo(B.X, B.Y);
+    const leftDownZ = new Point(x, y, z + size);
+    const leftTopZ = new Point(x, y + size, z + size)
+    const rightDownZ = new Point(x + size, y, z + size)
+    const rightTopZ = new Point(x + size, y + size, z + size)
 
-        ctx.stroke();
+    ctx.beginPath();
+    ctx.strokeStyle = 'white';
 
-        ctx.beginPath();
-        for (var y = 0; y <= count; y++) {
-            var O = new Point(left, getDistance(y), height);
+    ctx.moveTo(leftDown.X, leftDown.Z);
 
-            var X = O.X;
-            var Y = O.Z;
-            var R = O.z;
-            var sagitta = R - R * Math.sin(alpha);
-            ctx.moveTo(X + R * Math.cos(alpha), Y + R * Math.sin(alpha) + sagitta);
-            ctx.arc(X, Y + sagitta, R, Math.PI - alpha, alpha, false);
-        }
+    ctx.lineTo(leftTop.X, leftTop.Z);
+    ctx.lineTo(rightTop.X, rightTop.Z);
+    ctx.lineTo(rightDown.X, rightDown.Z);
+    ctx.lineTo(leftDown.X, leftDown.Z);
+
+    ctx.moveTo(rightTop.X, rightTop.Z);
+    ctx.lineTo(rightTopZ.X, rightTopZ.Z);
+
+    ctx.moveTo(rightDown.X, rightDown.Z);
+    ctx.lineTo(rightDownZ.X, rightDownZ.Z);
+
+    ctx.moveTo(leftTop.X, leftTop.Z);
+    ctx.lineTo(leftTopZ.X, leftTopZ.Z);
+
+    ctx.moveTo(leftDown.X, leftDown.Z);
+    ctx.lineTo(leftDownZ.X, leftDownZ.Z);
+
+    ctx.moveTo(leftDownZ.X, leftDownZ.Z);
+
+    ctx.lineTo(leftTopZ.X, leftTopZ.Z);
+    ctx.lineTo(rightTopZ.X, rightTopZ.Z);
+    ctx.lineTo(rightDownZ.X, rightDownZ.Z);
+    ctx.lineTo(leftDownZ.X, leftDownZ.Z);
+
+    ctx.stroke();
+
+
+  }
+
+  function drawCubeAngle(x, y, z, size, angle) {
+    // sin(a/2) = hipoDiff / (1√2*size)
+    const sinus = Math.sin(Math.PI / 180 * angle / 2);
+    const hipoDiff = (Math.sqrt(2) * size) * sinus;
+
+    const smallAngle = (180 - angle) / 2 - 45;
+
+    const xDiff = Math.cos(Math.PI / 180 * smallAngle) * hipoDiff;
+    const yDiff = Math.sin(Math.PI / 180 * smallAngle) * hipoDiff;
+
+    const halfSize = size / 2;
+
+    const centerX = x + halfSize;
+    const centerY = y + halfSize;
+    const centerZ = z + halfSize;
 
-        ctx.stroke();
+    const leftDown = new Point(centerX - halfSize - yDiff, centerY - halfSize + xDiff, centerZ - halfSize);
+    const leftTop = new Point(centerX - halfSize + xDiff, centerY + halfSize + yDiff, centerZ - halfSize);
+    const rightTop = new Point(centerX + halfSize + yDiff, centerY + halfSize - xDiff, centerZ - halfSize);
+    const rightDown = new Point(centerX + halfSize - xDiff, centerY - halfSize - yDiff, centerZ - halfSize);
 
-    })();
+    const leftDownZ = new Point(centerX - halfSize - yDiff, centerY - halfSize + xDiff, centerZ + halfSize);
+    const leftTopZ = new Point(centerX - halfSize + xDiff, centerY + halfSize + yDiff, centerZ + halfSize);
+    const rightTopZ = new Point(centerX + halfSize + yDiff, centerY + halfSize - xDiff, centerZ + halfSize);
+    const rightDownZ = new Point(centerX + halfSize - xDiff, centerY - halfSize - yDiff, centerZ + halfSize);
 
+    ctx.beginPath();
+    ctx.strokeStyle = 'white';
+
+    ctx.moveTo(leftDown.X, leftDown.Z);
+
+    ctx.lineTo(leftTop.X, leftTop.Z);
+    ctx.lineTo(rightTop.X, rightTop.Z);
+    ctx.lineTo(rightDown.X, rightDown.Z);
+    ctx.lineTo(leftDown.X, leftDown.Z);
+
+    ctx.moveTo(rightTop.X, rightTop.Z);
+    ctx.lineTo(rightTopZ.X, rightTopZ.Z);
+
+    ctx.moveTo(rightDown.X, rightDown.Z);
+    ctx.lineTo(rightDownZ.X, rightDownZ.Z);
+
+    ctx.moveTo(leftTop.X, leftTop.Z);
+    ctx.lineTo(leftTopZ.X, leftTopZ.Z);
+
+    ctx.moveTo(leftDown.X, leftDown.Z);
+    ctx.lineTo(leftDownZ.X, leftDownZ.Z);
+
+    ctx.moveTo(leftDownZ.X, leftDownZ.Z);
+
+    ctx.lineTo(leftTopZ.X, leftTopZ.Z);
+    ctx.lineTo(rightTopZ.X, rightTopZ.Z);
+    ctx.lineTo(rightDownZ.X, rightDownZ.Z);
+    ctx.lineTo(leftDownZ.X, leftDownZ.Z);
+
+    ctx.stroke();
+  }
+  function drawCubeRectAngle(x, y, z, size, angle) {
+    // sin(a/2) = hipoDiff / (1√2*size)
+    const sinus = Math.sin(Math.PI / 180 * angle / 2);
+    const hipoDiff = (Math.sqrt(2) * size) * sinus;
+
+    const smallAngle = (180 - angle) / 2 - 45;
+
+    const xDiff = Math.cos(Math.PI / 180 * smallAngle) * hipoDiff;
+    const yDiff = Math.sin(Math.PI / 180 * smallAngle) * hipoDiff;
+
+    const halfSize = size / 2;
+
+    const centerX = x + halfSize;
+    const centerY = y + halfSize;
+    const centerZ = z + halfSize;
+
+    const leftDown = new Point(centerX - halfSize - yDiff, centerY - halfSize + xDiff, centerZ - halfSize);
+    const leftTop = new Point(centerX - halfSize + xDiff, centerY + halfSize + yDiff, centerZ - halfSize);
+    const rightTop = new Point(centerX + halfSize + yDiff, centerY + halfSize - xDiff, centerZ - halfSize);
+    const rightDown = new Point(centerX + halfSize - xDiff, centerY - halfSize - yDiff, centerZ - halfSize);
+
+    const leftDownZ = new Point(centerX - halfSize - yDiff, centerY - halfSize + xDiff, centerZ + halfSize);
+    const leftTopZ = new Point(centerX - halfSize + xDiff, centerY + halfSize + yDiff, centerZ + halfSize);
+    const rightTopZ = new Point(centerX + halfSize + yDiff, centerY + halfSize - xDiff, centerZ + halfSize);
+    const rightDownZ = new Point(centerX + halfSize - xDiff, centerY - halfSize - yDiff, centerZ + halfSize);
+
+    ctx.beginPath();
+    ctx.strokeStyle = 'white';
+    ctx.fillStyle = 'gold';
+
+    ctx.moveTo(leftDown.X, leftDown.Z);
+
+    ctx.lineTo(leftTop.X, leftTop.Z);
+    ctx.lineTo(rightTop.X, rightTop.Z);
+    ctx.lineTo(rightDown.X, rightDown.Z);
+    ctx.lineTo(leftDown.X, leftDown.Z);
+    ctx.fill();
+
+
+    ctx.moveTo(rightTop.X, rightTop.Z);
+    ctx.lineTo(rightTopZ.X, rightTopZ.Z);
+
+    ctx.moveTo(rightDown.X, rightDown.Z);
+    ctx.lineTo(rightDownZ.X, rightDownZ.Z);
+
+    ctx.moveTo(leftTop.X, leftTop.Z);
+    ctx.lineTo(leftTopZ.X, leftTopZ.Z);
+
+    ctx.moveTo(leftDown.X, leftDown.Z);
+    ctx.lineTo(leftDownZ.X, leftDownZ.Z);
+
+    ctx.moveTo(leftDownZ.X, leftDownZ.Z);
+
+    ctx.lineTo(leftTopZ.X, leftTopZ.Z);
+    ctx.lineTo(rightTopZ.X, rightTopZ.Z);
+    ctx.lineTo(rightDownZ.X, rightDownZ.Z);
+    ctx.lineTo(leftDownZ.X, leftDownZ.Z);
+
+    ctx.stroke();
+  }
 }
 
 requestAnimationFrame = requestAnimationFrame || mozRequestAnimationFrame || webkitRequestAnimationFrame || msRequestAnimationFrame;
 
-//draw(0);
-//
-var stop = false;
-var time = 0;
+// draw(0);
+
+let stop = false;
+let time = 0;
 loop();
+
 function loop() {
-    if (!stop) {
-        time++;
-        draw(time);
-    }
+  if (!stop) {
+    time++;
+    draw(time);
+  }
 
-    requestAnimationFrame(loop);
+  requestAnimationFrame(loop);
 }
 
 //document.body.addEventListener('click', function () {
diff --git a/package.json b/package.json
index ad0585a..f619865 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "perspective",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "3D simulation on 2D canvas",
   "main": "index.html",
   "author": "Gaguliya Nugzar",