Math-inspired Art

Nicolas Belmonte
Apr 6 · 5 min read

A few weeks ago I took a break from work. My plan was to recharge by focusing on spending time with the family and on personal projects.

For a while I’ve been excited to learn more about symmetry, group theory and how they relate to topology. I’ve bought the amazing book “The Symmetries of Things” by Conway et al. which covers symmetry in Euclidean, Hyperbolic and Spherical geometries at a pace that can be easily consumed by ordinary human beings that happen to have a day job and a family like myself.

Symmetry in Hyperbolic Space

To refresh your memory, in this model lines are arcs of circles that intersect the unit disk orthogonally. Given a line between two points [A, B], there are infinitely many other lines outside (A, B) that do not intersect [A, B], something that cannot be achieved in Euclidean geometry…

I thought of two potential implementations for this in WebGL. The first one uses instancing for each “element” (fundamental region) of the tiling. This implementation is inspired by an 1981 paper called “Creating Repeating Hyperbolic Patterns” by Douglas Dunham and John Lindgreen. Fun fact: looks like this paper could only be printed with ASCII characters, as the π symbols in the paper are sometimes omitted and sometimes even handwritten…

The benefits of this approach are the ability to use the instancing features coming from WebGL-2 for rendering as well as easy manipulations of the geometry for texturing, etc. It’s easy to export this to a model for 3D printing or generate an SVG for laser cutting. We also explored multiple conformal mappings for this tiling of the hyperbolic plane. In this video we show Schwarz-Christoffel, lower-half plane, Bulatov band mappings; and a few interactions like updating the margins between the fundamental regions, re-shaping them, rotating and changing the center of the tiling, etc.

The downside of this approach is that it would require ∞ many instances of a fundamental region to fully cover the unit disk. A different approach to this is to use reverse pixel lookup, presented in the paper “Hyperbolization of Euclidean Ornaments” by Martin von Gagern and Jurgen Richter-Gebert, in which basically the whole computation is done in the fragment shader: for each pixel in the screen we can track back to what point in the fundamental region it corresponds and thus what location to sample in the texture that covers that region. The paper covers other cool things during the process of transforming euclidean patterns into hyperbolic ones which gave me an idea for a project that I might get to one day…

Finally, using Transform Feedback I was able to generate SVG files from different mappings of this structure which I ran to a laser cutter to get the following results:

{3, 8}, {4, 8}, {6, 4} tilings

I was happy with the current result and so started digging deeper into symmetries in the sphere.

Spherical Symmetry

Image Credit: Jon Conway

Just like with Wallpaper patterns there are a finite (in this case 14) number of symmetries in the Sphere.

The WebGL application is just an extension of the hyperbolic tilings. A user-defined function generates a 3D mesh used as the fundamental region which then gets instanced multiple times and transformed to cover the specified symmetry group. Any number of these can be rendered at the same time in the screen in a small multiples fashion. To your left there’s an example for a *532 symmetry with a live video as texture.

This approach also provides flexibility on the generation of the 3D mesh to create the fundamental region as well as the texturing and possibility to export this as a model for 3D printing or laser cutting. In these cases we carefully chose the fundamental region to have it so that it fully covers the sphere once replicated and transformed by the symmetry group, but there are definitely more creative ways to play with this that I might explore in the future.

I then proceeded to write export functions into OBJ and SVG formats for digital fabrication.

3D Printing

The SVG files were created from the stereographic projections. I personally preferred the hyperbolic tilings but it was worth a shot:

You can find more process pictures in my Symmetry album.

Just as things were starting to get interesting, well, my time off ended. I thought this project needed some (interim) closure so I wrote this but I’m also using this writeup to get you interested in participating. The best way to take this forward is through a collaboration. I have plenty of ideas on how to take this further and welcome yours too!

Nicolas Belmonte

Written by

GM/VP Maps @ Mapbox. Previously Director of Engineering, Founder and Head of Visualization @ Uber, TLM/Staff Engineer @ Twitter