Create triangles from a random set of points

Question

I accidentally generated some dots on a JavaScript canvas. I was wondering what the most effective method would be to draw triangles connecting the dots in a uniform way. The goal is for triangles to fill the entire canvas without overlapping.

---

For visual presentation, here is an image of the points that I accidentally formed on the canvas. As you can see, I may have to change the way random points are placed on the canvas.

And this is how I want to draw triangles.

Answer 1

Thanks to @Phorgz and @GabeRogan for pointing me in the right direction. Delaunay triangulation was definitely a way to go, and it ended very quickly, even when updating the canvas as an animation.

I ended up using the npm faster-delaunay package , which uses the division and conquest algorithm to triangulate randomly generated points.

Here is the result of what I painted on the canvas, which is updated as the points move around the plane: