Noise Map

A procedural 2D map generator based on Perlin / simplex noise

Example

Usage

Create a Canvas in your HTML code:

<canvas id="map-canvas" width="800" height="400"></canvas>

Create a HeightMap with the MapGenerator in your JS code:

var NoiseMap = require('noise-map');

var generator = new NoiseMap.MapGenerator();
var heightmap = generator.createMap(400, 200, {type: 'perlin'});

var context = document.getElementById('map-canvas').getContext('2d');
heightmap.draw(context, 800, 400, NoiseMap.STYLE.GRAY);

API

This module allows you to create random heightmaps with Perlin and simplex noise, edit their data with utility methods, and display them on a Canvas.

The module exposes four items:

MapGenerator: A configurable map constructor
HeightMap: A data container for noise values
STYLE: An enum for the map rendering style
Colorizer: An internal map rendering tool

MapGenerator

`new MapGenerator(seed = random(), configuration = {})`

Instantiate a new MapGenerator, that can be used repeatedly to create different maps. You usually need only one MapGenerator.

Arguments:

seed: optionnal, an integer used a a seed for the noise functions

configuration: optionnal, an object describing the current configuration of this generator:

type: The algorithm used for noise values ("simplex" or "perlin")
amplitude: The base amplitude for noise values (default: 1)
frequency: The base frequency for noise values (default: 0.5)
amplitudeCoef: The amplitude modifier for noise values (default: 0.5)
frequencyCoef: The frequency modifier for noise values (default: 0.5)
generateSeed: Toggle the generation of a new seed before map creation (default: false)

`setSeed(seed)`

`setConfig(config)`

`newMap(width, height, config = {})`

Return a new HeightMap with the input dimensions, and fill it wil random values in [0, 1];

HeightMap

`new HeightMap(width, height, data = [])`

Create a new HeightMap with dimensions (width, height).

The argument data is an optionnal 1D Array containing the values of the heightmap.

`get(x, y)`

Get the value at (x, y)

`set(x, y, value)`

Set the value at (x, y) to value

`scaleValues(coef)`

Exponentially scale the values of the heightmap, by a coefficient coef;

`stepValues(n)`

Floor the values of the heightmap, resulting in n steps;

`inverseValues()`

Inverse the values of the heightmap

`draw(context, outputWidth, outputHeight, style = STYLE.GRAY, enableShadow = false)`

context: The 2D context from a Canvas element
outputWidth: The width for the output map display
outputHeight: The height for the output map display
style: Set the style, which defines the color used
enableShadow: Toggle the shadow on the map

The style can be one of: STYLE.GRAY, STYLE.REALISTIC, STYLE.GEOLOGIC, STYLE.HEATMAP

Installation

You can install the module with npm:

npm install noise-map

You can import the module with unpkg:

<script type="text/javascript" src="https://unpkg.com/noise-map@latest"></script>

You can clone the repository & include the noise-map.js file in your project:

git clone https://github.com/ogus/noise-map.git

License

This project is licensed under the WTFPL - see LICENSE for more details