From 5fdd9b2d3639b420ede1744a36a0ffa594bd5f39 Mon Sep 17 00:00:00 2001
From: "kts@vger" <ketche@vger.(none)>
Date: Sun, 4 Aug 2013 22:30:46 -0700
Subject: [PATCH] Added scaling, resizing, and some basic resizing

---
 vif.html |   1 +
 vif.js   | 119 ++++++++++++++++++++++++++++++++++++++++++++++++-------
 2 files changed, 105 insertions(+), 15 deletions(-)
diff --git a/vif.html b/vif.html
index 21ec7d7..2c1048e 100644
--- a/vif.html
+++ b/vif.html
@@ -1,6 +1,7 @@
 <html>
 <head>
 <script type="text/javascript" src="CBDL/CBDL.js"></script>
+<script type="text/javascript" src="CBDL/CBDL_graphics.js"></script>
 <script type="text/javascript" src="vif.js"></script>
 <script type="text/javascript">
 	window.onload = function() {
diff --git a/vif.js b/vif.js
index 72e33a6..f3a3d0b 100644
--- a/vif.js
+++ b/vif.js
@@ -1,19 +1,30 @@
 /* JVIV - JavaScript Voxel Image Viewer */
 JVIV = function() {
-	this.requires = ["CBDL/CBDL_graphics.js"];
 	var state = 0;
 	var vif_loader;
 	var loop;
 	var display;
 	var buffer = [];
+	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() {
-		display = new CBDL.Graphics.Display(document.body, new CBDL.Graphics.VideoMode(512, 512, CBDL.Graphics.VM_SCALE), CBDL.Graphics.BACKEND.DIV);
+		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);
 		display.Init();
 		display.Fill(25, 75, 25);
+		default_font = new display.Font('courier');
+		debug_text = new display.String(debug_string, default_font, 9);
+		debug_text.setColor("#FFFFFF");
+		help_text = new display.String(help_string, default_font, 9);
+		help_text.setColor("#FFFFFF");
+		events = new CBDL.Event(["keydown", "keyup"], document.body);
+		events.addEvent(["resize"], window);
 		vif_loader = new VL.Loader('test.txt');
 		(loop = new CBDL.Loop(this, onLoop)).start();
 	};
-
 	var offset = 0;
 	var version = 0;
 	var type = 0;
@@ -24,32 +35,106 @@ JVIV = function() {
 	var palettes = [];
 	var voxels = [];
 	var boxels = [];
+	var scale_x = 1;
+	var scale_y = 1;
+	var camera_x = 0;
+	var camera_y = 0;
+	var current_red = 0;
+	var current_green = 0;
+	var current_blue = 0;
+	var current_mod = 1;
+
 	function onLoop(loop_time) {
+		debug_text.setText(debug_string);
+		help_text.setText(help_string);
 		if (state == 0) {
 			if (vif_loader.state == 1) {
-				display.Fill(50, 50, 50);
+				display.Fill(100, 50, 50);
 				loadVoxel(vif_loader.raw_data);
 				// We're done with the vif_loader, remove it
 				vif_loader = null;
 				// create our voxels as CBDL.Box(es)
 				for (var i=0;i<voxels.length;i++) {
-					boxels[i] = new display.Box({width: 1, height: 1}, {x: 1, y: 1}, {x:0, y:0});
+					boxels[i] = new display.Box({width: 1, height: 1}, {x: 1*scale_x, y: 1*scale_y}, {x:0, y:0});
 					boxels[i].x = voxels[i][0];
 					boxels[i].y = voxels[i][1];
 					boxels[i].z = voxels[i][2];
+					palette = palettes[voxels[i][3]];
+					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;
 				}
 				state = 1;
 			}
 		} else if (state == 1) {
+			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) {
+					current_red += current_mod;
+				} else if (current_green < 255) {
+					current_green += current_mod;
+				} else if (current_blue < 255) {
+					current_blue += current_mod;
+				} else {
+					current_mod *= -1
+				}
+			} else if (current_mod < 0) {
+				if (current_red > 0) {
+					current_red += current_mod;
+				} else if (current_green > 0) {
+					current_green += current_mod;
+				} else if (current_blue > 0) {
+					current_blue += current_mod;
+				} else {
+					current_mod *= -1
+				}
+			}
+			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();
-			loop.stop();
+			while(event = events.pollEvent()) {
+				if (event.type == "keydown") {
+					switch(event.keyCode) {
+						case 81: // q
+							loop.stop();
+							window.close();
+							break;
+						case 37: // left
+							camera_x-=10;
+							break;
+						case 39: // right
+							camera_x+=10;
+							break;
+						case 38: // up
+							break;
+						case 40: // down
+							break;
+						default:
+							console.log(event.keyCode);
+							break;
+					}
+				} else if (event.type == "resize") {
+					viewport = CBDL.Graphics.getViewport();
+					display.setWidth(viewport.width);
+					display.setHeight(viewport.height);
+					scale_x = viewport.width/width;
+					scale_y = viewport.height/height;
+					for(var i=0;i<boxels.length;i++) {
+						boxels[i].setScale({x: 1*scale_x, y: 1*scale_y});
+					}
+				}
+			}
 		}
-		return 100;
+		display.draw(debug_text, {x: 1, y: 1}, {x: 1, y: 1});
+		display.draw(help_text, {x: 1, y: 1}, {x: 1, y: 11});
+		return 25;
 	};
 	drawVoxels = function() {
 		for(var i=0;i < boxels.length;i++) {
-			console.log(boxels[i]);
-			display.draw(boxels[i], {x: 0, y: 0}, {x: boxels[i].x, y: boxels[i].y});
+			display.draw(boxels[i], {x: 0, y: 0}, {x: boxels[i].x*scale_x+camera_x, y: boxels[i].y*scale_y});
 		}
 	};
 	loadVoxel = function(buffer) {
@@ -57,19 +142,19 @@ JVIV = function() {
 		name = String.fromCharCode(buffer[0], buffer[1], buffer[2]);
 		offset = 3;
 		if (name == "VIF") {
-			console.log("Magic Number found: "+name);
+			debug_string += name+":";
 		}
 		version = buffer[offset++];
-		console.log("version: "+version);
+		debug_string += version+":";
 		type = buffer[offset++];
-		console.log("type: "+type);
+		debug_string += type+" ";
 		var palette_size = 0;
 		for ( var i = 3; i >= 0; i--) {
 			palette_size = (palette_size * 256) + buffer[offset+i];
 		}
 		palette_size += 1; // TODO: palette size in test.vif should be changed to 00 00 00 01, NOT absolutely 0
 		offset += 4; // move past pallete byte range
-		console.log("pallete size: "+palette_size);
+		debug_string += "p:"+palette_size+" ";
 		palettes = [];
 		for (var i=0;i<palette_size;i++) {
 			palettes[i] = [];
@@ -80,10 +165,13 @@ JVIV = function() {
 			console.log("palette entry("+i+"): "+palettes[i]);
 		}
 		width = buffer[offset++];
+		scale_x = display.video_mode.width/width;
 		height = buffer[offset++];
+		scale_y = display.video_mode.height/height;
 		depth = buffer[offset++];
-		console.log(width+"x"+height+"x"+depth);
+		debug_string += width+"x"+height+"x"+depth+" ";
 		var i = 0;
+		var voxel_count = 0;
 		while(offset < buffer.length) {
 			voxels[i] = [];
 			voxels[i][0] = buffer[offset++]; // x
@@ -96,8 +184,9 @@ JVIV = function() {
 			offset += 4; // move past pallete byte range
 			console.log("voxel("+i+"): "+voxels[i]);
 			i++;
+			voxel_count++;
 		}
-
+		debug_string += "v:"+voxel_count+" ";
 	};
 }; CBDL.extend(CBDL.App, JVIV);
 
