Math-inspired Art

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

As I had covered Wallpaper groups in the past I started focusing on a WebGL implementation for hyperbolic tilings. There are multiple visual models for hyperbolic geometry but I started with the Poincaré Disk model of Hyperbolic Geometry.

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

Next up I tackled spherical symmetries. This was fascinating as I didn’t know that spherical symmetry is a model that helps describe all types of symmetries in 3D space! You just need to enclose any 3D object inside of a sphere, project the object into the surface of the enclosing sphere and then find the reflection axes/planes, gyration points, etc. of the structure.

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

Finally I exported a few 3D models and SVG files, and with some tweaking on blender was able to generate proper models to be printed via Shapeways. Some of these models are in plastic, others in steel:

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!




Interested in Computational Design and Generative / Math Art.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Saving the Mexican Pizza

What if you can create Listening Sessions on Spotify - A User Experience Design Case Study

How to properly export your Sketch designs to Photoshop (if you really have to)

Design thinking for Whole Bank’s new payment app

Sinau Bareng : Solution of Course Study About Design

How my app helped attorneys

The War on the Frowning Poop Emoji — Ben Grapevine

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Nicolas Belmonte

Nicolas Belmonte

Interested in Computational Design and Generative / Math Art.

More from Medium

Learn To Model a Double Twisted Tower in Grasshopper

How to Add a Placemark Using Coordinates in Google Earth

Pin on the map

Read with me: Point Transformer

Fresh Maps are Crucial in Urban City Centers: Here’s Why