git init
Well, guess that’s the project officially started! I’ve dubbed it progenos (procedurally generated OS) for now.
I’ll be using d3.js, as that’s what both Martin O’Leary and Scott Turner are using for their map generators.
First off, I want to just get something rendering in my browser. Usually when I start these projects, I get overwhelmed with thinking about webpack+babel+react+redux etc., so I’m going to keep it simple this time. Before worrying about generating a realistic terrain map or anything complicated, I just want to draw some simple concentric contour lines as circles in SVG.
Well, that was easy! Next up, I’ll generate a separate heightmap and try to plot the height as a greyscale map.
I’ll need a grid system, so I’m using the method detailed here.
Using Poisson Disc Sampling generates a set of nicely-spaced random points:
I can then get the DeLauney triangulation of these points (black), and the centroid of each of those triangles (blue).
Once I’ve got the centroid points, I can construct polygons from all the centroids that share a base point (green).
Now that I’ve built a mesh of points with their associated neighbors and polygons, I can generate a simple greyscale heightmap by choosing a polygon at random to be set to a large height, then raising each of the neighbours of that point by slightly less, and so on. In code:
function addHill() {
var handled = new Map();
let startPoint = randomElement(mesh);
let amount = 0.9;
function iteration(points, amount) {
if (amount < 0.001) {
return;
}
let next = [];
for(const s of points) {
handled.set(s.id, true);
}
for(const s of points) {
s.height += amount;
next = next.concat(s.neighbors.filter(y => !handled.has(y.id) && next.indexOf(y) === -1));
}
iteration(next, amount * 0.75);
}
iteration([startPoint], amount);
}
Adding a few hills gives me something like this:Perfect! Next time I’ll start looking into drawing contours around this heightmap at regular intervals.
git commit
No comments:
Post a Comment