HTML5 Procedural Hexagon Terrain Generator

A basic and customizable procedural hexagon terrain generator made in Javascript.

Demo

You can see the generator working at the Demo Page.

Also, you can play with a more visual appealing Tiled version of this terrain generator.

HexGrid Settings

Edge size
Orientation (flat, pointy)
Number of hexes (columns,rows)
Show / hide coordinates
Show / hide grid border
Line Thickness
Contour Interval
- Terrain Archetype
  - Deep Water
  - Shallow Water
  - Flat
  - Hill
  - Mountain
  - Mountain Impassable

Elevation Noise

Seed
Frequency
Redistribution
Octaves
Islands

Moisture Noise

Seed
Frequency
Redistribution
Octaves
No draw moisture

Biomes

Water
Flat
- Desert
- Grassland
- Forest
Hill
- Desert
- Grassland
- Mixed Forest
- Needleleaf Forest
Mountain
- Desert
- Shrubland
- Alpine Forest
Mountain Impassable
- Snow

Map Seed

Copy to save the map setings and restore.

Viewport

Drag
Wheel Zoom
Bounce
Hex Info on click: Coordinates, elevation, moisture, terrain and biome.

Export as PNG

Actually you can export the terrain generated to png.

Libraries

Honeycomb v3.1.0
PixiJS v5.1.5
- pixi-viewport v4.3.3
reimg
Bootstrap v4.3.1
- jQuery v3.3.1
- Popper.js v1.14.7
simplex-noise.js v2.4.0

Reference