search

Dozed12 / p5.voronoi

A Voronoi library for p5.js
MIT License
128 stars 18 forks source link

Non-rectangular Diagram #3

Closed kitchensjn closed 4 years ago

kitchensjn commented 4 years ago

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 commented 4 years ago

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 alt

Diagram with shape mask alt

Diagram cutout of shape alt

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 commented 4 years ago

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.