Fractal terrain generation in 130 lines of Javascript

Hunter Loftis's Javascript-based fractal terrain generator produces absolutely gorgeous landscapes (reload for more) in just 130 lines. It's accompanied by a great explanation that reveals the sweet, underlying elegance of the process.

If you're anything like me, the results of this simple algorithm leave you itching to go build an online Terragen, a jetpack-based first person shooter, fishing simulator, MMORPG, etc. This single-cube, canvas-projected demo practically begs for extension.

Here are a few things I challenge you to try:

* WebGL rendering

* Variation by height, where lower altitudes are smoother (like sand) and higher altitudes are more rocky

* Cast shadows instead of purely slope-based shading

* A second pass that generates caves and tunnels

Realistic terrain in 130 lines (via Kottke)

Notable Replies

  1. Fun!

    The terrain is somewhat unbelievable, though. After the generation, I'd suggest running some simulated erosion on it. A few iterations of simulated water flow and material removal. Assumption of homogenous soil will do the job; asking for simulated harder rock intrusions would be too much.

  2. xzzy says:

    A ways back I was messing with the original simcity source and as part of figuring out how it all worked, re-made the map generation code in javascript:

    It's delightfully simple once you figure out what it's doing.. each feature (lakes, rivers, forests) have a 2D array defined that functions like a stamp. For rivers, the generator picks a random x,y coordinate, stamps into the terrain, then moves the x,y in a random direction and stamps again. It repeats until it hits the edge of the map.

    Lakes and forests run on a similar concept, but the loop is modified so it behaves differently.

Continue the discussion

7 more replies