Voronoi Diagram – 1

If you don’t know what a voronoi diagram is, you can check it out on Wikipedia here.

I was reading a couple of interesting programming / game related things about voronoi diagrams here and here(follow the polygonal map generation link but it’s not https so you may get a warning).

This seemed like something that might be applicable for game development in Wade, so I thought I’d try to get a quick demo to work.

Luckily, I found a nice (albeit older) library here, with some great example html pages. All I had to do was to translate to Wade and, ‘Ecco qua‘.

A Few Notes Before I Get Started

This demo uses Wade 4.0.1

I use Wade as a framework and write the JavaScript code myself (i.e. I’m not using the online editor)

As mentioned above, the external library, ‘A JavaScript implementation of Steven J. Fortune’s algorithm to efficiently compute Voronoi diagrams‘, was courtesy of, Raymond Hill, and was downloaded from here. The library is released under the MIT license, so I don’t think I am breaking any rules.

Final Results Preview

When you load this page a voronoi diagram is generated. The little purple cubes are the cell centers, the red lines are the polygon edges and there are tiny yellow dots on the ends of each edge to mark the vertices. Move the mouse around and you can see the cell you are over highlight in red (Note: you may have to click to give the window focus for the mouse move highlight to work).

﻿﻿﻿﻿﻿﻿﻿

the little bit I did to make this work with Wade

Like I said, this is a duplicate of one of Raymond’s demo html pages. So, I’ll just walk through the steps I did to get it to work with Wade.

Conclusion

On the library demo page, searching for which cell you are in is handled via a quadtree. In my code, I am just looping through all the cells. This is less efficient, but makes the code simpler. I tested it with 2000 cells and still didn’t notice any slowdown using this brute force method.

Not sure where I plan on going with this ? I’m thinking either something with pathfinding or map generation ?

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.