rjanicek / voronoi-map-js

JavaScript port of Amit Patel's mapgen2 https://github.com/amitp/mapgen2

voronoi-map-js

JavaScript port of Amit Patel's mapgen2 https://github.com/amitp/mapgen2 Map generator for games. Generates island maps with a focus on mountains, rivers, coastlines.

Based on commit: e05075cbb82851e2a3bacaa2e49e4da998894379

Flash dependencies removed.

Built with JavaScript, Node.js, JQuery, Lo-Dash, Browserify, UglifyJS, Nodeunit, Sublime Text.

Try the demo

Install me from NPM

Fork me on GitHub

Installation & usage

Using npm:

npm install --save voronoi-map

In CommonJS / Browserify:

var PIXI = require('pixi.js');

var islandShape = require('voronoi-map/src/island-shape');
var lavaModule = require('voronoi-map/src/lava');
var mapModule = require('voronoi-map/src/map');
var noisyEdgesModule = require('voronoi-map/src/noisy-edges');
var pointSelectorModule = require('voronoi-map/src/point-selector');
var renderCanvas = require('voronoi-map/src/render-canvas');
var renderPixi = require('voronoi-map/src/render-pixi');
var roadsModule = require('voronoi-map/src/roads');
var style = require('voronoi-map/src/style');
var watershedsModule = require('voronoi-map/src/watersheds');

var map = mapModule({width: 1000.0, height: 1000.0});
map.newIsland(islandShape.makeRadial(1), 1);
map.go0PlacePoints(100, pointSelectorModule.generateRandom(map.SIZE.width, map.SIZE.height, map.mapRandom.seed));
map.go1BuildGraph();
map.assignBiomes();
map.go2AssignElevations();
map.go3AssignMoisture();
map.go4DecorateMap();

var lava = lavaModule();
var roads = roadsModule();
roads.createRoads(map, [0, 0.05, 0.37, 0.64]);
var watersheds = watershedsModule();
watersheds.createWatersheds(map);
var noisyEdges = noisyEdgesModule();
noisyEdges.buildNoisyEdges(map, lava, map.mapRandom.seed);

// render with Canvas Context 2D

var canvas = document.createElement('canvas');
renderCanvas.graphicsReset(canvas, map.SIZE.width, map.SIZE.height, style.displayColors);
renderCanvas.renderDebugPolygons(canvas, map, style.displayColors);

// or render with Pixi / WebGL

var context = { renderer: new PIXI.autoDetectRenderer() };
document.body.appendChild(context.renderer.view);
renderPixi.graphicsReset(context, map.SIZE.width, map.SIZE.height, style.displayColors);
renderPixi.renderDebugPolygons(context, map, style.displayColors);
context.renderer.render(context.stage);

In vanilla JavaScript, all modules are exported to global voronoiMap object :

<script type="text/javascript" src="voronoi-map.min.js"></script>
<script type="text/javascript">
	
	var map = voronoiMap.mapModule({width: 1000.0, height: 1000.0});
	...
</script>

Tasks

• fix smooth rendering bug for square point selection
  • canvas-render.js ~line 300, problem is with graphics.stroke() original render logic only draws fill paths. HTML canvas fill path does not join other paths and shows a seam between them. stroke() worked to hide the seam but square point selection exposes a bug where some strokes are not the correct color
• fix point-selector square and hexagon so distribution is symetrical when size is asymetrical
• pixi WebGL rendering is quite slow, too slow for animation
  • moving some of the rendering functions into GLSL shaders would help, especially the noisy edges parts

voronoi-map-js's Issues

Getting to demo from source

Could you provide some guidance for taking the existing source and getting to something like the demo site? I'm not sure where to start. It looks like the javascript was combined then ran through a minifier.