Simple 2d Terrain With Midpoint Displacement

Codepen terrain

Screenshot from scrolling terrain and shooting stars demo on

In a few of my demos I’ve used 2d terrain. I love the effect and its really easy to do especially in 2d. The algorithm I use most is Diamond Square also known as Midpoint Displacement. What’s great about the algorithm besides its easy of use is that it can be used for simple 2d terrain as well as with 3d terrain. For now I will just be talking about generating 2d terrain, in a future article I will discuss how to use the same algorithm to make create height maps that can be used in turn to create 3d terrain.

Read More

Terrain Generation with Canvas and JavaScript

The idea of creating height maps with JS and canvas came from an  idea I started for a different website I’m developing. This small project has taught me many things (some of the unfortunate things I learned is I still suck at math, and I have many JS skills to brush up on). I just couldn’t bring myself to give it up so I also implemented a very slow very light voxel engine.

You can check out the generator here. (Chrome recommended, sorry no IE)

The first major thing I learned was the midpoint displacement (or Diamond Square) algorithm. The Wikipedia article and links contained were definitely a great help but this actually took me the longest to implement. Getting the order of  iteration and recursion was the hardest part. I found so many examples but many of them conflicted on actual implementation. The closest example I got working was the example found on this page but if you try creating height maps with a lot of noise you will notice square patterns popping up, sometimes with low noise you can catch a nice one right in the center.  This is because they do not take the center into consideration when calculating the edges. I was able to fix this in my version fortunately.

That ended up only being a small part of the project however, you’ll notice I added shadow maps which could use some tweaking, and a very slow voxel engine. These sites greatly helped that process.

The last few things to implement are wrapping height maps, and a better color map, and some sort of progress bar. Hopefully after that my obsessions with height maps will be over for a while. These things are pretty addicting, you get such cool results from just a few numbers. Feel free to check out the code, if you have any improvements let me know, I know its by no means even close to perfect. Also if you happen to use it for anything please give credit where its due.

Ill most likely write up yet another midpoint displacement tutorial, because even the current ones left me scratching my head at some points. Then off to working on my canvas zombie game for!

Special thanks to Yutt for testing it out and helping me work on the stupid color bug.