initial commit - basic projection

2017-08-17 12:33:30 -04:00 · 2017-08-17 12:33:30 -04:00 · 4fddbd44c5
commit 4fddbd44c5
3 changed files with 138 additions and 0 deletions
--- a/saku/index.css
+++ 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;
+}
--- a/saku/index.html
+++ b/saku/index.html
@ -0,0 +1,23 @@
+<html>
+	<head>
+		<meta charset="utf-8">
+	    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+	    <title>Foxnet</title>
+	    <link rel="icon" href="../assets/favicon.ico">
+	    <link rel="stylesheet" href="./index.css">
+	    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
+	    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
+	</head>	
+	<!-- <body>
+				<svg id="hexagon">
+			<polygon class="hex" points="300,150 225,280 75,280 0,150 75,20 225,20"></polygon>
+			<text x="50%" y="75%"df text-anchor="middle" font-family="Josefin Sans" font-size="35" font-weight="100">Homepage</text>
+		</svg>
+
+	</body> -->
+	<body>
+	  <canvas id="glCanvas" width="100%" height="100%">
+	  </canvas>
+	</body>
+	<script src="./index.js"></script>
+</html>
--- a/saku/index.js
+++ 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);