CS791 - Assignment 3 - Interactive Islamic Star Generator
Anton Lopyrev - March 2010
- 1.0 Contents
- 2.0 Itroduction
- 3.0 Tools Used
- 4.0 Implementation Details
--- 4.1 User Interface
--- 4.2 Interlacing (Extension)
- 5.0 Results
--- 5.1 Demo Applet
--- 5.2 Demo Images
- 6.0 Conclusion
This is a write up for the Assignment 3 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
islamic star patterns decribed in
Craig S. Kaplan's paper
"Islamic Star Patterns from Polygons in Contact".
My implementation attempts to apply the algorithm in an interactive way, so that a user of the
application can design a islamic star in realtime. Moreover, I enchance the algorithm by adding interlacing to the edge ribbons of the pattern. This extension makes the final results more visually pleasing.
My implementation of the polygons in contact approach to generate islamic stars 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 various shapes and use arbitrary shapes for clipping the output.
Moreover, by taking advantage of the
DocumentBuilder class
I was able to read in and parse the XML specification of the tilings that are used as a basis for the generation of islamic stars.
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 islamic star on the screen and into a vector image file uses the same code. This is a big time saver.
The screenshot of the program's user interface is shown below.
As I mentioned, I attempt to provide the user of the application with an interactive way to design a star pattern. I believe this significantly improves the user experience. Often, certain values of the contact angle produce more attractive designs, since some pieces of ribbons align in interesting ways. However, it usually takes some fiddling to find these "special" values. That's when an interactive user interface becomes especially useful as it speeds up the process of finding the "special" values.
The input to my program is an Archimedean or a Hanbury tiling that can be selected from one of the tiling libraries on the left. These libraries are read and parsed from XML files archimedeans.tl, hanbury.tl. You can also load your own tiling library specified in XML by selecting File -> Open.
Once a base tiling has been selected, the resultant islamic star is shown in the panel in the middle.
The star can then be modified by using the Options panel on the right.
The user can interactively change the following:
Scale - this affects the size of the pattern.
Contact Angle - this is the angle that affects the shape of the pattern based on the polygons in contact approach.
Tiling Opacing - this is the opacity of the base tiling. It is sometimes helpful to see the original tiling for debugging.
Interlaced Design - this toggles the interlaced rendering mode for the star ribbons. More about this in next section.
Ribbon Stroke - the width of the star's ribbons.
Ribbon Border - the width of the ribbons' borders.
Background Color
Star Color
Ribbon Color
You can actually try out the program yourself by using the demo applet in
section 5.1.
To make the output results of my application more visually appealing, I added a additional rendering mode, which interlaced the ribbons of the star pattern. The main reason I decided to implement this extension is because I felt like it was naturally inspired by my previous celtic knots assignment. I think it's very interesting how plait-work and interlacing are so widespead among different cultures, whether it's acient celts or acients middle-eastern artists. It makes you wonder who adopted this style first, or whether they evolved separately in both cultures.
Just like in celtic knots, the decisions about interlacing can be made locally. The interlace pattern within each of the tiles in the base tiling can be developed separately. For instance, consider a square tile, which contrain a star drawn using the polygons in contact approach. The image below shows how the interlace pattern for this star is drawn by successively adding ribbons for the star edges.
We start with one edge, which goes inward to the right from the edge of the tile. Next we draw on top the corresponding left edge and the next right edge in the sequence. By continuing this algorithm the pattern is constucted. To complete the pattern we draw only the missing left edge at the very end. Note that clipping to arbitrary shapes, which is supported by Java, is useful to perform these operations.
Let's also note here that by following this algorithm the two ribbons drawn inwards from every edge of each tile always appear in the way that the left ribbon is on top of the right one. This guarantees that the interlacing will be maintained through out the entire tiling. If two tiles are adjacent via an edge, there will always be a 180-degrees rotational symmetry between the ribbons (for that edge) of the two tiles. Hence, the interlacing will always work out.
Click here for a standalone demo page
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 tiling libraries. 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 achieve (anton at lopyrev dot com) and I will put them up below.
In this section, I will demostrate some of the images that I was able to create using my program.
I find islamic stars a very interesting mathematical phenomena. It's very exciting how certain mathematical (or geometrical) concepts can be used in a very artistic way. I wonder if the artists who first developed the ornament knew the geometrical theory behind it.
During the implementation of this assignment I also realized that the interactive UI gives some interesting ideas for even further extensions of the algorithm. For instance, the animations of the stars produced by a continuous variations of the contact angle are quite interesting. A cool project would be to play around with these animations and potentially start morphing one star to another over the course of an animation. This could make for a very beautiful screensaver.
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.
Thank you for reading!
