Interactive Celtic Knots Generator

Anton Lopyrev - January 2010


If you are interested in obtaining the source code, you can grab it here.

1.0 Contents

- 1.0 Contents
- 2.0 Itroduction
- 3.0 Tools Used
- 4.0 Implementation Details
--- 4.1 User Interface
--- 4.2 Interactive Knot Design (Extension)
--- 4.3 Piece Shape Types
--- 4.4 Grid Modification by Disabling Cells (Extension)
- 5.0 Results
--- 5.1 Demo Applet
--- 5.2 Demo Images
- 6.0 Celtic Knot Symmetry Groups
- 7.0 Conclusion

2.0 Introduction

This is a write up for the Assignment 2 of CS 791 Non-photorealistic rendering course that I took in Winter of 2010. See the full assignment specifications here.

In summary, the assignment involved implementation of a algorithm to produce celtic knots decribed in Peter Cromwell's article "Celtic knotwork: mathematical art" (Mathematical Intelligencer 15(1) (1993), pages 3647)

My implementation attempts to apply the algorithm in an interactive way, so that a user of the application can design a knot in realtime. Moreover, I enchance the algorithm by allowing the user to modify the plaitwork grid that is used to generate the knot by disabling certain grid cells. I believe this gives the designer even more flexibility in the kinds of knots he/she can produce.

3.0 Tools Used

My implementation of the celtic knot alrorithm is done in Java using Eclipse. The main reason I decided to use Java is the capabilities of the Java's Graphics2D library to draw Bezier curves, which I used to draw the knot itself.

Moreover, by taking advantage of the AffineTransform class I was able to reduce the number knot pieces that I need to design to only 5, and then reuse their rotated versions to complete the knot. This is described in more detail in section 4.3.

Finally, another great benefit of using Java is an ability to use Apache's Batik toolkit to generate the output SVG images. Batik has a built-in SVG generator class SVGGraphics2D, which has the same API as Java's native Graphics2D class. Therefore, drawing the knot on the screen and into a vector image file uses the same code. This is a big time saver.

4.0 Implementation Details

Given that a big part of my implementation is the interactive user interface, I decided that the best way to present some details of my work is to record a screen-capture video with my comments as a voice-over. The video is available on YouTube as two parts that are linked below.

First, the video gives a short intoduction into the topic. Then it the discusses the user interface of my program by showing off the extensions that I've made.

Some of the important features described in the video are also summarized below.

4.1 User Interface

The screenshot of the program's user interface is shown below:

As you can see the program allows to do the following interactively:

  • View the resultant celtic knot with grid on/off
  • Add/remove break-markers
  • Disable/enable grid cells
  • Toggle knot border
  • Change knot color
  • Change stroke color
  • Change background color
  • Change the grid's cell size
  • Change stroke width
  • Change the knot's string width

  • You can actually try out the program yourself by using the demo applet in section 5.1. It has a slightly modified user interface, but it will give you a general idea.

    4.2 Interactive Knot Design (Extension)

    As mentioned in the videos, my main extension to the algorithm is the ability to specify the knot interactively. Again, you can try the feature out yourself by using the demo applet. I believe that my extension to the algorithm is highly successful, as it greatly improves the user experience. I hope you feel the same way, once you try it out.

    4.3 Piece Shape Types

    To draw the actual knot I used Java's Graphics2D and GeneralPath classes instead of pre making small images. In general, there are five piece types used throughout the entire knot. Other parts of the knot are achieved by rotating and flipping these 5 pieces.

  • Corner - used for the corners of the knot, where a horizontal and a vertical break-marker join.
  • Line - used for the straight parts of the knot.
  • Straight Cross - used for a straight piece of string crossing two pieces of string.
  • Curved Cross Over - used for a curved piece of string crossing over another string.
  • Curved Cross Under - used for a curved piece of string crossing under another string.

  • 4.1 Grid Modification by Disabling Cells (Extension)

    Another extension that I've made to the algorithm is the ability to disable parts of the plaitwork grid. This allows a designer to create knots of different shapes rather than being restricted to a square grid. The following types of the grid cells can be disabled:

  • A 2x2 cell of 4 small cells around a red grid marker.
  • A 2x2 cell of 4 small cells around a green grid marker.

  • When a 2x2 cell is disabled, it acts as if there are 4 break-markers around it. However, there are no knot pieces drawn on the inside. Given that break-markers cannot intersect due to the nature of the knot, the disabled cells cannot intersect either.

    5.0 Results

    5.1 Demo Applet

    Click here for a standalone demo page

    Below is the stripped down version of my program as a demo Java Applet (yet another benefit of using Java). It lets you test out of my program on our own. It doesn't have an ability to load/save knot description files. You also cannot save the resultant vector images. Please, help yourself to take some screenshots of your results. Email me any cool results that you achive(anton at lopyrev dot com) and I will put them up below.

    5.2 Demo Images

    In this section, I will demostrate some of the images that I was able to create using my program.

    CS 791 logo (bigger version is shown at the beginning of the page): Download SVG

    Square Cross: Download SVG

    Rombic Cross: Download SVG

    My Name: Download SVG

    6.0 Celtic Knot Symmetry Groups

    There are 10 symmetry groups of celtic knot frieze patterns as described by Peter Cromwell. Here I show examples of 7 out of 10 groups. I cannot present the remaining 3 groups due to a restiction of my program to only work with even grid sizes.

    The groups are shown below.

    Group: p111

    Download SVG

    Group: p2'11

    Download SVG

    Group: p121

    Download SVG

    Group: p211

    Download SVG

    Group: p112

    Download SVG

    Group: p2'22

    Download SVG

    Group: p222

    Download SVG

    7.0 Conclusion

    Celtic knotwork seems to be a very interesting area of study. I wish I had more time to implement other interesting extensions to my program. I hope that the work I've done here will be useful to someone at some point. If you are interested in obtaining the source code, you can grab it here.

    Thank you for reading!