Overview
This is a p5.js sketch to explore some using the d3-delauney library to generate the voronoi diagram.
Wanted to compare this approach to prior approach used by p5.voronoi.js using gorhill implementaiton of voronoi diagrams.
And further compare the developer experience working wiht the two libraries.
In short, the two libraries are comparable in performance on rendering as it relates to adpating to the p5.js drawing context. I did not test/benchmark delaunay/voronoi computation. And generally found the gorhill-implementation more readily available for extension for my uses (at this time).
Of note, used Chrome Performance Tools to do some performance profiling and fine tuning.
Controls
Mouse
hoverMoving the mouse around will highlight the cell under the mouse cursor;
Touch
pressTouching anywhere (and pressing and moving around) will highlight the cell under touch point.
References:
- d3-delaunay - d3 library to generate Delaunay triangulation, as a basis for Voronoi diagram.
- delaunator - The underlying library used by d3-delaunay to construction the Delaunay triangualtion.
- Coding Training - Challenge 181 - Video that goes through use of d3-delaunay in the context of p5.js
- [p5.voronoi.js][p5_voronoi] - The main p5.js extension that enables drawing of of a Voronoi diagram.
- gorhill-voronoi - The primary underlying implementation of the Voronoi algorithm in Javascript.
- Chrome Performance Tools
Links:
Screenshot:
