kjao/archive
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

initial commit - basic projection

Browse Source
This commit is contained in:
Kenneth Jao 2017-08-17 12:33:30 -04:00
commit 4fddbd44c5
3 changed files with 138 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
saku/index.css Normal file
View File

@ -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;
}

23
saku/index.html Normal file
View File

@ -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>

74
saku/index.js Normal file
View File

@ -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);