Taprats: Computer-Generated Islamic Star Patterns User's Manual

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

Basic Interaction

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

Tiling Selector Screen Shot 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.
Tiling Selector Prev Button Go to the previous tiling in the library. If you get to the first tiling, you'll wrap around to the last one.
Tiling Selector Open Button 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.
Tiling Selector Next Button 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

Tiling Editor Screen Shot 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.

Tiling Editor Launcher 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!
Tiling Editor Apply Button 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 active figure!
Tiling Editor Proceed Button 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 designs.

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

The Preview Window

Preview Window Screen Shot 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.
Preview Build Button 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 rendering.

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

The Waitbox 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

Render Window Screen Shot 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 controls.

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

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

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.

Sample Workflow

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.

  1. Locate the tiling "4.8^2" in the Selector, and Open it.
  2. Click on the square feature (it won't have any geometry in it).
  3. Press the "Infer" button. An octagon will appear in the large square being edited.
  4. Press the "Apply" button. The octagon will be saved to the square feature button on the left of the editor.
  5. Press the "Proceed" button to open up the preview window.
  6. Navigate around until you find a pleasing view of the design.
  7. Press the "Build" button. The Waitbox will run until the design is ready, at which point the Render window will open.
  8. Select the "Interlace" rendering style, set the width to 0.07 and the gap size to 0.04.
  9. 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 for yourself!

Last modified: