javascriptalgorithmcanvastriangulationtriangular

Filling a plane with triangles (Triangulation)


I tried to create an image like the one below as a random background for a website, but after multiple attempts I couldn't find an algorithm that gets the job done.

enter image description here

What should the program do?

It should be able to fill a plane randomly with triangles. These triangles should all be independent, so I don't simply want to draw long lines on the canvas an color the triangles that are created.

Algorithms I've tried so far:

1.

2.

3.

This was actually my best attemt even if it took the program far to long to get it done with only a few points. This is how the result looked:

enter image description here

I didn't find a way to find out what connections make a triangle and therefor I couldn't color them indipendently...

So hopefully you know a way to create a nice triangle-filled canvas like in the first picture and let me know...


Solution

  • A good solution is to start with random points (with your preferred distribution) and apply some triangulation algorithm. Among these, the Delaunay triangulation is a good candidate, for its low computational complexity and code availability.