Giter VIP home page Giter VIP logo

voronoi-map-js's Introduction

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 People

Contributors

rjanicek avatar

Watchers

James Cloos avatar shadow avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.