diff --git a/saku/index.js b/saku/index.js index 3c4c3d1..ca7f57d 100644 --- a/saku/index.js +++ b/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)); + + /* + 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 dZ = Math.abs(shape[i][2] - c[2]); - newShape.push([c[0]+(x-c[0])/dZ,c[1]+(y-c[1])/dZ]); + 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); } -drawShape(triangle); \ No newline at end of file +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);