How PolyGen uses gradients and Delaunay triangulation to generate beautiful patterns


Low Poly abstract patterns feature unique, eye-catching style. Would you like to know how they’re made? This article is going to answer your questions. Take a look at some of the examples below, soon we’ll create a similar pattern step-by-step.

I’m starting with blank canvas, but it won’t stay this way for long. The end result is going to be a low poly pattern just like the ones above. The aspect ratio matches Twitter’s cover photo.

I’m filling the canvas with a gradient: a combination of pink and red shades, distributed diagonally. Later on, you can experiment with other colors and styles.

Now I’m adding a few points, placing them somewhat randomly but not completely at random. Note that having a truly random set means that there’s a chance to leave some areas empty and place a dense cluster of points elsewhere. For our purposes it’s better to distribute the points approximately evenly, just like in the picture below.

In the next step I’m connecting the points so that they form triangles. I’ve used Delaunay triangulation for this purpose. You’ll notice that some of the triangles extend outside of the canvas; that’s because I’ve placed a few points there too. This way the triangulated area covers the canvas completely.

Looking interesting already. Let’s color the triangles. I’m finding the center of each triangle and using the canvas color at that point. Each of the triangles will be filled uniformly with that color.

Almost ready! The right side of the pattern already looks pretty, but it’s hard to distinguish individual triangles further to the left. I could increase contrast of the whole pattern, but I prefer to randomly darken selected triangles; the latter yields better results in my opinion.

This is the finished image, ready to be used as a Twitter cover photo. I’ve started from a simple gradient and achieved this abstract low poly pattern in just few steps.

We could still play with it a little. What if the points were arranged in a different way? I’m going to pick a line that separates one gradient color from another and add more points there. I’ll update our Delaunay triangulation accordingly, just like in the image below.

I’ll leave the coloring algorithm unchanged. After filling the triangles with corresponding colors, the following pattern will appear. It features an interesting border between the two shades.

We could experiment with a number of other options and I hope you’ll continue to play with low poly abstract patterns this way!

Screenshots used here come from PolyGen, the app for low poly patterns. You can download it for your iOS device, or for Android and continue to explore this art style.