faces drawn in 2d

script/ObJS.js

@@ -1,8 +1,8 @@
-var backColor = "rgba(200, 200, 200, 255)";
-var vertColor = "rgba(10, 10, 10, 255)";
-var edgeColor = "rgba(200, 0, 0, 255)";
-var faceColor = "rgba(180, 180, 255, 200)";
-var textColor = "rgba(0, 0, 0, 255)";
+var backColor = "rgba(200, 200, 200, 1)";
+var vertColor = "rgba(10, 10, 10, 1)";
+var edgeColor = "rgba(200, 0, 0, 1)";
+var faceColor = "rgba(180, 180, 255, .5)";
+var textColor = "rgba(0, 0, 0, 1)";
 var vertSize = 6; //Make it even
 var scale = 50;
 
@@ -22,8 +22,10 @@ function loadModel(val){
 	xmlhttp.send();
 	var fileContent = xmlhttp.responseText;
 	initArrays();
-	readObj(fileContent);
+	readVerts(fileContent);
+	readFaces(fileContent);
 	initCanvas();
+	drawFaces();
 	drawVerts();
 	writeCredits();
 }
@@ -37,25 +39,41 @@ function initArrays(){
 	face = new Array();
 }
 
-function readObj(text){
+function readVerts(text){
+	var line;
+	var i = 0;
+	while (text.indexOf("v ") != -1){
+		line = text.substring(text.indexOf("v "), text.indexOf("\n", text.indexOf("v ")));
+		vert[i] = new Array(3);
+		line = line.substring(2);
+		vert[i][0] = scale * Math.round(line.substring(0, line.indexOf(" ")));
+		line = line.substring(line.indexOf(" ") + 1);
+		vert[i][1] = scale * Math.round(line.substring(0, line.indexOf(" ")));
+		line = line.substring(line.indexOf(" ") + 1);
+		vert[i][2] = scale * Math.round(line);
+		i = i + 1;
+		text = text.substring(text.indexOf("v ") + 1)
+	}	
+}
+
+function readFaces(text){
 	var finish = false;
 	var line;
 	var i = 0;
-	while (!finish){
-		if (text.indexOf("v ") == -1)
-			finish = true;
-		else{
-			line = text.substring(text.indexOf("v "), text.indexOf("\n", text.indexOf("v ")));
-			vert[i] = new Array(3);
-			line = line.substring(2);
-			vert[i][0] = scale * Math.round(line.substring(0, line.indexOf(" ")));
-			line = line.substring(line.indexOf(" ") + 1);
-			vert[i][1] = scale * Math.round(line.substring(0, line.indexOf(" ")));
+	var j;
+	while (text.indexOf("f ") != -1){
+		line = text.substring(text.indexOf("f "), text.indexOf("\n", text.indexOf("f ")));
+		line = line.substring(2);
+		face[i] = new Array();
+		j = 0;
+		while(line.indexOf(" ") != -1){
+			face[i][j] = line.substring(0, line.indexOf(" ")) - 1;
 			line = line.substring(line.indexOf(" ") + 1);
-			vert[i][2] = scale * Math.round(line);
-			i = i + 1;
-			text = text.substring(text.indexOf("v ") + 1)
-		}	
+			j = j + 1;
+		}
+		face[i][j] = line - 1;
+		i = i + 1;
+		text = text.substring(text.indexOf("f ") + 1)	
 	}
 }
 
@@ -65,7 +83,7 @@ function drawVerts(){
 	var y;
 	var w;
 	var h;
-	console.log("Drawing " + vert.length + " verts");
+	//console.log("Drawing " + vert.length + " verts");
 	for (var i = 0; i < vert.length; i++) {
 		x = vert[i][0] - (vertSize / 2);
 		w = vertSize;
@@ -75,13 +93,27 @@ function drawVerts(){
 		//ctx.arc(vert[i][0], vert[i][1], vertSize, 0, 2 * Math.PI, false);
 		//console.log(x + ", " + y + ", " + w + ", " + h)
 		ctx.fillRect(x, y, w, h);
-		console.log("Drawed vert " + i);
+		//console.log("Drawed vert " + i);
+	}
+}
+
+function drawFaces(){
+	for (var i = 0; i < face.length; i++){
+		ctx.fillStyle = edgeColor;
+		ctx.beginPath();
+		ctx.moveTo(vert[face[i][0]][0], vert[face[i][0]][1]);
+		for (var j = 1; j < face[i].length; j++) {
+			ctx.lineTo(vert[face[i][j]][0], vert[face[i][j]][1]);	
+		}
+		ctx.closePath();
+		ctx.fillStyle = faceColor;
+		ctx.fill();
 	}
 }
 
 function initCanvas(){
 	if (canvas == null){
-		console.log("INIT");
+		//console.log("INIT");
 		canvas = document.getElementById("ObJSCanvas");
 		ctx = canvas.getContext("2d");
 		ctx.translate(canvas.width / 2, canvas.height / 2);
@@ -115,7 +147,7 @@ function mouseClick(){
 }
 
 function writeCredits(){
-	console.log("CREDITS");
+	//console.log("CREDITS");
 	ctx.fillStyle = textColor;
 	ctx.font = "12px Arial";
 	var h = canvas.height / 2 - 14;