Infinite Triangles

This experiment was one of my first experiments with WebGL. The story behind this one starts with a camping trip I took with some friends. We didn't camp in the wilderness because of logistical issues, so we ended up camping close to a beach. On the beach, people started to build sand sculptures, so I began working on a Sierpinski-esque triangle design, but with recursion in the inner triangle as well. Ultimately, a few other people ended up working on the increasingly intricate design. After the camping trip ended, the triangular fractals (affectionately called "tringles" by my friend Sarah) became a sort of running joke and obsession, and we ended up doodling them all over the place. Eventually I decided to make a version with code that would be infinite.

The challenge with making an infinite fractal that zooms in is that, if it can zoom in forever, how do you know what triangles to recurse into? Once a triangle leaves the viewport, it is useless to do any computation with it. But how would I minimize the recursion while allowing infinite zoom, especially in a stateless, pixel-independent fragment shader? How would that work? The way I solved the issue was by realizing that every triangle was exactly 1/2 in side length from its ancestor, and twice as large as its recursive successors. Each triangle could thus be encased in a circle, and the circle be determined by flooring the base-2 logarithm of a pixel's radius. Then, one could use the parity (even/odd) of the circle index to determine triangle orientation and the index itself to determine what level of triangle to draw and thus the location of the largest center-aligned triangle that could contain the point.

Once I know what the largest triangle a point could lie in is, I simply recurse down into its ancestors and draw the triangle at the end of the recursion. In addition, by slowly fading out triangles that are not centered, the stacked triangle effect can be made more apparent.

I also made another version of this infinite triangle experiment that colors using time as well as triangle level. It doesn't quite have the same fractal simplicity, but it is definitely mesmerizing. You can view it here.