Island Generator

Island Generator I made during my specialization course at The Game Assembly in Stockholm. Click here to skip to the the web demo.

Table of Content

Background

# Background

I am very fond of fantasy worlds and wanted to try to create my own little world. Creating an entire world from scratch would've been a bit too much to do so I settled for an island instead. It would be a fun challenge making the entire process work in a regular web browser, therefore I decided to embed it into the web.

The backend is C++ compiled to WebAssembly using the compiler toolchain emscripten , and the frontend is JavaScript rendering graphics using the Canvas API.

# Island Creation

Creating an island consists of two steps: generating cells, and assigning them biomes based on their attributes.

# Generating cells

I wanted my cells to be based on a Voronoi diagram. There exist several ways to construct such a diagram, one way is to implement Fortune's algorithm . I chose an easier, yet slower, way and construct it with help of its dual graph, Delaunay triangulation, with my implementation of the Bowyer-Watson algorithm. The blue dots are randomly generated points and the black dots are the center of each triangle's circumcircle. To create a Voronoi diagram I then connect these center points of each triangle's circumcircles with each triangle's neighbours' to create polygons. However, if a triangle's circumcircle's center point lies outside the bounds of the map, that point is disregarded and is not included in any polygon. Polygons that have less than 4 points are disregarded because I don't want too sharp cells.

Delauney triangulation of 9 points

Delauney triangulation of 128 points

Generated Voronoi diagram

The generated Voronoi diagram has all imaginable weird shapes that are inconsistent. To counter this I applied Lloyd's algorithm twice to get the cells more evenly spread out. Since it internally uses the same method for generating a Voronoi diagram, some cells are lost in the process due to polygon disregarding.

Lloyd's algorithm applied once

Lloyd's algorithm applied twice

The outer cells can be quite sharp and unpleasing so those cells and their neighbours are excluded in the biome process. Scaling it up to 512 initial cells gives us a nice canvas to work with.

Excluded cells are transparent

Same island with 512 initial cells

# Assigning biomes

Each cell gets assigned a biome based on their respective height, humidity, and temperature. These attributes are calculated through Perlin noise with different scaling.

Height

Humidity

Temperature

To assign a biome based on these attributes I use two different Whittaker diagrams depending on their height. One where cells that have less than 0.5 height and one where those that have equal or greater than 0.5 height. The colours of these biomes are arbitrary and merely chosen by what colours I thought fitted together in a fantasy setting. The Whittaker diagrams are as following:

Whittaker diagram over the biomes (height < 0.5)

Whittaker diagram over the biomes (height >= 0.5)

This yields a nice island with plenty of biomes.

There are exceptions to these rules. Cells that were not assigned a biome becomes Ocean . Cells that are neighbours to ocean cells become Beach . Unless their height is above 0.75, then they become Cliffs .

Colorful island

Same island with 1024 initial cells

However, the island is a bit like a square which doesn't give the impression that it's a natural occurring island. To make it more natural-looking I rounded it a bit, added some small water bodies, and tiny offshore islands. There is also a chance for a big water body to appear. This can be seen particularly well on an island generated with seed 7.

Rounded island

Seed 7 with 2048 initial cells

Give it a try in the demo below!

# Web Demo

Return to the top of this page

This web demo requires the use of JavaScript. It seems that your browser does not support it or has it turned off. To be able to view this demo, either use a browser that supports JavaScript or turn it on and revisit this page.

Seed

Initial Cells

# Gallery

Generated by seed 100 with 100 initial cells

Generated by seed 1313 with 333 initial cells

Generated by seed 1653732528 with 512 initial cells

Generated by seed 200 with 200 initial cells

Generated by seed 363125 with 750 initial cells

Generated by seed 448960 with 1000 initial cells

Generated by seed 554396 with 1024 initial cells

Generated by seed 557373 with 1024 initial cells

Generated by seed 7 with 2048 initial cells

Return to the top of this page
Other projects