Added scaling, resizing, and some basic resizing
kts@vger
parent
6b34f452aa
commit
5fdd9b2d36
1
vif.html
1
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() {
|
||||
|
|
|
|||
119
vif.js
119
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);
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue