|
Home - Old Man Programmer
| Displaying demos/square/map2d.html
<!DOCTYPE html>
<html>
<head>
<meta charset='ascii'>
<title> Map test </title>
<script>
//http://en.wikipedia.org/wiki/Diamond-square_algorithm
var grid, _mapsize = 64, _roughness = 2;
var waterStart={r:10,g:20,b:40},
waterEnd={r:64,g:110,b:142},
grassStart={r:67,g:100,b:18},
grassEnd={r:180,g:200,b:38},
mtnStart={r:191,g:180,b:38},
mtnEnd={r:60,g:56,b:31},
rockStart={r:100,g:100,b:100},
rockEnd={r:190,g:190,b:190},
snowEnd={r:200,g:200,b:200},
snowStart={r:255,g:255,b:255};
function R(range) {
return Math.floor(Math.random()*range);
}
function displace(dim) {
return (R(dim/2)-(dim/4))*_roughness;
}
function mpd(dim) {
if (dim == 1) return;
var newdim = dim / 2;
for(var i = dim; i <= _mapsize; i += dim) {
for(var j = dim; j <= _mapsize; j += dim) {
var x = i - newdim;
var y = j - newdim;
var tl = grid[i-dim][j-dim];
var tr = grid[i%_mapsize][j-dim];
var bl = grid[i-dim][j];
var br = grid[i%_mapsize][j%_mapsize];
if(tl<0) console.log(x,y);
if(bl<0) console.log(x,y);
if(tr<0) console.log(x,y);
if(br<0) console.log(x,y);
grid[x][y] = normalize(((tl+tr+bl+br)/4)+displace(dim));
}
}
var f = true;
for(var i = dim; i <= _mapsize; i += dim) {
for(var j = dim; j <= _mapsize; j += dim) {
var x = i - newdim;
var y = j - newdim;
var cp = grid[x][y];
var tl = grid[i-dim][j-dim];
var tr = grid[i%_mapsize][j-dim];
var bl = grid[i-dim][j%_mapsize];
var br = grid[i%_mapsize][j%_mapsize];
// top
if ((j-dim)-newdim < 0)
grid[x][j-dim] = normalize((cp+tl+tr+grid[x][_mapsize+((j-dim)-newdim)])/4 + displace(dim));
else
grid[x][j-dim] = normalize((cp+tl+tr+grid[x][(j-dim)-newdim])/4 + displace(dim));
//left
if ((i-dim)-newdim < 0)
grid[i-dim][y] = normalize((cp+tl+bl+grid[_mapsize+((i-dim)-newdim)][y])/4 + displace(dim));
else
grid[i-dim][y] = normalize((cp+tl+bl+grid[(i-dim)-newdim][y])/4 + displace(dim));
//bot
grid[x][j] = normalize((cp+bl+br+grid[x][(j+newdim)%_mapsize])/4 + displace(dim));
//right
grid[i][y] = normalize((cp+tr+br+grid[(i+newdim)%_mapsize][y])/4 + displace(dim));
}
}
mpd(newdim);
}
function normalize(n) {
return Math.max(0, Math.min(255, Math.floor(n)));
}
function fade(startColor, endColor, steps, step){
var scale = step / steps,
r = startColor.r + scale * (endColor.r - startColor.r),
b = startColor.b + scale * (endColor.b - startColor.b),
g = startColor.g + scale * (endColor.g - startColor.g);
return {r:Math.floor(r), g:Math.floor(g), b:Math.floor(b)};
}
function main() {
var p, c;
grid = new Array(_mapsize+1);
for(var x = 0; x <= _mapsize; x++) {
grid[x] = new Array(_mapsize+1);
for(var y = 0; y <= _mapsize; y++) {
grid[x][y] = -1;
}
}
grid[0][0] = 128+(R(50)-25);
mpd(_mapsize);
drawmap(0,0);
/*drawmap(_mapsize*2, 0);
drawmap(0,_mapsize*2);
drawmap(-_mapsize*2,0);*/
}
function drawmap(xoff, yoff) {
var cv = document.getElementById("map");
var ctx = cv.getContext("2d");
ctx.translate(xoff, yoff);
for(var x = 0; x < _mapsize; x++) {
for(var y = 0; y < _mapsize; y++) {
var p = (grid[x][y]/255);
if (p >= 0 && p <= 0.2) {
c = fade(waterStart, waterEnd, 30, Math.floor(p* 100));
} else if (p > 0.2 && p <= 0.7) {
c = fade(grassStart, grassEnd, 40, Math.floor(p * 100) - 20);
} else if (p > 0.7 && p <= 0.90) {
c = fade(mtnStart, mtnEnd, 20, Math.floor(p * 100) - 70);
} else if (p > 0.90 && p <= 1) {
c = fade(rockStart, rockEnd, 20, Math.floor(p * 100) - 90);
}
ctx.fillStyle="rgb("+c.r+","+c.g+","+c.b+")";
ctx.fillRect(x*2,y*2, 2, 2);
}
}
}
</script>
</head>
<body onload='main();'>
<canvas id='map' height=1024 width=1024></canvas>
</body>
</html>
|