rotational camera perspective mapping

saku/index.js

@@ -3,39 +3,84 @@ ctx = canvas.getContext("2d");
 
 objects = {};
 
-camera = [[(canvas.width/2)-50,canvas.height/2,0],[0,90]]; // [[Position],[Rotation]];
-
+camera = [[canvas.width/2,0,canvas.height/2],[1,1],1]; // [[Position],[Rotation(x,z)],Focal];
 triangle = [
-  [0,25,1],
-  [25,50,1],
-  [25,0,1]
+  [0,1,25],
+  [25,1,50],
+  [25,1,0]
 ]
 
 function drawShape(shape) {
   ctx.beginPath();
   var newShape = [];
-  var cP = camera[0];
-  var cR = camera[1];
+  var cP = camera[0]; // Camera Position
+  console.log(cP);
+  var cR = camera[1]; // Camera Rotation
+  var cF = camera[2];
   // Camera direction vector
   var cV = [
-    Rnd(Math.cos(toRad(cR[1])),3),
-    Rnd(Math.sin(toRad(cR[0])),3),
-    Rnd(Math.sin(toRad(cR[1])),3)
+    Rnd(cF*Math.sin(toRad(cR[1])),3), // 0 Degrees Z points straight to Y.
+    Rnd(cF*Math.cos(toRad(cR[1])),3),
+    Rnd(cF*Math.sin(toRad(cR[0])),3)  // 0 Degrees X points straight to Y.
   ];
-  console.log(cV);
+  console.log("Camera Vector: ",cV);
   // Perspective mapping
-  for(var i = 0; i < shape.length; i++) {
+  for(var i = 0; i < shape.length; i++) { // Each point in 3D
     var x = shape[i][0];
     var y = shape[i][1];
     var z = shape[i][2];
-    var pV = [x-cV[0],y-cV[1],z-cV[1]];
-    console.log(pV);
-    var theta = Rnd(Math.acos((dot(cV,pV)/(mag(cV)*mag(pV)))),5);
-    console.log(theta);
+    var pV = [x-cP[0],y-cP[1],z-cP[2]]; // Point direction vector
+    // Restricting to X and Z dimensions and comparing to Y.
+    var distPX = mag(dim("XY",pV));
+    var distPZ = mag(dim("ZY",pV));
+    var distCX = mag(dim("XY",cV));
+    var distCZ = mag(dim("ZY",cV));
 
-    var dZ = Math.abs(shape[i][2] - c[2]);
-    newShape.push([c[0]+(x-c[0])/dZ,c[1]+(y-c[1])/dZ]);
+    /* 
+      sin(acos(x)) = sqrt(1-x^2)
+      cos(acos(x)) = x
+    */
+    /*var thetaX = Rnd(Math.acos(
+      dot(dim("XZ",cV),dim("XZ",pV)) /
+      (distCX*distPX)
+    ),5);
+    var thetaY = Rnd(Math.acos(
+      dot(dim("YZ",cV),dim("YZ",pV)) /
+      (distCY*distPY)
+    ),5);
+    var oppX = distPX * Math.sin(thetaX);
+    var oppY = distPY * Math.sin(thetaY);
+    */
+
+    var adjX = dot(dim("XY",cV),dim("XY",pV)) / distCX;
+    var adjZ = dot(dim("ZY",cV),dim("ZY",pV)) / distCZ;
+    
+    var oppX = distPX * Math.sqrt(1-Math.pow(adjX/distPX,2));
+    var oppZ = distPZ * Math.sqrt(1-Math.pow(adjZ/distPZ,2));
+
+    var projOppX = distCX*oppX/adjX; // Represents X
+    var projOppZ = distCZ*oppZ/adjZ; // Represents Y
+    // If the dot product is greater than 0, b is on the right of a.
+    if(adjX > 0) projOppX *= -1; 
+    if(adjZ < 0) projOppZ *= -1;
+
+    console.log("--------\nPoint Position: ", shape[i],
+      "\nPosition Vector " + i + ": ", pV,
+      "\nDistancePXY: ", distPX, 
+      "\nDistancePZY: ", distPZ, 
+      "\nDistanceCXY: ", distCX, 
+      "\nDistanceCZY: ", distCZ,
+      "\nAdjacentXY: ", adjX,
+      "\nAdjacentZY: ", adjZ,
+      "\nOppositeXY: ", oppX, 
+      "\nOppositeZY: ", oppZ,
+      "\nProjectedOppXY: ", projOppX,
+      "\nProjectedOppZY: ", projOppZ
+    );
+
+    newShape.push([Rnd(cP[0]+projOppX,3),Rnd(cP[2]+projOppZ,3)]);
   }
+  console.log(newShape);
   ctx.moveTo(newShape[0][0],newShape[0][1]);
   for(var i = 1; i < shape.length; i++) {
     ctx.lineTo(newShape[i][0],newShape[i][1]);
@@ -53,7 +98,7 @@ function Rnd(num,fig) {
 
 function dot(vecOne, vecTwo) {
   if(vecOne.length !== vecTwo.length) {
-    //throw error
+      throw new SizeMismatch('VectorDimMismatch', [vecOne,vecTwo]);
     return;
   }
   var final = 0;
@@ -71,4 +116,30 @@ function mag(vec) {
   return Math.sqrt(rad);
 }
 
+function dim(dimensions, vector) {
+  var newVec = [];
+  var ref = {
+    "x": 0,
+    "y": 1,
+    "z": 2
+  };
+
+  if(dimensions.constructor === Array) {
+    for(var i = 0; i < dimensions.length; i++) {
+      newVec.push(vector[dimensions[i]]);
+    }
+  } else if(dimensions.constructor === String) {
+    for(var i = 0; i < dimensions.length; i++) {
+      newVec.push(vector[ref[dimensions[i].toLowerCase()]]);
+    }
+  }
+  return newVec;
+}
+
+function SizeMismatch(message, obj) {
+  this.mesage = message;
+  this.name = "SizeMismatch";
+  this.matrix = obj;
+}
+
 drawShape(triangle);