Voronoi Diagram – 2
This post continues with an exploration of voronoi diagrams and Wade. If you want some background, you can see my previous post here.
A couple of the implementations use the D3 library. D3 provides functionality regarding voronoi diagrams as well as other helpful things that make map/terrain generation easier. (It also does many other cool data visualization stuff – I would recommend that you check it out if you haven’t already).
A Few Notes Before I Get Started
- This demo uses Wade 4.0.1
- D3 is freely available here and is released under the BSD license.
Final Results Preview
When you load this page a voronoi diagram with 200 polygons is generated.
- polygon centers are designated by purple cubes
- polygon edges are designated by black lines
- Delaunay triangles are designated by green lines
Move the mouse around and you can see the cell you are over highlight in blue. The cell’s neighbors are highlighted in light blue. Click to perform a, Lloyd relaxation, (voronoi tessellation). Click a bunch of times and watch the polygons shape shift toward hexagons (the expected outcome).
Note: you may have to click to give the window focus for the mouse move highlight to work.
This new demo was done to:
- Get things to work using the D3 library
- Map generation can begin with a voronoi diagram. This diagram should then be, “relaxed“, to generate more uniform polygons shapes.
- The next step to take in map/terrain generation is height mapping. To do this you need to be able to identify cells and their neighbors.
Download and extract the zip file, load voronoiDemo.html in your browser to see it in action.
The code contains a lot of comments, so I hope it is easy to follow. Feel free to play around and use the code however you want.
cheers – Shri