Code cleanup, added JVIV.loadVoxel() and VL.Loader() descriptions, decreased background/font color saturation from 255 to 100 so as to reduce eye bleedage

vif.js

@@ -2,14 +2,15 @@
 JVIV = function() {
 	var state = 0;
 	var vif_loader;
-	var loop;
 	var display;
-	var buffer = [];
+	var boxels = []; // array of voxels represented by CBDL.Box(es)
+	var events;
+	var loop;
 	var default_font;
 	var debug_text;
 	var debug_string = '';
 	var help_string = "left/right to rotate, up/down to pitch, z/x to zoom, q to quit";
-	var events;
+
 	this.Main = function() {
 		viewport = CBDL.Graphics.getViewport();
 		display = new CBDL.Graphics.Display(document.body, new CBDL.Graphics.VideoMode(viewport.width, viewport.height, CBDL.Graphics.VM.FILL|CBDL.Graphics.VM.ABSOLUTE), CBDL.Graphics.BACKEND.DIV);
@@ -25,27 +26,25 @@ JVIV = function() {
 		vif_loader = new VL.Loader('test.vif');
 		(loop = new CBDL.Loop(this, onLoop)).start();
 	};
-	var offset = 0;
+
 	var version = 0;
 	var type = 0;
 	var width = 0;
 	var height = 0;
 	var depth = 0;
 	var palette_size = 0;
-	var palettes = [];
+	var palettes = []; // array of palettes, ex.: palettes[1] = [0=red,1=green,2=blue,3=alpha]
-	var voxels = [];
+	var voxels = []; // array of voxels, ex.: voxels[1] = [0=x,1=y,2=z,3=palette_entry]
-	var boxels = [];
 	var scale_x = 1;
 	var scale_y = 1;
 	var camera_x = 0;
 	var camera_y = 0;
-	var current_red = 0;
+	var current_red = 0; // for pointless background
-	var current_green = 0;
+	var current_green = 0; // ^
-	var current_blue = 0;
+	var current_blue = 0; // ^
-	var current_mod = 1;
+	var current_mod = 1; // ^
-
 	function onLoop(loop_time) {
-		if (state == 0) {
+		if (state == 0) { // start state
 			if (vif_loader.state == 1) {
 				display.Fill(100, 50, 50);
 				loadVoxel(vif_loader.raw_data);
@@ -58,21 +57,23 @@ JVIV = function() {
 					boxels[i].y = voxels[i][1];
 					boxels[i].z = voxels[i][2];
 					palette = palettes[voxels[i][3]];
+					// convert our rgb byte values to a hexadecimal string
 					boxels[i].setColor('#'+((1 << 24) + (palette[0] << 16) + (palette[1] << 8) + palette[2]).toString(16).substr(1));
+					// opacity is handled from 0-1, convert our 0-255 value accordingly
 					boxels[i].opacity = palettes[voxels[i][3]][3]/255;
 				}
 				state = 1;
 			}
-		} else if (state == 1) {
+		} else if (state == 1) { // display/control state
 			text_color = '#'+((1 << 24) + (255-current_green << 16) + (255-current_blue << 8) + 255-current_red).toString(16).substr(1);
 			debug_text.setColor(text_color);
 			help_text.setColor(text_color);
 			if (current_mod > 0) {
-				if (current_red < 255) {
+				if (current_red < 100) {
 					current_red += current_mod;
-				} else if (current_green < 255) {
+				} else if (current_green < 100) {
 					current_green += current_mod;
-				} else if (current_blue < 255) {
+				} else if (current_blue < 100) {
 					current_blue += current_mod;
 				} else {
 					current_mod *= -1
@@ -90,9 +91,8 @@ JVIV = function() {
 			}
 			display.Fill(current_red, current_green, current_blue);
 			
-			//boxels[i].setColor('#'+((1 << 24) + (palette[0] << 16) + (palette[1] << 8) + palette[2]).toString(16).substr(1));
-			//boxels[i].opacity = palettes[voxels[i][3]][3]/255;
 			drawVoxels();
+			// handle our input events
 			while(event = events.pollEvent()) {
 				if (event.type == "keydown") {
 					switch(event.keyCode) {
@@ -135,7 +135,14 @@ JVIV = function() {
 			display.draw(boxels[i], {x: 0, y: 0}, {x: boxels[i].x*scale_x+camera_x, y: boxels[i].y*scale_y});
 		}
 	};
+	/** void loadVoxel(byte_array)
+	Info:
+		reads in the voxel byte array and populates the following JVIV variables:
+		name, version, type, palette_size, palettes[], width, height, depth, 
+		scale_x, scale_y, voxels[]
+	**/
 	loadVoxel = function(buffer) {
+		var offset = 0;
 		console.log(buffer);
 		name = String.fromCharCode(buffer[0], buffer[1], buffer[2]);
 		offset = 3;
@@ -162,6 +169,7 @@ JVIV = function() {
 			palettes[i][3] = buffer[offset++]; // alpha
 			console.log("palette entry("+i+"): "+palettes[i]);
 		}
+		// TODO: width, height, and depth should be prior to palettes in the .vif
 		width = buffer[offset++];
 		scale_x = display.video_mode.width/width;
 		height = buffer[offset++];
@@ -191,13 +199,20 @@ JVIV = function() {
 
 /* VIF Library */
 var VL = VL || {};
-/** int loadVif(url, &byte_array)
+/** void Loader(vif_file)
-Attempts to load the first parameter using XMLHttpRequest() as binary data into byte_array.
+Properties:
-Returns 1 on failure, 0 on success
+	state: the loading state, 0=not loaded, 1=loaded
+	data: the responseText of the XMLHttpRequest
+	raw_data: the formatted byte array - USE THIS.
+
+Info:
+	Requests the specified vif_file with an asynchronous XMLHttpRequest.
+	The Loader's state property must be polled to test for completion
 **/
 VL.Loader = function(vif_file) {
 	this.state = 0;
 	this.raw_data = [];
+	// TODO: Chrome does not support local file requests per default - create an HTML5 FileAPI backend as well
 	var req = new XMLHttpRequest();  
 	req.open('GET', vif_file, true);
 	req.overrideMimeType('text\/plain; charset=x-user-defined')
@@ -211,7 +226,7 @@ VL.Loader = function(vif_file) {
 		}
 	})(req, this));
 	req.send(null);  
-
+	// Older iframe-based loading - does not work for non-server local file requests on non-Safari browsers
 	/*var iframe = document.createElement('iframe');
 	iframe.content = 'text\/plain; charset=x-user-defined'
 	iframe.style.display = 'none';
@@ -239,61 +254,3 @@ VL.Loader = function(vif_file) {
 	})(iframe, this));
 	iframe.src = vif_file;*/
 };
-VL.loadVif = function(vif_file, byte_array) {
-	var iframe = document.createElement('iframe');
-	iframe.content = 'text\/plain; charset=x-user-defined'
-	iframe.style.display = 'none';
-	document.body.appendChild(iframe);
-	CBDL.addEvent(iframe, 'load', (function(iframe, byte_array) {
-		return function() {
-			var doc = (iframe.contentDocument || iframe.contentWindow.document || window[iframe.id].document);
-			var pre = doc.body.getElementsByTagName("pre");
-			if (typeof pre[0] === 'undefined') {
-				data = doc.body.innerHTML;
-			} else {
-				data = pre[0].innerHTML;
-			}
-			for(var i=0;i<data.length;i++) {
-				byte_array[i] = data.charCodeAt(i) & 0xff;
-			}
-			// remove self w/ "delay" to prevent resource cancelled msg in Safari
-			setTimeout((function(iframe) {
-				return function() {
-					document.body.removeChild(iframe);
-				}
-			})(iframe), 0);
-		}
-	})(iframe, byte_array));
-	iframe.src = vif_file;
-	/*CBDL.loadFile(vif_file, (function(byte_array) { return function(data) { 
-		for(var i=0;i<data.length;i++) {
-			byte_array[i] = data.charCodeAt(i) & 0xff;
-		}
-	}})(byte_array));*/
-	/*
-	var file_request = new XMLHttpRequest();
-	file_request.open('GET', vif_file, false);
-	file_request.overrideMimeType('text\/plain; charset=x-user-defined');
-	file_request.send();
-	console.log(file_request.status);
-	if (file_request.status != 200) return 1;
-		console.log("LOL");
-	for(var i=0;i<file_request.responseText.length;i++) {
-		byte_array[i] = file_request.responseText.charCodeAt(i) & 0xff;
-	}
-	console.log('lol: '+byte_array);
-	return byte_array; // unnecessary? @@ FIXME
-	*/
-/*	file_request.open("GET", "test.vif", true);
-	file_request.responseType = "arraybuffer";
-	file_request.onLoad = function(event) {
-		var buffer = file_request.response;
-		if (buffer) {
-			var bytes = new Uint8Array(buffer);
-			for (var i=0;i<bytes.byteLength;i++) {
-				console.log(bytes[i]);
-			}
-		}
-	};
-	file_request.send(null);*/
-};