CODEWITHSUNDEEP
javascriptcanvashtml5-canvasgeometry
Micah Cowell
Micah Cowell

Reputation: 412

Generating triangles from a random set of points

I have randomly generated some points on a JavaScript canvas I was wondering what the most efficient method would be to draw triangles connecting the points in a uniform fashion. The goal is to have the triangles fill the entire canvas without overlapping.

For a visual representation, here is an image of the points I have randomly generated across a canvas. As you can see I may have to modify the way I randomly place the points on the canvas.

points

And this is how I wish to draw the triangles.

enter image description here

Upvotes: 6

Views: 1083

Answers (1)

Micah Cowell
Micah Cowell

Reputation: 412

Thanks to @Phorgz & @GabeRogan for pointing me in the right direction. Delaunay Triangulation was definitely the way to go and it ended up being very fast, even when updating the canvas as an animation.

I did end up using the npm package faster-delaunay which uses the divide and conquer algorithm to triangulate the randomly generated points.

Here is a result of what I have drawn on the canvas that updates as the points move around the plane:

delaunay

Upvotes: 2

Related Questions