How to Make A Map Generator Using The MERN Stack And TypeScript — Part 2: Map Generation

Using the Diamond Square Algorithm

Goal

The goal of this part will be to do a first iteration of the map generation. To do this, we will:

• Implement the Diamond Square algorithm to generate a random height map
• Draw the map on an image and store it in our server
• Return the url of the map in our API

Note that in this part, the generated map will be black and white. We’ll be adding colours and some other parameters in the next part.

In the end, it will resemble something like that:

Generated heightmap

Diamond Square Algorithm

The diamond square algorithm is a clever, efficient, and rather simple to implement way of generating a height map. It’s particularity is that it only works with square arrays, of size 2^n +1.

The Diamond Square algorithm consists of 2 main steps, that are repeated one after the other:

• The Diamond Step: In this step, for each square of size a inside the matrix, you take the value its four corners, calculate the average, add a random number to it, then assign the result to the point in the center of the…