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

Added constructors for scene and respective functions

Browse Source
This commit is contained in:
Kenneth Jao 2017-08-28 00:48:29 -04:00
parent ffcc4cf095
commit 6150a33694
3 changed files with 122 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
saku/index.css
View File

@ -37,5 +37,5 @@ body {
} }
#glCanvas { #glCanvas {
border: 2px solid black;
} }

10
saku/index.html
View File

@ -8,16 +8,8 @@
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.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"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
</head> </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> <body>
<canvas id="glCanvas" width="100%" height="100%"> <canvas id="glCanvas"></canvas>
</canvas>
</body> </body>
<script src="./index.js"></script> <script src="./index.js"></script>
</html> </html>

150
saku/index.js
View File

@ -1,21 +1,97 @@
var canvas = document.getElementById("glCanvas"); Saku = {
ctx = canvas.getContext("2d"); Scene: function() {
this.objects = [];
this.addObject = function(obj) {
var invalid = [varType(obj) !== "Object", varType(obj)];
if(varType(obj) !== "Object") throw TypeError("Expected Object as argument; Got " + invalid[1] + ".");
objects = {}; this.objects.push(obj);
verbose = true; }
camera = [[canvas.width/2,0,canvas.height/2],[1,1],1]; // [[Position],[Rotation(x,z)],Focal]; },
Object: function(vertices, name) {
if(vertices === undefined) throw TypeError("Not enough arguments; Expected Array as argument.");
var invalid = [[varType(vertices) !== "Array", varType(vertices)]];
invalid[1] = vertices.every(function(element) { return varType(element) !== "Array"; });
invalid[2] = invalid[1] || vertices.every(function(element) { return element.every(function(number) { return isNaN(number); }); });
if(invalid[0][0]) throw TypeError("Expected Array as argument; Got " + invalid[0][1]);
if(invalid[1]) throw TypeError("Expected Arrays as 1st dimensional element.");
if(invalid[2]) throw TypeError("Expected Number as 2nd dimensional element.");
triangle = { this.name = name || "Unnamed Object";
"name": "Triangle", this.vertices = vertices;
"vertices": [
[0,1,25], this.translateX = function(value) {
[25,1,50], this.vertices.forEach(function(ele, index, arr) {
[25,1,0] arr[index][0] = ele[0] + value;
] });
}
this.translateY = function(value) {
this.vertices.forEach(function(ele, index, arr) {
arr[index][1] = ele[1] + value;
});
}
this.translateZ = function(value) {
this.vertices.forEach(function(ele, index, arr) {
arr[index][2] = ele[2] + value;
});
}
this.translate = function(value) {
this.vertices.forEach(function(ele, index, arr) {
arr[index][0] = ele[0] + value;
arr[index][1] = ele[1] + value;
arr[index][2] = ele[2] + value;
});
}
}
} }
function drawShape(shape) { Saku["Triangle"] = function(name) {
ctx.beginPath(); Saku.Object.call(this, [
[500,4,500],
[250,4,800],
[250,4,600]
], (name || "Triangle"));
this.prototype = Object.create(Saku.Object.prototype);
}
Saku["Square"] = function(name) {
Saku.Object.call(this, [
[1000,4,600],
[1500,4,600],
[1500,4,1100],
[1000,4,1100]
], (name || "Square"));
this.prototype = Object.create(Saku.Object.prototype);
}
function varType(variable) {
var type = typeof variable;
if(type === "object") {
return (variable.constructor === Array) ? "Array" : "Object";
} else {
return type[0].toUpperCase() + type.slice(1);
}
}
function updateFrame() {
ctx.clearRect(0,0,canvas.width,canvas.height)
for(var i = 0; i < scene.objects.length; i++) {
var object = scene.objects[i];
object = projectObj(object);
ctx.beginPath();
ctx.moveTo(object[0][0],object[0][1]);
for(var j = 1; j < object.length; j++) {
ctx.lineTo(object[j][0],object[j][1]);
}
ctx.fill();
}
}
function projectObj(object) {
var log = []; var log = [];
var newShape = []; var newShape = [];
var cP = camera[0]; // Camera Position var cP = camera[0]; // Camera Position
@ -30,7 +106,7 @@ function drawShape(shape) {
if(verbose) { if(verbose) {
log = { log = {
"Shape Name": shape.name, "Object Name": object.name,
"Camera Position": vecToObj(cP), "Camera Position": vecToObj(cP),
"Camera Rotation": { "Camera Rotation": {
"X": cR[0], "X": cR[0],
@ -38,16 +114,16 @@ function drawShape(shape) {
}, },
"Camera Focal": cF, "Camera Focal": cF,
"Camera Vector": vecToObj(cV), "Camera Vector": vecToObj(cV),
"Shape Vertice Values": {}, "Object Vertice Values": {},
"Canvas Points": {} "Canvas Points": {}
} }
} }
// Perspective mapping // Perspective mapping
for(var i = 0; i < shape.vertices.length; i++) { // Each point in 3D for(var i = 0; i < object.vertices.length; i++) { // Each point in 3D
var x = shape.vertices[i][0]; var x = object.vertices[i][0];
var y = shape.vertices[i][1]; var y = object.vertices[i][1];
var z = shape.vertices[i][2]; var z = object.vertices[i][2];
var pV = [x-cP[0],y-cP[1],z-cP[2]]; // Point direction vector var pV = [x-cP[0],y-cP[1],z-cP[2]]; // Point direction vector
// Restricting to X and Z dimensions and comparing to Y. // Restricting to X and Z dimensions and comparing to Y.
var distPX = mag(dim("XY",pV)); var distPX = mag(dim("XY",pV));
@ -77,8 +153,8 @@ function drawShape(shape) {
if(verbose) { if(verbose) {
var num = "Point " + (i+1).toString(); var num = "Point " + (i+1).toString();
log["Shape Vertice Values"][num] = { log["Object Vertice Values"][num] = {
"Point Position": vecToObj(shape.vertices[i]), "Point Position": vecToObj(object.vertices[i]),
"Position Vector": vecToObj(pV), "Position Vector": vecToObj(pV),
"DistancePXY": distPX, "DistancePXY": distPX,
"DistancePZY": distPZ, "DistancePZY": distPZ,
@ -96,11 +172,7 @@ function drawShape(shape) {
newShape.push([canvasPointX, canvasPointY]); newShape.push([canvasPointX, canvasPointY]);
} }
if(verbose) console.log(log); if(verbose) console.log(log);
ctx.moveTo(newShape[0][0],newShape[0][1]); return newShape;
for(var i = 1; i < shape.vertices.length; i++) {
ctx.lineTo(newShape[i][0],newShape[i][1]);
}
ctx.fill();
} }
function toRad(deg) { function toRad(deg) {
@ -160,10 +232,26 @@ function SizeMismatch(message, obj) {
function vecToObj(vec) { function vecToObj(vec) {
var obj = {}; var obj = {};
var ref = ["X","Y","Z"]; var ref = ["X","Y","Z"];
for(var i = 0; i < vec.length; i++) { vec.forEach(function(part) {
obj[ref[i]] = vec[i]; obj[ref[part]] = vec[part];
} });
return obj; return obj;
} }
drawShape(triangle); var canvas = document.getElementById("glCanvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
ctx = canvas.getContext("2d");
drawObjects = [];
verbose = false;
camera = [[canvas.width/2,0,canvas.height/2],[0,0],1]; // [[Position],[Rotation(x,z)],Focal];
scene = new Saku.Scene();
var triangle = new Saku.Triangle();
var square = new Saku.Square();
scene.addObject(triangle);
scene.addObject(square);
setInterval(updateFrame, 500);