Ornamental Design, Geometry & Computer Graphics - Sample Assignments

Samples of assignments 1 to 3 done in CS798 in Winter 2006. These include celtic knots, regular tilings and islamic star patterns. Read more...

Check out the descriptions on:

• Celtic Knots
• Regular Tilings
• Islamic Star Patterns

Assignment 1 - Celtic Knots

This assignment dealt with symmetry groups. The programming component dealt with celtic knotwork. Given a file containing grid size, and location of break markers, we were required to process the file and output a postscript file of the knotwork associated with such a grid and it's break markers. I quickly realized, while handling the sample input files, that I wanted to create a GUI to make working with the knotwork easier.

I utterly and entirely confess to the application being based off of the CS488 Assignment 1, which I'd completed some few days earlier. The UI uses gtkmm, with OpenGL and C++. There is a command line interface which works, but it's so much nicer to be able to see what's going on. In anycase, I started out with making a basic grid to play on. We were told in class that it really comes down to 5 different types of squares, with rotations. Well, I found 4 squares, and a blank, which I suppose is a type of square, it just seems like a cop-out. I made some basic polygons (as my initial attempt at meshes/nurbs was bust), and created an array to store all the information pertaining to a particular cube. By the time I remembered I like taking pictures/screenshots, I'd already implemented file loading, the grid, and the splines.

The UI comes in 3 different display modes: Grid, which shows the basic grid layout, and the positioning of the break markers; Splines, which can be slightly hard to look at - it has a basic outline of the knot, with the grid in the background; and lastly Knots, which is the final render product. I eventually looked at my graphics text to discover some convienient ways (glMesh1d or thereabouts) to make a nice looking spline. When I discovered that this transfers nicely over to 2d, I was elated.

I must admit, I had a hard time figuring out how to get the over lap to work. Originally I begin just drawing with an overlap being physically brought out (via a z translation). However, playing around had me realize only 2 shapes under go overlap, and even then, only in particular squares, and under particular rotations. Once I got that all smoothly sorted out (*heh* a graphics pun), I was set to go for getting it all interactive.

