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 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.
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.
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.
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.
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.
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.
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.
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.
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. Please, email me (anton at lopyrev dot com), if you are interested in seeing the code.
