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.
Installation & usage
Using npm:
npm install --save voronoi-mapIn 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 withgraphics.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