kts
/
vif
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Added scaling, resizing, and some basic resizing

master
kts@vger 2013-08-04 22:30:46 -07:00
parent 6b34f452aa
commit 5fdd9b2d36
2 changed files with 105 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
vif.html
View File

@ -1,6 +1,7 @@
<html> <html>
<head> <head>
<script type="text/javascript" src="CBDL/CBDL.js"></script> <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" src="vif.js"></script>
<script type="text/javascript"> <script type="text/javascript">
window.onload = function() { window.onload = function() {

121
vif.js
View File

@ -1,19 +1,30 @@
/* JVIV - JavaScript Voxel Image Viewer */ /* JVIV - JavaScript Voxel Image Viewer */
JVIV = function() { JVIV = function() {
this.requires = ["CBDL/CBDL_graphics.js"];
var state = 0; var state = 0;
var vif_loader; var vif_loader;
var loop; var loop;
var display; var display;
var buffer = []; 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() { 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.Init();
display.Fill(25, 75, 25); 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'); vif_loader = new VL.Loader('test.txt');
(loop = new CBDL.Loop(this, onLoop)).start(); (loop = new CBDL.Loop(this, onLoop)).start();
}; };
var offset = 0; var offset = 0;
var version = 0; var version = 0;
var type = 0; var type = 0;
@ -24,32 +35,106 @@ JVIV = function() {
var palettes = []; var palettes = [];
var voxels = []; var voxels = [];
var boxels = []; 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) { function onLoop(loop_time) {
debug_text.setText(debug_string);
help_text.setText(help_string);
if (state == 0) { if (state == 0) {
if (vif_loader.state == 1) { if (vif_loader.state == 1) {
display.Fill(50, 50, 50); display.Fill(100, 50, 50);
loadVoxel(vif_loader.raw_data); loadVoxel(vif_loader.raw_data);
// We're done with the vif_loader, remove it // We're done with the vif_loader, remove it
vif_loader = null; vif_loader = null;
// create our voxels as CBDL.Box(es) // create our voxels as CBDL.Box(es)
for (var i=0;i<voxels.length;i++) { 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].x = voxels[i][0];
boxels[i].y = voxels[i][1]; boxels[i].y = voxels[i][1];
boxels[i].z = voxels[i][2]; 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; state = 1;
} }
} else if (state == 1) { } else if (state == 1) {
drawVoxels(); text_color = '#'+((1 << 24) + (255-current_green << 16) + (255-current_blue << 8) + 255-current_red).toString(16).substr(1);
loop.stop(); 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
} }
return 100; } 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();
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});
}
}
}
}
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() { drawVoxels = function() {
for(var i=0;i < boxels.length;i++) { for(var i=0;i < boxels.length;i++) {
console.log(boxels[i]); display.draw(boxels[i], {x: 0, y: 0}, {x: boxels[i].x*scale_x+camera_x, y: boxels[i].y*scale_y});
display.draw(boxels[i], {x: 0, y: 0}, {x: boxels[i].x, y: boxels[i].y});
} }
}; };
loadVoxel = function(buffer) { loadVoxel = function(buffer) {
@ -57,19 +142,19 @@ JVIV = function() {
name = String.fromCharCode(buffer[0], buffer[1], buffer[2]); name = String.fromCharCode(buffer[0], buffer[1], buffer[2]);
offset = 3; offset = 3;
if (name == "VIF") { if (name == "VIF") {
console.log("Magic Number found: "+name); debug_string += name+":";
} }
version = buffer[offset++]; version = buffer[offset++];
console.log("version: "+version); debug_string += version+":";
type = buffer[offset++]; type = buffer[offset++];
console.log("type: "+type); debug_string += type+" ";
var palette_size = 0; var palette_size = 0;
for ( var i = 3; i >= 0; i--) { for ( var i = 3; i >= 0; i--) {
palette_size = (palette_size * 256) + buffer[offset+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 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 offset += 4; // move past pallete byte range
console.log("pallete size: "+palette_size); debug_string += "p:"+palette_size+" ";
palettes = []; palettes = [];
for (var i=0;i<palette_size;i++) { for (var i=0;i<palette_size;i++) {
palettes[i] = []; palettes[i] = [];
@ -80,10 +165,13 @@ JVIV = function() {
console.log("palette entry("+i+"): "+palettes[i]); console.log("palette entry("+i+"): "+palettes[i]);
} }
width = buffer[offset++]; width = buffer[offset++];
scale_x = display.video_mode.width/width;
height = buffer[offset++]; height = buffer[offset++];
scale_y = display.video_mode.height/height;
depth = buffer[offset++]; depth = buffer[offset++];
console.log(width+"x"+height+"x"+depth); debug_string += width+"x"+height+"x"+depth+" ";
var i = 0; var i = 0;
var voxel_count = 0;
while(offset < buffer.length) { while(offset < buffer.length) {
voxels[i] = []; voxels[i] = [];
voxels[i][0] = buffer[offset++]; // x voxels[i][0] = buffer[offset++]; // x
@ -96,8 +184,9 @@ JVIV = function() {
offset += 4; // move past pallete byte range offset += 4; // move past pallete byte range
console.log("voxel("+i+"): "+voxels[i]); console.log("voxel("+i+"): "+voxels[i]);
i++; i++;
voxel_count++;
} }
debug_string += "v:"+voxel_count+" ";
}; };
}; CBDL.extend(CBDL.App, JVIV); }; CBDL.extend(CBDL.App, JVIV);