- 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

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 36–47)

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. 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

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.

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

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.

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.

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.

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

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.

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!