This post has been edited by monkadelicd: 07 August 2010 - 07:16 PM
16 Replies - 1109 Views - Last Post: 13 August 2010 - 11:24 AM
#1
Display a 3-D array as 2-D
Posted 07 August 2010 - 07:15 PM
Replies To: Display a 3-D array as 2-D
#2
Re: Display a 3-D array as 2-D
Posted 07 August 2010 - 07:29 PM
pseudo-code:
for(x= 0; x < max_x; x++)
{
for(y=0; y < max_y; y++)
{
for(z=0; z < max_z; z++)
{
//output array value;
}
}
// output a line return
}
#3
Re: Display a 3-D array as 2-D
Posted 07 August 2010 - 07:40 PM
This is essentially unfolding the cube. Your 10x10x10 would then unfold to a 2D array that is 10x10 stacked end to end 10 times... or a 100x10 2D array. Where each X value in the first 10x10 corresponds to (X + (10 * 3D index)). Thus if I have a mark in 2,3 then its next 3D dimension value would be 22,3, third level is 32,3... 42,3 etc.
Hope you get what I am saying here.
#4
Re: Display a 3-D array as 2-D
Posted 07 August 2010 - 08:13 PM
I created the original 3-D array and two 2-D arrays (one for a "front" view and one for a "side" view). Here's the code I tried:
var row, col, layer;
var space = new Array()
for (layer = 0; layer <= 9; layer++)
{ space[layer] = new Array();
for(col = 0; col <= 9; col++)
{ space[layer][col] = new Array();
for(row = 0; row <= 9; row++)
{ space[layer][col][row] = " ....";
}
}
}
var yzspace = new Array()
for (col = 0; col <= 9; col++)
{ yzspace[col] = new Array();
for (row = 0; row <= 9; row++)
{ yzspace[col][row] = " ....";
}
}
var xzspace = new Array()
for (layer = 0; layer <= 9; layer++)
{ xzspace[layer] = new Array();
for (row = 0; row <= 9; row++)
{ xzspace[layer][row] = " ....";
}
}
space[1][3][4] = " E ";
space[7][9][7] = " K ";
space[1][3][9] = " S ";
space[4][2][7] = " S ";
space[2][7][3] = " S ";
space[8][5][6] = " S ";
space[7][2][5] = " S ";
for (layer = 0; layer <= 9; layer++)
{ for (col = 0; col <= 9; col++)
{ for (row = 0; row <= 9; row++)
{ if (space[layer][col][row] != " ....")
{ space[layer][col][row] = yzspace[col][row];
space[layer][col][row] = xzspace[layer][row];
}
}
}
}
I was thinking that the last block would write and overwrite the secondary arrays with the contents of each layer from the original array. But writing the contents of the secondary arrays shows all elements are " ...." and no E, K, or S.
I think the pseudo code CTphpnwb wrote would basically give me the unfolded 3-D array that Martyr2 is speaking of. I'll try doing it that way if the way I'm trying isn't possible.
#5
Re: Display a 3-D array as 2-D
Posted 07 August 2010 - 08:44 PM
<html>
<head>
<title>3 dimension arrays</title>
<script type="text/javascript">
var Z = new Array(10);
// initialize 3 dimension array
for (var z=0; z<10; z++) {
Z[z] = new Array(10);
for (var y=0; y<10; y++) {
Z[z][y] = new Array(10);
for (var x=0; x<10; x++) {
Z[z][y][x] = 'Z'+z+'Y'+y+'X'+x;
}
}
}
function DisplayZ(zndx) {
// alert(Z[zndx].join('\n'));
var str = '';
str += '<table border="1"><tr>';
for (var y=0; y<10; y++) {
for (var x=0; x<10; x++) {
str += '<td>'+Z[zndx][y][x]+'</td>';
}
str += '</tr><tr>';
}
str += '</tr></table>';
return str;
}
function DisplayY(yndx) {
var str = '';
str += '<table border="1"><tr>';
for (var z=0; z<10; z++) {
for (var x=0; x<10; x++) {
str += '<td>'+Z[z][yndx][x]+'</td>';
}
str += '</tr><tr>';
}
str += '</tr></table>';
return str;
}
function DisplayX(xndx) {
var str = '';
str += '<table border="1"><tr>';
for (var z=0; z<10; z++) {
for (var y=0; y<10; y++) {
str += '<td>'+Z[z][y][xndx]+'</td>';
}
str += '</tr><tr>';
}
str += '</tr></table>';
return str;
}
</script>
</head>
<body>
<button onclick="document.getElementById('ArrayInfo').innerHTML=DisplayZ(0)">Z0</button>
<button onclick="document.getElementById('ArrayInfo').innerHTML=DisplayZ(1)">Z1</button>
<button onclick="document.getElementById('ArrayInfo').innerHTML=DisplayZ(2)">Z2</button>
<button onclick="document.getElementById('ArrayInfo').innerHTML=DisplayZ(3)">Z3</button>
<button onclick="document.getElementById('ArrayInfo').innerHTML=DisplayZ(4)">Z4</button>
<button onclick="document.getElementById('ArrayInfo').innerHTML=DisplayZ(5)">Z5</button>
<button onclick="document.getElementById('ArrayInfo').innerHTML=DisplayZ(6)">Z6</button>
<button onclick="document.getElementById('ArrayInfo').innerHTML=DisplayZ(7)">Z7</button>
<button onclick="document.getElementById('ArrayInfo').innerHTML=DisplayZ(8)">Z8</button>
<button onclick="document.getElementById('ArrayInfo').innerHTML=DisplayZ(9)">Z9</button>
<br>
<button onclick="document.getElementById('ArrayInfo').innerHTML=DisplayY(0)">Y0</button>
<button onclick="document.getElementById('ArrayInfo').innerHTML=DisplayY(1)">Y1</button>
<button onclick="document.getElementById('ArrayInfo').innerHTML=DisplayY(2)">Y2</button>
<button onclick="document.getElementById('ArrayInfo').innerHTML=DisplayY(3)">Y3</button>
<button onclick="document.getElementById('ArrayInfo').innerHTML=DisplayY(4)">Y4</button>
<button onclick="document.getElementById('ArrayInfo').innerHTML=DisplayY(5)">Y5</button>
<button onclick="document.getElementById('ArrayInfo').innerHTML=DisplayY(6)">Y6</button>
<button onclick="document.getElementById('ArrayInfo').innerHTML=DisplayY(7)">Y7</button>
<button onclick="document.getElementById('ArrayInfo').innerHTML=DisplayY(8)">Y8</button>
<button onclick="document.getElementById('ArrayInfo').innerHTML=DisplayY(9)">Y9</button>
<br>
<button onclick="document.getElementById('ArrayInfo').innerHTML=DisplayX(0)">X0</button>
<button onclick="document.getElementById('ArrayInfo').innerHTML=DisplayX(1)">X1</button>
<button onclick="document.getElementById('ArrayInfo').innerHTML=DisplayX(2)">X2</button>
<button onclick="document.getElementById('ArrayInfo').innerHTML=DisplayX(3)">X3</button>
<button onclick="document.getElementById('ArrayInfo').innerHTML=DisplayX(4)">X4</button>
<button onclick="document.getElementById('ArrayInfo').innerHTML=DisplayX(5)">X5</button>
<button onclick="document.getElementById('ArrayInfo').innerHTML=DisplayX(6)">X6</button>
<button onclick="document.getElementById('ArrayInfo').innerHTML=DisplayX(7)">X7</button>
<button onclick="document.getElementById('ArrayInfo').innerHTML=DisplayX(8)">X8</button>
<button onclick="document.getElementById('ArrayInfo').innerHTML=DisplayX(9)">X9</button>
<br>
<div id="ArrayInfo"></div>
</body>
</html>
#6
Re: Display a 3-D array as 2-D
Posted 08 August 2010 - 01:05 PM
In the example I'm working with i have many empty elements in the array. Flattening one dimension won't overlap any information.
Imagine a two checker boards stacked on top of each other so the red and black squares are opposite. If these two were combined all squares would be either black or red.
Can anyone explain why my attempt posted above doesn't give the desired result?
In line 38-47 I assumed looping through all 3 dimensions and writing all the elements to just 2 dimensions would have done the trick. Why is the result an empty array if I'm only writing when the original is not " ...."
Edit - Ok I figured out why my method wasn't working. Still learning to find my beginner mistakes. I had line 42 and 43 backwards. I reversed the and now I have a flattened version of my 3d array.
This post has been edited by monkadelicd: 08 August 2010 - 01:37 PM
#7
Re: Display a 3-D array as 2-D
Posted 08 August 2010 - 03:01 PM
Now all have to do is part 2 of the exercise; plotting a course from E to K.
Exercise:
Create a three-dimensional array which represents a section of the galaxy. Your array should have 10 rows, 10 columns and 10 layers. The star ship Enterprise is at position (1, 3, 4), a Klingon battleship at (7, 9, 7) and stars at (1, 3, 9), (4, 2, 7), (2, 7, 3), (8, 5, 6) and (7, 2, 5).
1. How would you display this information on the screen (which can only represent two dimensions)?
2. Add lines to your program which allows the captain of the Enterprise to plot a course to intercept the Klingons, and which informs him if the course will take him through a star.
<html>
<head>
<title>A Section of Sci-Fi Space</title>
</head>
<body>
<script type="text/javascript">
<!--
var row, col, layer;
var space = new Array()
for (layer = 0; layer <= 9; layer++)
{ space[layer] = new Array();
for(col = 0; col <= 9; col++)
{ space[layer][col] = new Array();
for(row = 0; row <= 9; row++)
{ space[layer][col][row] = " ";
}
}
}
var yzSpace = new Array()
for (col = 0; col <= 9; col++)
{ yzSpace[col] = new Array();
for (row = 0; row <= 9; row++)
{ yzSpace[col][row] = " ";
}
}
var xzSpace = new Array()
for (layer = 0; layer <= 9; layer++)
{ xzSpace[layer] = new Array();
for (row = 0; row <= 9; row++)
{ xzSpace[layer][row] = " ";
}
}
space[1][3][4] = "E";
space[7][9][7] = "K";
space[1][3][9] = "S";
space[4][2][7] = "S";
space[2][7][3] = "S";
space[8][5][6] = "S";
space[7][2][5] = "S";
for (layer = 0; layer <= 9; layer++)
{ for (col = 0; col <= 9; col++)
{ for (row = 0; row <= 9; row++)
{
if (space[layer][col][row] != " ")
{ yzSpace[col][row] = space[layer][col][row];
xzSpace[layer][row] = space[layer][col][row];
}
}
}
}
var strYZ = " ";
strYZ += "<table border=\"1\" width=\"250\"><tr><th colspan=\"11\">Z and Y Axis (Front View)</th></tr><tr>";
for (row = 9; row >= -1; row--)
{ if (row >= 0)
{ strYZ += "<th>" + row + "</th>"
for (col = 0; col <= 9; col++)
{ strYZ += "<td>" + yzSpace[col][row] + "</td>";
}
}
else
{ strYZ += "<th> </th>";
for (col = 0; col <= 9; col++)
{ strYZ += "<th>" + col + "</th>";
}
}
strYZ += "</tr><tr>";
}
strYZ += "</tr></table>";
document.write(strYZ);
document.write("<br />");
var strXZ = " ";
strXZ += "<table border=\"1\" width=\"250\"><tr><th colspan=\"11\">X and Z Axis (Side View)</tr><tr>";
for (row = 9; row >= -1; row--)
{ if (row >= 0)
{ strXZ += "<th>" + row + "</th>";
for (layer = 0; layer <= 9; layer++)
{ strXZ += "<td>" + xzSpace[layer][row] + "</td>";
}
}
else
{ strXZ += "<th> </th>";
for (layer = 0; layer <= 9; layer++)
{ strXZ += "<th>" + layer + "</th>";
}
}
strXZ += "</tr><tr>";
}
strXZ += "</tr></table>";
document.write(strXZ);
//-->
</script>
</body>
</html>
#8
Re: Display a 3-D array as 2-D
Posted 08 August 2010 - 03:47 PM
To answer your question, even if you don't care anymore ...
monkadelicd, on 08 August 2010 - 12:05 PM, said:
...
The buttons represented the planes of the 3 axes.
Pressing any of the X, Y, or Z buttons showed the
contents of that particular plane, which I had initialize
with the [z][y][x] positions of the array.
The display was the "squished" cube, showing a particular plane
The contents of each 3-D array could be words, dots, stars, klingons, etc.
#9
Re: Display a 3-D array as 2-D
Posted 09 August 2010 - 05:39 PM
2. Add lines to your program which allows the captain of the Enterprise to plot a course to intercept the Klingons, and which informs him if the course will take him through a star.
In the lessons I'm studying I don't think anything has been covered to accomplish this. I'm drawing a blank. Any hints would be much appreciated. I can see by the two 2-D displays output by the script that no stars are directly in line. How can I get Javascript to test for this?
In the script:
E = Enterprise
K = Klingons
S = Star
This post has been edited by monkadelicd: 09 August 2010 - 05:41 PM
#10
Re: Display a 3-D array as 2-D
Posted 09 August 2010 - 06:00 PM
and you know where you wish to intercept K[x][y][z]
and you have populated various elements with an 'S',
you can increment/decrement the Enterprise positions
until they match the Klingon position, checking each
move position to determine if a star is in the way.
You could add logic to determine which x,y,z position
is most away and increment/decrement that element more than
one standard move increment/decrement value.
Have fun with your game project.
#11
Re: Display a 3-D array as 2-D
Posted 11 August 2010 - 02:29 PM
I keep getting an error of Error: space[eZ][eY] is undefined Line: 110
This code worked fine when my logic was a little different. I changed the course plot logic and this line gives me an error.
I can't figure this out. Any ideas?
<html>
<head>
<title>A Section of Sci-Fi Space</title>
</head>
<body>
<script type="text/javascript">
<!--
var starInPath;
var distanceZ, distanceY, distanceZ;
var eZ = 1;
var eY = 3;
var eX = 4;
var kZ = 7;
var kY = 9;
var kX = 7;
var row, col, layer;
var space = new Array()
for (layer = 0; layer <= 9; layer++)
{ space[layer] = new Array();
for(col = 0; col <= 9; col++)
{ space[layer][col] = new Array();
for(row = 0; row <= 9; row++)
{ space[layer][col][row] = " ";
}
}
}
var xySpace = new Array()
for (col = 0; col <= 9; col++)
{ xySpace[col] = new Array();
for (row = 0; row <= 9; row++)
{ xySpace[col][row] = " ";
}
}
var yzSpace = new Array()
for (layer = 0; layer <= 9; layer++)
{ yzSpace[layer] = new Array();
for (col = 0; col <= 9; col++)
{ yzSpace[layer][col] = " ";
}
}
space[1][3][4] = "E";
space[7][9][7] = "K";
space[1][3][9] = "S";
space[4][2][7] = "S";
space[2][7][3] = "S";
space[8][5][6] = "S";
space[7][2][5] = "S";
for (layer = 9; layer >= 0; layer--)
{ for (col = 9; col >= 0; col--)
{ for (row = 9; row >= 0; row--)
{
if (space[layer][col][row] != " ")
{ xySpace[col][row] = space[layer][col][row];
yzSpace[layer][col] = space[layer][col][row];
}
}
}
}
do
{ document.write("The Enterprise is at position " + eX + ", " + eY + ", " + eZ + ".<br />");
distanceZ = kZ - eZ;
distanceY = kY - eY;
distanceX = kX - eX;
if ((distanceX > distanceY) && (distanceX > distanceZ))
{ eX++;
}
else
{ if ((distanceY > distanceX) && (distanceY > distanceZ))
{ eY++;
}
else
{ if ((distanceZ > distanceX) && (distanceZ > distanceY))
{ eZ++;
}
else
{ if ((distanceX == distanceY) && (distanceX > distanceZ))
{ eX++;
eY++;
}
else
{ if ((distanceX == distanceZ) && (distanceX > distanceY))
{ eX++;
eZ++;
}
else
{ if ((distanceY == distanceZ) && (distanceY > distanceX))
{ eY++;
eZ++;
}
else
{ if ((distanceZ == distanceY) && (distanceZ == distanceX))
{ eZ++;
eY++;
eX++;
}
}
}
}
}
}
}
if (space[eZ][eY][eX] == "S")
{ starInPath = "true";
}
else
{ starInPath = "false";
}
}
while (distanceZ > 0 && distanceY > 0 && distanceX > 0);
if (starInPath == "true")
{ document.write("A direct course to the Klingons will lead the Enterprise through a star.<br /><br />");
}
else
{ document.write("The Enterprise has a clear path to the Klingons.<br /><br />");
}
var strXY = " ";
strXY += "<table border=\"1\" width=\"250\"><tr><th colspan=\"11\">X and Y Axis (Front View)</th></tr><tr>";
for (col = 9; col >= -1; col--)
{ if (col >= 0)
{ strXY += "<th>" + col + "</th>"
for (row = 0; row <= 9; row++)
{ strXY += "<td>" + xySpace[col][row] + "</td>";
}
}
else
{ strXY += "<th> </th>";
for (row = 0; row <= 9; row++)
{ strXY += "<th>" + row + "</th>";
}
}
strXY += "</tr><tr>";
}
strXY += "</tr></table>";
document.write(strXY);
document.write("<br />");
var strYZ = " ";
strYZ += "<table border=\"1\" width=\"250\"><tr><th colspan=\"11\">Y and Z Axis (Side View)</tr><tr>";
for (col = 9; col >= -1; col--)
{ if (col >= 0)
{ strYZ += "<th>" + col + "</th>";
for (layer = 0; layer <= 9; layer++)
{ strYZ += "<td>" + yzSpace[layer][col] + "</td>";
}
}
else
{ strYZ += "<th> </th>";
for (layer = 0; layer <= 9; layer++)
{ strYZ += "<th>" + layer + "</th>";
}
}
strYZ += "</tr><tr>";
}
strYZ += "</tr></table>";
document.write(strYZ);
//-->
</script>
</body>
</html>
#12
Re: Display a 3-D array as 2-D
Posted 11 August 2010 - 03:30 PM
become larger than 9.
Add this as a test to see the problem just before line 110
}
alert(eZ+','+eY+','+eX);
if (space[eZ][eY][eX] == "S")
#13
Re: Display a 3-D array as 2-D
Posted 11 August 2010 - 08:13 PM
Edit: Or so I thought. I tried putting a star at the one of the coordinates that the enterprise travels through. I still get the message that the course is clear though. Any ideas?
<html>
<head>
<title>A Section of Sci-Fi Space</title>
</head>
<body>
<script type="text/javascript">
<!--
var starInPath;
var distanceZ = 10;
var distanceY = 10;
var distanceX = 10;
var eZ = 1;
var eY = 3;
var eX = 4;
var kZ = 7;
var kY = 9;
var kX = 7;
var row, col, layer;
var space = new Array()
for (layer = 0; layer <= 9; layer++)
{ space[layer] = new Array();
for(col = 0; col <= 9; col++)
{ space[layer][col] = new Array();
for(row = 0; row <= 9; row++)
{ space[layer][col][row] = " ";
}
}
}
var xySpace = new Array()
for (col = 0; col <= 9; col++)
{ xySpace[col] = new Array();
for (row = 0; row <= 9; row++)
{ xySpace[col][row] = " ";
}
}
var yzSpace = new Array()
for (layer = 0; layer <= 9; layer++)
{ yzSpace[layer] = new Array();
for (col = 0; col <= 9; col++)
{ yzSpace[layer][col] = " ";
}
}
space[1][3][4] = "E";
space[7][9][7] = "K";
space[1][3][9] = "S";
space[4][2][7] = "S";
space[2][7][3] = "S";
space[8][5][6] = "S";
space[7][2][5] = "S";
space[5][7][5] = "S";
for (layer = 9; layer >= 0; layer--)
{ for (col = 9; col >= 0; col--)
{ for (row = 9; row >= 0; row--)
{
if (space[layer][col][row] != " ")
{ xySpace[col][row] = space[layer][col][row];
yzSpace[layer][col] = space[layer][col][row];
}
}
}
}
while (distanceZ > 0 && distanceY > 0 && distanceX > 0)
{ document.write("The Enterprise is at position " + eX + ", " + eY + ", " + eZ + ".<br />");
if (space[eZ][eY][eX] == "S")
{ starInPath = "true";
}
else
{ starInPath = "false";
}
distanceZ = kZ - eZ;
distanceY = kY - eY;
distanceX = kX - eX;
if ((distanceX > distanceY) && (distanceX > distanceZ))
{ eX++;
}
else
{ if ((distanceY > distanceX) && (distanceY > distanceZ))
{ eY++;
}
else
{ if ((distanceZ > distanceX) && (distanceZ > distanceY))
{ eZ++;
}
else
{ if ((distanceX == distanceY) && (distanceX > distanceZ))
{ eX++;
eY++;
}
else
{ if ((distanceX == distanceZ) && (distanceX > distanceY))
{ eX++;
eZ++;
}
else
{ if ((distanceY == distanceZ) && (distanceY > distanceX))
{ eY++;
eZ++;
}
else
{ if ((distanceZ == distanceY) && (distanceZ == distanceX))
{ eZ++;
eY++;
eX++;
}
}
}
}
}
}
}
}
if (starInPath == "true")
{ document.write("A direct course to the Klingons will lead the Enterprise through a star.<br /><br />");
}
else
{ document.write("The Enterprise has a clear path to the Klingons.<br /><br />");
}
var strXY = " ";
strXY += "<table border=\"1\" width=\"250\"><tr><th colspan=\"11\">X and Y Axis (Front View)</th></tr><tr>";
for (col = 9; col >= -1; col--)
{ if (col >= 0)
{ strXY += "<th>" + col + "</th>"
for (row = 0; row <= 9; row++)
{ strXY += "<td>" + xySpace[col][row] + "</td>";
}
}
else
{ strXY += "<th> </th>";
for (row = 0; row <= 9; row++)
{ strXY += "<th>" + row + "</th>";
}
}
strXY += "</tr><tr>";
}
strXY += "</tr></table>";
document.write(strXY);
document.write("<br />");
var strYZ = " ";
strYZ += "<table border=\"1\" width=\"250\"><tr><th colspan=\"11\">Y and Z Axis (Side View)</tr><tr>";
for (col = 9; col >= -1; col--)
{ if (col >= 0)
{ strYZ += "<th>" + col + "</th>";
for (layer = 0; layer <= 9; layer++)
{ strYZ += "<td>" + yzSpace[layer][col] + "</td>";
}
}
else
{ strYZ += "<th> </th>";
for (layer = 0; layer <= 9; layer++)
{ strYZ += "<th>" + layer + "</th>";
}
}
strYZ += "</tr><tr>";
}
strYZ += "</tr></table>";
document.write(strYZ);
//-->
</script>
</body>
</html>
This post has been edited by monkadelicd: 11 August 2010 - 08:34 PM
#14
Re: Display a 3-D array as 2-D
Posted 12 August 2010 - 07:46 AM
071 if (space[eZ][eY][eX] == "S")
072 { starInPath = "true";
073 }
074 else
075 { starInPath = "false";
076 }
alert('Star in path = '+starInPath+': '+eZ+','+eY+','+eX+' :'+space[eZ][eY][eX]);
077
078 distanceZ = kZ - eZ;
079 distanceY = kY - eY;
080 distanceX = kX - eX;
#15
Re: Display a 3-D array as 2-D
Posted 12 August 2010 - 11:21 AM
|
|

New Topic/Question
Reply



MultiQuote






|