Script Categories













Calculators >>> Landscape Grapher.

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">
/* Visit http://www.yaldex.com/ for full source code
and get more free JavaScript, CSS and DHTML scripts! */
<!-- Begin
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; // move x axis left on screen
var YADD = -8; // lower y axis view
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;
//  50% chance rise or descend
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 ) {
// above sea level
picType[ymid*YB+xmid] = "l";
pic[ymid*YB+xmid] = newz;
}
else {
//  below "sea level"
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;
}
//  End -->
</script>
<table bgcolor=white><tr><td>
<table
bgcolor=black><tr><td>

<script language="JavaScript">
<!--
document.write ( landscape() );
// -->
</script>

</td></tr></table>
</td></tr></table>

JavaScript Editor Get Advanced
JavaScript and Ajax Editor,
Validator and Debugger!

1st JavaScript Editor.



Code was highlighted by 1st JavaScript Editor (The Best JavaScript Editor!).




©