Knotpad: Visualizing and Exploring Knot Theory With Fluid Reidemeister Moves
Knotpad: Visualizing and Exploring Knot Theory With Fluid Reidemeister Moves
(a) (b)
Fig. 1. (a) The supported manipulations in KnotPad are based on the three types of Reidemeister moves. Our tool allows users to produce and trace
equivalent knot diagrams through verifying and storying the mathematically valid moves. (b) Screen images of applying the Reidemeister moves to the
mathematical link diagrams.
AbstractWe present KnotPad, an interactive paper-like system for visualizing and exploring mathematical knots; we exploit topo-
logical drawing and math-aware deformation methods in particular to enable and enrich our interactions with knot diagrams. Whereas
most previous efforts typically employ physically based modeling to simulate the 3D dynamics of knots and ropes, our tool offers a
Reidemeister move based interactive environment that is much closer to the topological problems being solved in knot theory, yet
without interfering with the traditional advantages of paper-based analysis and manipulation of knot diagrams. Drawing knot diagrams
with many crossings and producing their equivalent is quite challenging and error-prone. KnotPad can restrict user manipulations
to the three types of Reidemeister moves, resulting in a more fluid yet mathematically correct user experience with knots. For our
principal test case of mathematical knots, KnotPad permits us to draw and edit their diagrams empowered by a family of interactive
techniques. Furthermore, we exploit supplementary interface elements to enrich the user experiences. For example, KnotPad allows
one to pull and drag on knot diagrams to produce mathematically valid moves. Navigation enhancements in KnotPad provide still
further improvement: by remembering and displaying the sequence of valid moves applied during the entire interaction, KnotPad
allows a much cleaner exploratory interface for the user to analyze and study knot equivalence. All these methods combine to reveal
the complex spatial relationships of knot diagrams with a mathematically true and rich user experience.
Index TermsKnot Theory, Math Visualization.
1 I NTRODUCTION
Mathematics and physics are two closely related academic disciplines demeister moves, lies at the crossroads of mathematics and physics.
[10]. For example, studying knot theory, namely the three types of Rei- In knot theory, one considers two knots are the same if one can distort
one knot into the other without breaking it, much as we physically play
with a real knotted rope where one part is allowed to cross but not in-
Hui Zhang is with Pervasive Technology Institute at Indiana University, tersect with another. Such equivalence relation is mathematically gen-
e-mail: [email protected]. erated on diagrams and related by a sequence of three Reidemeister
Jianguang Weng is with Zhejiang University of Media and moves [13]. As illustrated in Figure 2, a Reidemeister move refers to
Communications, China. one of three local moves on a knot diagram. Each move is performed
Lin Jing and Yiwen Zhong are with Fujian Agriculture and Forestry on a local part of the diagram that is topologically identical to the orig-
University, China. inal part of the diagram illustrated in the figure without changing the
rest of the diagram. These three Reidemeister moves are representa-
Manuscript received 31 March 2012; accepted 1 August 2012; posted online
tive and useful in doing combinatorial topology in mathematical knots
14 October 2012; mailed on 5 October 2012.
and links. By applying the Reidemeister moves we can gain insights
For information on obtaining reprints of this article, please send
e-mail to: [email protected].
of the underlying knot topological structure by obtaining a continuous
family of embeddings of circles in three-space from one knot to its
1077-2626/12/$31.00 2012 IEEE Published by the IEEE Computer Society
2052 IEEE TRANSACTIONS ON VISUALIZATION AND COMPUTER GRAPHICS, VOL. 18, NO. 12, DECEMBER 2012
equivalent. are 2n distributions of markers over all crossings and one false
marker of a crossing will result in a mathematically wrong move.
An essential design issue is therefore to build an interactive,
friendly, error-aware system: such a system should recognize
and only allow mathematically valid moves being applied to knot
diagrams.
Our task in this paper is to present such a sketching based knot
diagram interface where one can fully interact with 3D mathemati-
cal knots through step-by-step 2D Reidemeister moves. We first start
from extending the familiar knot drawing idea to a pseudo-haptic
topological drawing interface with which one can draw knot diagrams
by taking advantage of a physically reactive mouse cursor. We then
proceed to describe how the pseudo-haptic approach can be extended
and used to edit the knot diagram by sketching the Reidemeister moves
to obtain knot equivalence. Having established the main mechanisms
Fig. 2. The Reidemeister moves. Each move operates on a small region of the and interaction paradigms, we proceed to an interactive software en-
diagram and is one of three types: (I) Twist and untwist in either direction; (II) Move vironment that is capable of manipulating knot diagrams by allowing
one loop completely over another; (III) Move a string completely over or under a sketching, rendering, editing, and polishing knot diagrams. We next
crossing. discuss a family of user interface elements we implemented to im-
prove user experiences including a 2 12 D rendering method with light
Due to the complexity of knot diagrams and the complex interac- and material that adds apparent 3D geometry, depth and shapes to the
tions required, it has been very challenging to design a successful in- knot-crossing diagrams, a navigation interface that captures manip-
teractive system for fluid entry and editing of knot diagrams with sup- ulation steps during the entire interaction, and a deformation based
port for the Reidemeister moves. Building such an interface is very editing interface to simplify user input by allowing pulling and drag-
different from other conventional user interface design, and important ging on knot diagrams. We finally present a user experience study we
unique features for this class of math visualization problems include: conducted and our paper ends with a conclusion and a description of
potential perspectives.
Precise 3D depth is relatively unimportant. Different from
many other conventional visualization systems where one typi- 2 R ELATED W ORK
cally has to switch to a set of views for precise depth control,
We usually describe mathematical knots by drawing their projective
when manipulating knot diagrams only the relative depth order-
images on flat 2D media such as a blackboard or a sheet of paper (see
ing (i.e., over/under- crossings) is of interest. For example, the
Figure 4(a)(b)). The knot diagrams (see e.g., Figure 4(a)) are regarded
type II Reidemeister move (see e.g., Figure 2(II)) allows one to
both as schematic pictures of the knots, and as plane graphs with extra
move one loop either completely over or under another. In such
structure at the nodes (indicating how one part of the knot cross over or
cases, the initial precise 3D depth of the two loops are unimpor-
under another by standard pictorial conventions). Diagrams of equiva-
tant as if they were totally flattened and the relative depth order
lent knots are connected by a sequence of the Reidemeister moves that
can be created when they are slided through each other. Topolog-
happen under the planar projection of the movement taking one knot
ical rules indeed allow us to generate such moves that are math-
to another.
ematically true but beyond simple geometric manipulations.
Fig. 3. (a) Sketching a knot diagram. (b) Selecting a local part of the diagram. (c) Sketching and proposing the twist Reidemeister move to replace the selected part in
(b). (d) Rubbing parts of the diagram to make the appearance more smooth. (e)-(f) Generating the knots equivalent with a dragging gesture.
The emergence of computer graphics and visualization techniques components. To solve this problem, we supplement our system with
has sparked a number of interesting attempts to use interactive com- a rubbing tool that allows users to smooth small regions of the tar-
puter systems to help describe 3D curves and mathematical knots. For get diagram for better-looking images (see Figure 3(d)). KnotPad can
example, Schareins Knotplot has been widely used to sketch mathe- recognize and then remember each valid move the user performs to
matical knots (mainly done in a plane assisted by general 3D rotation) connect one knot diagram to another, therefor one can take advantage
[20] , while Cohen et al. proposed to create and manipulate 3D curves of such a memory in our system to nagivate through the sequence of
by correlating the curve with its sketched shadow to compute the the Reidemeister moves generated from the interactions.
curves 3D shape [5] . Wijks SeifertView [24] visualizes the Seifert The major contributions of this paper are summarized below:
surface of knots and links for users to understand their shape and struc-
ture. Snibble et al. merge springs and constraints with the study of First, this paper proposes a knot diagram interface that provides
geometric characteristics relevant to knots (see, e.g., [21] ). Others ex- connected math-aware manipulation. This is the first paper that
ploit haptic interfaces to edit and simulate 3D knots and ropes (see, e.g, explores the use of step-by-step Reidemeister move interface and
[3, 25, 17, 23]). Wus MING [28] is a knot drawing and refinement tool graph visualization to approach knot theory visualization in the
that utilizes energy based minimization models. Zhang and Hanson closest way to the problems being solved.
suggested studying mathematical knots by making and exploring their
shadow pictures using haptic interfaces. Their approach showcased Second, we propose a hybrid, novel interface with 2D visuals
how haptic and pseudo-haptic exploration of projected mathematical and layered 3D depth that still supports full 3D interaction. We
objects (i.e., 2D knot diagrams of 3D knots or 3D projective images of showcase in this paper that providing users with 2D diagram-
4D knotted spheres) can support full-featured physical exploration of matic visuals with layered 3D depth still allows for a mathemat-
mathematical knots in the full dimensional space [8, 31, 32, 30, 33]. ically true and rich experience with the elegant but complex 3D
However, all these efforts are essentially focusing on visualizing knots.
the physical dynamics (or pseudo-dynamics) of 3D knots and ropes
(or sometimes knotted spheres in higher dimensional space), which is Last, we investigate and evaluate a family of novel interaction
barely helpful for diagrammatically drawing and studying knot the- methods for reducing interaction complexity and preventing cog-
ory, namely, the Reidemeister moves. Although some specific knot nitive disconnect during the entire interaction. Our user study re-
diagram editing and knot equivalence finding tasks can be illustrated sults further demonstrate the efficacy and applicability of Knot-
with a physical simulation of 3D knot or rope, knot theory concerns Pad system.
itself with isotopy that preserves shape (e.g., an isotopy can deform a
circle of radius one to a circle of radius two) and thus general Reide- By combining graphics, graph visualization, sketching based inter-
meister moves (which are non-physical, local deformations) can not face, and pseudo-haptics [20, 5, 21, 8, 32, 30, 33], we feel we can make
be generated with a 3D simulated rope on a computer screen or with a non-trivial contribution not only to classes of geometric and topolog-
real knotted rope in ones hand. ical problems with interactive math visualization approaches, but also
Therefore we have been motivated to develop such a math-aware to the larger community of researchers working with 2D interaction for
interface where one can study knot theory by creating the knot dia- the design of complex 3D shapes (e.g., working with two-dimensional
grams, and applying step-by-step Reidemeister moves to gain insight floor plans to communicate 3D architectural design, and node-link di-
into knot equivalence through the entire interaction, assisted by a fam- agram manipulation methods).
ily of computer based fluid user interface elements.
4 I MPLEMENTATION M ETHODS
3 U SER I NTERFACE OVERVIEW In this section, we describe the families of methods used to imple-
ment the interaction procedures and user interfaces. Our fundamental
From the users point, KnotPad consists of a sketching area, where
techniques are based on a wide variety of prior art, including haptic
the user interactively draws the knot diagram with a physically reac-
interfaces focusing on virtual realism (see, e.g., [1, 14, 15]), pseudo-
tive mouse cursor and the system automatically queries the user for an
haptic illusions generated by visual feedback (see, e.g., [12, 18, 33]),
explicit choice of over/under- crossing to ensure no part of the curve
and other variants on sketching and exploration techniques [21, 2, 29,
runs into another [33] (see Figure 3(a)). The user can push and pull
11, 7, 16, 6].
part of the curve for further geometry control (in 2D), and toggle be-
tween classic knot-crossing diagram, Gauss diagram, and 2 12 D smooth 4.1 Drawing Knot Diagrams
knot rendering view. In addition, the user can freely select a local part
of the knot diagram (see Figure 3(b)) and propose the Reidemeister 4.1.1 Pseudo-haptic Knot Creation
moves either by interactive drawing (see Figure 3(c)) or by pulling We use the pseudo-force model [33] to simulate a collision-sensing
and dragging on parts of the knot diagram (see Figure 3(f)). Knot- cursor. The user sketches knot diagrams with such a collision-
Pad automatically performs the legality check of each proposed move sensing cursor and relative depth order (i.e., local crossings) is han-
by alerting the user when illegal editing attempts are recognized, and dled as part of the sketching task. The main idea of our pseudo-haptic
construct the new knot diagrams by restricting user manipulations to knot creation approach consists in modifying the motion of the cursor
legal moves only. Hand-drawn curves can be jittery especially when displayed on the drawing panel during the manipulation of the input
one keeps replacing local parts of the diagrams with newly sketched device by the user.
2054 IEEE TRANSACTIONS ON VISUALIZATION AND COMPUTER GRAPHICS, VOL. 18, NO. 12, DECEMBER 2012
Fig. 8. Crossing points with reasonable distances are favored, in order to avoid
visual and computational ambiguities.
Definition 4.4 (safe component) A safe component is a curve in a (b.) K is an arc component and K is a twist component
knot diagram that either an arc or twist component, or only goes over rightle f t
(see e.g., R1 in Figure 9);
the rest of the knot diagram at each local crossing point (namely, a (c.) K is a safe over/under- component and K = 2
safe over-component), or only goes under the rest of the diagram at
and K is an arc component (see e.g., R2
le f tright
each local crossing point (namely, a safe under-component).
in Figure 9);
Definition 4.5 (stuck component) A stuck component is a curve in a (d.) K is an arc component and K is a safe over/under-
component and K = 2 (see e.g., R2
rightle f t
knot diagram that is neither a safe component nor a twist component. in
Figure 9);
With these definitions, we are ready to outline our interaction sce- (e.) K and K are are both safe over-components and
nario. At each interaction loop, the following sequence of events oc- K = 2 and K = 2 (see e.g., R3 in Figure 9);
cur: (f.) K and K are are both safe under-components and
K = 2 and K = 2 (see e.g., R3 in Figure 9).
5. Legal moves are accepted and new diagrams are constructed.
With each legal move accepted, the system constructs the new
knot diagram for users to interact with further.
2. K is a safe component. Only a safe component can be selected 4.2.3 Improving the Hand-drawn Diagrams
for further modifications. Our system provides a rubbing tool for smoothing knot diagrams. As
the user proposes new components to replace local parts of a knot
3. Proposing a new component (K ) by sketching the Reidemeis- diagram, the curve gradually becomes less smooth (see. e.g., Figure
ter moves. Examples are attempts to add a twist component to 3(c)). We allow users to rub a region of the diagram to smooth it using
the diagram to replace an existing arc component, or sketch an the Least-square mesh approach [22] (the connectivity pattern in our
arc component to remove a twist component (see e.g., Figure case is a set of curves instead of a 2D mesh, thus the Laplacian filtering
3(c)). presented here works on a 1D space.)
The basic idea is to construct the Laplacian matrix [22] correspond-
4. Recognizing the Reidemeister moves and/or planar isotopy ing to the link-node structure and sets the corresponding control ver-
moves. The system only accepts a new component K proposed tices: when a local region in the knot diagram is being rubbed, only
to replace the original component K, when K and K satisfy the a finite number of vertices being rubbed are going to be reconstructed
following formulae: while nodes in the rest of the diagram are used as control vertices. For
example, Figure 11 shows a very simple graph (a trivial knot sample)
(I.) K is a safe component.
where vertices v2 and v3 are being rubbed, and vertices v1 , v4 , v5 are
(II.) K K = O, i.e., the original component and the pro- being used as control vertices. The system first constructs the Lapla-
posed component should form a unlinked component O cian matrix L based on the connectivity meshes (in our case, linked
(also called loop or simple closed curve or Jordan nodes), and then adds the equations F of the control vertices to make
curve). the matrix full-rank (see e.g., Figure 11, the last three rows of the ma-
(III.) K K is identified as one of the three types of the Rei- trix are the added equations of the control vertices). The following
demeister moves as follows: equation is then solved in least-square sense as proposed in [22] to
smooth the graph:
(a.) K is a twist component and K is an arc component
le f tright
(see e.g., R1 in Figure 9); Ax = b, (1)
2056 IEEE TRANSACTIONS ON VISUALIZATION AND COMPUTER GRAPHICS, VOL. 18, NO. 12, DECEMBER 2012
Fig. 12. User interface elements in KnotPad. (a)-(b) KnotPad recognizes illegal attempts of knot manipulation: (a) A stuck component was wrongly selected for editing.
(b) An illegal move was proposed. (c) KnotPad automatically saves each valid Reidemeister move being applied as images on disk for each project. The user can
navigate or track back to a valid move by selecting a snapshot icon from the Carousel-like history navigation interface. (d) KnotPad highlights the diffs between
subsequent history moves by overlaying knot images with transparency.
hold the ends of a rope with one hand and twist the ends of the formed (d) moves that start with no crossing in the initial state but
1 (+), R1 (),
end with crossings in the goal state (Rlr
loop with the other hand to make a knot, very much like the type I Rei- lr
demeister move. In this section, we first consider how Reidemeister R2 (+), R2 ())
lr lr
moves can be explored to advantage with a deformation based editing
interface yet still capable of restricting user manipulation to the Rei-
demeister moves. We then discuss how to further simplify user input
by combining sets of sequential valid moves into frequently-used el-
ementary moves. We also propose using Gauss code to group frames
in the navigation interface to provide more identifiable and interesting
manipulation path for visualization purpose.
5.2 The Solution
5.2.1 Recognizing Dragging Gestures for Valid Moves
The basic idea is to supplement our interface design with a free-form
editing interface with the support for the Reidemeister moves. When
the user selects a local part of the diagram and drags one of the vertices
to propose a move, the end-points and the manipulated vertex of the
local part are set as the corresponding control vertices of the Lapla- Elementary moves in categories (a) and (b) can basically be im-
cian matrix, and the local part is deformed in the least-square sense as plemented using the free-form editing method without resolving
proposed in Equation 1. the crossings, the user can grab and drag a control point on part
Different from the drawing approach to support the Reidemeister of the knot diagram to perform the valid moves while our system
moves where crossings were created and crossing signs were resolved recognizes the valid moves by ensuring there are no resultant
one at a time separately, performing a free-form like move typically crossings in the goal state. Moves in categories (c) can be imple-
adds or removes a set of local crossing points along the whole local mented following the same fashion, except that our system re-
part to be overdrawn. Therefore there are two critical components in members the crossing signs in the initial state and automatically
the implementation of our dragging interface to simplify user input: assigns the same crossing signs in the goal state (see e.g., Figure
14). Now the elementary moves in category (d) needs crossing
1. Dragging a local part of the diagram for deformation. This is signs handling, they start from the initial state with no cross-
implemented again using the Least-square mesh approach [22]: ings but produce a group of crossings (of the same sign) in the
the user selects a local part of the diagram (Figure 3(e)) and goal state. To resolve the crossings for these moves, we follow
then drag one of the vertices to propose the shape reconfigura- the same fashion of resolving crossing signs in our knot draw-
tion (Figure 3(f)). ing interface: KnotPad will explicitly query the user for over-
or under-crossing choice when the curve is being dragged and
2. Resolving crossings to ensure valid moves. We need a solu- resultant collisions are about to happen during the dragging mo-
tion to resolve the crossing signs to ensure mathematically valid tion.
moves being produced with each dragging motion. The three
basic types of Reidemeister moves can be decomposed into ten
elementary moves in our user interface with support for dragging
gestures, and these moves fall into four categories:
(a) moves that have no crossings involved in either initial or
goal state ( Rlr rl
0 , R0 )
Fig. 14. Pulling a local part of the diagram to create the Reidemeister move. (a)-
(c): the resultant crossings on the deformed curve segment is determined by its
original relative depth order to ensure a legal Reidemeister move being produced.
(b) moves that have all crossings removed in the goal state
(Rrl rl
1 , R2 )
5.2.2 Combining Moves Into New Elementary Moves
It is also possible to simplify user input by combing some sequential
elementary moves into a new one. For example, as we looked into the
recorded user data (using KnotPads navigation interface) from prelim-
inary user studies, we observed a new detour move that should be
also recognized and accepted as an elementary move in our interface,
since it has been frequently used in various manipulation tasks. As
(c) moves that keep the same crossing signs in both states illustrated in Figure 15, this frequently-drawn detour move on a strand
(Rlr rl along the direction of the other strand crossing over it had to be decom-
3 , R3 )
posed into a sequence of two (or more) consecutive R2 Reidemeister
moves. To simplify user input, our interface chooses to recognize and
support it as a variant of R0 elementary move.
5.2.3 Grouping Frames in Navigation Interface
Many tasks of finding knot equivalence can generate very long se-
quences of valid moves. However when we navigate through recorded
valid moves, we most likely are only interested in more identifiable
2058 IEEE TRANSACTIONS ON VISUALIZATION AND COMPUTER GRAPHICS, VOL. 18, NO. 12, DECEMBER 2012
Fig. 15. A detour move that displaces the local crossing point. The
move can be decomposed into two R2 .
moves. There are many moves such as detour or shortcut that were
only applied to decorate the knot diagram in preparation for a more
identifiable move (e.g., see Figure 16, although an R0 changes the
shape of the diagram, the Gauss code in the goal state is not changed
from the initial state), therefore our navigation interface automatically
groups these moves to shorten the navigation path in our user interface.
Fig. 17. A trefoil knot is turned into a new diagram through a sequence of
Reidemeister moves.
Fig. 16. A detour move that was applied using a R0 generates a dec-
orated diagram with same Gauss code. We group frames produced by
R0 (or with same Gauss code as previous frame)
Fig. 18. A braid diagram for i j , and after applying the R0 we have a new braid
diagram for i j .
6 M ORE S AMPLES
With the Reidemeister moves (R1 , R2 , R3 ) and the planar isotopy
moves (R0 ), we can now deform one knot diagram to another by
proposing the Reidemeister moves (and with only these moves). We
can apply these moves to reduce the number of crossings and to trans-
form a given knot diagram into a simpler (or sometimes more com-
plex) yet equivalent knot diagram.
Studying Knot Equivalence. In Figure 17, a sequence of Rei-
demeister moves and planar isotopy moves are applied to the trefoil
knot, which is believed to be the simplest knot. The resultant diagram
in Figure 17(k) contains a knot diagram very different than that of
Figure 17(a), yet these two diagrams represent equivalent knots: the
trefoil knot-type.
Interacting with Mathematical Links. One more important
point is that the Reidemeister moves are local. This means that if we
have a large knot or link diagram we can perform a single Reidemeister
Fig. 19. A braid diagram for i i+1 i , and after applying a sequence of Reide-
move on small pieces of the diagram, locally in each quality. Figure meister moves, we have a new braid diagram for i+1 i i+1 .
1(b) shows how one can apply a sequence of Reidemeister moves to a
tangled link diagram.
Interacting with Braid Diagrams. In Figure 18 and Figure 19, was conducted. A total of 18 participants were involved in this study:
a sequence of Reidemeister moves are applied to a group of strands 16 males and 2 females, aged between 17 and 23. They were all under-
each of which begins on a horizontal top and ends on the bottom with graduate students having considerable familiarity with personal com-
no intersections of each other (mathematically named braid diagram). puters and sketching interface like Microsoft Paint software. Prior to
These two figures show that we can use the Reidemeister moves to this experimental study, none of them had used the system we devel-
generate braid equivalence, and represent an interactive visual proof oped in this work or had knowledge of knot theory. Before perform-
of the two elementary relations used in braid theory [4]. ing the required tasks, all of them were given a brief introduction of
knot theory and the three types of Reidemeister moves, plus a demon-
7 U SER S TUDY stration of how each user interface element works in our system. We
Our user interface is based on OpenGL and Windows WinForm API. note that in order to evaluate the different aspects of our user inter-
The software runs on a Dell PC desktop with 3.2GHz Intel Pentium 4 face, we divided the participants into two groups where the first group
CPU. The control of mouse cursor motion is programmed using Win32 (GroupI ) was demonstrated and allowed to perform the Reidemeister
APIs. A study to gauge user experience with our user interface design moves by just drawing the new topological situation and the second
ZHANG ET AL: KNOTPAD: VISUALIZING AND EXPLORING KNOT THEORY WITH FLUID REIDEMEISTER MOVES 2059
4. Select part of knot13 and perform the third type of Reidemeister move; The following is a summary of the common responses of the par-
5. Prove the following knot diagram is a trivial knot (now in Figure 20(a)), and provide
ticipants who used our system:
the sequence of Reidemeister moves needed; Features of the application participants liked most: the ability to
6. Prove the following two knot diagrams are equivalent, and provide the sequence of
alert users when illegal moves are being proposed, the free-form
Reidemeister moves needed (now in Figure 20(b)). like deformation method to create Reidemeister moves, and the
collision-sensing mouse cursor.
Suggestions and comments: several participants indicated they
would like to see a touch-interface version of our software. One
participant suggested knot manipulation can be further assisted
with a multi-touch interface. Several participants mentioned that
it is a well-designed virtual paper for studying knot theory.
7.3 Compare with Physically based 3D Knot Visualization
We also invited the participants in GroupII to work with KnotPlot [20]
Fig. 20. Knot diagram samples used in our user study. and observe their performance on the same 6 tasks using the 3D knot
visualization software. Without surprises, most participants can use
KnotPlot to complete knot drawing tasks (basically done in a plane
We recorded and analyzed the task completion rate, average com- assisted by general 3D rotations). However, since the knot structure
pletion time, average number of moves used to complete the tasks, and dynamics are modeled as beads connected by the (linear) springs,
average duration for a valid move for participants in both groups. general Reidemeister moves can not be easily accomplished with the
We also asked a graduate student from math department to give nu- 3D physically based interface. Although participants can try pulling
meric ratings (5 point scale) to participants based on their final gen- and dragging on the 3D knots to verify some specific knot equivalence,
erated images correctness and smoothness. none of them are able to provide the real topological path through the
Among the six listed operations, the majority found the first four Reidemeister moves space.
tasks to be the easiest to perform as the knot structure is the simplest Just like KnotPlot, many previous knot visualization systems focus
and the tasks only required a small number of Reidemeister moves. on simulating the 3D global physics of knots and ropes, thus when
Most participants also found task 5 was to be intuitive because the deforming the ropes (typically done by dragging a control point) all
knot structure is easy to comprehend. Task 6 was found to be the most collisions must be detected and avoided at every interaction cycle, as
difficult, with several participants (in both groups) having problems each of them will affect the ropes global motion at the next cycle. On
accomplishing the task within the given time. However, most of them one hand, such a knot or rope is modeled as a large collection of small
were all able to move forward and finish the task given some hints and rigid pieces a1 , a2 , ..., an , thus the collision detection and avoidance
extra time. become computationally expensive (O(n2 )) even with some improv-
As shown in Table 1, most participants in both groups found that the ing approaches such as building a bounding-volume hierarchy (BVH)
software allowed them to draw and deform various mathematical knot etc. On the other hand, these previous physically based modeling ap-
diagrams. However, GroupII has been recorded significantly improved proaches to simulate 3D knot deformation are intended for global con-
completion time (914.01 sec. compared to 1210.34 in GroupI ) and re- figuration (e.g., to simulate real-time knot tying), and are less close to
duced number of moves compared to those in GroupI (33 compared to knot theory which is mainly concerned with applying local mathemat-
43 in GroupI ), which proved that by supporting dragging based moves ically valid moves, i.e., the step-by-step Reidemeister moves.
our interface has been able to simplified user inputs. We also notice the Compared to all these previous efforts, KnotPad transforms knot
average duration to complete a valid move is also reduced in GroupII deformation task into sequences of local moves (i.e., the Reidemeister
(15 sec. compared to 21 sec. in GroupI ), which is also mainly due to moves). Collisions are handled when components are being sketched
GroupII has been using dragging based moves to finish approximately (locally). When the user is sketching, collisions are detected at every
83% of the tasks. In addition, the generated knot images in GroupII sketching cycle between the last rigid piece (an1 an ) and the rest of
are relatively more smooth compared to those from GroupI . the rigid pieces (a1 a2 , a2 a3 ... an2 an1 ) (or only a subset of the rest,
if BVH approach used), it always takes (n) at each cycle, which is
7.2 Evaluation of KnotPad optimal in the worst case. When the user finishes sketching , the sys-
Our general observation was that users had a positive experience using tem only needs to validate the proposed move at most O(1) (with the
the system for sketching knot diagrams and deforming knot diagrams algorithm we proposed) in each quality. Therefore KnotPad has lin-
by applying the Reidemeister moves. With a little bit of instruction ear scalability and its performance is only limited to the total number
and practice, the participants were soon able to learn how to use the of the rigid pieces, rather than the number of crossings or the num-
interface. ber of distinguishable knots. KnotPads scalability has allowed users
After finishing the above experiments, the participants in both to draw and manipulate various non-trivial mathematical knots, links,
groups were required to rate the two systems on a scale of 1 to 5, where and braids. Users were able to sketch and manipulate a group of math-
1 means completely disappointed and 5 means completely satisfied. ematical links of up to 90 crossings in total, formed by around eight
KnotPad receives an average score of 4.5 from GroupII as compared hundred rigid pieces (we note that this performance was limited to the
to 4.1 from GroupI . screen pixels available rather than KnotPads scalability.)
2060 IEEE TRANSACTIONS ON VISUALIZATION AND COMPUTER GRAPHICS, VOL. 18, NO. 12, DECEMBER 2012
8 C ONCLUSION AND F UTURE W ORK [12] A. Lecuyer, S. Coquillart, A. Kheddar, P. Richard, and P. Coiffet. Pseudo-
haptic feedback: Can isometric input devices simulate force feedback?
In topology, knot theory is the study of mathematical knots using
Virtual Reality Conference, IEEE, 0:83, 2000.
the three types of Reidemeister moves. Based on a wide variety [13] C. Livingston. Knot Theory, volume 24 of The Carus Mathematical
of prior art, we have developed an innovative paper-like topological Monographs. Mathematical Association of America, Washington, U.S.,
drawing interface where one is allowed to study mathematical knots 1993.
through applying step-by-step Reidemeister moves. We described how [14] A. M. Okamura. Haptic Exploration of Unknown Objects. PhD thesis,
a collision-sensing cursor can be exploited to draw knot diagrams Stanford University, Department of Mechanical Engineering, California,
and propose valid moves on knot diagrams. Our paper detailed our USA, June 2000.
interaction model for recognizing and supporting digital Reidemeister [15] A. M. Okamura and M. R. Cutkosky. Feature detection for haptic ex-
moves in our software environment. A family of user interface ele- ploration with robotic fingers. The International Journal of Robotics Re-
ments were introduced on how to polish knot diagrams, obviate error search, 20(12):925938, Dec. 2001.
prone interactions, and to make Reidemeister moves based interaction [16] J. G. Park and G. Niemeyer. Haptic rendering with predictive representa-
more easily and friendly. The results of our user study show that the tion of local geometry. In HAPTICS, pages 331338, 2004.
users were able to use our interface to create and deform sophisticated [17] J. Phillips, A. M. Ladd, and L. E. Kavraki. Simulated knot tying. In
knot diagrams through the Reidemeister moves interface successfully. ICRA, pages 841846. IEEE, 2002.
Our next step is to conduct another evaluation of our system with [18] A. Pusch, O. Martin, and S. Coquillart. Hemp-hand-displacement-based
knot theory experts to identify, design, and implement more desired pseudo-haptics: A study of a force field application and a behavioural
analysis. Int. J. Hum.-Comput. Stud., 67(3):256268, 2009.
features to be supported in KnotPad. For example, our tool currently
[19] D. Roseman. Reidemeister-type moves for surfaces in four-dimensional
supports applying step-by-step Reidemeister moves to produce knot
space. Knot theory (Warsaw, 1995), pages 347380, 1998.
equivalence, and exploits visualization and visual cues to record and [20] R. G. Scharein. Interactive Topological Drawing. PhD thesis, Department
compare subsequent knot images produced from one user. We plan of Computer Science, The University of British Columbia, 1998.
to work with mathematicians and knot theory experts to find the best [21] S. Snibbe, S. Anderson, and B. Verplank. Springs and constraints for 3d
way to support identifying and comparing knot diagrams (produced by drawing. In Proceedings of the Third Phantom Users Group Workshop,
different users) both computationally and visually (e.g., Jones Polyno- Dedham, MA, 1998.
mial is already known to be an invariant of an oriented knot or link and [22] O. Sorkine and D. Cohen-Or. Least-squares meshes. In Proceedings of
can be computed to identify knots from a topology perspective [26].) Shape Modeling International, pages 191199. IEEE Computer Society
Starting from this basic framework, we also plan to extend the range Press, 2004.
of objects for which we can support to include more complex knots, [23] J. Spillmann and M. Teschner. An adaptive contact model for the robust
links, and Riemann surfaces. The interaction paradigm presented in simulation of knots. Comput. Graph. Forum, 27(2):497506, 2008.
this paper has an 4D analogy: effective manipulation of 4D surfaces [24] J. van Wijk and A. Cohen. Visualization of the genus of knots. In Visual-
(e.g., 4D knotted sphere) could potentially be greatly assisted by a ization, 2005. VIS 05. IEEE, pages 567 574, oct. 2005.
friendly interface supporting 4D Reidemeister moves [19]. We antici- [25] F. Wang, E. Burdet, A. Dhanik, T. Poston, and C. L. Teo. Dynamic thread
pate that a graphical user interface that supports step-by-step 4D Rei- for real-time knot-tying. In WHC 05: Proceedings of the First Joint
demeister moves can be used to simulate more complex and abstract Eurohaptics Conference and Symposium on Haptic Interfaces for Vir-
math phenomena such as untying a 4D twist-spun trefoil knot. tual Environment and Teleoperator Systems, pages 507508, Washington,
DC, USA, 2005. IEEE Computer Society.
Other direction of future work includes migrating our software to
[26] E. Witten. Quantum field theory and the jones polynomial. Communica-
touch environment (e.g., on iPad) to make interaction with knot dia- tions in Mathematical Physics, 121(3):351399, 1989.
grams more facile and satisfying by using abilities of the hand beyond [27] G. Wolberg and I. Alfy. Monotonic cubic spline interpolation. In Com-
simple position control. puter Graphics International, 1999. Proceedings, pages 188 195, 1999.
[28] Y. Wu. An md knot energy minimizing program. Department of Mathe-
R EFERENCES matics, University of Iowa.
[1] W. V. Baxter, V. Scheib, and M. C. Lin. dAb: Interactive haptic painting [29] M. A. Zahariev and C. L. MacKenzie. Auditory, graphical and haptic
with 3D virtual brushes. In E. Fiume, editor, SIGGRAPH 2001, Computer contact cues for a reach, grasp, and place task in an augmented environ-
Graphics Proceedings, pages 461468. ACM SIGGRAPH, ACM, 2001. ment. In Proc. of 5th Intl. Conf on Multimodal Interfaces (ICMI), pages
[2] E. A. Bier. Snap-Dragging: Interactive Geometric Design in Two and 273276, New York, 2003. ACM, ACM Press.
Three Dimensions. PhD thesis, EECS Department, University of Califor- [30] H. Zhang and A. Hanson. Shadow-driven 4d haptic visualization. IEEE
nia, Berkeley, May 1988. Transactions on Visualization and Computer Graphics, 13(6):1688
[3] J. Brown, J. C. Latombe, and K. Montgomery. Real-time knot-tying sim- 1695, 2007.
ulation. The Visual Computer, 20(2-3):165179, 2004. [31] H. Zhang and A. J. Hanson. Physically interacting with four dimensions.
[4] M. Chiodo. An introduction to braid theory. Masters thesis, University In G. Bebis, R. Boyle, B. Parvin, D. Koracin, P. Remagnino, A. V. Nefian,
of Melbourne, 2005. M. Gopi, V. Pascucci, J. Zara, J. Molineros, H. Theisel, and T. Malzben-
[5] J. Cohen, L.Markosian, R. Zeleznik, J. Hughes, and R.Barzel. An inter- der, editors, ISVC (1), volume 4291 of Lecture Notes in Computer Sci-
face for sketching 3d curves. In SI3D 99: Proceedings of the 1999 sym- ence, pages 232242. Springer, 2006.
posium on Interactive 3D graphics, pages 1721, New York, NY, USA, [32] H. Zhang, S. Thakur, and A. J. Hanson. Haptic exploration of mathe-
1999. ACM Press. matical knots. In G. Bebis, R. D. Boyle, B. Parvin, D. Koracin, N. Para-
[6] C.W.Reynolds. Steering behaviors for autonomous characters. In Pro- gios, T. F. Syeda-Mahmood, T. Ju, Z. Liu, S. Coquillart, C. Cruz-Neira,
ceedings of the 1999 Game Developers Conference, pages 763782, T. Muller, and T. Malzbender, editors, ISVC (1), volume 4841 of Lecture
1999. Notes in Computer Science, pages 745756. Springer, 2007.
[7] B. Forsyth. Intelligent support of interactive manual control: Design, [33] H. Zhang, J. Weng, and A. Hanson. A pseudo-haptic knot diagram inter-
implementation and evaluation of look-ahead haptic guidance. Masters face. In Proc. SPIE 7868 (VDA), volume 786807, pages 114, 2011.
thesis, The University of British Columbia, 2004.
[8] A. J. Hanson and H. Zhang. Multimodal exploration of the fourth dimen-
sion. In Proceedings of IEEE Visualization, pages 263270, 2005.
[9] J. Hass and J. C. Lagarias. The number of reidemeister moves needed for
unknotting. 1998.
[10] L. H. Kauffman. The mathematics and physics of knots. Reports on
Progress in Physics, 68(12):28292857, 2005.
[11] J. M. Kennedy. Optics and haptics: The picture. In Proceedings on Multi-
modality of Human Communication: Theory, Problems and Applications.
University of Toronto, 2002.