I lie. Actually I tried to get selection to work. When I first was thinking about being able to select break markers to be on/off, I thought it'll be a mathematically 'fun' reverse rendering, and there'll be matrices and horribleness. So when I finally got around to it, somehow (I can't remember how) I came across the fact that OpenGL has a mechanism for picking objects within a scene. The first 20 times I tried it, nothing was getting picked. The next 20 times I tried it, the wrong things were getting picked. So I distracted myself, and got exports to scaled vector graphics (ie. postscript) to work.

By the time the export was all happily done, I was ready to tackle picking again (more ever re-inforced by discovering text describing picking in my course notes, and recognizing I'll be needing to know it for CS488 A3). Through 4 different webpages, course notes, and a text book, I was finally able to sort out exactly how picking is supposed to work. Dear goodness. No fancy tricks, not hiddens whatevers. Just straight out reproduction of the scene (approximately). Blah. So once I had that done, and some bugs on break marker selection fixed, I was recognizing I wouldn't be getting much fanciness done (outside of the UI). I'd been hoping for importing a 3d object, and coating it in celtic knots - hence keeping the rotation ability from CS488 A1. I also really wanted to animate the knot work to make it look like snakes inter-twining.

The UI allows for loading files (specially encoded to store grid size, break marker position, and my own modification - colour values), saving files, and exporting files to postscript. As well, one can start from scratch by specifying a grid size.

By default, mouse click/drag rotates the grid space (or knot - whatever's currently being displayed). Holding down "shift" allows for translations (x, y, z). These can be returned to a default position through a reset function. There exists a break marker mode which allows for the user to interactively select which break markers should be on and off for the knot selection.

Finally, there are settings for what the curve fill colour should be, what the border colour should be, and what over/under pattern should be displayed (ie. it's a standard symmetry to swap all over knots with under knots, and vice versa). If I were really on the ball, I'd have allowed for border width, and knot width to be modifable. It's not though.

Some Sample Knotwork As a part of the assignment, we were to export our images to SVG output. Unfortunately, I didn't add wide enough borders, so the overlapping component is hard to identify. I've uploaded 5 examples here, as well as the title page image.

Tiling P2-11:	Tiling P111:	Tiling P112:	Tiling P121:	Tiling P222:	Title Page Graphic:

Assignment 2 - Regular Tilings

This assignment - which turned out to be much more time intensive than the instructor expected - was the generation of the 4⁴ isohedral tilings. An interactive user interface was required such that it could modify the constrained edges to produce all possible tilings. My extension to this assignment wasn't so much a single extension, as a variety of smaller extensions: the ability to select what colours on the two-coloured tiling, the ability to interactive choose which tiling to work on, the ability to directly modify edges without requiring a separate interactive viewer.

The UI for this assignment was based off of the one from Assignment one. The number of tiles generated was based off how many would be visible within the viewport. There were slight issues with translations, however in general what was seen was rendered with few rendered off screen. This could have been optimized so that none would've been rendered off screen, and such that edges and polygons were pre-clipped. In anycase, I was able to get the isohedral tiling IH72 up and running quite quickly - a collection of 4-sided polygons.

In the extension, one was given the option to create non 4 square tilings, however I chose not to perform this. As a result, I was able to use one tiling object, which represented each tile, and merely alternated the colours during tiling compilation.

One could choose to be in either tiling mode, or adjustment mode. When in tiling mode, one could easily rotate, scale and transform the general tiling (to better see things with). When in adjustment mode, one could tweak the tiles to the desired shape. With some adjustments of A1's picking scheme, I was able to allow dynamically creating or selecting an existing point on a tile boundary, and either moving or deleting it. The polygon drawing a single tile responds to this accordingly. Red points indicated fixed vertices, while yellow indicated movable ones. By default, two movable vertices were created for each edge to help get the user started. </p>

Unfortunately, I didn't not have the time to figure out how tessellation works, and as a result, invalid polygons produced wrong looking tilings. I had started looking into possible implementations, but time ran out. The border outlines gave the accurate result, while the polygons themselves appeared incorrect.

With the basic shape completed, all that was left to do was differentiate between different tiling types. There are definitely better ways of doing this, however I created a class for each of the 30 tiling types. IH45 was the same as IH52 for no parameters, so 29 tiling types. A tile had four edges, and each of the edges was - according to the tiling definition supplied by the assignment - either an I, J, S or U. The base tiling class to care of most of the colour setting, drawing, and picking of the tilings. The sub classes took care of handling the specific edge types for drawing and picking. I defined the fours sides as being either alpha, beta, gamma or omega, and established transforms (rotations) accordingly. These were assigned an edge type. Sometimes the edge orientations were identical. For example with IH41, the top and bottom edges are the same, as are the left and right edges. Further, each tiles orientation was the same. Whereas with IH44, orientation was like a checkerboard's colouring scheme (alternating based on row and column).

A simple extension was created with regards to rendering only the tiles visible to the viewport. It approximately works, though there are issues when translating. Further, the tiling editor - which could have been done in a separate screen, was integrated into the tile viewer. As well, tile and border colours, as well as border width, are modifiable. I was not able to get the export to SVG working in time. Oh! and I discovered that engineering has colour printers hiding in one of their labs, so I took advantage of this when having to hand in a hard copy of the assignment. :)

Some Sample Tilings

As a part of the assignment, we were to present the tilings possible, along with some attractive samples. As they were all implemented, all 4⁴ isohedral tilings are presented below, along with 2 samples and the bordering used for the title page of the assignment.

IH41	IH42	IH43	IH44	IH45
IH46	IH47	IH49	IH50	IH51
IH52	IH53	IH54	IH55	IH56
IH57	IH58	IH59	IH61	IH62
IH64	IH66	IH67	IH69	IH71
IH72	IH73	IH74	IH76

Non-photorealistic Fish Scales:	Darwin's Favourite*:	Title Page Graphic:

*In the copy handed in, one of the white moths was pencil shaded grey

Assignment 3 - Islamic Star Patterns

This assignment has to do with Islamic Star Patterns - namely, the point-in-contact method of generating Islamic Star Patterns. Given a file containing the initial tiling types, translation matrices, and vertices of the various polygons, generate the star patterns, such that the incidence angle may be varied. The extension I generated for this was the translation from a 2D plane, onto star patterns on 3D polyhedra.

(I haven't had time to post this up yet, mainly as I haven't started yet. Once project mayhem is over, I hope to have some time and will post the details.)

In the meanwhile, here's a collection of disorganized images:

Development Screenshots:

Step-Through Screenshots:

Planar Star Patterns:

Polyhedral Star Patterns:

Title Page Images: