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

WebSiteMadeEasy.net

FontsMadeEasy.com

RankChecker.net

Google Search:

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