Non-rectangular Diagram

[kitchensjn]

Thank you for making this library!

Currently, the user can set the width and height of the diagram, forming a rectangular frame that acts as the outer boundary. I'm looking to use a Perlin Noise Loop (or any non-rectangular shape) to act as this outer boundary instead. Do you have any insights into how to bound your diagram in that fashion? This feature may not have justification to be added to the base library.

[Dozed12]

I would say the best way would be to use the non-rectangular shape you generate just as an alpha mask on top of the rectangular voronoi diagram produced by the library (https://p5js.org/reference/#/p5.Image/mask). For the dimensions of the rectangular background diagram you can calculate the bounding box of your shape and use its width and height.

Something like this (simple example without using bounding box):

Base diagram

Diagram with shape mask

Diagram cutout of shape

As for specifically placing voronoi points inside your shape your best bet would be to triangulate your shape (https://en.wikipedia.org/wiki/Polygon_triangulation) and then pick a random point inside a random triangle (https://stackoverflow.com/questions/19654251/random-point-inside-triangle-inside-java). Keep in mind for proper distribution of points it is important to consider the area of each triangle when selecting a triangle.

Hope that helps.

[kitchensjn]

I appreciate the quick and thorough reply! Thank you. This should work well within my application. I will close this issue and post a follow up reply with a code example once I work through it for anyone who is interested.