Generates random, hexagon based, maps in javascript
JavaScript
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
lib
test
README.md

README.md

Map Generator

Map Generator

Online Demo

The Map Generator allows you to generate random, hexagon based maps with Javascript. You can change the width and height of the map, the size of an hexagon and the amount of countries the map consists of. Plus you can decide if the hexagons should be distorted or not and if the shape of a country is totaly random or more compact.

Instructions

Inorder to use the Map Generator you have to include following files in your project point.js line.js hexagon.js country.js map.js mapgenerator.js

Then you can use the generator in your code var generator = new MapGenerator();

generator.createHexagonPattern(
    width, 
    height, 
    hexagonSize, 
    useDistortion
);

generator.generate(
    numberOfCountries, 
    countrySizeVariance, 
    useCompactShapes
);

var myMap = generator.getMap();
var myRawMap = generator.getRawMap();

Arguments

  • width

    The width of the map.

  • height

    The height of the map.

  • hexagonSize

    The size of a single hexagon. The total amount of hexagons out of the map is generated depends on the size of the map and this figure.

  • numberOfCountries

    The amount of countries the map will consist of.

  • countrySizeVariance

    Percentage value of how much the countries can vary in their size in correlation to the average country size.

  • useDistortion

    Toggles between regular hexagons and distorted ones.

  • useCompactShapes

    Toggles between random country shapes and more compact ones.


Output

With MapGenerator.getRawMap() you get the raw map with all helper objects and references which were calculated internally. If you use MapGenerator.getMap() this data will get processed once more for a more lightweight result.

MapGenerator.getMap()

Returns following object:

  • width

    The width of the map.

  • height

    The height of the map.

  • regions

    A array with all region objects, which looks like this:

    • ID

      Unique integer ID of the region

    • center

      An object looking like this:

      • x

        The x-coordinate of the calculated center of the region.

      • y

        The y-coordinate of the calculated center of the region.

    • pathString

      The outline of the region in form of an SVG path string.

    • neighborIDs

      An array filled with all connected region IDs.

  • adjacencyMatrix

    The adjacencyMatrix of the map, when there is no connection the value is 0 otherwise the distance between the two centers of the regions. The indexes are the IDs of the regions.