Prime Knots Wall Poster

2024-01-11 12:50:51

Quickly after I began self-study in Knot Theory, I needed to design a 24×36 wall poster with knots. I needed to create it programmatically, ranging from nothing however a listing of Gauss Codes. Final weekend I lastly discovered the time. Right here’s the consequence:

The above picture depicts all single-component prime hyperlinks with 9 or fewer crossings (omitting their mirror photographs), plus some 10-crossing knots thrown in on the finish.

When viewing the SVG picture in its personal browser tab, you may click on any knot to zoom in. You can even redistribute the poster, print it, hack it, no matter; I’m releasing it into the general public area underneath CC0. You can even obtain this 8192×12288 JPEG (6 MB).

In the event you print the poster to your classroom or workplace, think about letting me know. I’m @prideout on twitter. It would make me pleased!

SVG is a pleasant file format for this use case. It’s nice at drawing curves, it scales fantastically to any decision, and doesn’t take a lot house.

I additionally love 3D depictions of knots, full with lighting and specular highlights (see my old WebGL table). Nonetheless, to a mathematician, knots are extra intently associated to embeddings of 4-regular planar graphs than they’re to real-world knots. For instance, Reidemeister strikes are one of many first issues college students study, and these strikes are outlined within the language of 2D knot projections.

To create these diagrams, I hacked collectively a Python pipeline that appears like this:

Gauss Code » Combinatorial Embedding » Half-Edge Construction » Circle Packing » SVG

I obtained the Gauss Codes from knotinfo at Indiana College. I then added orientation data utilizing a way described by Lou Kauffman in his paper Digital Knot Concept and created this JSON file with the enhanced Gauss Codes. The result’s a listing of combinatorial embeddings. At this level within the pipeline, every vertex is related to a clockwise adjacency listing, however precise vertex coordinates haven’t but been assigned.

To search out the faces within the combinatorial embedding, I discovered it helpful to populate a half-edge information construction. Every face is found by winding one step round every 4-degree vertex. This JSON file represents the half-edge data structure for each prime knot.

Subsequent, I wanted a strategy to provide you with precise vertex coordinates. The basic manner to do that is force-based structure. Nonetheless I had a number of fascinating necessities:

The perimeters needs to be represented by steady curves, not straight traces.
The shadow of the knot (i.e. the 4-regular graph drawing) will need to have no edge intersections.
Ideally, the structure generator has no random seed or sensitivity to preliminary situations, as is commonly seen in physics-based structure techniques.

The latter two necessities can be fulfilled with a Tutte Spring Embedding, however the consequence wouldn’t be aesthetically pleasing, nor would it not have curved edges.

It seems that there’s a strategy to generate a pleasant planar diagram with out force-based structure, utilizing a particular kind of circle packing that preserves the clockwise adjacency listing of every vertex. As a bonus, the circle packing is exclusive to a selected embedding of the knot, making it canonical and straightforward to breed.

In William Thurston’s well-known Notes, it was confirmed that any triangulation of a sphere has a corresponding circle packing. Related outcomes had been found by E. Andreev and P. Koebe, so this theorem is typically known as the Ok-A-T (Koebe-Andreev-Thurston) Theorem. Kenneth Stephenson wrote a pleasant article about it within the 2003 Notices of the AMS entitled Circle Packing: A Mathematical Story. In a separate paper, Stephenson and Collins describe an algorithm that consumes a combinatorial embedding of a planar graph and produces a circle packing the place the tangency of the circles corresponds completely with the graph.

I ended up utilizing Stephenson’s algorithm, however to simplify the rendering, I utilized it to the “meta-graph” somewhat than the unique combinatorial embedding. Every face, vertex and edge within the combinatorial embedding turns into a vertex within the meta-graph.

So, making use of circle packing on this manner produces three sorts of circles: faces, crossings, and arcs. That is proven under, utilizing the 8₁₁ knot for example. Every kind of circle is drawn with a unique pastel coloration.

The next photographs are all of the 8₁₁ knot, however with a unique face chosen as the skin face. A few of these projections should not preferrred as a result of the circles within the outermost layer are a lot bigger than the next-smallest layer. This causes crossings to develop into misplaced.

I discovered {that a} good heuristic for selecting an outer face is to easily select a face with a lot of edges.

2D knot diagrams usually make use of a trompe l’oeil impact whereby a spot is used to differentiate an undercrossing from an overcrossing.

To realize this impact, I didn’t merely terminate and re-start every cubic Bézier curves at acceptable factors close to the intersection, as a result of a naive bevel angle doesn’t look nice with broad traces. I discovered it extra aesthetically pleasing to render a “whiteout” line on prime of the undercrossing and under the overcrossing, as proven under.

Notice {that a} comparable impact could possibly be achieved with SVG’s clipPath facility.

One other element that you simply in all probability observed is that the thickness varies based on the enclosing circle; which means I couldn’t merely use SVG strokes, as a substitute I needed to convert the strokes into crammed areas. To do that I cribbed the offsetting performance within the Simon Cozens beziers library.

Philip Rideout, 28 July 2020.