This web page explains how to use Taprats to construct novel Islamic
star patterns. The is a strong linear component to the workflow --
a sequence of steps that always proceed in order, which lends a natural
structure to this manual. So once I explain the basic structure of the
applet and how to interact with it, I'll explain how to use it by
breaking Taprats down into the following steps:
- Select a tiling
- Edit the radially-symmetric features
- Infer geometry for the other features
- Preview the finished design
- Edit the rendering style of the finished design
A lot of the interaction in Taprats is with a novel UI widget called
a GeoView. A GeoView is a view into an infinite two-dimensional
plane with geometric objects drawn on it. Any time Taprats shows you a
tiling, or a feature, or a finished design, it's showing it to you
through a GeoView. The advantage of this design is that you can interact
with all GeoViews in the same way. They all support the
same three basic operations: panning, rotating and scaling. These three
means of navigating the plane are accessed in a lightweight way by
shift-dragging with one of the three mouse buttons. If you want to
learn more about interacting with GeoViews, or if you want to practice
on a sample GeoView to get accustomed to this kind of interaction,
please see the Geometry Test View page.
The Tiling Selector Window
The main interface to Taprats is through the Tiling Selector,
shown on the left. This window gives you a "baseball card" like
interface for a library of built-in tilings, showing you a sample
drawing of the tiling, its name, and a brief description. You can
use this interface to browse the selection of available tilings and
choose one that you want to use to create a design.
Go to the previous tiling in the library. If you get to the
first tiling, you'll wrap around to the last one.
Once you've chosen a tiling you'd like to work with, press the
"Open" button. This will take you to an editor for that tiling.
Any numbers of editors can be open simultaneously, even several
for the same tiling.
Go to the next tiling in the library. Like the "previous" button,
you wrap from the end of the list to the beginning.
The Editor Window
This is the window where all the action happens. Use the
Editor window to set the parameters of the motifs you want to
use in your final design. On the left, the window shows you
the set of tiles used by the tiling (the "features"),
along with the motifs that are currently selected for them
(the "figures"). One of the features will be outlined in red,
indicating that this is the feature currently being edited
in the main part of the window.
On the right is the current feature and the figure being
developed for it. The controls below the big GeoView are
the controls applicable for the current kind of figure
("Rosette" in this case). Below that are three control buttons.
Obviously, the "Close" button closes the window.
The area on the left shows the current feature being edited.
To change which feature you want to edit, simply click on one
of the features. Note that unless you explicitly save the changes
you made to the current feature (using the "Apply" button), your
changes will be lost. Be sure to save!
Press this button to make a copy of the current figure and save
it into the feature selector on the left. That figure will then
be used in the construction of the final design. Make sure to
press the Apply button when you want to keep the currently
When you decide that the figures you've created would like nice
assembled into an Islamic design, press "Proceed". This will take
you to the Preview window, discussed below.
The control area just under the main GeoView depends on what kind of feature
is being edited.
- When the feature in question isn't a regular polygon, or is a square,
you get this lonely "Infer" button, your only choice. Infer looks
at the features that border the current one and the figures currently
assigned to those features, and tries to extend the lines from the
neighbouring figures into into the feature to create a plausible
motif. The result is often very natural and similar to traditional
In the future, I will add controls to actually construct and edit a
map by hand.
- When the feature is a regular polygon, there are three possible motifs
that can fill it: stars, rosettes and extended rosettes. A discussion
on the geometry of these motifs can be found in the
Bridges conference preprint.
The drop-down chooser on the left lets you choose between stars,
rosettes and extended rosettes.
The two sliders available for stars are labeled "D" and "S". D
controls how tight the points of the stars are. The higher the
value of D, the pointer the star. S controls how many segments
to draw along each arm of the star. A star with a low value of S
is just an outline. Higher values of S add more complex shapes in
the interior of the star.
- The controls for rosettes are similar to those for stars. The S
slider does exactly the same thing. The Q slider controls the angle
of separation between the edges that join at the edges of the feature.
A higher Q flattens the edges towards the outside. A lower Q straightens
them out, making the rosette more star-like.
- Extended rosettes are controlled just like regular rosettes, since the
process of turning a rosette into an extended rosette is deterministic.
The controls simply manipulate the simple rosette hiding inside the
The Preview Window
When you press the "Proceed" button in the Editor window, it opens
a new window containing your design in a preview mode. There are
two reasons why you get a preview before the finished design.
First of all, the finished design can take a long time to compute,
even though at first it looks just like the preview. What you
don't see is that the system is computing complex geometric
information about your design that enables it to be rendered in
complex styles like "Interlace". It's nice
to get a quick look at the assembled figures before committing to
building the design. The preview window is optimized to display
the design, even zoomed out a long way, very quickly. Also, The
size and number of tiles created
in the final design correspond roughly to what's visible in the
preview window. So you can get a quick look at your design and
then use the GeoView navigation controls to choose a suitable
view before building.
When you're satisfied with the geometry of the design and the
view, press the "Build" button. Taprats gets down to work
and builds you a finished version of the design based on what's
visible in the preview. Note that the determination of what's
visible isn't always intelligent -- sometimes it gives you
tiles that weren't on screen, and sometimes it omits tiles that
were on screen. In general, you can get around these glitches
by zooming out a little beyond the region you're interested in
Note also that build time increases a lot with the
number of tiles being computed. So when you first use Taprats,
you might want to zoom in on the preview before building to
get to the finished design quicker.
Finally, note that the algorithm that builds the design
runs in the background. You can keep using Taprats while your
design is building. In fact, you can build as many designs
as you want simultaneously!
The Waitbox is a kind of progress bar that tells you that
Taprats is working on your design. Since Taprats builds your
design in the background, it's hard to know whether anything's
happening once you press the "Build" button. Hence the Waitbox.
It displays an Islamically-inspired ticker that shows you that
something is happening behind the scenes.
The Render Window
In this window, you get to see the finished design rendered in
a number of possible styles, with additional controls appropriate
to each style. The drop-down on the left lets you choose what
style to render in, and the close button closes the window.
The "Plain" style, shown above, just draws the edges of the
design as straight lines. If all goes well, it should look
just like the preview window, except that the finished design
is bounded (try zooming out). The plain style has no additional
Each of the other styles appears below. You'll see the
controls for that style as well as the bottom portion of the
GeoView, which should give you a sense of what the style looks
- The "Sketch" rendering style is a simple modification of Plain.
Each edge is drawn multiple times, and each time the endpoints are
jittered slightly. The result is a sketchy, crayon-like drawing of
the design. There are no parameters to the Sketch style.
- The design is made up of a collection of lines, but it can also be
thought of as a collection of closed polygonal regions. The "Filled"
style derives those regions and fills them in. An interesting side
effect of the way Islamic designs are defined is that it is always
possible to assign one of two colours to every region in such a
way that neighbouring regions never have the same colour (this assignment
is called a "two colouring" of the design. So the Filled style
never uses more than two colours. There are no parameters to
the Filled style.
- The Outline style draws each edge as a fat line. It also outlines
the resulting fat lines.
In the Outline style, you can control the width of the edges. Note
that in a design with fine details, a width that's too high can overwhelm
the detail and result in garbage.
- Imagine that the design were constructed out of wooden slats with
a diamond-shaped cross section, then lit from the side and viewed
from above. The result would look something like the Emboss style,
which gives the design a 3D-like look. In addition to controlling
the width as in the Outline style, you can control the angle of the
light source with the "Azimuth" control.
- Last but not least, the Interlace style turns the design into a weave.
When an edge meets another edge, it either crosses over or passes under
that edge. Taprats figures out a choice of overs and unders that's
consistent across the whole design -- if an edge cross over some other
edge, it'll cross under the next edge, over the one after that, and
In addition to the width, you can control the size of the gap, the
amount of an edge not drawn when it crosses under another edge.
Well, that's how to use Taprats. If it all seems like a bit much, here's a
sample workflow to try to get used to the system.
- Locate the tiling "4.8^2" in the Selector, and Open it.
- Click on the square feature (it won't have any geometry in it).
- Press the "Infer" button. An octagon will appear in the large
square being edited.
- Press the "Apply" button. The octagon will be saved to the
square feature button on the left of the editor.
- Press the "Proceed" button to open up the preview window.
- Navigate around until you find a pleasing view of the design.
- Press the "Build" button. The Waitbox will run until the design
is ready, at which point the Render window will open.
- Select the "Interlace" rendering style, set the width to 0.07
and the gap size to 0.04.
That's it -- you have a finished Taprats design! In
the application version of Taprats, you'd be able to
print your design as postscript at this point.
Although Taprats is technically a very sophisticated tool, in essence
it gives you a narrow channel through which to interact with Islamic
designs. The user interface is fairly simple. But before you complain
that you don't have enough control over the designs, consider this:
a particular art form is only a form when it can be distinguished from
other art forms. That which sets Islamic designs apart from other geometric
art is precisely the set of restrictions that define a space of possible
designs. Desiging a tool like this involves a complex trade-off. If
I add too much flexibility, I end up with Adobe Illustrator. The goal
is not to define a general-purpose drawing tool, but rather a tool
that understands the set of possible drawings subject to very specific
constraints -- more like a plugin to Illustrator. So yes, Taprats
is lacking some needed features, but maybe fewer than you think.
Now that I've ranted, go back and try Taprats