Conference PaperPDF Available

# Turtles for Tessellations

Authors:
Turtles for Tessellations
Loe M.G. Feijs, Jun HU
Department of Industrial Design
Eindhoven University of Technology
{l.m.g.feijs,j.hu}@tue.nl
Abstract
We developed an approach to creating vector graphics representations of tessellations for purposes of teaching cre-
ative programming and laser cutting. The approach is based on turtle graphics. The lines of the turtle’s trail deﬁne the
tiles of the tessellation. The turtle is deﬁned in an object-oriented style and embedded in the Processing environment
as a library. The library is called Oogway. It also facilitates embedding line segments made with different tools such
as Illustrator. We present the basic idea, the library, several example and our experiences.
1 Introduction
A tessellation (or tiling) is a collection of ﬁgures that ﬁll the 2D plane with no overlaps They are used in
textile design [1], interior design [2] and industrial design [3, 4]. Escher [5, 6] added meaning to the tiles,
typically fantasy animals. The mathematical theory of tessellation rests on two cornerstones: geometric
transformations (and hence group theory), and topology. Figure 1 shows an example of a tessellation (which
is a remake of the contours of Escher’s Pegasus). The contours of the basic ﬁgure are created using turtle
commands. Feeding them into another modern tool, a laser cutter, was a source of fresh ideas, inspiration
and motivation for our students.
Figure 1 :Pegasus-like ﬁgure described by Heesch-Kienzle style recipee.
We ought to say a few words about the Heesch-Kienzle style recipe mentioned in the caption of Figure 1.
The reader is probably familiar with the idea that interesting patterns can be made by repeated application
of operations such as translation, rotation, and reﬂection (mirroring). If there are translations in two or more
directions, the patterns are called wallpaper patterns. There is a famous mathematical result which says that
Proceedings of Bridges 2013: Mathematics, Music, Art, Architecture, Culture
241
in essence there exist precisely seventeen distinct regular wallpaper patterns [7]. Wallpaper patterns appear
on wallpaper indeed, in brickwork, in ﬂoor tessellations, and so on. It is tempting to assume that each of
the 17 regular wallpaper patterns gives rise to precisely one schema of regular tiling. However, the relation
is not one-to-one. What is still missing from the wallpaper patterns is: where are the cutting lines between
the tiles? This question has been explored by Escher, aiming at his beautiful art. It also has been explored
very thoroughly by Heesch and Kienzle (1963) aiming at industrial application and standardization. Heesch
and Kienzle were well aware of the 17 essential patterns, but they added an analysis of the networks to be
formed by the cutting lines between the tiles. In this way they integrated the network theory with wallpaper
theory and found 28 tiling types. They described them in a prescriptive style (in German), which is also the
style we used for the (English) description of Figure 1.
Their recipes are very helpful for one who wants to design a new tessellation. This is all well-known
and we refer to [3] for the original theory or to [1] and [4] for our earlier applications. Heesch and Kienzle
also devised a coding scheme to denote the 28 types. For example TTTT is the type where each tile has four
lines and where these lines are related by translation (T) only. Besides translation (T) there is also a code for
rotation around a center (C) and for glide-mirorring (G). The coding scheme also includes subscripts, as in
the rather complicated type CG1CG2G1G2but it is outside the scope of this paper to explain all the details.
We present a novel way of designing and generating vector graphics representations of new tessellations,
based on turtle graphics. The paper is organised as follows: Section 2 presents the precise turtle graphics
commands we use and the motivation behind several of the design decisions. In Section 3 we show the
coding of one example tessellation in detail. In Section 4 we show several examples of student work.
2 Overview of Oogway
Turtle graphics has been used in children’s mathematics education [9] and in 3D art [8]. Feijs (2012) used
turtle graphics in understanding geometry and computation of Pied-de-poule (better known as “houndstooth”
in English) in textile design [1], with a variation called Compass Logo that extends the turtle graphics with
absolute directions of NORTH, SOUTH, EAST and WEST, which shows the necessity of extending the turtle
graphics for a speciﬁc purpose.
In our earlier practice in designing and generating creative graphical tessellations[10], we used the
Mathematica programming environment, but then we moved to a graphics language called Processing and a
library called Terrapin1. Mathematica supports concepts such as rotation matrices quite well, but we consider
it worthwhile to explore and extend the possibilities of the ﬁrst-person perspective of turtle graphics, which
seems very natural. We found that most of our industrial design students do not like working with raw (x,y)
coordinates: they prefer what-you-see-is-what-you-get tools. The advantage of moving from Mathematica
to Processing is that it ﬁts more to the industrial design community (where not many Mathematica users are
found). Many of our students love Processing (a low-threshold Java environment) and Arduino (an attrac-
tive embedded-systems platform). Terrapin provides a drawing object that implements the standard turtle
graphics commands for going forward, backward and making turns, as well as Processing-like moveToward
command that takes absolute xand ycoordinates. The advantage of using turtles is the constructive approach,
which integrates well with transformational geometry (as we shall demonstrate).
It is usually a cumbersome process to describe a smooth curve with turtle graphics. One may ﬁrst design
the curve on a grid paper using a pencil, ﬁnd out the turning points and calculate the orientation for every
step of the turtle, then issue the commands step by step. To make the trace smooth, it is necessary to have
a sufﬁcient number of these turning points, yet it is often not smooth enough when the shape is enlarged
in vector graphics. To support this process we provided students with a Processing program that imports a
1http://terrapin.sourceforge.net/
Feijs and Hu
242
scanned image, uses mouse clicks to help to determine these turning points, then generates proper Processing
code for Terrapin (more about this in Section 3). In the classroom [4] we also observed students combining
freehand drawing on paper with graphical drawing tools such as Illustrator or CorelDraw to reduce the
load of manual work. We observed a need to combine freehand drawing tools with turtle graphics for the
best of both creativity in freehand drawing and automation with turtle graphics. The Oogway library2for
Processing is created to accommodate this need. The theory of smooth parametric curves such as B´
ezier
curves and Catmull-Rom Splines is so well embedded into tools that they are usually not combined with
programming at all, only WYSIWYG editing. But for tessellations and creativity one needs the power of
programming, for repetitions of course, but most of all for implementing non-standard special ideas.
The Oogway library is based on the original Logo programming language with extensions for the
smooth curves and externally deﬁned segments. Unlike Logo, we need not design generic programming
devices such as recursion, assignments and lists: we use these things from Processing (essentially Java).
One nice advantage of turtle graphics combined with recursion is that it is easy to make fractal structures
(which we did indeed, and which can now be combined with tessellations). The library includes commands
for moving and drawing (forward,backward,right,left,setHeading,setPosition,home), query-
ing the turtle’s state (xcor,ycor,heading,towards and distance) and controlling the pen (penDown,
penUp,penSize and penColor). In particular, to introduce smooth curves into turtle graphics, it also in-
cludes pairs of commands to draw curves. These commands are: beginSpline,endSpline, and a pair
beginSpline(x,y),endSpline(x,y) where the ﬂoats xand yare the coordinates of extra control points.
beginSpline();
//forward and backward commands here
endSpline();
The current position of the turtle, and all the new positions reached by forward() and backward() (not
including setPosition()) between beginSpline() and endSpline(), will be used to create a spline curve
as the trace on the canvas. The starting position and the ending position are repeated as control points (which
is a common practice), unless x and y parameters are used.
Figure 2 :Command sequence interpre-
tation by classical turtle (dashed) and as
a spline. Figure 3 :Preparing a line segment AB in
In Figure 2 we show the result of a turtle performing o.forward(20); o.right(-45); o.forward(40);
o.right(90); o.forward(60); o.right(-90); o.forward(80); o.right(90); o.forward(100); where
2https://github.com/mrhujun/nl.tue.id.oogway/
Turtles for Tessellations
243
the dashed line would be a classical turtle and the full line is the trace made by Oogway with the same
commands put inside o.beginSpline() and o.endSpline(). The curved line is a Catmull-Rom spline,
which goes through the control points (unlike B´
ezier curves). Formally, it is a parameterized curve: for one
segment between P
1and P
2the parameter truns from 0 to 1 and then the point P(t)is a weighted average
of four points P
0,P
1,P
2,and P
3. For each segment one needs four control points, but the ﬁrst two are always
taken the same, as usual, and then the last two control points of one segment are made to coincide with the
ﬁrst two of the next segment.
In the same way there is a pair beginPath and endPath. The ﬁrst has a string argument, referring to a
ﬁle in svg format (scalable vector graphics). Used as a pair they set a scope for the commands inside.
beginPath(svgfile)
//forward and backward commands here
endPath()
Additional commands: beginPath(svgﬁle) will load a path/curve from the speciﬁed SVG ﬁle as the trace
for every forward() and backward() until endPath(). Oogway supports SVG ﬁles created with Inkscape
and Adobe Illustrator that contain simply one path or polylines that are created using multiple vertices. If
more than one path is included in the SVG ﬁle, only the ﬁrst one will be loaded.
With these extensions, students are able to ﬁrst create the curves for constructing the basic shapes with
the tools that they are familiar with, then import them into Processing to tessellate these shapes without
losing the quality of curves. In the next section we are going to show an example of using the Oogway
library in tessellating the well-known Pegasus pattern invented by Escher.
3 Pegasus by Turtle
When working with turtle graphics we like to think in a constructive way. The turtle is our tool to construct
things. Not only lines, but also points, distances and angles. It is somewhat like classically constructing
geometric objects with only a compass and straightedge. In classical geometric construction one makes
circles, lines, but also points (arising as intersections of lines and circles). It is customary to give names to
the points thus constructed, writing them onto the paper, like A,B,C,M, etc.
In the same way, any sequence of turtle command begins from a given point and orientation and then
will bring the turtle to a new point (i.e. construct the new point) and a new orientation. Since we do not work
on paper but in a programming language we do not write the names down but we use programming variables
declared in Processing to store their coordinates. We use the naming convention that the two coordinates of a
point Aare called Ax and Ay. So drawing a line AB, from the current position is done in three steps: ﬁrst mark
Ato be this current position (two assignments, one to Ax and one to Ay), then draw the line using a forward
command (three library calls) and then mark Bto be the position thus constructed (two assignments, one to
Bx and one to By). The trick is that later we may want to come back to the points Aan Bwhich is now easy
- at least until we overwrite the variables. Let us assume that these variables have been declared of type int
and that ois of type Oogway (Oogway is a class) then these are the seven commands for AB:
Ax = o.xcor(); Ay = o.ycor();
o.beginPath("AB.svg");
o.forward(ab*scale);
o.endPath();
Bx = o.xcor(); By = o.ycor();
Feijs and Hu
244
For this to work we need a ﬁle AB.svg, which could be made, for example using Adobe Illustrator or any
other tool. We show it in Figure 3 (inside the Illustrator editor window).
Our happy marriage of turtles and vector-graphics allows us to have smooth curved lines produced
by the turtle (unlike the old way of making curved paths with turtles where a circle segment would be
approximated by a polygon constructed by a sequence of forward and left steps). The manager of our
laser cutter workshop hates these approximated “smooth” curves because the laser cutter will start and stop
at the beginning and end of each approximation segment. Now it is time to give a complete example. We
assume the following variables declared globally.
float Ax, Ay, Bx, By, Cx, Cy, Dx, Dy;
float degreeDAB = 80, ab = 100, ad = 100;
Oogway o = new Oogway(this);
It is also possible to do everything with the turtle, avoiding .svg ﬁles. This is how Figure 1, inspired by
Escher’s Pegasus, was made (which is also why the latter ﬁgure is more spiky and less smooth than Figure 4
made with real curves). We got the coordinates from an existing drawing, using a simple tool we made
ourselves, where one can mouse-click on selected points of a loaded bitmap image and then output the
coordinate pairs. The output is already in relative polar coordinates and formatted such that a measured
angle, say αbecomes a command “o.left(α);” and a measured distance λbecomes “o.forward(λ);”.
In other words, the output can be copied into the program directly. Then later we designed the Oogway
library which still could use this “pure” approach, or blend in .svg.
We shall construct a Pegasus-like horse ﬁgure with four points A,B,Cand Daccording to the TTTT
type (Nr.1 in the Heesch Kienzle system). The whole approach is designed so we can closely follow the
original prescriptive models of Heesch Kienzle (Figure 1 is an example of that, translated from German
to English). We give the name abcd to the entire procedure deﬁning it as a function of one parameter in
Processing. The parameter allows us to run the procedure at different scales.
void abcd(float scale) {
//arbitrary line AB
Ax = o.xcor(); Ay = o.ycor();
o.beginPath("AB.svg"); o.forward(ab*scale); o.endPath();
Bx = o.xcor(); By = o.ycor();
//shift AB to DC
o.setPosition(Ax, Ay); o.left(degreeDAB);
Dx = o.xcor(); Dy = o.ycor(); o.right(degreeDAB);
o.beginPath("AB.svg"); o.forward(ab*scale); o.endPath();
Cx = o.xcor(); Cy = o.ycor();
//another arbitrary line from A to D
o.setPosition(Ax, Ay); o.left(degreeDAB);
o.setPosition(Bx, By);
}
It is nice that the structure of the computer program follows the structure of the Heesch Kienzle prescriptive
texts. For example, the original prescriptive text says (in German) ”verschiebe die willk¨
urliche Linie AB
Turtles for Tessellations
245
nach DC”, meaning: shift the arbitrary line AB to DC. This is done in the ﬁrst ten lines of abcd. The ﬁrst
line, starting with // is just a comment. Then the next line memorizes the coordinates of Aas Ax and Ay.
The third line is about the turtle moving forward over a distance of ab, multiplied by a scale factor. Unlike a
traditional turtle, which would walk a straight line, the Oogway turtle follows a curved line (e.g. prepared in
Illustrator). After that the fourth line memorizes the coordinates of the new point Bthus constructed as Bx
and By. This concludes the explanation of the ﬁrst group of four lines: drawing arbitrary AB.
Now we explain the next six program lines, beginning with a comment line again //shift AB to DC.
The cursor is put back at position Aand is rotated in order to point towards D. Then it travels forward
(in a straight line) with the pen up over distance ad, multiplied by a scale-factor. That is how Dis found,
after which the rotation toward Dis un-done (turn right again). Now the same Illustrator-prepared curve is
replayed, but from a fresh starting point. And the tenth line, Cx = o.xcor(); Cy = o.ycor(); records
the new position in the coordinates of Cas Cx and Cy.
We skip the explanation of the last six lines and mention that the result is shown in Figure 4. Note that
the annotations (the letters and the dashed lines) are not yet made by the above program. Although adding
such annotations could be done using external tools easily later, here we did it using Processing’s built-in
commands for texts, ellipses etcetera, using the points constructed by Oogway. Although perhaps “impure”,
it is an example of Oogway and Processing ﬂexibly blending together.
Figure 4 :Pegasus-like ﬁgure and points A-D.
Figure 5 :Pegasus-like ﬁgure tessellated
nine times.
The next thing to be done is to create the tessellation itself. Note how an imperative style of program-
ming is exploited: the points Band Dget updated after each construction by ABCD and then the new value of
Dand the new value of Bare used to play the role of the new starting point (A) for the next construction.
void tesselate(float scale) {
for (int i = 0; i<3; i++) {
ABCD(scale);
float x = Dx, y = Dy;
for (int j = 1; j < 3; j++) {
o.setPosition(Bx, By);
ABCD(scale);
}
o.setPosition(x,y);
}
} //the result is shown in Figure 5
Feijs and Hu
246
Besides TTTT, we did CCC (Nr. 3) and CGG (Nr. 21) in the same way, after which we challenged the
students of our Golden Ratio module to do their own favourite works and to try other types.
Figure 6 :Fractal-like artwork by Alberto Gruarin.
4 Student examples
We show a few of the artworks designed by our students and cut with the laser cutter (a Speedy 300 of TU/e).
The ﬁrst work is by Alberto Gruarin, shown Figure 6. It does not ﬁt in the Heesch typology easily, but it
shows something else: that the students picked up the idea of fractals and considered it interesting.
The second work is by Matthijs Willems, shown Figure 7. He deployed the more complicated Heesch-
Kienzle type CG1CG2G1G2 (Nr. 28).
Figure 7 :Fantasy animals by Matthijs Willems.
Pepijn Fens had several fantasy ﬁgures intertwined (see Figure 8). From a Heesch-Kienzle perspective
it is not so complicated, just a TTTT, (Nr1). It is worthwhile mentioning that he took his initial inspiration
Turtles for Tessellations
247
from company logos. Finally Ardjoen Mangre designed a tessellation of rhinoceroses based on the TGTG
type (Figure 9). The animals are cut from wood of different thicknesses, which gives the work an aestehtic
quality beyond the pure graphics. (Figure 9)
Figure 8 :Fantasy ﬁgures. Figure 9 :Rhinoceros tessellation.
5 Conclusions
The library was well-received by students and turned out useful, as demonstrated by the student work. We
also did a more theoretical study, formally proving that all four classical transformations of ﬁgures such
as translation, rotation, reﬂection and glide-reﬂection can be achieve can be done using turtle commands,
but we plan to publish that at a later occasion. The library and its documentation will be made available
open-source (see the Bridges CD ROM). Also for readers who prefer their own turtle implementation, the
point-sampling tool can be made available.
Acknowledgements: We like to thank Christoph Bartneck, Marina Toeters, Chet Bangaru, Jan Rouvroye
and our students for the cooperation in creative programming.
References
[1] Feijs, Loe MG. Geometry and Computation of Houndstooth (Pied-de-poule), In: Robert Bosch, Dou-
glas McKenna, and Reza Sarhangi (Eds.) Proceedings of the 2012 Bridges Conference, Baltimore,
Maryland (2012).
[2] Siddiqui, I. Tessellated Floorscape, interior acts of production, siting and participation. IDEA JOUR-
NAL 2010 Interior Ecologies, (www.idea-edu.com) pp.42-53.
[3] Heesch, H. and Kienzle, O. (1963). Fl¨
achenschluß; System der Formen l¨
uckenlos aneinander-
schliessender Flachteile. Berlin,: Springer.
[4] Feijs, L. and Bartneck, C. (2009) Teaching Geometrical Principles to Design Students. Digital Culture
& Education, 1(2), 104-115.
[5] M.C. Escher, the graphic work. Taschen 2001.
[6] Doris Schattschneider. M.C. Escher: Visions of Symmetry. W. H. Freeman (1992).
[7] Fejes T ´
oth, L. (1964). Regular ﬁgures. New York,: Macmillan.
[8] Verhoeff, T. 3D Turtle Geometry: Artwork, Theory, Program Equivalence and Symmetry. Int. J. of Arts
and Technology, 3(2/3):288319 (2010).
[9] Seymour Papert. Mindstorms: children, computers, and powerful ideas. 2nd edition, 1993, Basic
Books.
[10] Christoph Bartneck, Jun Hu, Loe Feijs (teachers), Rick van de Westelaken, Wouter Kersteman, Thomas
van Lankveld, Man-shaped ﬁgures, Tessellation of Skunks, and Stealth. Fathauer, R. and Selikoff, N.
2012 JMM Art Exhibition Catalog, The Bridges Organization.
Feijs and Hu
248
ResearchGate has not been able to resolve any citations for this publication.
Article
Full-text available
We define a 3D variant of turtle graphics and present the theoretical foundations of 3D turtle geometry. This theory enables one to reason about open and closed 3D polygonal paths by means of algebraic calculations. In particular, we introduce several equivalence relations on turtle programs and theorems that define corresponding standard forms. Also we express the relationship between the symmetries of a 3D polygonal path and the symmetries of a generating turtle program in a suitable standard form. Finally, we discuss software tool support for 3D turtle geometry. Along the way, we present some artworks designed through 3D turtle graphics. These artworks have never been described in the literature before.
Article
The project Tessellated Floorscape (2010) consists of a modular rug that is digitally constructed from remnant carpeting, the collaborative process through which the rug as a material product has circulated through different social venues from fabrication to inhabitation, and the writing which serves as a reflective tool that links the specificity of the project to a broader set of issues in contemporary design. This essay focuses on three aspects of the project – production, siting, and participation – in an effort to map out a network of relationships among people, places and resources, and by doing so expose a set of ecologies that informs and shapes the creative practice of interior design as a materially and socially sustainable practice. The aim has been to take advantage of the physical portability of the installation, engage a range of public spaces as its temporary sites, and see what kind of value the acts of spatial re-territorialisation may hold in the study and evolution of the contemporary interior.
Geometry and Computation of Houndstooth (Pied-de-poule
• Loe Feijs
• Mg
Feijs, Loe MG. Geometry and Computation of Houndstooth (Pied-de-poule), In: Robert Bosch, Douglas McKenna, and Reza Sarhangi (Eds.) Proceedings of the 2012 Bridges Conference, Baltimore, Maryland (2012).
Flächenschluß; System der Formen lückenlos aneinanderschliessender Flachteile
• H Heesch
• O Kienzle
Heesch, H. and Kienzle, O. (1963). Flächenschluß; System der Formen lückenlos aneinanderschliessender Flachteile. Berlin,: Springer.
Teaching Geometrical Principles to Design Students
• L Feijs
• C Bartneck
Feijs, L. and Bartneck, C. (2009) Teaching Geometrical Principles to Design Students. Digital Culture & Education, 1(2), 104-115.
Escher: Visions of Symmetry
• Doris M C Schattschneider
Doris Schattschneider. M.C. Escher: Visions of Symmetry. W. H. Freeman (1992).
Rick van de Westelaken, Wouter Kersteman, Thomas van Lankveld, Man-shaped figures, Tessellation of Skunks, and Stealth
• Christoph Bartneck
• Jun Hu
• Loe Feijs
• R Fathauer
• N Selikoff
Christoph Bartneck, Jun Hu, Loe Feijs (teachers), Rick van de Westelaken, Wouter Kersteman, Thomas van Lankveld, Man-shaped figures, Tessellation of Skunks, and Stealth. Fathauer, R. and Selikoff, N. 2012 JMM Art Exhibition Catalog, The Bridges Organization.