The Sierpinski Gasket and how to cede it

When rendered in 3D the Sierpinski 'solid' has Infinite surface area and Zero volume.

12^th August 2021

This should be 'impossible' for a 3d shape, and yet at the limiting case of iterations, it is true. Just look below to see one rendered in 3D.

I have always been fascinated by geometry and fractals since first seeing the Mandelbrot set back in the Triassic period. As 3d libraries have become more and more accessible, it has been possible to render 3d environments entirely 'in browser' using tools like Three.js, a personal favourite.

How do you draw a Sierpinski gasket?

These geometries are incredibly simple to define, a little harder to code. For the triangle, you start by naming the three vertices 1 to 3, and assign x, y coordinates to each. You then choose a random number from 1 to 3 representing a vertex and plot a point halfway between your current position and the randomly selected vertex. Repeat a few thousand times and you create the Sierpinski gasket.

This technique is known as the chaos game, and what makes it so magical is that every single step is random, yet the picture that emerges is perfectly ordered. The first few dozen points look like noise, then the familiar triangles within triangles appear, each one an exact copy of the whole. Waclaw Sierpinski described the shape back in 1915, long before anyone had a computer to draw it with.

There is a second, more hands-on way to build it. Draw a solid triangle, join the midpoints of its sides and cut out the upside-down triangle in the middle. That leaves three smaller triangles. Do the same to each of those, and keep going forever. Both methods arrive at exactly the same shape.

What is the fractal dimension of the Sierpinski gasket?

The gasket also has a strange property: it is more than a line but less than a surface. Mathematicians give it a fractal dimension of roughly 1.585, a number that sits somewhere between one and two dimensions.

That odd number comes straight from the construction. The gasket is made of three copies of itself, each half the size of the whole, and the dimension is the power you would need to raise 2 to in order to get 3. Meanwhile, every step of the cut-out method removes a quarter of the remaining area, so after infinitely many steps the area left is zero, even though the shape is still clearly there.

What does a Sierpinski gasket look like in 3D?

If you then think in three dimensions and assign x, y, z coordinates to the eight vertices of a containing cube, a 3d version of the triangular gasket is created after 1,000,000 iterations. I am pondering trying this with 5, 6, 7, .. n sided solids but have yet to find the time. Do let me know if you would like to see this and I may prioritise it!

The 3D version is often called the Sierpinski tetrahedron, or tetrix: a pyramid built from four half-size copies of itself. Its volume shrinks towards zero with every step, yet curiously its surface area stays exactly the same, and its fractal dimension comes out at a neat whole number, 2. For a solid that genuinely gains surface while losing volume, see its cousin, the Menger Sponge.

Part of me wonders that if we did the same in four dimensions, arbitrarily considering time as the 4th dimension, we may end up mapping the structure of hyperspace.

Where else does the Sierpinski triangle appear?

For such a simple shape, it turns up in some surprising places. Colour in the odd numbers of Pascal's triangle and the Sierpinski triangle appears. It emerges from simple cellular automata, where each row of cells is worked out from the one above. Engineers have even used its self-similar shape to design compact fractal antennas that work across several radio frequencies at once.

How do you render a million points in a browser?

With Three.js, it is possible to render a 3d environment and then navigate it in real time. A million individual points sounds like a lot for a web browser, but by packing every coordinate into a single buffer and handing the work to your graphics card, the whole structure can be spun, zoomed and explored smoothly.

In practice, that means storing all three million x, y and z values in one typed array, wrapping it in a buffer geometry and drawing it as a single points object. The graphics card then draws every point in one go, rather than the browser handling a million separate objects. If you are new to Three.js, our guide to animating a cube in Three.js covers the basics of scenes, cameras and renderers.

Here is a 2D Sierpinski Gasket

How do we go about rendering these in 3d using Three.js?

1 million points are rendered in the below example. (Tip: left or right drag the mouse slowly near the image and wheel to zoom to see detailed structure.) The closer you look, the more triangles you will find hiding inside one another.

If you enjoy this kind of thing, you might also like exploring the Mandelbrot and Julia sets.