Celtic Code: Drawing knots with Python
2earth.github.ioThe linked article references George Bain’s book on Celtic knotwork construction methods, but his son Ian Bain actually found a much, much better method, and argues convincingly that this, not his father’s, was the method used by medieval Celtic illustrators. Ian’s method more easily produces consistent rope widths (when done by hand), and addresses the issue of how to soften these angular turns which ruin the rope effect and produce a robotic grid.
The book is out of print now but it looks like you can borrow it on archive.org: https://archive.org/details/celticknotwork0000bain/mode/2up
Interested in what Iain's method might be, but the method I like is:
1) Draw the 'skeleton' as a connected (simple?) graph in the plane
2) Place crosses at the midpoint of each edge
3) Connect the crosses with shortest (non-crossing!) connections (bit vague this, but is more obvious by hand)
4) Erase the crosses, and run over the line, assigning under/over as appropriate - you can also thicken at this step
This gives good free-standing knots, although may be more work for the dense knotwork in the OP's examples.
Actually, this is described well in reverse here :
https://armory-rasa.tumblr.com/post/151872673763/drawing-wit...
So I do agree with you that Iain Bain's methods is better than his father's, especially for us mere mortals. But George's method for consistent rope widths (step 1: draw them all the same width) did work better for me when I was getting a program to generate knotwork on grid of squares and rhombuses, where following Iain's method led to irregular rope widths because the angles changed.
Thank you! I’ll have to take a look.
If you are interested in this art style, Knuth shared that there is a very cool art display that includes Celtic Tours. https://www-cs-faculty.stanford.edu/~knuth/knights.html is his writeup on the art. If you are in the area, highly recommend getting to see it.
This post makes me wonder - does anyone else think there is a need for a term to more strongly differentiate between procedural generation (like this knot-drawing program) and genAI? I feel it really diminishes the impact of the work of programmer-artists nowadays to say they make “computer-generated” art. Or maybe we already have such a term?
There is algorithmic art:
https://en.wikipedia.org/wiki/Algorithmic_art
> From one point of view, for a work of art to be considered algorithmic art, its creation must include a process based on an algorithm devised by the artist. An artist may also select parameters and interact as the composition is generated. Here, an algorithm is simply a detailed recipe for the design and possibly execution of an artwork […]
Creating art by AI certainly also uses an algorithm to some extent but it cannot be said to have devised that algorithm and arguably also not to clearly define all parameters to the algorithm.
I instinctively agree there is an important difference.
If you try to define systematically what that difference is, though, it's not obvious. At the end of day, I think it's something like "degree of difficulty" or "amount of thought", which are vague concepts. Yet most would agree what the author here did requires more skill and thinking than typing "image of celtic knot" into Gemini.
I used to work on procedural graphics, and to me the clear difference is that all the training involved happened inside my brain. This author's article describes a similar process. He's not throwing a lot of existing examples into a black box, letting it learn their features, then driving it to emit new images with similar features: he is learning, himself, what those features are, inventing a process which fits those bounds, then automating it with code.
Is "procedural generation" not exactly that? I wouldn't think of genAI when I hear that term.
Yeah fair enough. I don’t think of genAI either when I hear “procedural generation” (or CGI - “Computer Generated Imagery” - for that matter). But the word “generate” has taken on new significance for the broader public now and I’m not sure that non-technical folks know the difference.
Webapp doesn't work for me (current version Firefox):
Uncaught TypeError: loading.showModal is not a function
<anonymous> https://2earth.pyscriptapps.com/celtic-knot/ latest/:20
latest:20:17
<anonymous> https://2earth.pyscriptapps.com/celtic-knot/ latest/:20
Uncaught (in promise) DOMException: IDBFactory.open: The operation is insecure
<anonymous> index.js:65
Xe index.js:63
Ye sync.js:8
engine pyodide.js:95
get interpreters.js:36
promise callback*get/< interpreters.js:34
xn loader.js:66
promise callback*xn loader.js:66
Kn script-handler.js:91
or custom.js:99
define custom.js:266
<anonymous> core.js:307
promise callback\* core.js:182Thanks, I'll look into it
I'm thinking this might have broader use than artistic appeal. From what I've heard, knot generation is a young but increasingly important topic in knot theory, since it can be used to generate data to train ML models on, and subsequently (hopefully) discover new algorithms for knot classification. See https://www.nature.com/articles/s41586-021-04086-x for example.
Fans of Celtic knots might also like the daily game Celtix (https://www.andrewt.net/puzzles/celtix/) where the objective is to separate a Celtic knot into five coloured strands.
I really like how the author walks us through the generation process step-by-step. It makes it seem possible for me to build stuff like this too!!
Dropping a thank you to the OP for sharing.
Really enjoyed how you traced your mental model through the journey of solving the problem.
You should check out Knot dice, which is a fun tactile way to make one.
www.blackoakgames.com/collections/knot-dice
A web app that uses Python to create Celtic knots and it's really fun!
Looks neat. Might be worth constraining the inputs. I got an error at 200x200:
MemoryErrorUncaught PythonError: Traceback (most recent call last): File "<exec>", line 22, in resetKnot File "<exec>", line 473, in generateKnot File "/lib/python3.12/site-packages/PIL/Image.py", line 2941, in new return im._new(core.fill(mode, size, color)) ^^^^^^^^^^^^^^^^^^^^^^^^^^^^200x200? You're crazy!
Also: yes, good idea