How to draw lines of subdivided triangles

Created 10 November 2020

Updated 17 April 2020

I start by drawing points along four vertical lines, with variation in the x position. The result is the series of points arranged in four crooked lines.

Along each “line” I draw a triangle between a point and the two following points.

I subdivide the triangles recursively. The subdivision algorithm is: Find the longest side of a triangle. Draw a line from a point on that line to the opposite corner of a triangle. Repeat with the two newly created triangles unless a stop condition is met. Hat tip to Tyler Hobb’s essay Aesthetically Pleasing Triangle Subdivision.

The red points are the places where the larger triangle is split into two. A red point without a line is a point where the recursion stopped.

Not showing the certain triangles produces the broken effect. Randomly stopping the recursion helps vary the size of the triangles, making them more interesting. I also removed the points. Here’s the final result:

I use a Triangle object to make everything happen. p5.js has a triangle() function, which is good for drawing triangles. But when you want to do more advanced things, like recursively divide the triangles you have to build your own class.

The class should have three vectors to store the coordinates of the three points of the triangle. It should have another vector to store the position of its centroid.

The class should have a method showTriangle() displays the triangles. Another method titled subdivide() is where the subdivision algorithm should be implemented.

Now you have the knowledge to make generative art with triangles. Have fun and send me any results that you like!