5 ms·

Interactive Voronoi Diagram Generator with WebGL

johndough 9y ago
If all you need is an image of colored Voronoi regions (and no actual graph structures), there are faster algorithms, for example based on http://fab.cba.mit.edu/classes/S62.12/docs/Meijster_distance.pdf http://fab.cba.mit.edu/classes/S62.12/docs/Meijster_distance... which run in O(width * height + number_of_points) instead of O(width * height + number_of_points * number_of_pixels_on_cone) as this GPU implementation does.
eriknstr 9y ago
Cool. I suggest having it generate a diagram as soon as the page loads, because when I saw the black canvas I assumed that there was a problem with the WebGL support in my browser.
kaffeemitsahne 9y ago
Just to be clear, I didn't make this myself, only found it and submitted.
RandomInteger4 9y ago
Pretty neat, but would be even nicer if display of the points could be turned off, so that you could see just the resulting shapes, especially with the motion feature.
deleted 9y ago
[deleted]
Aaron1011 9y ago
From the source: > var height = coneRadius / Math.tan(45 * Math.PI / 180.0) Doesn't that just divide coneRadius by 1? Is there something that I'm missing here?
almostdigital 9y ago
I made a similar thing couple of years ago http://www.makeitgo.ws/experiments/voronoi_painter/ http://www.makeitgo.ws/experiments/voronoi_painter/ (ignore the LAB color picker, no idea what I was thinking...)
EllipticCurve 9y ago
Pretty neat :) But sometimes straight lines have some kind of angle introduced which shouldn't be there in a correct Voronoi tessellation. For example: {"sites":[355,413,372,413],"queries":[]} should be a straight line, but has two angles. Have I missed something?
- jepler 9y ago
  this is something to do with the "triangles/cone" tunable. Changing from the default 50 to 48, the vertical line becomes actually vertical.
deleted 9y ago
[deleted]
zaphos 9y ago
I made a similar thing but for 3D Voronoi diagrams http://jimmyland.github.io/voro/ http://jimmyland.github.io/voro/

If all you need is an image of colored Voronoi regions (and no actual graph structures), there are faster algorithms, for example based on http://fab.cba.mit.edu/classes/S62.12/docs/Meijster_distance.pdf http://fab.cba.mit.edu/classes/S62.12/docs/Meijster_distance... which run in O(width * height + number_of_points) instead of O(width * height + number_of_points * number_of_pixels_on_cone) as this GPU implementation does.

eriknstr 9y ago

Cool. I suggest having it generate a diagram as soon as the page loads, because when I saw the black canvas I assumed that there was a problem with the WebGL support in my browser.

kaffeemitsahne 9y ago

Just to be clear, I didn't make this myself, only found it and submitted.

RandomInteger4 9y ago

Pretty neat, but would be even nicer if display of the points could be turned off, so that you could see just the resulting shapes, especially with the motion feature.

deleted 9y ago

[deleted]

Aaron1011 9y ago

From the source: > var height = coneRadius / Math.tan(45 * Math.PI / 180.0) Doesn't that just divide coneRadius by 1? Is there something that I'm missing here?

almostdigital 9y ago

I made a similar thing couple of years ago http://www.makeitgo.ws/experiments/voronoi_painter/ http://www.makeitgo.ws/experiments/voronoi_painter/ (ignore the LAB color picker, no idea what I was thinking...)

EllipticCurve 9y ago

Pretty neat :) But sometimes straight lines have some kind of angle introduced which shouldn't be there in a correct Voronoi tessellation. For example: {"sites":[355,413,372,413],"queries":[]} should be a straight line, but has two angles. Have I missed something?

jepler 9y ago
this is something to do with the "triangles/cone" tunable. Changing from the default 50 to 48, the vertical line becomes actually vertical.

deleted 9y ago

[deleted]

zaphos 9y ago

I made a similar thing but for 3D Voronoi diagrams http://jimmyland.github.io/voro/ http://jimmyland.github.io/voro/