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 zombiegames.net!

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

6 thoughts on “Terrain Generation with Canvas and JavaScript

  1. Pingback: Matthew Hollett » blog » Make No Wonder – Footprints and Fog

  2. The wikipedia article says everything there is to know about the midpoint displacement algorithm, but yeah it’s somewhat cryptic to everyone not familiar with suck mathematical writing… Took me a while to understand, now I’m off to implement.

  3. Good day I am so glad I found your blog page,
    I really found you by error, while I was searching on Google for something else,
    Regardless I am here now and would just like to say thank you
    for a marvelous post and a all round enjoyable blog (I
    also love the theme/design), I don’t have time to read it all at
    the moment but I have book-marked it and also included your RSS feeds, so when I
    have time I will be back to read a great deal more, Please do keep up the excellent job.

  4. After checking out a number of the blog posts on your site, I honestly like your technique of blogging.

    I book-marked it to my bookmark site list and will be checking back soon. Take a look at my website
    as well and tell me what you think.

Leave a Reply

Your email address will not be published. Required fields are marked *