refact

cube Angle
cube color WIP

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();
-};
+  this.X = X;
+  this.Y = Constants.canvasHeight - Y;
+  this.Z = Constants.canvasHeight - Y - Z;
+}

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;

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;
+    // });
+  });
+}

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>