copy from pc

NookieGrey · Jan 14, 2016 · da6ca9c · da6ca9c
commit da6ca9c
Show file tree

Hide file tree

Showing 9 changed files with 472 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+idea/
+node_modules/
diff --git a/Perspective.js b/Perspective.js
@@ -0,0 +1,79 @@
+function Solid() {
+
+}
+
+Solid.distanceY = function (distance) {
+    var X = distance + Settings.pd;
+    var x = distance;
+    var Y = Settings.canvasHeight - Settings.horizonY;
+    return Y * x / X;
+};
+
+Solid.distanceX = function (distance, distanceY) {
+    var y = distanceY;
+    var Y = Settings.canvasHeight - Settings.horizonY;
+    var X = distance - Settings.horizonX;
+    return y / Y * X;
+};
+
+Solid.distanceZ = function (H, distanceY) {
+    var Y = Settings.canvasHeight - Settings.horizonY;
+    var y = Y - distanceY;
+    return y / Y * H;
+};
+
+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.prototype.drawProjection = function () {
+    ctx.strokeStyle = this.options.color;
+    ctx.beginPath();
+    ctx.moveTo(this.X, this.Y);
+    ctx.lineTo(this.X, this.Z);
+    ctx.stroke();
+};
+
+function Segment(A, B, options) {
+    this._A = A;
+    this._B = B;
+
+    this.options = options || {};
+    this.options.color = this.options.color || 'gold';
+}
+
+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();
+};
diff --git a/Settings.js b/Settings.js
@@ -0,0 +1,9 @@
+var Settings = {
+    horizonY: 250,
+    horizonX: 640,
+    frameCount: 300,
+    pd: 300,
+    mostDistanceX: 3,
+    mostDistanceY: 5,
+    scale: 5
+};
diff --git a/cycle b/cycle
@@ -0,0 +1,7 @@
+Scale  0   1   2   3   	...	n-1       	n
+
+frame0 0.0 1.0 2.0 3.0 	...	n-1 + 0.0 	n.0
+frame1 0.3 1.3 2.3 3.3 	...	n-1 + 0.3 	n.0
+frame2 0.6 1.6 2.6 3.6 	...	n-1 + 0.6 	n.0
+
+frameK 0.0 1.0 2.0 3.0 	...	n-1 + 0.0 	n.0 
diff --git a/distanceXYZ.js b/distanceXYZ.js
@@ -0,0 +1,31 @@
+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();
diff --git a/fullscreen.css b/fullscreen.css
@@ -0,0 +1,28 @@
+html {
+    min-height: 100%;
+    position: relative;
+}
+
+body {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    overflow: hidden;
+    margin: 0;
+}
+
+body canvas {
+    display: block;
+    margin: auto auto;
+    background: rgb(0,128,128);
+}
+
+#settings {
+    position: absolute;
+    right:0;
+    top: 0;
+    z-index: 1;
+    color: white;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <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>
+</head>
+<body>
+<form id="settings">
+    <div>
+        <label for="pd">
+            vision angle
+            <input type="number" id="pd" name="pd" step="10" min="10">
+        </label>
+    </div>
+    <div>
+        <label for="frame-count">
+            frames count
+            <input type="number" id="frame-count" name="frame-count" step="10" min="10">
+        </label>
+    </div>
+    <div>
+        <label for="distance-x">
+            length
+            <input type="number" id="distance-x" name="distance-x" step="1" min="1">
+        </label>
+    </div>
+    <div>
+        <label for="distance-y">
+            width
+            <input type="number" id="distance-y" name="distance-y" step="1" min="0">
+        </label>
+    </div>
+    <div>
+        <label for="scale">
+            scale
+            <input type="number" id="scale" name="scale" step="1" min="1">
+        </label>
+    </div>
+    <div>
+        <label for="horizon-x">
+            horizon x
+            <input type="number" id="horizon-x" name="horizon-x" step="10">
+        </label>
+    </div>
+    <div>
+        <label for="horizon-y">
+            horizon y
+            <input type="number" id="horizon-y" name="horizon-y" step="10">
+        </label>
+    </div>
+    <!--<div>-->
+        <!--<label for="global-z">-->
+            <!--global Z-->
+            <!--<input type="number" id="global-z" name="global-z" step="10">-->
+        <!--</label>-->
+    <!--</div>-->
+
+    *canvas clickable
+</form>
+</body>
+</html>