verts drawn in 2d

script/ObJS.js

@@ -3,48 +3,111 @@ 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 vertSize = 5;
+var vertSize = 6; //Make it even
+var scale = 50;
 
 var mDown = false;
 
 var canvas;
 var ctx;
 
+var obj;
+var vert;
+var face;
+
 function loadModel(val){
 	//Get file
 	xmlhttp = new XMLHttpRequest();
 	xmlhttp.open("GET","/obj/" + val.value + ".obj", false);
 	xmlhttp.send();
 	var fileContent = xmlhttp.responseText;
-	
+	initArrays();
+	readObj(fileContent);
 	initCanvas();
+	drawVerts();
 	writeCredits();
 }
 
-function initCanvas(){
-	canvas = document.getElementById("ObJSCanvas");
-	ctx = canvas.getContext("2d");
-	
-	ctx.fillStyle = backColor;
-	ctx.fillRect(0, 0, canvas.width, canvas.height);
-	
-	
-	canvas.onmousedown = function(e){
-		
-		mDown = true;
+function initArrays(){
+	obj =  null;
+	vert = null;
+	face = null;
+	obj =  new Array();
+	vert = new Array();
+	face = new Array();
+}
+
+function readObj(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(" ")));
+			line = line.substring(line.indexOf(" ") + 1);
+			vert[i][2] = scale * Math.round(line);
+			i = i + 1;
+			text = text.substring(text.indexOf("v ") + 1)
+		}	
 	}
-	
-	canvas.onmouseup = function(e){
-		if(mDown) mouseClick(e);
-		
-		mDown = false;
+}
+
+function drawVerts(){
+	ctx.fillStyle = vertColor;
+	var x;
+	var y;
+	var w;
+	var h;
+	console.log("Drawing " + vert.length + " verts");
+	for (var i = 0; i < vert.length; i++) {
+		x = vert[i][0] - (vertSize / 2);
+		w = vertSize;
+		y = vert[i][1] - (vertSize / 2);
+		h = vertSize;
+		//console.log("vert[" + i + "] x: " + vert[i][0] + " y: " + vert[i][1] + " z: " + vert[i][2])
+		//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);
 	}
-	
-	canvas.onmousemove = function(e){
-		if(!mDown) return;
+}
+
+function initCanvas(){
+	if (canvas == null){
+		console.log("INIT");
+		canvas = document.getElementById("ObJSCanvas");
+		ctx = canvas.getContext("2d");
+		ctx.translate(canvas.width / 2, canvas.height / 2);
 		
-		return false;
+		canvas.onmousedown = function(e){
+			
+			mDown = true;
+		}
+			
+		canvas.onmouseup = function(e){
+			if(mDown) mouseClick(e);
+			
+			mDown = false;
+		}
+			
+		canvas.onmousemove = function(e){
+			if(!mDown) return;
+			
+			return false;
+		}
 	}
+	
+	ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+	ctx.fillStyle = backColor;
+	ctx.fillRect(-canvas.width / 2, -canvas.height / 2, canvas.width, canvas.height);
 }
 
 function mouseClick(){
@@ -52,9 +115,10 @@ function mouseClick(){
 }
 
 function writeCredits(){
+	console.log("CREDITS");
 	ctx.fillStyle = textColor;
 	ctx.font = "12px Arial";
-	var h = canvas.height - 14;
-	var w = canvas.width - 45;
+	var h = canvas.height / 2 - 14;
+	var w = canvas.width / 2 - 45;
 	ctx.fillText("ObJS", w, h);
 }