commit 4fddbd44c5cf9c42810a7ee38e152e02c28ded4a Author: Kenneth Jao Date: Thu Aug 17 12:33:30 2017 -0400 initial commit - basic projection diff --git a/saku/index.css b/saku/index.css new file mode 100644 index 0000000..fb986bb --- /dev/null +++ b/saku/index.css @@ -0,0 +1,41 @@ +@import url('https://fonts.googleapis.com/css?family=Raleway'); +@import url('https://fonts.googleapis.com/css?family=Josefin+Sans'); + +html { + font-family: 'Raleway'; + /*background-color: #15171B;*/ +} + +body { + margin: 0; +} + +#hexagon { + height: 300; +} + +#hexagon polygon { + cursor: pointer; + fill: rgba(0,0,0,0); + stroke-width: 2px; + stroke: #D0790E; + + transition: fill 0.2s ease; +} + +#hexagon text { + fill: #D0790E; + pointer-events: none; +} + +.hex { + background-color: red; +} + +#hexagon polygon:hover { + fill: rgba(255,255,255,0.05); +} + +#glCanvas { + border: 2px solid black; +} \ No newline at end of file diff --git a/saku/index.html b/saku/index.html new file mode 100644 index 0000000..ef071e2 --- /dev/null +++ b/saku/index.html @@ -0,0 +1,23 @@ + + + + + Foxnet + + + + + + + + + + + + \ No newline at end of file diff --git a/saku/index.js b/saku/index.js new file mode 100644 index 0000000..3c4c3d1 --- /dev/null +++ b/saku/index.js @@ -0,0 +1,74 @@ +var canvas = document.getElementById("glCanvas"); +ctx = canvas.getContext("2d"); + +objects = {}; + +camera = [[(canvas.width/2)-50,canvas.height/2,0],[0,90]]; // [[Position],[Rotation]]; + +triangle = [ + [0,25,1], + [25,50,1], + [25,0,1] +] + +function drawShape(shape) { + ctx.beginPath(); + var newShape = []; + var cP = camera[0]; + var cR = camera[1]; + // 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) + ]; + console.log(cV); + // Perspective mapping + for(var i = 0; i < shape.length; i++) { + 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 dZ = Math.abs(shape[i][2] - c[2]); + newShape.push([c[0]+(x-c[0])/dZ,c[1]+(y-c[1])/dZ]); + } + ctx.moveTo(newShape[0][0],newShape[0][1]); + for(var i = 1; i < shape.length; i++) { + ctx.lineTo(newShape[i][0],newShape[i][1]); + } + ctx.fill(); +} + +function toRad(deg) { + return deg/180*Math.PI; +} + +function Rnd(num,fig) { + return Math.round(num*Math.pow(10,fig))/Math.pow(10,fig); +} + +function dot(vecOne, vecTwo) { + if(vecOne.length !== vecTwo.length) { + //throw error + return; + } + var final = 0; + for(var i = 0; i < vecOne.length; i++) { + final += vecOne[i]*vecTwo[i]; + } + return final; +} + +function mag(vec) { + var rad = 0; + for(var i = 0; i < vec.length; i++) { + rad += Math.pow(vec[i],2); + } + return Math.sqrt(rad); +} + +drawShape(triangle); \ No newline at end of file