Parametric Voronoi generator with real time editing and SVG export
Parametric Voronoi generator with real time editing and SVG export
get support, give feedback or simply chat to brainstorm about ideas right here on Github dedicated Discussions Forum
https://github.com/WebSVG/voronoi/discussions
https://www.homesmartmesh.com/docs/applications/voronoi/
Chrome is tested as web browser, Edge might work but Firefox might show white page only
We see above the user generating new sets of seeds with their resulting voronoi diagram, hiding and viewing seeds, cells and edges, changing the number of seeds with a slider while the view updates in real time, editing the cells by moving them, removing and adding cells, changing the cells shape to quadratic bezier, simple edges and back to cubic bezier, finally adjusting the space between cells before exporting in an SVG file.
The seeds coordinates are what allows to generate again the same voronoig diagram
seeds.json
can be imported by drag and drop on the view areathe shape is approximated with a set of linear interpolation points along the path
<defs>
<clipPath id="cut-off-cells">
<path xmlns="http://www.w3.org/2000/svg" d=${path} fill="#991155" fill-opacity="0.9"></path>
</clipPath>
</defs>
this applies an svg mask, with the SVG clipPath
function, it would result in this
clipPath
Note : the higher the number of samples per seed, the more the cells will allign the shape's path
Before explaining how this works, let's inspect that the voronoi cells are natually alligned along the custom path we provided as input
Below is the revealed secret. There are seeds actually being sampled outside the path area for the sole purpose of giving support to the inside cells not to expand till the external frame. Also important that the cells are not just simply randomly sampled inside and outside the area, they are rather avoiding the path with a distance cost factor, that prevents cells from cutting the edges to a certain extent.
In all sampling variants, the seeds do have the neighbors distance as cost minimzation factor. Using a shape's path, the cost add up to avoid the path with a distance. Here, a png image gray scale is used as a cost map that is weighted with the neighbors distance.
In the animation below, after dropping a spiral cost map, the Map Cost Vs Dist
slider is moved from 5 to 20 to concentrate the cells in the darker areas.
warning ! The svg filters effect, though part of the standard and viewable in browsers are not always supported by CAD programs such as Fusion360 !
Generate Voronoi Diagram
Export to SVG file
Shaped Tesselation area with an SVG path
Cost map for Seeds sampling from a png file
Edit seeds : add, move, remove
Export and import seeds (drag and drop seeds.json) and continue editing of an existing seeds set
Parametric Seeds generation
Range slider with interactive update for adding and removing seeds to and out of existing set
rearrange seeds when modifying window size
Shaped tesselation area
document.elementFromPoint(x, y);
Concentration cost map for seeds sampling
different cells types
cells edges retraction. Not cells scale but edges parallel rertraction with handling of closed edges discard
Shaped tesselation area
grid based, responsive svg and menu areas
Show/hide (cells, edges, seeds) and independently configure the SVG export
Browser local storage of config parameters (No storage of SVG nor seeds as they can be saved separately)
SVG filters for displacement and turbulence, but note that they can only be seen on the browser and they're not supported by tools such as Fusion360
display of width and height with unit ratio
display / hide cost map
slider to weight cost map vs distance
export scale with a ratio (adjusting to a given unit)
detract quadratic bezier short edges
edit seed weight to modify cells size (? requires a new engine, or use cells retraction technique) (editing singe seed weight,cartographic seeds weight)
MIT
https://github.com/WebSVG/voronoi/issues
node dependencies are not required to serve the project locally, but only to reference the used dependencies
rhill-voronoi-core.js
from commit 3fe2165./node_modules/matter-js/src/geometry/Vector.js
for ES2015 module import npm install file-saver --save
[email protected]