|
Calculators >>>
JavaScript 3D terrain grapher which creates virtual landscapes using three-dimensional fractal geometry, random numbers, and a simple mathematical formula. "s" indicates under sea-level. Just hit reload to get a new landscape.
Add the below code to the <body> section of your page:
<script
language="javascript"
type="text/javascript">
var
WIDTH =
1;
var
XA =
0;
var
XB =
17;
var
YA =
0;
var
YB =
17;
var
Z1 =
0;
var
Z2 =
0;
var
Z3 =
0;
var
Z4 =
0;
var
XADD =
10;
var
YADD =
-8;
var
LEVEL_UNDEFINED =
99999;
var
LEVEL_WATER =
-1;
picType
=
new
Array();
pic
=
new
Array();
var
steep;
var
sealevel;
var
buf =
"";
var
buf2 =
"";
var
pic0;
function
ZColor (
z0)
{
var
t1;
if
(
z0 ==
LEVEL_WATER )
{
return
'<TT><FONT COLOR="#000099">'
+
"S"
+
"</FONT></TT>";
}
if
(
z0 ==
LEVEL_UNDEFINED )
{
return
'<TT><FONT COLOR="#000099">'
+
"S"
+
"</FONT></TT>";
}
t1
=
z0 %
10;
if
(
t1 ==
0
)
{
return
'<TT><FONT COLOR="#330000">'
+
"0"
+
"</FONT></TT>";
}
if
(
t1 ==
1
)
{
return
'<TT><FONT COLOR="#663300">'
+
"1"
+
"</FONT></TT>";
}
if
(
t1 ==
2
)
{
return
'<TT><FONT COLOR="#CC6600">'
+
"2"
+
"</FONT></TT>";
}
if
(
t1 ==
3
)
{
return
'<TT><FONT COLOR="#FF9900">'
+
"3"
+
"</FONT></TT>";
}
if
(
t1 ==
4
)
{
return
'<TT><FONT COLOR="#FFCC00">'
+
"4"
+
"</FONT></TT>";
}
if
(
t1 ==
5
)
{
return
'<TT><FONT COLOR="#FFCC99">'
+
"5"
+
"</FONT></TT>";
}
if
(
t1 ==
6
)
{
return
'<TT><FONT COLOR="#FFFF00">'
+
"6"
+
"</FONT></TT>";
}
if
(
t1 ==
7
)
{
return
'<TT><FONT COLOR="#33FF33">'
+
"7"
+
"</FONT></TT>";
}
if
(
t1 ==
8
)
{
return
'<TT><FONT COLOR="#009900">'
+
"8"
+
"</FONT></TT>";
}
if
(
t1 ==
9
)
{
return
'<TT><FONT COLOR="#003300">'
+
"9"
+
"</FONT></TT>";
}
}
function
frac(
x0,
y0,
x2,
y2,
z0,
z1,
z2,
z3 )
{
var
newz,
xmid,
ymid,
z01,
z12,
z23,
z30;
if
(
Math.random()
<
0.5
)
{
newz
=
Math.round(
(z0+z1+z2+z3)
/
4)
+
Math.round(
Math.random()
*
(y2-y0)
*
steep );
}
else
{
newz
=
Math.round(
(z0+z1+z2+z3)
/
4)
-
Math.round(
Math.random()
*
(y2-y0)
*
steep );
}
xmid
=
(
x0 +
x2)
>>
1;
ymid
=
(
y0 +
y2)
>>
1;
z12
=
(
z1 +
z2)
>>
1;
z30
=
(
z3 +
z0)
>>
1;
z01
=
(
z0 +
z1)
>>
1;
z23
=
(
z2 +
z3)
>>
1;
if
(
((
x2 -
x0 )
>
WIDTH )
&&
((
y2 -
y0 )
>
WIDTH ))
{
frac(
x0,
y0,
xmid,
ymid,
z0,
z01,
newz,
z30);
frac(
xmid,
y0,
x2,
ymid,
z01,
z1,
z12,
newz);
frac(
x0,
ymid,
xmid,
y2,
z30,
newz,
z23,
z3);
frac(
xmid,
ymid,
x2,
y2,
newz,
z12,
z2,
z23);
}
else
{
if
(
newz <=
sealevel )
{
picType[ymid*YB+xmid]
=
"l";
pic[ymid*YB+xmid]
=
newz;
}
else
{
picType[ymid*YB+xmid]
=
"s";
pic[ymid*YB+xmid]
=
LEVEL_WATER;
}
}
}
function
landscape()
{
for
(var
i =
0;
i <
XB;
i++)
{
for
(var
j =
0;
j <
YB;
j++)
{
picType[j*YB+i]
=
"u";
}
}
for
(var
i =
0;
i <
XB;
i++)
{
for
(var
j =
0;
j <
YB;
j++)
{
pic[j*YB+i]
=
LEVEL_UNDEFINED;
}
}
steep
=
(
Math.random()
/
2.5
)
+
0.5;
sealevel
=
Math.round(
17
*
Math.random()
)
-
8;
Z1
=
Math.round(
15
*
Math.random()
)
-
7;
Z2
=
Math.round(
15
*
Math.random()
)
-
7;
Z3
=
Math.round(
15
*
Math.random()
)
-
7;
Z4
=
Math.round(
15
*
Math.random()
)
-
7;
frac(
XA,
YA,
XB,
YB,
Z1,
Z2,
Z3,
Z4);
for
(var
i =
0;
i <
XB;
i++)
{
for
(var
j =
0;
j <
YB;
j++)
{
pic0
=
LEVEL_UNDEFINED;
if
(
picType[j*YB+i]
==
"l"
)
{
pic0
=
Math.abs(pic[j*YB+i]
-
sealevel);
}
if
(
picType[j*YB+i]
==
"s"
)
{
pic0
=
LEVEL_WATER;
}
buf2
=
buf2 +
ZColor(
pic0 )
+
" ";
}
buf2
=
buf2 +
"<BR>";
}
return
buf2;
}
</script>
<table
bgcolor=white><tr><td>
<table
bgcolor=black><tr><td>
<script
language="JavaScript">
document.write
(
landscape()
);
</script>
</td></tr></table>
</td></tr></table>
|
|
