Landscape Grapher - JavaScript Made Easy: Free JavaScripts Tutorials Example Code

Metachecker.net

TrafficChecker.net

RankChecker.net

Learn Java Script Today

Over 5000 Free Fonts

Tutorials

Javascript Forum

Other Javascript Resources

Advance DHTML Tutorial

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.

Insert into <HEAD>

<!-- 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>' + "S" + "</TT>";
}
if ( z0 == LEVEL_UNDEFINED ) {
return '<TT>' + "S" + "</TT>";
}

t1 = z0 % 10;
if ( t1 == 0 ) {
return '<TT>' + "0" + "</TT>";
}
if ( t1 == 1 ) {
return '<TT>' + "1" + "</TT>";
}
if ( t1 == 2 ) {
return '<TT>' + "2" + "</TT>";
}
if ( t1 == 3 ) {
return '<TT>' + "3" + "</TT>";
}
if ( t1 == 4 ) {
return '<TT>' + "4" + "</TT>";
}
if ( t1 == 5 ) {
return '<TT>' + "5" + "</TT>";
}
if ( t1 == 6 ) {
return '<TT>' + "6" + "</TT>";
}
if ( t1 == 7 ) {
return '<TT>' + "7" + "</TT>";
}
if ( t1 == 8 ) {
return '<TT>' + "8" + "</TT>";
}
if ( t1 == 9 ) {
return '<TT>' + "9" + "</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 + " ";
}
return buf2;
}
// End -->
</script>

Insert into <BODY>

Other Options