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

• Tutorial de generación de mapas aleatorios con Python y OpenSimplex
• Making maps with noise functions
• Here Dragon Abound
• mewo2.com Generating fantasy maps