Cube'e bir iki yeni özellik ekledim...
<html>
<head>
<title>Cube3D Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9">
</head>
<body bgcolor="#000000" onResize="return false" onContextMenu="return false" onSelectStart="return false" onScroll="return false">
<script>
// prepare layers
for(i = 0; i < 8; i++)
document.write("<div id='v" + i + "' style='position:absolute; left:0px; top:0px; width:30px; height:30px; z-index:1'><b id='s" + i + "'>•</b></div>");
// define global variables
var firstCoorX = new Array(100, 100, 100, 100, -100, -100, -100, -100);
var firstCoorY = new Array(100, 100, -100, -100, 100, 100, -100, -100);
var firstCoorZ = new Array(100, -100, 100, -100, 100, -100, 100, -100);
var coorX = new Array();
var coorY = new Array();
var coorZ = new Array();
var zoom = 300, dist = 350;
var midX = 200, midY = 200;
var PI = 3.1415926535;
var angleXaxis = 0, angleYaxis = 0, angleZaxis = 0;
var hexN = new Array();
hexN[0] = "0";hexN[1] = "1";hexN[2] = "2";hexN[3] = "3";hexN[4] = "4";hexN[5] = "5";hexN[6] = "6";hexN[7] = "7";
hexN[8] = "8";hexN[9] = "9";hexN[10] = "A";hexN[11] = "B";hexN[12] = "C";hexN[13] = "D";hexN[14] = "E";hexN[15] = "F";
// rotate cube function
function rotateCube()
{
for(i = 0; i < 8; i++)
{
// rotate on x axis
coorY[i] = firstCoorY[i] * Math.cos(angleXaxis / 180.0 * PI) + firstCoorZ[i] * Math.sin(angleXaxis / 180.0 * PI);
coorZ[i] = firstCoorY[i] * Math.sin(angleXaxis / 180.0 * PI) - firstCoorZ[i] * Math.cos(angleXaxis / 180.0 * PI);
// rotate on y axis
coorX[i] = coorZ[i] * Math.cos(angleYaxis / 180.0 * PI) + firstCoorX[i] * Math.sin(angleYaxis / 180.0 * PI);
coorZ[i] = coorZ[i] * Math.sin(angleYaxis / 180.0 * PI) - firstCoorX[i] * Math.cos(angleYaxis / 180.0 * PI);
// rotate on z axis
temp = coorX[i];
coorX[i] = coorX[i] * Math.cos(angleZaxis / 180.0 * PI) + coorY[i] * Math.sin(angleZaxis / 180.0 * PI);
coorY[i] = temp * Math.sin(angleZaxis / 180.0 * PI) - coorY[i] * Math.cos(angleZaxis / 180.0 * PI);
}
// increase angles
angleXaxis = (angleXaxis + 1) % 360;
angleYaxis = (angleYaxis + 2) % 360;
angleZaxis = (angleZaxis + 3) % 360;
}
// projection and plot function
function setCube()
{
for(i = 0; i < 8; i++) // for every 8 vertex
{
if(coorZ[i] + dist > 0) // if it is visible
{
px = coorX[i] / (coorZ[i] + dist) * zoom; // FORMULA: projection_x = x / (z + distance) * zoom
py = coorY[i] / (coorZ[i] + dist) * zoom; // FORMULA: projection_y = y / (z + distance) * zoom
document.all("v" + i).style.left = midX + px; // FORMULA: vertex_position_x = center_of_the_area + projection_x
document.all("v" + i).style.top = midY + py; // FORMULA: vertex_position_y = middle_of_the_area + projection_y
document.all("s" + i).style.fontSize = (300 - coorZ[i]) / 5;
document.all("s" + i).style.color = "#" + conv2Hex(parseInt((550 - coorZ[i]) / 3, 10)) + "0000";
}
}
}
// convert decimal to hex
function conv2Hex(decval)
{
leftval = parseInt(decval / 16, 10);
rightval = decval % 16;
hexval = hexN[leftval] + hexN[rightval];
return hexval;
}
// main routine
function cubeAnim()
{
rotateCube(); // rotate the cube
setCube(); // project and draw
setTimeout("cubeAnim()", 20); // call next frame after 20 miliseconds
}
cubeAnim(); // call the first frame
</script>
</body>
</html>
