↑
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>
→