Procedural World Map Generation (JavaScript, HTML5)

Next in line for JavaScript is an application that can create and draw world maps consisting of several continents.

It is essentially a variant of the fractal Midpoint displacement algorithm and works as so:

For each island:

  • Pick a number of initial points, low numbers like 2 or 3 will form a line shaped or triangle shaped continent and higher numbers will form a circle.
  • Pick a radius, essentially the size of the island
  • Pick an offset, during the tessellation stage, when randomness is added, how much randomness should be used to offset the newly created point?
  • Pick a scale factor, for each level of tessellation the offset needs to be decreased in size and this scale will determine by what % it will decrease (0.5 = 50% for example).
  • With these 4 pieces of data:
    • Generate the initial points using the radius and number of initial points required. For now, the island is simply placed at (0, 0) and generates the points on a circle connect by lines
    • For N levels of tessellation (9 seems to be the most before any more detail added is smaller than 1 pixel):
      • Find the middle of each pair of points
      • Add a random offset to the x and y values, determined by the value set as the “offset” before
      • Add the newly generated point to the list of points
      • Once all points have been subdivided and offset, reduce the offset value by the scale factor

And doing so for M number of islands which each have a position vector that can be used to move them around.

The application also comes with the following features:

  • Regenerate any selected island with new random data without changing the others
  • Reposition any selected island with new x and y coordinates
  • Change any of the following, that will be used the next time an island is regenerated (essentially every variable is changeable):
    • Number of initial points used
    • Radius
    • Offset
    • Scale factor
  • Add new islands to the existing world map, which will also automatically select it as the “currently selected island” when applying changes.
  • Remove selected islands from the existing world map
  • Place all the islands in random positions, large islands may merge into larger islands allowing you to create complex looking continents
  • Choose the draw the islands “number” so when selecting an island with the GUI, you know which one you are modifying
  • Click to select the island you want to change, a circle will be drawn around the current chosen island. Deselect by clicking on the ocean or clicking the Deselect option from the GUI (if you place too many islands and there’s no ocean to click!). Selecting an island will also automatically update the GUI values such as x position, y position and selected island.

The GUI is from the datGUI library.

See this video: I recommend watching in full screen and at a HD resolution if you can in order to see the finer details of the fractal and to also be able to see the GUI properly.

Overall I’m quite pleased with the application but there is one thing I wish I could do with it. At the moment it only shows a blue ocean and green islands, there’s nothing on the islands such as elevation data, river data, etc. Unfortunately since I’m only storing the points of the islands coast and not the points in between, then I would have to go about this application in a very different way if I wanted something on the actual islands. They would have to be split into (and drawn separately as) polygons rather than being outlined and filled in in-place like it is now. Maybe some other day?

As with my other work, if you want to see the source then please contact me via the details on my CV I’ve sent you.

About these ads

One thought on “Procedural World Map Generation (JavaScript, HTML5)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s