This website will only show images if JavaScript is turned **on**

#
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.

##
#
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.

##
#
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