Celtic Knotwork Algorithms

Rev. 10-Apr-2005

This article explains the basics of rectangular knotwork, and some of the principles used in my "Knotware" generation programs.





 If you've read through my simple explanation, you may be ready for some of the inner secrets of how this program is possible. And, you may have already noticed the peculiar way that the graphics are drawn on this page -- they pop up in little squares randomly, instead of as complete images slowly loading one by one.
The knot at the left illustrates the principle: each knot can be constructed using the same five shapes (), copying them, turning them, and flipping them over as needed. If you can draw that basic 2x2 knot, you can draw any knot.

When you include the different ways that you can rotate the pieces and flip them over, there are 26 different tiles that serve to draw any of these knotwork patterns (28, if you count the two blank ones that are available); they've been assigned letters in a purely arbitrary order. This way, my program just has to manipulate the letter codes, and the actual "drawing" is done by the HTML it generates.







Figure 1. Here are two fancy 4x3 Celtic Knots. How were they created? Figure 12, Line 1
Figure 12, Line 2
Figure 12, Line 3
Figure 12, Line 4
Figure 12, Line 5
Figure 12, Line 6







 Figure 2. We start out with plaitwork -- simple interlaced ribbons.







Figure 3. The step before that, though, we just look at criss-crossing ribbons.







Figure 4. It is, of course, a repeating pattern.







Figure 5. Wherever we have a horizontal border along the top, we change or to or
and along a bottom horizontal border we change or to or







Figure 6. And, where we have vertical borders on the left or right, we make similar substitutions.







Figure 7. A corner is just a place where we have two borders at right angles to each other.







Figure 8. To make the knot more interesting, we can introduce "breaklines" also known as "inside borders."
Suppose that we had a line running down the middle of our pattern. We would have two matching 2x3 patterns.







Figure 9. But suppose the line didn't separate it completely -- suppose it just came down from the top for a bit, and up from the bottom, but didn't cut all the way through? We could treat the pieces next to the line on either side as if it was next to an outside border, and change where the plaitwork crossed into curved pieces instead.

Figure 10, Line 1
Figure 10, Line 2
Figure 10, Line 3
Figure 10, Line 4
Figure 10, Line 5
Figure 10, Line 6
 Figure 10. Breaklines can be put anywhere that the ribbons cross. Here we've added two more, horizontal ones along the middle axis.

Figure 11, Line 1
Figure 11, Line 2
Figure 11, Line 3
Figure 11, Line 4
Figure 11, Line 5
Figure 11, Line 6
 Figure 11. Now, what would we have if the horizontal breaklines had been added vertically, and the vertical ones horizontally? Two surprises: there's now a ring in the center that doesn't connect to the rest of the pattern (and the rest of the pattern consists of two more interlocking loops), and there's two sections along the top and bottom where it goes straight from left to right. That's because that section in essence has a breakline or a border on both sides of it, which forces it to go straight.

Figure 12, Line 1
Figure 12, Line 2
Figure 12, Line 3
Figure 12, Line 4
Figure 12, Line 5
Figure 12, Line 6
 Figure 12. Just to make things a little more interesting, we'll change the bottom center breakline back to vertical, and change the middle left back to horizontal. they were. This brings the pattern back to being composed of one interlocking ribbon. It's certainly asymmetrical!

manipulating the letter codes...