My Fractal Landscape Generator
Obviously, the cool stuff happens in that script tag. All that the HTML needs to do is call the javascript and define the canvas element. Neat!
The function that does most of the work of making terrain is my implementation of the fractal algorithm.
In a nutshell, that function just makes a bunch of random Y coordinates that are roughly close together - depending on the displacement value.
The actual drawing of the landscape is also super easy. In the actual code, it’s split between the global variable section and the drawLandscape() function, but here is the condensed version so you can see how it works
All you need to do is grab the canvas and create the ‘2d’ context for it. The context is the group of js functions that you can do to it. Right now ‘2d’ is the only context that the W3C publishes - but mozilla has an experimental 3d context.
Once you define the context, you just need to start a line with beginPath() and then feed it points with lineTo(). Everything else is just to make it purdy.
I figured this out through extensive use of the MDC canvas tutorial and I’m sure you can tell!
Most of you have already seen this because I’ve been kind of excited about it. I’m posting it here because rachel is sick of my showing it to people - and I thought I’d go into the technical details (however basic). The reason why I’m excited about the thing is because it’s all contained in an html file! It uses canvas, so no IE - but I don’t care! The HTML is amazingly simple. If you don’t consider the configuration widgets I added here it is:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>A canvas fractal landscape</title>
<script type="text/javascript"></script>
</head>
<body onload="createTerrain()">
<canvas id="landscape" width="800" height="600"></canvas>
</body>
</html>
Obviously, the cool stuff happens in that script tag. All that the HTML needs to do is call the javascript and define the canvas element. Neat!
The function that does most of the work of making terrain is my implementation of the fractal algorithm.
function fractalize(theCoords, displacement){
//split the line segments up
if (theCoords.Count < 2){
alert(">= 2 coordinates required");
}
var newCoords = new Array();
var theLength = theCoords.length - 1;
var i;
for (i = 0; i < theLength; i++) {
var mrRandom = Math.random();
var displacedCoord = (theCoords[i + 1] - theCoords[i]) / 2.0;
var newDisplacement = mrRandom * displacement;
var nextCoord = theCoords[i] + displacedCoord + newDisplacement;
newCoords.push(theCoords[i]);
newCoords.push(nextCoord);
}
newCoords.push(theCoords[theCoords.length - 1]);
return newCoords;
}
In a nutshell, that function just makes a bunch of random Y coordinates that are roughly close together - depending on the displacement value.
The actual drawing of the landscape is also super easy. In the actual code, it’s split between the global variable section and the drawLandscape() function, but here is the condensed version so you can see how it works
canvas = document.getElementById('landscape');
canvas.height = ysize;
canvas.width = xsize;
// use getContext to use the canvas for drawing
ctx = canvas.getContext('2d');
lineargradient = ctx.createLinearGradient(xsize/2,ysize/2,xsize/2,ysize);
color1 = "rgb("+Math.floor(Math.random() * 255) +"," +Math.floor(Math.random() * 255)+","+Math.floor(Math.random() * 255)+")"
color2 ="rgb("+Math.floor(Math.random() * 255) +"," +Math.floor(Math.random() * 255)+","+Math.floor(Math.random() * 255)+")"
lineargradient.addColorStop(0,color1);
lineargradient.addColorStop(1,color2);
ctx.clearRect(0,0,xsize,ysize);
ctx.fillStyle = lineargradient;
ctx.beginPath();
ctx.moveTo(0, ysize);
var j;
for (j=0; j<theCoords.length; j++){
xCoord = (xsize / (theCoords.length - 1))
xCoord = xCoord * j;
yCoord = ysize - (theCoords[j] * ysize);
ctx.lineTo(xCoord, yCoord);
}
ctx.lineTo(xsize,ysize);
ctx.fill();
All you need to do is grab the canvas and create the ‘2d’ context for it. The context is the group of js functions that you can do to it. Right now ‘2d’ is the only context that the W3C publishes - but mozilla has an experimental 3d context.
Once you define the context, you just need to start a line with beginPath() and then feed it points with lineTo(). Everything else is just to make it purdy.
I figured this out through extensive use of the MDC canvas tutorial and I’m sure you can tell!
