I'm a web developer and I am keen to start writing my own games.

For familiarity, I've chosen JavaScript and canvas element for now.

I want to generate some terrain like that in Scorched Earth.

Scorched Earth

My first attempt made me realise I couldn't just randomise the y value; there had to be some sanity in the peaks and troughs.

I have Googled around a bit, but either I can't find something simple enough for me or I am using the wrong keywords.

Can you please show me what sort of algorithm I would use to generate something in the example, keeping in mind that I am completely new to games programming (since making Breakout in 2003 with Visual Basic anyway)?


3 Answers 3


The midpoint displacement algorithm is exactly what you want.

That link can generate something like this:

enter image description here

Or like your image, depending on what parameters you use. There's C source available here.

  • \$\begingroup\$ Thanks for this, I'm still not sure how to implement it in JavaScript but hopefully it will become clearer to me as I read that article over. \$\endgroup\$
    – alex
    Mar 6, 2011 at 12:39
  • \$\begingroup\$ There's the C source I just edited in. It shouldn't be too much of an issue to implement :) \$\endgroup\$ Mar 6, 2011 at 12:43
  • \$\begingroup\$ @The Communist Duck Thank you, I've dabbled in C before. \$\endgroup\$
    – alex
    Mar 6, 2011 at 12:47
  • \$\begingroup\$ @The Communist Duck Hopefully I am on the right track :) \$\endgroup\$
    – alex
    Mar 6, 2011 at 13:14
  • \$\begingroup\$ @alex, you should use some kind of recursion in your implementation. Currently you have simply a line with random y component, where random variation decreases to the right. \$\endgroup\$ Mar 6, 2011 at 13:44

How about using midpoint displacement algorithm possibly followed by a slight smoothing e.g. low pass filtering to remove too sharp spikes? This approach is not the same as in Scorched Earth, but is should provide similar results.

I believe that Scorched Earth simulated somehow the gravity and falling dirt. For example you can't have too steep hill because otherwise the dirt would fall down and create a less steep slope.


There is another approach you can use. You can add together a number of randomly generated sine waves and then scale the result to fit on your screen. It is really easy in practice and produces some nice results, although smoother and perhaps more artificial than your example screenshot.

You can see the source in javascript here. It is really easy to fiddle with some parameters to get different kinds of terrain.



You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .