HTML5 Procedural Hexagon Terrain Generator

GitHub license

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.

HTML5 Procedural Hexagon 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

Reference